個人ポートフォリオサイトデザイン：ブログコンテンツの発見性を向上させる(2025)

2025年の個人ポートフォリオサイト再設計プロジェクトは、「ブログコンテンツの発見性を高めること」をテーマとして展開した。

個人ブランドのポジショニングが明確になるにつれて記事の数も徐々に増え、これまで採用してきたレイアウトでは、コンテンツの発見性に限界を感じるようになった。特に、新しい記事が公開されるたびに、過去の記事が埋もれてしまうという課題が顕著になってきた。

デジタルコンテンツの価値は、本来であれば時間の経過や流行に左右されず、長く活用されるべきである。にもかかわらず、現行のデザインはその理想とは逆行している状況にあり、それを改善することが本プロジェクトの出発点となった。

※本プロジェクトは個人プロジェクトです。

※制作期間：2025年8月〜9月

現行デザインにおける課題

「ブログ」ページは、2022年に本サイトを公開した当初から存在していたページです。当時は、個人ブランドのポジショニングがまだ明確でなく、記事数も限られていたため、最も汎用性の高いブログレイアウトを採用しました。このレイアウトは、コンテンツが少ない段階でも視覚的な充実感を演出できる点が大きな利点です。

具体的な構成としては、画面全体を「左（大）」と「右（小）」の2つのエリアに大きく分割しています。左側の広いエリアは、公開日時に基づいて記事を一覧表示する「記事エリア」であり、大きめのサムネイルと要約テキストを組み合わせて構成されています。一方、右側の「機能エリア」には、検索ボックス、カテゴリ別フィルター、著者紹介、最新記事などの機能モジュールが配置されています。BloggerやWordPressのテンプレートをはじめ、多くのコンテンツ系サイトにおいて、このようなレイアウトが一般的に採用されています。

ところが、その後の運用を通じて、状況は大きく変化しました。サイト公開から3年が経過し、記事数は当初と比べて大幅に増加しました。コンテンツの充実に伴い、このレイアウトが持つ本来の利点が、かえってユーザーによるコンテンツの発見性を妨げる要因となっています。具体的には、以下の4つの課題が挙げられます。

1. 記事エリアの空間効率が低い：左側の「記事エリア」では、大きめのサムネイルが視覚的には目を引く一方で、縦方向のスペースを大きく占有しており、1画面あたりに表示できる記事数が限られています。その結果、ユーザーはより多くの記事を閲覧するために、頻繁にスクロール操作を求められる構造になっています。
2. 機能エリアがスクロールによって視界から外れやすい：前述の通り、記事エリアは1記事ごとの縦幅が大きいため、全体としての高さは機能エリアよりも圧倒的に長くなっています。その結果、一定の位置までスクロールすると、右側の機能エリアが画面から消えてしまい、ページの右半分に視覚的な空白が生じます。これにより、視覚的なバランスやナビゲーションの連続性が損なわれる要因となっています。
3. 表示ロジックによる避けられないスペースの無駄：記事エリアは公開日時に基づいて表示されるため、1ページ目では右側の「最新記事」モジュールと内容が重複してしまいます。
4. 古い記事の発見性が低い：これは現在のデザインにおける最も重要な課題です。「公開日時＋大きな記事縦幅」という構成により、古い記事はすぐに後ろのページへと押し出されてしまいます。ユーザーは1ページ目を閲覧するだけでも負担が大きく、それ以降のページにたどり着くのはほぼ不可能な状態です。

これまで自分が書いてきた記事は、デザインの考察、語学学習、ツール紹介、日常の記録などが中心で、いずれも即時性を求める内容ではありません。そのため、公開日時に基づく現在の表示ロジックでは、最新の10件以外の記事が埋もれてしまい、読み応えがあっても見られにくくなっています。

こうした背景を踏まえ、「ブログ」ページの再設計に着手しました。目的は、情報の構造を再考し、より快適で発見しやすいコンテンツ体験を実現することです。

