webディレクターの独り言学習ブログ

実装後に気づいた！Webディレクターが自分のブログを改修して見えたUIUX改善のリアル

Webサイト改修のイメージ画像

投稿日: 2025-10-25

こんにちは、Webディレクターの渡邉です。

Webサイトをより良くしていく中で、「ユーザーインターフェース（UI）、ユーザー体験（UX）の向上」はいつも大切なテーマですよね。特に、どんなにしっかり計画しても、「実際に使ってみて初めて気づく」使いづらさは、よくあることです。

この記事では、私が自分のブログを運営する中で感じた「もっとこうなったらいいな」という課題を、どう改善していったかをご紹介します。データ分析だけでなく、私自身のユーザーとしての体験から見えてきた改善のプロセスと、Webディレクターとしての学びを、皆さんと共有できたら嬉しいです。皆さんのサイト改善のヒントになれば幸いです。

1. はじめに：なぜ、私のブログは「改修」が必要だったのか？

Webディレクターとして日々奮闘する中で、「学んだことや試行錯誤の記録を残したい」という思いでこのブログを立ち上げました。おかげさまで、少しずつ記事も増えてきました。

開設当初は「これで十分だろう」と、自分なりにサイト設計を考えて実装したつもりでした。しかし、実際にブログを運営し、自分自身が「一ユーザー」としてブログを見てみると、最初の設計では気づかなかった「使いづらさ」や「不便さ」がはっきりと見えてきたのです。

これはデータ分析から分かったことではありません。まさに「使ってみて初めて分かった」リアルなユーザー体験でした。Webディレクターとして、普段の仕事では常にユーザー視点を大切にしています。ですが、いざ自分のサイトとなると、計画段階の設計と実際の使い心地にズレがあることを痛感しました。

そこで今回は、この「作ってみてから気づいた課題」を解決するために行ったブログの改修内容をご紹介します。そこから見えてきたUIUX改善のポイントと、Webディレクターとしての学びを、皆さんと一緒に考えていければ嬉しいです。読者の皆さんのサイト改善のヒントになれば幸いです。

2. 改修ポイント1：スクロールに追従するナビゲーションで「迷子」をなくす

改修前の課題（自身の体験）

記事を読み進めていくと、ヘッダーのグローバルナビゲーションや、スマートフォンで表示されるハンバーガーメニューが画面外に消えてしまうのが、個人的に大きなストレスでした。

「あの記事も読みたい」「プロフィールはどこだっけ？」と思った時、いちいち画面を上までスクロールし直す必要がありました。特にスマホで片手操作をしている時は、この「戻る手間」が非常に煩わしく、読者の離脱につながる可能性もあると感じたのです。

Webディレクターとして「ユーザーが迷わない導線」の重要性は理解しているつもりでしたが、自分のサイトでこの状態はまずい、と痛感しました。

改修内容

そこで、PC版のグローバルナビゲーションと、SP版のハンバーガーメニューを、スクロールに追従して常に画面上部に表示される「Sticky」仕様に改修しました。

具体的には、JavaScript（`scroll-nav.js`）でスクロールイベントを監視し、一定量スクロールしたらナビゲーション要素に `sticky` クラスを付与。CSS（`style.css`）で `position: fixed` を指定することで、常に画面に固定されるようにしました。

改修後の効果（期待される効果とWebディレクターとしての学び）

この改修により、読者の皆さんは記事を読みながらでも、いつでも主要な導線にアクセスできるようになりました。

Webディレクターとして、 「いつでもどこでもアクセスできる」という安心感が、ユーザー体験の向上に直結する ことを改めて実感しました。小さな改善ですが、ユーザーの「ちょっとした不便」を取り除くことが、サイト全体の満足度を高める上で非常に重要だと再認識したポイントです。

3. 改修ポイント2：カテゴリ・タグ機能と全文検索で「知りたい情報」へ最短アクセス

改修前の課題（自身の体験）

ブログの記事数が増えるにつれて、特定のテーマの記事を探すのが難しくなってきました。せっかく書いた記事も、読者の皆さんが見つけられなければ意味がありません。

興味のある記事にたどり着くまでに手間がかかり、大切なコンテンツが埋もれてしまうのはもったいないと感じていました。また、キーワード検索機能はあったものの、タイトルや概要だけでなく、記事本文全体から検索できる必要性も感じていました。

改修内容

