Next.jsでポートフォリオサイトを再構築した制作ログ
福岡から東京へ移り、webデザイナーとして数年働くなかで、自分の実績や日々の制作メモを整理したい気持ちが強くなっていました。以前はWordPressでポートフォリオを運用していましたが、コードで管理したいという欲求が年々高まり、Next.jsでのフルリニューアルに踏み切りました。福岡から東京へ移った経緯は、以前まとめた記事にまとめています。 Fu Gangkara Dong Jinghe Webdezainano.
従来のサイトは表示速度の遅さと、スマホ表示時のレイアウト崩れが大きな悩みでした。案件数が増えるにつれてPHPのテンプレートも煩雑になり、過去に継ぎ足したCSSも整理が追いつかない状態でした。今回のリニューアルでは、静的サイトとしてのパフォーマンスと、更新時のコードによる一元管理を両立させることを目指しました。
以前の構成と運営でのつまずき
リニューアル前のポートフォリオはWordPressのオリジナルテーマで運用しており、案件紹介ページと制作ノートをひとつのデータベースで管理していました。管理画面からの更新は手軽だったものの、案件ごとにテンプレートをPHPで増やしていくうちに、構造の見通しが悪くなっていました。
特に悩んでいたのはスマートフォン表示でした。クライアントや採用担当者の多くはスマホからアクセスするケースが多かったのですが、画像の最適化ができていなかったため、ページの表示に時間がかかり、離脱される経験を何度も繰り返しました。共有レンタルサーバーの応答速度にも限界を感じていたのは正直なところです。
Next.jsを選んだ決め手
Next.jsを採用した最大の理由は、静的サイト生成とインクリメンタル静的再生成をひとつのフレームワークで両立できる点です。記事ページのように内容が随時更新される部分はISRで再生成し、案件実績やプロフィールのような静的な部分はビルド時に書き出すというハイブリッド運用が可能でした。
Reactベースのコンポーネント設計も決め手になりました。以前はヘッダーやフッター、案件カードをPHPのテンプレートとしてコピーしていたのですが、Next.jsではコンポーネントとして一元管理できます。Tailwind CSSと組み合わせれば、デザイントークンを変更するだけでサイト全体のトーンも揃えられます。
旧構成と新構成の比較
| 項目 | リニューアル前 | リニューアル後 |
|---|---|---|
| 技術スタック | WordPress + PHP | Next.js + React + TypeScript |
| ホスティング | 共有レンタルサーバー | Vercel |
| コンテンツ管理 | 管理画面UI | Markdown + contentlayer |
| 画像最適化 | 手動リサイズ | next/imageで自動処理 |
| 表示速度 | 平均3秒台 | 1秒台前半 |
| デザインの統一性 | 案件ごとにばらつき | トークンで一元管理 |
実装で直面したポイント
実装段階で最初に壁にぶつかったのは画像処理でした。next/imageを使って最適化したかったのですが、案件のスクリーンショットは縦横比がバラバラで、レイアウトシフトが発生しやすくなりました。最終的に、aspectRatioを明示したラッパーコンポーネントを作成し、ギャラリー全体の見た目を整えました。
もうひとつの課題は、Markdownで書く制作ノートと、ポートフォリオの事例カードを同じデータソースで扱う設計でした。当初は別々のディレクトリで管理していましたが、更新漏れが出始めたため、contentlayerを導入して型安全にコンテンツを扱えるようにしました。CMSを使うほどの大規模ではありませんが、コードで管理したい個人サイトにはちょうど良いバランスだと感じています。
デザイン面での見直し
デザイン面では、デザインシステムの発想を部分的に導入しました。カラー、タイポグラフィ、余白をトークンとして定義し、Tailwind CSSのテーマ設定に反映させることで、案件ページ全体のトーンが揃いやすくなりました。基本的な設計の流れは、デザインシステム構築の第一歩という解説を参考にさせていただきました。
スマートフォンからの閲覧比率が高いことを踏まえ、トップの作品一覧は1カラムから2カラムへと切り替え、タップ領域も十分に確保しました。情報量を抑えつつ、視線誘導を意識したレイアウトに刷新しています。
公開後の反响と次のステップ
公開後、知り合いのwebデザイナーからは「表示が速くなった」「ソースコードが読みやすい」といった声をもらいました。一方で、細かいアニメーションの挙動やアクセシビリティ対応にはまだ改善の余地があります。キーボード操作時のフォーカス移動や、スクリーンリーダー向けのラベル整備は今後の課題です。
長期的には、新しい案件を追加するときのワークフローや、勉強会・ハッカソンのレポートを更新する導線をさらに磨いていく予定です。アニメーションは控えめに、けれど印象に残るような細部のおもてなしを大切にしながら、少しずつ育てていきたいと思います。
ポートフォリオサイトを再構築するときに意識したいこと
- 目的を「誰に見てもらうためか」に絞り込んでから設計を始める
- アクセス解析を確認し、モバイル比率が高い前提でレイアウトを決める
- コンテンツのデータ形式を先に決めると、更新フローが安定する
- 画像やフォントの配信方法を初期段階で固めておく
- 公開後の改善ポイントをメモしておき、初回リリースで全部盛り込もうとしない
- SNSや勉強会でのフィードバックを反映できる導線を残す
このサイトでは、制作の背景や勉強会・ハッカソンの参加記録も順次アップデートしていきます。Next.jsでのサイト構築やデザインシステム運用について気になる点があれば、お気軽にコンタクトフォームやSNSからご連絡ください。一緒に悩みながら、より良い制作環境を作っていけたら嬉しいです。