デスクリサーチ

まず、再設計の第一歩としてデスクリサーチを実施しました。

最初に着目したのは、「公開日時のみに依存しない構造を持つブログサイト」です。そうしたサイトが、どのようにして分類構造やレイアウト、ナビゲーションによって大量のコンテンツを整理し、情報の可視性と探索性を両立しているのかを観察・分析しました。中でも、大企業のブランドブログに注目し、既製テンプレートではなくカスタム設計されたレイアウトを通じて、その背後にあるデザイン戦略や思考プロセスを読み取ることに重点を置きました。

その結果、以下のようなデザインインサイトが得られました。

1. ブログホームページのポジショニングは「情報概要の入り口」：多くのサイトでは、ページ冒頭に「最新記事」モジュールを設置し、訪問者が現在のコンテンツの動向を素早く把握できるようにしています。この記事一覧は、「大きなタイトル＋要約テキスト（または省略）＋大判のサムネイル」という構成で視覚的な訴求力を高めるのが一般的です。ここで重視されているのは、各記事の詳細を丁寧に見せることではなく、訪問者が短時間で複数の記事タイトルを俯瞰できるようにすることです。
2. ブログホームページの後半は、ブランド性を意識したモジュール構成エリア：「最新記事」の直下には、「エディターズピック」や「カテゴリー別の導線」、「ニュースレター登録」「おすすめリソース」など、目的に応じた複数のモジュールが組み合わされ、ブランドの世界観やコンテンツ全体の価値を訴求する設計となっています。これらのモジュールの表示順は、ブランドが優先的に伝えたい情報と密接に関係しています。
3. 同じ機能を持つブロックでも異なるレイアウトを採用し、視覚的な変化を生み出す：たとえば「カテゴリー別記事」のような同じ目的のモジュールであっても、リスト形式やカード形式など異なるレイアウトを用いることで、ページ全体に視覚的なリズムや変化をもたらすことができます。また、それぞれの情報の重要度や優先順位を視覚的に示す手段としても機能します。

デザイン戦略の策定

前述のデスクリサーチを踏まえ、現行デザインにおける「旧記事の可視性の低さ」や「訪問者の探索動線が単一であること」といった課題を改善するために、以下のデザイン戦略を策定しました。

ブログホームページのポジショニングを「情報概要の入り口」として再定義する

現行の情報アーキテクチャにおいては、「ブログホームページ」が最上位に位置づけられており、すべての記事を公開日時に基づいて時系列で表示する役割を担っています。その下の階層には、「検索結果ページ」や各カテゴリごとの「分類別記事ページ」が設けられています。

再定義した情報アーキテクチャにおいては、ブログホームページの役割を「情報概要の入り口」として位置づけ、カテゴリ別に最新記事を表示する構成に見直しました。これまで時系列で全記事を表示していた機能は、新たに設けた「アーカイブ」ページへと移管しています。「検索結果ページ」と「分類別記事ページ」については、従来の構成を維持しています。

多様なモジュールを導入し、探索動線を強化する

従来の「検索」や「フィルター」機能に加えて、今回の再設計では以下のモジュールを新たに導入し、情報探索の導線を強化することを意図しています。

• 最新記事：コンパクトなレイアウトで記事を表示、訪問者に素早く最新コンテンツを把握できるように設置したブロック。
• ピックアップコラム：閲覧実績の高い記事を、さまざまなテーマに合わせて手動で選定・再掲するモジュールです。このようなモジュールを通じて、旧記事の発見性を高め、継続的な価値提供を図っています。
• ニュースレター登録：ニュースレター機能を実験的に導入し、記事閲覧ユーザーをロイヤルユーザー層へと転換することを目指しています。新着記事の配信を通じて、継続的な接点を築き、初期段階でのコンテンツ露出を促進する役割も担います。

新デザインの特徴

多様で魅力的な情報への入口