この課題を解決するため、以下の機能を実装しました。

  1. カテゴリ・タグ機能の強化: サイドバーにカテゴリとタグのリストを自動で生成し、それぞれの記事数を表示するようにしました。クリックすると、該当するカテゴリやタグの記事だけを一覧表示するフィルター機能を実装。
  2. 全文検索機能の導入: キーワード検索機能を強化し、記事のタイトル、概要だけでなく、 記事本文の全文を対象に検索できるように改善 しました。

これらの機能は、`posts.json` という記事の情報をまとめたJSONファイルをデータソースとしています。JavaScript（`common-script.js` と `list-script.js`）で、これらの情報を元に動的に表示やフィルタリングを行っています。全文検索には、事前に生成した `search-index.json` を利用しています。

改修後の効果（期待される効果とWebディレクターとしての学び）

この改修により、読者の皆さんは自分の興味関心に合わせて記事を絞り込んだり、特定のキーワードで記事本文全体から検索したりと、 「知りたい情報」へ最短でアクセスできる ようになりました。

Webディレクターとして、 「コンテンツの分類とアクセシビリティ」が、ユーザーエンゲージメントに直結する ことを改めて痛感しました。情報が整理され、探しやすくなることで、読者の皆さんはより深くブログのコンテンツに触れてくれるはずです。

4. 改修ポイント3：関連記事と前後記事リンクで「次」への興味を繋ぐ

改修前の課題（自身の体験）

記事を読み終えた後、「さて、次はどうしよう？」と読者の皆さんが迷ってしまうのは、非常にもったいないと感じていました。次に読むべき記事が提示されなければ、そのままブログを閉じてしまう読者も少なくないでしょう。

特に、関連性の高い記事への誘導ができていないのは、せっかくのコンテンツ資産を十分に活かしきれていないと感じていました。また、手動で関連記事や前後記事のリンクを貼るのは、記事が増えるほど管理が大変になり、現実的ではありません。

改修内容

この課題に対し、以下の機能を実装しました。

  1. 関連記事の動的表示: 各記事の終わりに、同じカテゴリの「関連記事」を自動で表示するようにしました。
  2. デフォルトで5件表示し、6件以上ある場合は「もっと見る」ボタン（アコーディオンUI）で残りの記事を表示するUIを導入 しました。これにより、情報過多にならず、かつ興味を持った読者にはさらに深く掘り下げてもらえるように工夫しました。
  3. 前後記事リンクの動的生成: 記事の前後への移動を促す「前の記事へ」「次の記事へ」リンクも自動で生成し、記事の終わりに配置しました。

これらの機能は、`posts.json` という記事の情報をまとめたJSONファイルを基にしています。JavaScript（`article-script.js`）が現在の記事のカテゴリやインデックスから関連・前後記事を特定し、HTMLを生成しています。

改修後の効果（期待される効果とWebディレクターとしての学び）

この改修により、読者の皆さんの「次に見たい」という自然な欲求に応え、サイト内での滞在時間延長と回遊率向上に貢献できると期待しています。

Webディレクターとして、 「ユーザーの行動フローを予測し、適切なタイミングで次の選択肢を提示する」ことの重要性 を改めて痛感しました。読者の皆さんの「もっと知りたい」という気持ちを途切れさせない工夫が、サイトのエンゲージメントを高める鍵だと感じています。

5. まとめ：Webディレクターが「自分のサイト」を改修して得た、最も大切な学び

今回のブログ改修を通じて、Webディレクターとして改めて感じた最も大切な学びは、 「ユーザー視点」や「使いやすさ」は、実際に使ってみなければ見えてこない側面が重要 ということです。

どんなにしっかり計画しても、この点は変わりません。

机上で完璧だと思った設計も、いざ運用してみると「あれ？なんか使いにくいな」と感じることはよくあります。そして、その「なんか使いにくい」という感覚こそが、ユーザーが抱えるストレスの元であり、改善のヒントなのだと改めて認識しました。

今回の改修は、データ分析に基づいたものではなく、私自身の「ユーザー体験」から生まれたものです。小さな改善の積み重ねが、サイト全体のUX向上につながり、結果としてサイトの成果（回遊率、滞在時間など）に繋がると思っています。

この経験は、今後のブログ運営はもちろん、皆さんのWebサイト制作や改善提案を行う上で、参考にしてもらえると幸いです。これからも、常にユーザー視点を忘れず、より良いWebサイト制作に挑戦し続けていきたいと思います。