PROJECT 002 — 社内ポータルサイトをWordPressで作る。
STEP 04 / NAVIGATION
STEP 03では、全体のお知らせと担当ごとの情報を整理し、必要な投稿へ進むためのHOMEを作りました。
入口ができても、その先で迷ってしまえば社内ポータルは使いにくいままです。HOMEから投稿を開いたあと、別のカテゴリーを見たいときや、言葉だけ覚えている情報を探したいときにも、次の行き先が分かる必要があります。
そこでSTEP 04では、ヘッダー、HOMEのカード、カテゴリー一覧、投稿、検索をつなぎ、必要な情報へ移動するための導線を整えました。
HOMEだけでは移動しきれない
HOMEには、新しい投稿とカテゴリーへの入口があります。ただし、利用者がいつもHOMEから操作を始めるとは限りません。個別の投稿をブックマークして開く場合もあれば、検索結果から直接入る場合もあります。
どの画面から入っても、HOMEへ戻る、別のカテゴリーへ移る、情報を検索する。この三つが分かれば、サイト内で行き止まりになりにくくなります。
今回は、画面ごとに別々のメニューを作るのではなく、よく使う移動を共通のヘッダーへ集めました。そのうえで、HOMEとカテゴリー一覧には、表示している情報に合ったリンクを置いています。
移動の流れを先に整理する
初期の社内ポータルでは、主な移動を次のように整理しました。
サイト名 ─────────────→ HOME ヘッダー ──→ HOME / 各カテゴリー / 検索 HOMEカード ─→ 投稿 / カテゴリー一覧 カテゴリー一覧 ─→ 投稿 検索結果 ───→ 該当する投稿・コメント
この時点で必要だったのは、多機能なメニューではありません。利用者が「どこにいるか」と「次にどこへ行けるか」を判断できる、短く分かりやすい経路でした。
ヘッダーに共通の入口を置く
ヘッダーには、サイト名、HOME、主要カテゴリー、検索を配置しました。サイト名とHOMEは先頭ページへ戻るリンクです。カテゴリー名を選べば、その種類の投稿をまとめた一覧へ移動できます。
共通ヘッダーは、HOMEだけでなく、投稿や検索結果にも表示されます。個別の投稿を読み終えたあとでも、ブラウザーの戻る操作だけに頼らず、次の場所を選べるようにしました。
実装した場所は、テーマのheader.phpです。WordPressに登録されたカテゴリーを読み込み、HOMEへのリンクと並べて表示しました。カテゴリー名を変更した場合にも、登録情報をもとに表示される構成です。
HOMEのカードを入口として使う
HOMEのカードには、そのカテゴリーの新しい投稿を最大5件表示しました。投稿タイトルを選ぶと本文へ進み、「一覧を見る」を選ぶと同じカテゴリーの投稿一覧へ移動します。
ここでは、HOMEにすべての過去記事を並べないことが大切でした。最近の情報はHOMEからすぐに開き、少し前の情報はカテゴリー一覧から探す。画面の役割を分けることで、HOMEが長くなりすぎるのを防ぎました。
カードとリンクの表示はfront-page.phpで作っています。STEP 03ではカードの並び方を中心に扱いましたが、今回はカードから先へどう移動するかに注目しました。
カテゴリー一覧を中継点にする
カテゴリー一覧は、HOMEと個別の投稿をつなぐ中継点です。HOMEに表示されなくなった投稿も、カテゴリーを選べば同じ種類の情報として探せます。
利用者はWordPressの管理画面を開かなくても、ヘッダーまたはHOMEの「一覧を見る」からカテゴリーへ進み、投稿タイトルを選べます。情報を登録する画面と、情報を読む画面を分けたことで、日常の閲覧に必要な操作を減らしました。
分類で見つからない情報は検索する
カテゴリーが分からなくても、覚えている言葉があれば検索できます。検索欄はヘッダーに置き、HOMEではサイト全体、カテゴリーや投稿の画面では対象カテゴリー内を検索する構成にしました。
検索結果には投稿とコメントを分けて表示し、該当する内容へ移動できるようにしました。カテゴリーは情報の種類から探す入口、検索は言葉から探す入口です。二つを用意することで、探し方を一つに限定しませんでした。
検索フォームはheader.php、検索範囲の判定はfunctions.php、結果の表示はsearch.phpで扱っています。
最初から複雑な階層にはしなかった
現在の社内ポータルには、制作を進めるなかで追加したメニューや管理機能もあります。ただし、この段階で作った初期ナビゲーションは、HOME、主要カテゴリー、投稿、検索をつなぐところまでです。
PDFの公開操作、確認用の一覧、変化点を管理する画面、HOMEの高度な絞り込みなどは、運用上の必要が見えてから加えた機能です。後に必要になる機能まで先にメニューへ並べると、入口の数だけが増えてしまいます。
まず利用者が日常的に使う経路を作り、運用で必要になった導線を後から足す方針にしました。
PCとスマートフォンで確認する
ナビゲーションは、リンクが表示されるだけでは十分ではありません。実際に押した先が正しいことと、画面幅が変わっても操作できることを確認しました。
- サイト名とHOMEから先頭ページへ戻れる
- ヘッダーのカテゴリー名から投稿一覧へ移動できる
- HOMEの投稿タイトルから本文を開ける
- 「一覧を見る」から対応するカテゴリーへ進める
- 検索結果から該当する投稿やコメントへ移動できる
- スマートフォンではメニューと検索が縦に並び、横にはみ出さない
確認する場所と期待する移動先を決めておくと、見た目だけでなく導線として動いているかを判断できます。
必要な情報へ進める導線ができた
HOME、カテゴリー、投稿、検索は、それぞれ単独で用意するだけでは社内ポータルの導線になりません。ヘッダーと画面内のリンクでつなぐことで、利用者は情報の種類からも、覚えている言葉からも目的の投稿へ進めるようになりました。
ナビゲーションを作って分かったのは、メニューの数よりも、よく使う移動が途中で途切れないことの方が重要だということです。
次は、このポータルを誰が使い、WordPress上でどの役割を持つかを整理します。STEP 05では、ユーザー、権限、所属を分けて登録する仕組みを作ります。
← STEP 03「社内ポータルのホーム画面を作る。必要な情報へすぐ移動できる入口にする。」
PROJECT 002の記事一覧を見る
NEXT → STEP 05「社内ポータルのユーザーと権限を整理する。WordPressをみんなで使えるようにする。」