再設計されたブログページにアクセスすると、最初に目に入るのは、大きなサムネイルとともに記事タイトルが表示された「最新記事」モジュールです。

こうしたビジュアル中心のレイアウトは、ユーザーにとって複数の記事を直感的に把握しやすくなるだけでなく、私自身のデザイナーとしての強みを引き立てることも意図しています。というのも、掲載されているすべてのサムネイル画像は、私自身がデザインした作品だからです。大きく表示された画像は、細部まで視認性が高く、エリア全体がまるで小さな美術館のような空間となり、ページ冒頭からブランドとしてのビジュアル・インパクトを強く打ち出すことができます。

さらに、このエリアの背景にもひとつ工夫を加えています。最新記事のサムネイル画像にぼかし処理し、それを背景のテーマカラーと重ねることで、記事が更新されるたびに美しく繊細な変化が生まれるよう設計しています。この効果は、あえて低解像度の画像を用いることで、読み込み速度の最適化と洗練されたビジュアル演出の両立を図ったものです。

検索とフィルター

元々ページ右側に配置されていた「検索」と「フィルター」の機能は、新デザインにおいてより高い優先度が与えられ、「最新記事」モジュールの直下に移動しました。機能面での大きな変更はありませんが、「人気キーワード」の見た目については、全体のレイアウトに合わせて細かなデザイン調整を行っています。

柔軟な運用を可能にするピックアップコラム構成

「検索・フィルターボックス」の下には、「ピックアップコラム」モジュールを配置しています。このコラムは、WordPressのタグ（Tag）機能を活用して作成されており、通常のカテゴリ（Category）とは異なる視点から、流行のトピックや展示戦略に応じて柔軟に内容を調整できる構成となっています。

さらに、表示される2つのコラムは、ページの読み込みごとに、あらかじめ設定された複数の候補からランダムに選出される仕組みとなっており、ページ内容に対する期待感や発見の楽しさを演出することを意図しています。

個人ブランドのポジショニングに基づくカテゴリ別モジュール

「カテゴリ別モジュール」は、その名の通り、記事をカテゴリごとに分類して表示するモジュールです。サイト運用も4年目に入り、個人ブランドのポジショニングも徐々に明確になってきました。これまでさまざまなトピックを試し、Google Analyticsを通じて読者の反応を観察した結果、特に閲覧実績が良好だったのは、「デザインインサイト」「タイ語の自学」「デザイナーの日常生活」「おすすめツール」の4カテゴリでした。

これらの人気トピックには、カード形式のレイアウトを適用し、各コンテンツの魅力を視覚的に際立たせることを意図しています。人気が低い、または更新頻度が少ないトピックには、よりコンパクトなリスト形式のレイアウトを適用し、情報全体の優先順位を視覚的に整理しています。

なお、カード形式やリスト形式のレイアウトは、新たに設計したものではなく、現在サイト内で運用している既存のレイアウトを再利用しています。これにより、デザイン全体の統一感を維持しつつ、開発面での保守コストも抑えることができます。

ニュースレターを活用し、閲覧ユーザーをロイヤル層へ育成

「ニュースレター」機能は、今回の再設計を機に試験的に導入したシステムです。

Google Analyticsを通じてユーザーの閲覧パターンを分析した結果、多くのユーザーは「検索エンジンから特定の記事ページにアクセス → 記事を閲覧 → 他の記事を0〜1件程度読んで離脱する」という流れでサイトを利用していることが明らかになりました。

このようなユーザー行動の傾向から、コンテンツに対して高い関心や満足度を示している一方で、長文記事を1本読み終えた段階で、情報過多や認知的な疲労感によって離脱してしまうケースが多いことがわかります。

その結果、本来であればロイヤルユーザーに成長できる訪問者が、サイトとの接点を一度きりで終えてしまい、再訪の機会を逃してしまうリスクが生じています。

