個人開発ポートフォリオを自作した — 静的に見えて“素の Go テンプレート”な作り方と工夫

稼働中のプロダクトを並べるポートフォリオページを自作しました。凝ったフレームワークは使わず、既存の Go/Echo サーバから html/template で1枚のページを配信するだけの素朴な構成です。見た目は静的サイトそのものですが、「地味だけど効く工夫」をいくつも入れているので、そこを中心に残します。

方針: ミニマル・ニュートラル

装飾で盛るのではなく、余白・境界線・タイポグラフィで整える方向にしました。影や派手な色で差をつけず、細い境界線でセクションを区切る、ホバーは境界色の変化だけ、といった具合です。プロダクトの中身で語らせたかったので、ガワは静かにしています。

入れてよかった工夫

ライト/ダーク両対応

prefers-color-scheme でOSのテーマに追従し、theme-color メタもライト/ダークで出し分け。CSS 変数（--bg / --text / --muted / --border …）に集約しているので、ダーク側は変数の値を差し替えるだけで済みます。

文字色は WCAG AA を満たす

補助テキストの色（muted）を、背景に対してコントラスト比 4.5:1 以上を満たす値に調整しました。薄いグレーは上品ですが、薄すぎると読めません。「おしゃれ」と「読める」の両立ラインを、明色面・暗色面それぞれで確認しています。

prefers-reduced-motion を尊重

スクロール連動の演出は、@media (prefers-reduced-motion: reduce) で無効化。動きが苦手な人・酔いやすい人に配慮します。

JavaScript 無効でも中身が出る（noscript）

演出を JS で付けている都合上、JS 無効だと要素が隠れたままにならないよう、noscript でフォールバックを用意。クローラや JS を切っている環境でもコンテンツが読めます。

画像の CLS 対策

各画像に width / height を明示し、loading="lazy" を付与。サイズを先に確保することで、読み込み中のレイアウトのガタつき（CLS）を防ぎます。

OGP / Twitter Card

SNS 共有時にタイトル・説明・画像が正しく出るよう、Open Graph と Twitter Card のメタを整備。

カード全体をタップできる（stretched link）

プロダクトカードは、::after を絶対配置でカード全面に重ねる stretched link パターンで「どこを押してもカードのリンクに飛ぶ」ようにしました。一方でストアバッジは z-index を一段上げ、バッジを押したときはストアURLが優先されます。HTML5 で禁じられている <a> のネストを避けつつ、カード全域をタップ可能にできます。

狭い画面での崩れ対策

プロダクト一覧のグリッドは repeat(auto-fill, minmax(min(100%, 320px), 1fr))。min(100%, 320px) にすることで、iPhone SE のような狭い画面ではトラックがコンテナ幅まで縮み、320px 固定によるはみ出しを防ぎます。

タップ領域は 44px 以上

ナビのダウンロードボタンなど、指で押す要素は最小 44px を確保。小さすぎるタップ領域を避けます。

まとめ

ポートフォリオは「静的な1枚ページ」でも、アクセシビリティ（配色・reduced-motion・noscript）とパフォーマンス（CLS対策）、SEO（OGP） を丁寧に入れると質がぐっと上がります。派手さより、こうした基礎の積み上げが効くと感じました。