ポートフォリオサイトのデザインを作り直した

作り直した経緯

以前のポートフォリオは黒背景にパーティクルアニメーションが飛ぶ構成でした. 作った当時はそれなりに気に入っていたのですが, しばらく運用しているうちに不満が出てきました.

まず色使いです. 黒背景に青や緑のアクセントという組み合わせは, テンプレートやAI生成のポートフォリオでよく見かける配色で, 自分のサイトもその中に埋もれている感じがしていました. それから, パーティクルが飛んでいるだけでは開いた瞬間のインパクトが弱い. この2つが気になって, 一から作り直すことにしました.

旧デザイン

黒背景にparticles.jsでネットワーク状のアニメーションを表示していました. スキルはカード型のグリッドレイアウトで, アイコンとプログレスバーを並べる構成です. ナビゲーションも9セクションあり, 今見ると詰め込みすぎでした.

新デザイン

背景を暖色系にして, 本文には明朝体を使っています. ヒーローはparticles.jsをやめて3Dタイポグラフィに変えました. スキルは横棒グラフです. ヒーローの3Dテキストは自分でも気に入っていて, ページを開いたときの印象がだいぶ変わりました.

何を変えたか

一番大きいのはトーンです. ダークテーマをやめて, 紙のような暖かみのある配色にしました. 明朝体を基調にして, 英字にはInterを合わせています. テンプレート感を消したかったのが一番の動機です.

ヒーローはparticles.jsを外して, 3Dテキストのビジュアルに変えました. パーティクルは見た目の華やかさはあったものの, 情報としては何も伝えていなかったので, それなら開いた瞬間に印象が残るものを置きたいと考えました.

スキルの見せ方も変えました. カード型のグリッドから横棒グラフへの変更です. 前のデザインではカードが並んでいるだけで習熟度の差が読み取りにくかったのですが, 棒の長さにしたことで比較しやすくなりました.

ナビゲーションは9セクションから7セクションに減らしました. Home, Activities, Projectsを整理してWorksに統合した形です.

振り返り

全面的に作り直したので工数はかなりかかりました. 次にデザインを変えるときは, もう少し段階的に進めたいです.