その解決策として、ニュースレターモジュールを導入しました。ニュースレターを通じて読者との継続的な接点を確保し、検索エンジンやSNSなどのパッシブな流入に依存しないロイヤルユーザー層の育成を図っています。

各種一覧ページのデザインを統一し、快適な閲覧体験を実現

ブログホームページを「情報概要の入り口」として再定義したことで、アーカイブ・検索・カテゴリ・タグといった各種一覧系ページは、「ユーザーが記事を効率よく一覧できる」インターフェースとしての役割に立ち返る設計方針を採用しました。

そこで、これらのページにはすべて共通のカード形式レイアウトを適用し、情報の密度と閲覧効率のバランスを図っています。この統一により、ユーザーが特定のコンテンツを探す際にも、一貫性のある快適な閲覧体験が得られるようになっています。

デザインシステム

すでにお気づきの方もいらっしゃるかもしれませんが、今回の再設計では「デザインシステム」に関する説明は含まれていません。その理由は、デザインシステムに関する基盤がすでに2024年のプロジェクト「HCYDS」にて確立されているためです。

当時は、Tailwind CSSをベースに、個人ブランドの世界観に沿ったカスタムデザインシステムを構築しており、色彩設計、タイポグラフィ階層、スペーシングルールなど、UI設計の根幹をなす要素を網羅的に整備しました。

このカスタムデザインシステムでは、RWDに対応したタイポグラフィとスペーシングのトークン設計を採用しています。画面サイズに応じて数値が自動でスケーリングされるため、視覚的な階層を保ちながらCSS調整の手間を最小限に抑えられます。さらに、すべてのトークンはアクセシビリティ基準に準拠し、OKLCHカラーモデルの導入により、ダークモードでも高い可読性とコントラストを実現しています。

また、デザイン全体の統一感に対するこだわりは、本サイト内にとどまらず、外部サービスにも反映させています。今回導入したニュースレター登録フォームは、Kit社が提供する既製テンプレートをベースにしていますが、カスタムデザインシステムを適用することで、サイト全体のデザインと調和するよう調整を行いました。

すなわち、今回の再設計は、一つのプロジェクトだけで完結したものではなく、3年間の運営を通じて少しずつ形にしてきた成果です。このカスタムデザインシステムがあるからこそ、私はユーザー体験、情報設計、課題解決といった本質的な部分に、より多くのリソースを集中させることができました。

結論

今回の再設計により、ブログホームページ上に表示される記事数は、従来の10件から39件へと大幅に増加しました。カテゴリ別レイアウトと多様なモジュール構成によって、ユーザーは時系列で記事を一件ずつ追うのではなく、自分の興味に合わせて記事を選んで読むことができるようになりました。また、運営面では旧記事の再発見性が向上し、長期的なコンテンツ活用にもつながっています。

表面的には、今回のリニューアルはコンテンツ量の拡大に伴い、既存レイアウトの限界が明らかになったことがきっかけのように見えます。しかし実際には、過去3年間にわたり個人ブランドを育て、継続的にコンテンツを発信してきた結果として生まれた、必然的な進化のステップでもあります。

コンテンツの多様化と深化に伴い、従来の構造では対応しきれなくなり、今後のブランド成長とコンテンツ運営を見据えた全体的な戦略設計が求められるようになりました。その一環として今回初めて導入したニュースレターは、読者との関係性を「待つ」から「築く」へと転換し、長期的なエンゲージメントの第一歩となる取り組みです。

今後は、これらのモジュールの実際の使用状況を継続的に観察し、ユーザーのクリック動作や閲覧経路といったデータをもとに、表示順序の最適化や追加改善の必要性を検討していく予定です。

今回の成果は、単なるビジュアルや構造の改善にとどまらず、私がこれまで取り組んできたデザインシステム、コンテンツ戦略、そしてブランド思考といった複数の専門性が交差するプロセスの上に成り立っています。

だからこそ、複雑に絡み合う課題の中でも、真に解くべき問題に集中し、最善の体験を実現することができました。