ポートフォリオを Bento.me 風に刷新しました

はじめに

弊ポートフォリオのトップページをアウトプットを中心としたBento.me風に刷新し、さらにMaterial Design 3風のカラートーンを導入しました。
おおいし (@bicstone)
https://bicstone.me
ポートフォリオトップページのスクリーンショット

背景

弊ポートフォリオサイトは、Gatsby.jsを活用したJamStackサイトとして作られています。2020年にReact.js, GraphQLやMUI Material (旧Material-UI) の実験場として作成したものを、そのままポートフォリオとして公開しています。
当時はOSS以外のアウトプットはほぼなく、ブログもWordPressで別運用していた経緯から、職務経歴書としての側面が強いコンテンツになっていました。また、デザインシステムはMaterial Design 2に準拠していました。
以前のポートフォリオトップページのスクリーンショット。職務経歴書のようなデザイン 以前のポートフォリオアウトプットページのスクリーンショット。ZennやSpeakerDeckなど外部プラットフォームのコンテンツはタイトルで区別していた
個人的にはこれで完璧だと思っていたのですが、自分自身の価値観の変化に対応できておらず下記のような課題を感じるようになってきました。
  • 多くの方が数秒で離脱するなか、ごちゃごちゃしているだけで何も伝えられていない
  • GoogleでもMaterial Design 3への置き換えが進んでおり古さを感じるようになってきた
  • 個人ブログだけでなく、ZennやSpeakerDeckなど様々なプラットフォームへのアウトプットがまとめられていない
  • アウトプットの記事数が大きく増え、パフォーマンスが悪くなってきた
そのため刷新することにしました。

トップページの刷新

トップページはbento.meというサイトをリスペクトして作りました。自己紹介、アイコンやSNSリンク先などをカードにしてグリッドで並べています。
Bento - A Link in Bio, but Rich and Beautiful.
https://bento.me/en/home
個人的には余白も増えて今風のデザインになったと感じています。SNSへのリンクを大きくすることで離脱は増える懸念がありますが、元々直帰が多かったため、せっかくであれば自分のSNSへ離脱されると嬉しいなという思いがあります。
計測を進めており、ある程度トラッキング結果が貯まったらまた改善を進めていきたいと考えています。

仮想スクロールの追加

トップページをそのままスクロールすると、アウトプットをタイムライン形式で見られるようになっています。このタイムラインのUIはCatnoseさんのポートフォリオとMaterial Design 3公式ガイドを参考にしています。
Timeline | catnose
https://catnose.me/timeline
ポートフォリオトップページのスクリーンショット。スクロールするタイムラインが表示される
トップページの下に配置した経緯として、クリック操作が必要であればそれだけで離脱されてしまうことがわかったので、スクロールするだけでアウトプットを見られるようにしました。 (例えばアウトプット一覧へのリンクやドロワーメニューを設置したとしてもスルーされてしまう)
一方、アウトプットの件数は100件を超えているため、トップページへ乗せるにはパフォーマンスへの影響があります。そこでreact-virtuosoという仮想スクロールライブラリを採用しました。
petyosi/react-virtuoso: The most powerful virtual list component for React
https://github.com/petyosi/react-virtuoso
この手法の欠点として、ページ遷移後に戻るボタンで戻ってきてもスクロール位置が仮想スクロール位置に保持されない問題があります。リンク遷移してアウトプットを見たあと戻ってきた時に最上部へ戻ったらイライラしますよね。私はWeb版のYoutubeで毎度経験しています。
そのため、スクロール維持を保持するように実装を工夫しています。この工夫については別の記事にて紹介します。

Material Design 3 風のデザイン反映

以前はMaterial Design 2を採用していましたが、その後Material Design 3が発表されました。使いやすさ、見えやすさはそのままに以前よりも色の表現が豊富になり、よりモダンなデザインになっています。
Material Design
https://m3.material.io/
現在採用しているコンポーネント集であるMUI MaterialではMaterial Design 3に対応していません。将来的に対応するようですが、数年先になるのではないかと考えています。
Adopt Material Design 3 / Material You · Issue #29345 · mui/material-ui
https://github.com/mui/material-ui/issues/29345
一方、公式でMaterial Design 3のWeb Components集ライブラリも公開されています。ただ、今のところAlpha版となっていたため今回の採用は見送りました。
material-components/material-web: Material Design Web Components
https://github.com/material-components/material-web
そのため、MUI Materialに個人の方が提供してくださっているMaterial Design 3風テーマを採用して無理やり上書きすることでデザインのトーンをMaterial Design 3風にしました。
ZakAlbert/react-material-you-theme: Aplicacion React y MUI aplicando el esquema de colores de Android Material You
https://github.com/ZakAlbert/react-material-you-theme
カラートーンはMaterial Theme Builderで生成したものを使用しています。個人的には以前のケバケバしさが緩和されよかったです。Material Design 2のガイドライン通りApp Barにプライマリーカラー使っているサイト皆無でしたもんね。 (Googleですらペーパーカラーを使っていました)
Material Theme Builder
https://m3.material.io/theme-builder#/custom

もう大型刷新はしません

こうして無事に大型刷新を終えることができましたが、実は現在のソースコードはかなり酷く、特にスタイルは色が何回も上書きされている惨状となっています。また、OGPイメージやブログコンテンツなど一部リニューアルしていない箇所もあります。
なぜなら、このポートフォリオを近いうちに壊して0から作り直そうと考えているからです。
その最も大きな理由として、このプロダクトがGatsby.jsとMUI Materialに依存していることが挙げられます。
Gatsby.js自体は、生成物のパフォーマンスが高く好みなのですが、プラグインを大量に導入してることからビルド速度が低下し開発効率は悪くなってきています。さらにはコミュニティプラグインで維持されていないものが増えてきており、メンテナンス性も低下しています。
他方でMUIはemotionというランタイムCSS-in-JSに依存しており、今後のアーキテクチャ設計や技術選定におけるボトルネックになります。
React.js, GraphQL, MUIの実験場としての役割はすでに果たしており、Gatsby.jsとMUI Materialに依存する必要はなくなってきました。

でも今はまだ作り直せない

しかし、今新たに作り直すのにはタイミングが悪いと考えています。
React Server Componentsがスタンダードになるかもしれませんし、 Web Componentsが流行ってReact自体が使われなくなっていくかもしれません。
Astroを採用してzero-JSのMPAへ回帰するという手もありそうですね。インタラクティブな要素がほとんどないのはそのような可能性も考えているからです。
近い将来に、さらなるゲームチェンジャーが登場し今後の技術選定において影響があるのではないかと予想しています。ある程度自信を持って技術選定ができるようになったら、それらを採用して0から作り直します。
短期的には、特定のライブラリに依存しないWeb Componentsを活用したく、 Material Design 3用のWeb Components集がStable版になることを待ち望んでいます。

ホームプロフィール外部リンクのため、別ウインドウで開きますプライバシーポリシー

時間のないサイト運営者リング外部リンクのため、別ウインドウで開きます

© 2024 Oishi Takanori / Made with Gatsby.js