ブログのデザイン刷新 - サイバー感から図書館風の温かみのあるデザインへ

デザイン
UI/UX
パフォーマンス
Next.js
Tailwind CSS
レスポンシブデザイン
フロントエンド

ブログのデザインをサイバー風から図書館風の温かみのあるデザインに刷新。パフォーマンス改善、フッター追加、Home画面の再構成も実施し、現在はデザイナーとの調整中です。

はじめに

ポートフォリオサイトのデザインを大幅に刷新しました。前回のサイバー感のあるデザインから、より個人的な好みに合わせた図書館風の温かみのあるデザインに変更し、同時に刷新前から存在していたパフォーマンス問題の改善や機能の追加も行いました。

デザイン刷新の背景

前のデザインの問題点

前回のデザインは、海外のエンジニアのポートフォリオサイトを参考にしたサイバー感のあるデザインでした。確かに技術的には興味深い要素が多く、視覚的なインパクトもありました。

しかし、個人的には今の部屋の雰囲気と似た、ブラウンを基調とした図書館風のデザインがしたかったので、思い切って作り直してみました！

多分図書館風デザインの方が私のイメージに合っていそうですし、１からやり直すというのはやはり楽しいです。

新しいデザインの方向性

新しいデザインでは以下の要素を重視しました：

  • 温かみのある色調: ベージュ系の背景をベースに、サドルブラウンやバーリーウッドなどの自然な茶色系を使用
  • 図書館風の雰囲気: 落ち着いた色合いと、読みやすさを重視したレイアウト
  • 個人的な好みへの適合: 自分の部屋の雰囲気に近い、リラックスできる空間のようなデザイン

特に、今の部屋の壁紙がベージュ系で、家具も茶色系が多いので、その雰囲気に合わせたデザインにしたいと思いました。

刷新前から存在していたパフォーマンス問題

検証ツールでの問題発見

実は、デザイン刷新前からパフォーマンスの問題は存在していました。検証ツールでパフォーマンスを確認したところ、以下の問題が判明しました：

  • LCP (Largest Contentful Paint): 5.6秒 - 目標の2.5秒を大幅に超過
  • INP (Interaction to Next Paint): 360ms - 目標の200msを超過

心当たりはありました。プロフィール画像や記事のサムネイルに圧縮処理前のjpgやpngを利用しており、1.5~3MBの容量がありました。これにより、ページの読み込み速度が大幅に遅くなっていました。

（面倒で生成してもらった画像をそのまま放り投げていたことが原因）

改善 - 画像最適化の実装

画像の重さ問題は、Squooshというツールを利用して解決しました。WebP形式に変換し、品質を75に設定することで、ファイルサイズを大幅に削減できました。

このツールの良いところは、画像がデバイスから離れることなく、ローカルで処理できることです。プライバシーを保ちながら、高品質な画像最適化が可能になります。

デザイン刷新と同時に、この画像最適化も実施したことで、パフォーマンスの大幅な改善が期待できます。

画像の圧縮処理をしたらパフォーマンスが改善された

画像の圧縮処理を実施した結果、パフォーマンスが大幅に改善されました。

画像の圧縮処理をしたらパフォーマンスが改善された

図1: 画像圧縮処理後のパフォーマンス改善 - ファイルサイズの削減により読み込み速度が向上

刷新前のデザインの問題

パフォーマンスが悪く背景にシャボン玉が浮いている

刷新前のデザインでは、背景にシャボン玉のアニメーションが浮かんでおり、視覚的に煩雑でパフォーマンスも悪い状態でした。

刷新前の画像（パフォーマンスが悪く背景にシャボン玉が浮いている）

図2: 刷新前のデザイン - 背景にシャボン玉が浮いており、パフォーマンスが悪かった

背景のシャボン玉表現の廃止

前回のデザインで使用していた背景のシャボン玉の表現は、以下の理由で不評でした：

  • 視覚的に煩雑で、コンテンツの読み取りを妨げる
  • サイバー感は演出できるが、落ち着いた雰囲気を作れない

