開発者には、鋭い刃一本で事足りる場面でも、十徳ナイフを作り上げてしまうという悪い癖があります。HTMLの最初の1行を書く前に、重厚なフロントエンドフレームワークに手を出しがちです。アニメーションライブラリ、状態管理ツール、そして小規模な企業を運営できるほど強力なビルドパイプラインを継ぎ足していきます。そして、なぜポートフォリオサイトの描画に3秒もかかるのか、なぜモバイルでナビゲーションが壊れるのか、なぜ採用担当者が、数ヶ月かけて作り上げたプロジェクトを見る前にサイトを離脱してしまうのかと不思議に思うのです。
私は最新のポートフォリオでは、異なる道を選びました。終わりのない依存関係のエコシステムから離れ、セマンティックHTMLとクリーンなCSSだけでサイト全体を構築しました。JavaScriptフレームワークは使いません。ビルド工程もありません。サードパーティのアニメーションエンジンも使いません。プラットフォームそのものだけを使い、レイアウトはCSS GridとFlexboxで制御し、スピードと明快さを「後付けの要素」ではなく「機能」として扱うデザイン哲学を採用しました。
その結果、軽量で高速、かつプロフェッショナルな仕上がりになりました。私がどのようにアプローチしたのか、その詳細を説明します。
基盤から始める
過剰なエンジニアリング（オーバーエンジニアリング）の多くは、基盤の部分から始まります。ポートフォリオはシングルページアプリケーション（SPA）である必要はありません。必要なのは、作品を表示し、連絡方法を伝え、そして（邪魔にならずに）役割を果たすことです。私はセマンティックHTMLを使用しました。なぜなら、ブラウザはすでに nav、article、footer をどのようにレンダリングすべきかを知っているからです。適切なジョブに対して適切な要素を使用すれば、アクセシビリティ、検索エンジンへの視認性、レスポンシブな挙動が実質的に「無料」で手に入ります。また、書くコード量も減ります。5つのARIA属性を付与した div は、単に冗長な button の模倣に過ぎません。私はそのようなことは一切避けました。
レイアウトには、CSS GridとFlexboxがあれば十分すぎるほどです。Gridはマクロな構造（ページ全体のセクション、プロジェクトギャラリー、主要なブロックの配置）を担当します。Flexboxはミクロなインタラクション（カプセル内のナビゲーションリンク、カード内でのテキストの中央揃え、ビューポートの下端へのフッターの押し出し）を管理します。これらを組み合わせることで、2018年に12カラムのグリッドフレームワークをインポートしたくなるような理由はすべて解消されます。コードは読みやすく保たれ、CSSファイルも軽量なままです。
色、タイポグラフィ、そして抑制
ポートフォリオが読み込まれた瞬間に、落ち着いた印象を与えたいと考えました。背景には、控えめなラジアルグラデーションを用いた明るいベースカラーを使用しています。攻撃的なものは何もありません。グラデーションは低不透明度で配置されており、注意を引こうと主張することなく、ページが平坦に見えないような柔らかな奥行きを生み出しています。純粋なCSSであるため、瞬時に読み込まれます。圧縮すべきヒーロー画像も、管理すべきWebPのフォールバックも、設定が必要なJavaScriptの遅延読み込みライブラリもありません。
タイポグラフィが個性を運びます。私は Outfit と Ovo を組み合わせました。幾何学的なサンセリフ体である Outfit は、ナビゲーションラベル、ボタンのテキスト、本文、メタ詳細など、すべてのUIテキストを担当します。画面上で鮮明に表示され、小さなサイズでも読みやすさを維持します。中程度のコントラストを持つセリフ体である Ovo は、ヘッダーや主要な見出しに使用します。この組み合わせにより、ページに静かなエディトリアルな雰囲気を与えます。「テーマを適用した」のではなく「デザインされた」ように見えるのです。最も重要なのは、どちらのフォントもフォントサービスへの単一のコール、またはセルフホストされたファイルから読み込まれることです。レイアウトシフトも、スタイルが適用されていないテキストの一瞬の表示（FOUT）も、初期レンダリング後にスクリプトがウェイトを入れ替えることもありません。
フローティング・カプセルメニュー
ナビゲーションは、ポートフォリオが自重で崩壊しやすい部分です。フルスクリーンのオーバーレイメニュー、段階的なアニメーションスクリプト、そしてクラスを切り替えるために40行ものJavaScriptを必要とするハンバーガーアイコン。私はそれらを一切排除したかったのです。
私は、グラスモーフィズムを採用したフローティング・カプセルメニューを作成しました。これは、端が丸められた単一の水平コンテナで、ビューポートの上部付近に fixed で配置されています。グラスモーフィズムは、半透明の背景色と backdrop-filter: blur() プロパティによって実現されています。コンテンツを遮ることなくその上に浮遊し、すべてのセクションへ即座にアクセスできるとともに、デザインを全面的に作り直すことなく、小さなビューポートでも優雅に折りたたまれます。キャンバスライブラリではなくブラウザがコンポジット（合成）を処理するため、その効果はモダンに見えます。