現在のポートフォリオサイト

技術スタック

JAM Stack構成を採用しました。

• Next.js
• tailwind.css
• contentful

制作の経緯

2代目のポートフォリオサイトについて3つ問題点を感じたため、 その解決を図るため制作を開始しました。

情報の可読性

2代目のポートフォリオはデザイン性を重視したあまり、過度な装飾が含まれ 可読性が低下していました。 また、モバイルデバイスの画面画面で情報の一覧性が低い問題がありました。

情報量の不足

自分の成果物に対して簡易的な説明と1つの関連リンクしか載せることが出来ず、 より詳しい説明が掲載できませんでした。

コンテンツの更新コスト

ポートフォリオの内容は、同じレポジトリ内にあるjsonファイルによって管理されています。 よってコンテンツの追加/更新にはエディタを立ち上げてjsonを編集する必要がありました。 またjsonで複雑なデータ構造を表現するには手間がかかり、人の手で編集するのは現実的ではありませんでした。よって情報量を増やすのに限界がありました。

こだわりポイント

上記の問題を解消しつつこだわったポイント

デザインと導線

2代目ポートフォリオサイトはデザイン性に重きをおいていました。 しかしエンジニアのポートフォリオサイトの役割を考えたときに、 可読性を始め閲覧者が欲しい情報にたどり着ける導線の確保に重きを置くべきだと判断しました。 そこで、デザインは装飾は最小限に余白を意識したシンプルなデザインを心がけました。

またサイトマップの役割を果たすメニューは廃止し、トップページを上から見ていくと必要な情報にアクセスできるように導線を確保しました。 これにより、メニューを探す→欲しい情報がどのページにあるかを推測するというステップが不要になりストレス無く情報にたどり着けるようになると判断しました。

情報量の強化

一つの成果物に対して1つの「記事」を割り当てることで、柔軟に情報を伝えることができるようになりました。 また、関連記事と言ったコンテンツ間のリンクを挿入できるようになりました。 これにより閲覧者が興味のあるコンテンツにアクセスしやすくなったと考えます。

コンテンツ更新のコスト削減

ポートフォリオの情報はすべてheadless CMSであるcontentfulで管理できるようにしました。 これによりエディタを開かずともweb上で簡単に情報の追加、修正が可能になりました。 さらに手動管理されたjsonでは管理が難しかったコンテンツ間リンクもUI上でシンプルに作成可能になり、実装することができました。