私の社内の人にも聞いてみました。リアクションが特になかったので不評とは言い切りづらいですが、褒めないということはそういうことなのでしょう。^_^

刷新後のメインページ

温かみのある図書館風デザイン

デザイン刷新後は、温かみのある図書館風のデザインに変更され、読みやすさと落ち着いた雰囲気を実現しました。

刷新後のメインページの画像

図3: 刷新後のメインページ - 温かみのある図書館風のデザインに変更

Home画面の構成変更

変更前の構成

前回のHome画面は、サイバー感のある要素が多く、以下の構成でした：

  • 派手なアニメーション
  • シャボン玉風の背景
  • 技術的な印象の強いレイアウト

レスポンシブデザイン

モバイルとデスクトップの両方に対応したレスポンシブデザインを実装：

// グリッドレイアウトの例
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 relative z-10">
  {/* Portfolio記事の列 */}
  {/* Life記事の列 */}
</div>

（ここは実装が面倒だったので生成AIにやってもらいました）

最新記事の表示改善

PortfolioとLifeそれぞれごとに表示

最新の記事をPortfolioとLifeそれぞれごとに分けて表示するように改善しました。これにより、ユーザーが興味のある記事カテゴリを選択しやすくなりました。

最新の記事をportfolioとlifeそれぞれごとに表示させた

図4: 最新記事の表示改善 - PortfolioとLifeの記事を分けて表示

フッターの追加

フッター実装の詳細

新しくフッターコンポーネントを追加し、以下の要素を含めました：

export function Footer() {
  return (
    <footer className="bg-[#FFFFFFCC] backdrop-blur-sm border-t border-border mt-20">
      {/* プロフィール写真と自己紹介 */}
      {/* 連絡先情報 */}
      {/* GitHubリンク */}
    </footer>
  );
}

フッターの追加は失念していましたが、一番重要な要素でした。このブログの最終目的は「私という個人を知ってもらう」ことなので、私の情報がいつでも目につきやすい場所にないとブログを作った意味がありません！

フッターの特徴

  • プロフィール情報: 写真、名前、自己紹介を含む
  • 連絡先: メールアドレスとGitHubリンクを配置
  • デザイン: メインサイトと統一感のある温かみのあるデザイン
  • レスポンシブ対応: モバイルとデスクトップの両方に対応

デザイナーへの依頼状況

現在の状況

現在、プロのデザイナーにデザインの調整を依頼中です。水彩画風の私のイラストで依頼しました。

デザイナーとの相談は、実は初めての経験です。今までは自分でデザインを決めていましたが、プロの視点を取り入れることで、より良いデザインになるのではないかと期待しています。

今後の改善計画

短期的な改善

  1. パフォーマンス最適化: LCPとINPの改善
  2. アニメーションの最適化: CSSアニメーションへの移行検討
  3. 画像の最適化: WebP形式の活用と遅延読み込み

長期的な改善

  1. デザイナーとの調整完了: プロの視点を取り入れたデザインの完成
  2. ユーザビリティの向上: ユーザーテストに基づく改善
  3. アクセシビリティの向上: WCAG準拠の確認と改善

まとめ

ポートフォリオサイトのデザイン刷新により、個人的な好みに合った温かみのある図書館風のデザインに変更できました。同時に、刷新前から存在していたパフォーマンス問題の改善、フッターの追加、Home画面の再構成も実施し、サイトの機能性とパフォーマンスの両方が向上しています。

現在はデザイナーとの調整中であり、パフォーマンスの問題も特定できているため、今後の改善により、より良いユーザー体験を提供できるサイトになることが期待されます。

個人的な好みに合わせたデザインに変更することで、サイトへの愛着も増し、継続的な改善へのモチベーションも高まっています。

正直、今回のデザイン刷新は個人的な好みを優先した決断でしたが、結果的にサイトがより使いやすくなったと思います。パフォーマンスの改善も含めて、技術的な課題も見つかったので、今後の改善に向けてのモチベーションも高まっています。

参考資料: