このポートフォリオサイト

概要

いま見ていただいている、このサイトです。 作品を紹介するだけでなく、どう考えてつくったかが伝わる場所にしたいと思ってつくりました。

背景

はじめは、青を基調にした装飾の多いデザインでした。 でも実際に見てみると「AIがつくったような、機械的な印象」になってしまい、 自分の等身大の姿と合っていませんでした。 そこで、装飾を減らして、文章と余白で見せる方向に作り直しました。

設計

• 配色: 温かい紙色をベースに、青はリンクと強調だけに使う
• テーマ: ライト/ダークを切り替え。ちらつかないよう、描画前にテーマを適用する
• 画像を使わない: スクリーンショットの代わりに、文章と箇条書きで伝える
• 更新しやすさ: 作品はMarkdownを1つ置くだけ。近況はデータファイルを編集するだけ

実装のポイント

• 見出しフォント（Space Grotesk）とアイコンだけをセルフホストし、外部リクエストを無くす
• スクロール表示は IntersectionObserver。JSが動くまでは要素を隠さない安全設計
• GitHub Actions でビルドして GitHub Pages へ自動デプロイ
• 構造化データ（Person / WebSite / SoftwareSourceCode）とOGP画像を用意

つまずきと解決

最初のデザインは、グラデーションと光の装飾を多用していました。 かっこよくは見えるのですが、中身より見た目が先に立ってしまう感覚がありました。 装飾をひとつずつ外していって、最後に残ったのが「余白」と「文字」でした。

学び・次にやること

いちばん良かったのは、他人の目を借りて直したことです。 自分では気づけない印象を指摘してもらい、そこから逆算して設計をやり直しました。 次は、作品が増えるほど読みやすくなる一覧の工夫を考えたいです。