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