PROJECT 002 — 社内ポータルサイトをWordPressで作る。
STEP 03 / HOMEPAGE
STEP 02では、社内ポータルに必要な機能をWordPressの構成へ置き換えました。
投稿、カテゴリー、コメント、検索を用意しても、利用者が毎回それぞれの場所を探さなければならない状態では、入口として使いにくいままです。
そこで次に作ったのが、社内ポータルのHOMEです。すべての情報を一画面へ詰め込むのではなく、よく見る情報を確認し、必要な投稿やカテゴリーへ迷わず進むための画面として設計しました。
HOMEが必要だった理由
WordPressには、投稿一覧やカテゴリー一覧があります。ただし、管理画面や個別のカテゴリーから情報を探す使い方を前提にすると、利用者は「どこを開けばよいか」を覚えなければなりません。
今回の社内ポータルでは、全員に関係するお知らせと、担当ごとの情報を扱います。同じ新着一覧へ混ぜると、重要度や対象の違いが分かりにくくなります。
そのためHOMEには、情報を読むための入口と、情報の種類を見分けるための役割を持たせました。
単なる新着一覧にはしなかった
最初のHOMEでは、全体のお知らせを横幅いっぱいに表示し、その下へ担当やテーマごとのカードを配置しました。
全体のお知らせは、利用者全員が最初に確認する情報です。一方、担当ごとの情報は、必要なカードを選んで確認できれば十分です。二つを同じ大きさ、同じ順番で並べるよりも、役割に合わせて見せ方を変える方が自然でした。
初期実装では、HOMEに表示する情報を大きく次のように分けました。
- 全員が見る全体のお知らせ
- 担当やテーマごとに分けた投稿カード
- 各投稿の公開日、タイトル、コメント数
- カテゴリーの一覧へ進むリンク
- 投稿やコメントを探す検索
- HOMEと各カテゴリーをつなぐナビゲーション
確認状況を扱う機能も後にHOMEへ加わりましたが、最初から現在の完成形を作ったわけではありません。まずは、日常的に見る情報を分類し、投稿へ進める入口から始めています。
カードで情報の種類を分ける
担当やテーマごとの情報は、カードとして区切りました。
ここでいうカードは、関連する情報を一つの枠へまとめた表示です。カードの上部にカテゴリー名を置き、その下へ新しい投稿を並べます。利用者はカード名を見れば、どの種類の情報が入っているか判断できます。
各カードには最新5件の投稿を表示し、すべてを見たい場合は「一覧を見る」からカテゴリー画面へ移動できるようにしました。HOMEを過去記事の保管場所にせず、最近の動きと次の入口を示す画面にしています。
投稿タイトルだけでなく、コメント数もHOMEで確認できる形にしました。投稿を開く前に、補足ややり取りがあるかを判断できるためです。
WordPressのどこを変更したか
HOMEは、管理画面で固定ページへカードを手作業で並べたものではありません。社内ポータル用のWordPressテーマにある、フロントページ専用テンプレートを編集しました。
変更した中心のファイルは、次の三つです。
front-page.php：HOMEへ表示するカテゴリーと投稿を取得し、カードとして並べるstyle.css：カードの余白、枠、2列レイアウト、スマートフォン表示を整えるheader.php：HOME、カテゴリー、検索へ移動するナビゲーションを表示する
front-page.phpは、WordPressがサイトの先頭ページを表示するときに利用できるテーマテンプレートです。今回はここでカテゴリーごとの投稿を取得し、HOME専用の並び方を作りました。
カテゴリー名や投稿をPHPへ直接書き並べるのではなく、WordPressに登録されたカテゴリーと公開済み投稿を読み込みます。新しい投稿を公開すればHOMEにも反映され、カード内の情報を毎回手作業で更新する必要がありません。
最初のHOMEの構成
初期HOMEの関係を簡単に表すと、次の形です。
HOME ├─ 全体のお知らせ（横幅いっぱい） │ ├─ 公開日 │ ├─ 投稿タイトル │ └─ コメント数 ├─ 担当・テーマ別カード │ ├─ カテゴリー名 │ ├─ 最新の投稿 │ ├─ コメント数 │ └─ 一覧を見る ├─ 主要ナビゲーション └─ 投稿・コメント検索
HOMEで内容をすべて読ませるのではなく、何が更新されたかを把握し、投稿やカテゴリーへ進める構成です。
迷わないために入口をそろえる
HOMEのカードだけでは、別の画面へ移動したあとに戻りにくくなります。そこでヘッダーには、HOMEと主要カテゴリーへのナビゲーションを置きました。
検索欄も同じナビゲーション内へ配置しました。分類が分かる情報はカテゴリーから進み、言葉だけを覚えている情報は検索するという、二つの探し方を用意しています。
HOMEではサイト全体を検索し、カテゴリーや投稿の画面では関連する範囲を検索する構成にしました。今いる場所に応じて検索対象を変えることで、必要以上に広い結果を見なくて済みます。
PCとスマートフォンで並び方を変える
PCでは、担当ごとのカードを2列で表示しました。複数の情報を同時に見比べられるためです。
同じ2列をスマートフォンへ押し込むと、タイトルやリンクが読みづらくなります。画面幅が狭いときはカードを1列へ切り替え、ナビゲーションと検索も縦に並ぶようにしました。
確認するときは、PCでカードが2列に並ぶことだけでなく、スマートフォンで本文やボタンが横にはみ出さず、一つずつ読めることを見ます。
作った結果を確認する
初期HOMEでは、次の状態を確認しました。
- 全体のお知らせが、担当別の情報より先に表示される
- 担当やテーマごとのカードを見分けられる
- カードから投稿本文とカテゴリー一覧へ移動できる
- コメント数から、投稿にやり取りがあるか確認できる
- ヘッダーからHOME、カテゴリー、検索へ移動できる
- 画面幅が狭いときは、カードが1列へ切り替わる
これで利用者は、WordPressの管理画面を入口にせず、HOMEから日々の情報へ進めるようになりました。
HOMEは一度作って終わりではなかった
実際の制作では、HOMEを使い始めたあともカードの種類や情報の優先順位を調整しました。確認が必要な情報の扱いなど、運用して初めて具体化した機能もあります。
最初から現在の完成形を予測して作ったのではありません。全体のお知らせと担当別の投稿を見分け、必要な場所へ進める最小のHOMEを作ったことで、次に何を改善すべきかが見えるようになりました。
HOMEは情報を全部並べる場所ではなく、今見るべきものと、その先の入口を整理する場所です。情報が増えたときは、カードを足すだけでなく、何をHOMEへ残し、何を一覧へ任せるかを考える必要があります。
次は画面同士をつなぐ
HOMEから必要な情報へ進める入口ができました。
次に必要なのは、HOMEを出たあとも迷わず移動できる導線です。
STEP 04では、ヘッダー、カテゴリー、投稿、検索をつなぐナビゲーションを整えます。
← STEP 02「社内ポータルのサイト構成を考える。必要な機能をWordPress上に整理する。」