「美しいリスト」という逆説
ポートフォリオと聞いて多くの人がイメージするのは、写真が大きく並んだカード型のレイアウトでしょう。それはたしかに直感的で視覚に訴える構成です。でも、もし「あえて情報を羅列する」ことで独自の存在感を放てるとしたら？
無料HTMLテンプレート『INDEX（インデックス）』は、そんな逆説的な発想から生まれたテンプレートです。等幅フォント（すべての文字が同じ横幅のフォント）と罫線だけで構成された、極めてストイックなリストデザイン。一見すると素朴にすら映りますが、クリックで展開するアコーディオン動作、冷淡なまでの整列構造、そして計算された情報階層が重なり合うことで、ディレクトリやデータベースを模したクールなUIが出現しています。
デザインの特徴とこだわり
等幅フォントが生む「システム的秩序」
フォントに「Roboto Mono」を全面採用しているのが、『INDEX』の設計思想を最もよく表しています。等幅フォントとは、プログラミングのコードエディタなどで使われることが多い書体で、「情報を正確に整列させる」ために生まれたものです。
このフォントを見出しにも本文にも、さらにはヘッダーのシステム情報（日付、サーバー名）にまで適用することで、サイト全体がひとつの「データベース画面」のような統一感を持ちます。派手さはゼロですが、それがかえって「ここにある情報は、すべて正確で信頼できる」という印象を与えるのが面白いところです。
クリックで開く「アコーディオン」の気持ちよさ
リストの各行をクリックすると、滑らかに展開エリアが開き、プロジェクト画像と説明文が現れます。この開閉の動きには適度な間が設けられており、パタンと一瞬で開くのではなく、じわっと広がる感覚。展開時と収納時でリズムが変えてあるため、操作していて自然な心地よさがあります。
この「開く」という動作自体に小さな快感があり、訪問者は自然と次の行もクリックしたくなります。ポートフォリオサイトにおいて「全部の作品を見てもらう」ことがいかに難しいかを考えると、この仕掛けは実にうまく機能しています。行末の「+」マークが回転して「×」に変わる細かなアニメーションも、開閉の状態を直感的に伝えてくれます。
3行のヘッダーに宿る「世界観」
ヘッダーは極めてシンプルで、左にブランド名と「DIRECTORY_V1.0」の表記、右に日時と「LOC: TOKYO_SERVER」の表記。たったこれだけの情報で、サイト全体に「管理されたアーカイブ」「堅牢なシステム」というイメージを付与しています。
この「ロールプレイ的な世界観構築」が、技術者やクリエイターの心を掴みます。システムログやコマンドラインを模した表現は、言葉で説明するよりもはるかに雄弁に「この人は、テクノロジーに精通している」と伝えてくれます。
“開く快感”が、全作品を見てもらう仕掛けになる
INDEXのリストは、各行をクリックすると、その場でスッと展開して作品画像と説明が現れる「アコーディオン」式です。この開閉には適度な”間”が設けてあり、パタンと一瞬で開くのではなく、じわっと広がります。行末の「＋」マークがくるりと回って「×」に変わる細かな動きも、開いている状態をひと目で伝えてくれます。
この「開く」という動作には、小さな気持ちよさがあります。一つ開くとつい次の行も押したくなる——その連鎖が、「全部の作品を見てもらう」という、ポートフォリオでは意外と難しい目的を自然に達成させます。
INDEXの面白さは、「作品数が多いこと」を弱みではなく強みに変えるところにあります。カード型は数が増えると間延びしますが、リスト型なら数百件並んでも画面が破綻しません。普段はコンパクトに畳んでおき、気になった行だけ開いてもらう。情報量の多さそのものを、見どころに変える設計です。
こんな方・こんな用途におすすめ
デザインエージェンシーの実績アーカイブ
数十件、数百件と増え続ける実績を整然と見せたいデザイン事務所に最適です。リスト表示はカード表示に比べて情報密度が高く、1画面に多くのプロジェクトを表示できます。「番号 → プロジェクト名 → カテゴリ → 年度」という構成は、クライアントが「自分の案件に近い実績」を探す際にも便利です。
写真アーカイブ・ドキュメンタリーの記録
展開エリアに写真が大きく表示される構造は、写真アーカイブとの相性も抜群です。リストの無骨さと、展開後に現れる写真の鮮やかさとのコントラストが、作品の印象をより強くしてくれます。
建築設計事務所のプロジェクト管理的表現
建築事務所は手がけるプロジェクトが多岐にわたるため、すべてを同じサイズのカードで並べると冗長になりがちです。リスト型であれば、数が増えても画面が破綻しません。会社概要セクションも標準搭載されているため、コーポレートサイトとしての基本要件を満たしつつ、独自の世界観を主張できます。
“文字で見せる”テンプレート。写真を主役にしたい人には不向き？
INDEXは、写真を大きく飾るのではなく、情報を整然と並べること自体を美しさに変えたテンプレートです。そのストイックさが持ち味な一方で、開いた瞬間に大きなビジュアルで魅せたいタイプのポートフォリオには向きません。冷淡なまでに整列した佇まいは、温かさや親しみやすさを伝えたいブランドにも、少し硬すぎるかもしれません。”羅列の美学”に共感できるかどうかが、選ぶ基準になります。
ぴったりなのは、実績が数十～数百件と増えていくデザインエージェンシーの実績アーカイブ、写真アーカイブやドキュメンタリーの記録、プロジェクトが多岐にわたる建築設計事務所など、「数の多さ」を強みに変えたい人です。
もし「作品の写真を、一枚ずつ大きく主役にして見せたい」なら、余白で作品を引き立てる LUMINA のほうが向いています。「同じ無骨な雰囲気で、もっとハッカー的に振り切りたい」なら、ターミナル画面そのものの TERMINAL が近い世界観です。自分の作品を”文字で見せたいか、写真で見せたいか”で選んでみてください。
カスタマイズのヒント
配色の反転でダークモード化
設定エリアにある背景色と文字色を入れ替える（たとえば背景を黒、文字を白、線の色を暗いグレーに）だけで、ターミナル風のダークモードに変身します。等幅フォントとの相性は言うまでもなく、ハッカー的な雰囲気が一気に強まります。同じカテゴリの「TERMINAL」テンプレートとは異なるベクトルのダークスタイルを楽しめます。
リスト列の活用
デフォルトでは「番号 / プロジェクト名 / カテゴリ / 年度」の構成ですが、各行の情報は設定エリアから自由に編集できます。カテゴリ名を「クライアント名」に読み替えて使ったり、年度の代わりに「進行状況」を入れたりと、発想次第でさまざまな活用が可能です。
色を”反転”するだけでダークモード。列の意味も自由に変えられる
INDEXは派手な装飾がないぶん、わずかな設定変更で印象が大きく動きます。一番手軽なのが、配色の反転です。背景を黒、文字を白、罫線を暗いグレーに入れ替えるだけで、ターミナル（黒い操作画面）風のダークモードに早変わりします。等幅フォントとの相性は抜群で、ハッカー的でクールな空気が一気に強まります。
もうひとつ自由度が高いのが、リストの列です。デフォルトは「番号／プロジェクト名／カテゴリ／年度」ですが、各列の中身は設定エリアから書き換えられます。「カテゴリ」を「クライアント名」に読み替えたり、「年度」を「進行状況（進行中・納品済）」に変えたりすれば、ポートフォリオだけでなく、案件管理表のような実用的な使い方もできます。
AIに頼むなら「配色を反転してダークモードにして。列を『番号／案件名／クライアント／ステータス』に変えて」と伝えると、見た目と中身を一度に整えられます。
まとめ ― 羅列の美学を、あなたの作品で証明する
『INDEX』は、情報を美しく並べるという行為そのものをデザインに変えたテンプレートです。派手なアニメーションもグラデーションもありません。あるのはフォント、罫線、そして計算された余白だけ。このストイックさに惹かれる人は、きっと自分の作品にも同じ哲学を持っているはずです。
「数が多い」ことを弱みではなく強みに変えたい。そんなクリエイターに、このテンプレートをおすすめします。
