ポートフォリオを 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 に準拠していました。
個人的にはこれで完璧だと思っていたのですが、自分自身の価値観の変化に対応できておらず下記のような課題を感じるようになってきました。
- 多くの方が数秒で離脱するなか、ごちゃごちゃしているだけで何も伝えられていない
- 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 版になることを待ち望んでいます。