Skip to main content

Editorial_image

「見せる」だけでは足りない。「読ませたい」人へ

ポートフォリオサイトにはたくさんの種類がありますが、その多くは「画像を大きく見せる」ことに特化しています。写真家やイラストレーターにはそれで十分かもしれません。でも、文章と写真の両方で世界観を伝えたいクリエイターにとっては、テキストが主役になれるレイアウトも必要です。

無料HTMLテンプレート『EDITORIAL(エディトリアル)』は、雑誌のような紙面構成をWeb上で再現したテンプレートです。左に大きな見出しとプロフィール、右に縦長のヒーロー写真が並ぶ2段組のヘッダー。ギャラリーは奇数と偶数をずらしたジグザグ配置。そしてページ中盤に設けられた「フリーテキストエリア」では、まるでエッセイのようにまとまった文章を読ませることができます。

EYANCA(無料テンプレート)の詳細

 

デザインの特徴とこだわり

「PORTFOLIO VOL.01」― 号数感覚のヘッダー

ページ上部のタイトルの上に小さく表示される「PORTFOLIO VOL.01」というラベル。これは雑誌の号数を意識した演出です。更新のたびにVOL.02、VOL.03と変えていけば、自分のポートフォリオに「連載」の感覚が生まれます。訪問者に「次号も見たい」と思わせる、紙媒体由来の巧みなフレーミングです。

タイトル文字にはCinzel(シンゼル)という、ローマン碑文に由来するセリフ体フォントが使われています。活版印刷のような品格があり、「ファッション誌の巻頭」「美術館のカタログ」といった高級な紙面の手触りを画面から感じ取ることができます。

ジグザグ配置のギャラリー ― 視線を「泳がせる」

ギャラリーセクションでは、奇数番目の作品が左側、偶数番目の作品が右側かつ少し下にずれて配置されます。このジグザグレイアウトは、見る人の視線を自然に蛇行させ、「次の作品へ」と誘導する効果を持っています。

整然としたグリッドでは均等に視線が流れますが、ジグザグにすると「次に何が来るだろう」という期待感が生まれます。雑誌のフォトエッセイで写真のサイズや配置を意図的にバラすのと同じ手法です。ホバーすると画像が静かに拡大するアニメーションも、丁寧に作り込まれています。

フリーテキストエリア ― エッセイを書ける場所

『EDITORIAL』の最大の特長は、ギャラリーの上に用意された「フリーテキストエリア」です。タイトルと本文を自由に設定でき、自分の制作哲学や活動への想い、エッセイのような長文を、読みやすい幅と行間で掲載できます。

テキストは両端揃え(ジャスティファイ)で表示されるため、まさに雑誌のコラムを読んでいるような整然とした印象に。作品だけでは伝わらない「作り手の人格」を言葉で補完できるのは、このテンプレートならではの強みです。

ジグザグ配置は、視線を”泳がせる”ための仕掛け

ギャラリーの作品が、左右交互に、しかも片方は少し下にずれて並ぶ——このジグザグ配置は、見た目の面白さだけが目的ではありません。雑誌のフォトエッセイでよく使われる、視線を意図的に蛇行させるための仕掛けです。

作品をきれいな格子状にそろえると、視線はスーッと均等に流れて、かえって印象に残りにくくなります。一方、上下をずらして”段差”を作ると、目線が「次は右下か、その次は左か」と泳ぎ、ページをめくるような能動的なリズムが生まれます。整いすぎないことで、「次に何があるんだろう」という期待感を引き出しています。

ただし、この配置は”余白”とセットで効きます。作品同士の間隔を詰めすぎたり、画像をたくさん並べすぎると、ずらしが「散らかって見える」方向に転びやすいです。点数は少なめに、一枚一枚を大きく見せると、雑誌の見開きのような上質なリズムになります。

 

こんな方・こんな用途におすすめ

フォトグラファー

ライター・編集者のポートフォリオ

文章を生業にする方にとって、テキストが美しく組まれることは自分のスキルの証明でもあります。Cinzelの見出しとセリフ体の本文が、書き手のセンスを無言でアピールしてくれます。

フォトグラファーの「写真+テキスト」型ポートフォリオ

縦長写真が映えるアスペクト比のギャラリーと、撮影エピソードを語れるフリーテキストエリアの組み合わせで、「写真集の奥付にある作家のあとがき」のような構成が実現できます。

建築・インテリアデザイナー

落ち着いたカラーパレットと品のあるタイポグラフィは、建築やインテリアのポートフォリオと非常に相性がよいです。設計コンセプトを長文で語りたい場合にも、フリーテキストエリアが活躍します。

 

カスタマイズのヒント

カラーパレットの調整

デフォルトのアクセントカラーは控えめなモカベージュ。これをテラコッタに変えると「秋の文芸誌」、ダークネイビーに変えると「ビジネス系雑誌」のようなトーンにシフトします。

VOL表記でストーリー性を演出

ヘッダーの「PORTFOLIO VOL.01」の文字は自由に変更可能です。年度別にVOL.を切り替えたり、「SPRING ISSUE」のように季節のラベルを入れれば、ポートフォリオが一つの「刊行物」になります。

「VOL.01」という号数で、ポートフォリオを”刊行物”にする

ヘッダーの上に小さく置かれた「PORTFOLIO VOL.01」という一文。これは単なる飾りではなく、ポートフォリオを”一冊の雑誌”に見立てるための仕掛けです。号数がついているだけで、訪問者は無意識に「VOL.02もあるのかな」「次号も見てみたい」と感じます。雑誌が長年使ってきた、続きを期待させるフレーミングです。

ここはぜひ活用してほしい部分で、更新のたびにVOL.02、VOL.03と数字を進めたり、「SPRING ISSUE」「2026 SUMMER」のように季節や年度のラベルに変えてみてください。それだけで、あなたのポートフォリオが「ときどき更新されるサイト」から「定期的に発行される刊行物」へと印象が変わり、リピーターを生む入口になります。

色のほうは、控えめなモカベージュのアクセントを、テラコッタにすれば秋の文芸誌、ダークネイビーにすればビジネス誌のようなトーンに寄せられます。AIに頼むなら「アクセントをダークネイビーに変えて。VOL表記はそのまま残して」と伝えると、雑誌らしさを保ったまま雰囲気を変えられます。

 

まとめ ― 画像だけでは語りきれないものを、ここに

『EDITORIAL』は、写真と文章の両方を大切にするクリエイターのために設計されたテンプレートです。雑誌を開く数秒間のような、知的な高揚と静かな没入の時間を、あなたのポートフォリオにも。

→ デモサイトのプレビューはこちら

 

【AI×HTMLでWeb制作を効率化】無料Webテンプレート「EYANCA」は、商用・個人を問わず自由にご利用いただけます。デザインのベース構築や、AIを用いたコーディング学習の素材として、ぜひお役立てください。また、本記事の内容に共感いただけましたら、SNS等でのシェアやWebサイトでのご紹介も大歓迎です。

EYANCA(無料テンプレート)の詳細


トミナガハルキ

グラフィックデザイナー/AMIX 代表。独学でデザインを学び、パッケージメーカー→美容系ベンチャー→家庭用品メーカーでのデザイン・広報運営を経て独立。現在は小さな事務所を拠点にASOBOAD等のサービスを運営し、ロゴ・パッケージ・広告物を中心に制作しています。著書『#ズボラPhotoshop 知識いらずの絶品3分デザイン』は各カテゴリでベストセラーを獲得。2020年Adobe Creative Residency選出。ブログでは、10年以上の実務から学んだことや働き方のヒントを等身大の視点で発信しています。