01課題
ポートフォリオサイトは、作った時点が一番新しく、あとは古くなっていきます。実績が増えても更新が面倒で、そのまま放置される。以前の自分のサイトがまさにそうでした。
そこで今回は、「毎日スマホでSNSを開くのと同じ感覚で、自分のサイトを開いて更新できること」を一番の要件にしました。あわせて、仕事を探すときに URL を1つ渡せば済むこと、月々の費用がかからないことを条件にしています。
02設計
内容はブログ・制作実績・写真・プロフィールの4本柱です。更新頻度の高いブログと写真は、スマホのブラウザから microCMS に投稿し、公開ボタンを押すと Webhook で自動的にビルドが走る構成にしました。数分後には本番に反映されます。
WordPress も候補にしましたが、サーバー代と保守の手間がかかります。公開されるのが静的ファイルだけの構成にすれば、費用は0円で、乗っ取りの心配も更新作業もありません。ホスティングは、無料プランでも商用利用ができる Cloudflare Pages を選んでいます。
写真は RICOH GR IIIx で撮ったものをスマホから上げるだけで、撮影日・絞り・シャッタースピード・ISO を写真の Exif からビルド時に自動で読み取ります。入力の手間を減らすことが、そのまま続けやすさにつながると考えました。
03デザイン
好きな雰囲気の参考サイトを2つ選び、見た目の印象ではなく、フォント・字間・余白・構造をブラウザで実際の数値まで測って分解しました。そのうえで3案を作り、1案に絞っています。
写真を主役にするため、差し色は持たせていません。最初は純粋なグレーで組みましたが、夕暮れのヒーロー写真の隣では色が浮いて見えたため、すべての色に青みを1〜2%だけ含ませました。
作りながら細部を目で調整していくと、値が少しずつずれていきます。途中で全体を数えたところ、文字サイズが20種類、グレーが16段階、字間が10種類まで増えていました。これを文字サイズ13段階・字間5段階・イージング1種類に畳み、ここにない値は使わないルールにしています。
04速さと品質
Lighthouse（モバイル）でトップページを計測。2026年10月時点
画像は microCMS から直接配信せず、ビルド時に取り込んで WebP に変換し、表示サイズに合わせた複数の解像度を用意しています。約10MBあった写真が、表示時は100KB以下になります。microCMS の無料プランにある転送量の上限に触れないための設計でもあります。
05つまずいたところ
一直線には進みませんでした。特に学びが大きかったものを挙げます。
- 日本語フォントを自前で配信したら、スコアが100から55に
- 日本語フォントは1書体で約1MBあり、太さ違いを読み込むと3MB近くになっていました。英字フォントだけを自前で持ち、日本語は外部から非同期で読み込む形にして回復させています。
- iPhone だけ、すりガラスのバーが灰色の板になる
- 最初の仮説は外れました。比較用のページを作って自分の iPhone で見比べ、iOS の Safari が背景のぼかし指定を不透明なグレーで描いていることを突き止めました。ぼかしをやめ、色の重ね方だけで質感を作っています。
- 写真を差し替えたら、表示が重くなっていた
- 見た目は正常なのに、6000pxの元画像（711KB）がそのまま配信されていました。原因は1行の指定漏れです。直して65KBに。見た目が変わらない不具合は、測らないと気づけないことを学びました。
06制作の進め方
設計と実装は、AI（Claude Code）と協働して進めました。方針や仕上がりの判断は自分で行い、AI には調査や実装、検証を任せています。見た目の確認は必ず実機で行い、数値で確かめられるものは測ってから決める、という進め方を通しました。この過程はブログにも書いています。