はじめに
UX / UIデザイナーとして活動しているKikoといいます。自分の簡単な自己紹介はこちらです👇
今回、デザイン・実装の両面のスキルを提示することを目的とした自身のポートフォリオサイトを作成しました。
App RouterベースのNext.jsとmicroCMSを組み合わせており、CMSから案件データや自己紹介文を取得し、動的ルーティングによって各詳細ページを構成しています。
背景
前回のポートフォリオはHTML + SCSS + jQueryで静的に構築していたため、案件追加や文言修正のたびにコードを直接編集する必要があり、運用性に大きな負担がありました。
このため、今回は「CMS連携での更新性」と「App Routerによる動的なルーティング」を目的に再設計しました。
技術スタック
| 分類 | 技術 |
|---|---|
| フレームワーク | Next.js (App Router) |
| 言語 | TypeScript, React |
| スタイリング | Tailwind CSS |
| 開発環境 | Turbopack |
| テスト | Jest, React Testing Library |
| CMS | microCMS |
| デプロイ | Vercel |
実装のポイント
App Router による動的ルーティング
案件一覧や詳細ページは microCMS に格納したデータから slug を取得し、App Router の generateStaticParams を使って静的生成しました。
CMSでのコンテンツ管理
自己紹介や案件情報も全て microCMS で管理し、API経由で取得してページに反映させています。
実装で難しかった点
microCMSのリッチエディタの装飾
microCMSのリッチエディタはHTML形式でデータを返すため、dangerouslySetInnerHTML で表示するだけではデザインの一調性や拡張性に誤点がありました。
解決策
html-react-parser を使用し、要素ごとにクラスを付与するカスタムレンダリングを実装しました。これにより見出しやリスト、リンクなども一調したデザインが可能になりました。
UX面での工夫
今回、自分のページに一番多くアクセスするメインターゲットは、就活関連の人々：たとえば人事の人や、今後自分と同じチームになりうるような組織の管理者などに限定されます。
また、人気の企業であればあるほど彼らには時間がありません。そこで私はページ構成をあえて作品と自己紹介のみの2ページに絞り、採用者が少ない滞在時間で応募者である自分のスキルがマッチするかが判断できうるような構成を心がかました。
完成した画面の例
TOP
案件名に自分の役割をラベルしたことで、採用者はジャッジしたいスキルが内容として説明されている案件にすぐにアクセスできます。
案件詳細ページ
案件詳細にも最初に何を作ったのかがぱっと見でわかるような情報を、タグとして数個入れました。
Aboutページ
aboutページでは自分の趣味や嗜好だけでなく、どんなデザイナーなのかがわかりやすいような構成を心がけました。一緒に働くイメージがつきやすいと採用者にとって親切であると思います。
まとめ
静的にコードを書き換えていたポートフォリオを、Next.js App Router と microCMS によって更新性、UXパフォーマンス性の高い構成に制御し直しました。
同構成は個人開発にはもちろんチーム開発にも役立つと思います。