店舗ホームページのメニューの作り方｜営業時間や返品・交換の案内を見つけやすくする

情報があるのに見つからないときは、案内とページを分けて考える

ナビゲーションとは、サイト内で別のページや情報のまとまりへ移るための案内です。画面上部などにあるメニューも、その一つです。営業時間のページは公開されていても、「営業部」という項目の先にあると、お客様が店舗情報だと予想できない場合があります。この場合は案内を見直します。一方、営業時間そのものが載っていなければ、先にページ内容を補う必要があります。

こもれび用品店では、来店前に営業時間と場所を調べる人、買った品の交換条件を確かめる人、会社用にまとめ買いを相談したい人を想定します。まず、その用事に答えるページがあるかを一覧にします。ページは、答える内容が分かる名前で揃えます。図・表・保存教材でも同じ名前を使い、行き先を見比べられるようにします。

PC用の図を保存 ／ スマートフォン用の図を保存

案内を置く場所にも役割があります。共通メニューは、複数のページから使う主要な入口です。あるグループの中だけに置くメニューは、その周辺の情報を案内します。「ホーム→お買い物案内→返品・交換」のように現在位置を示す案内を、パンくずと呼びます。本文中のリンクは、説明を読んだあとに必要になる詳しい情報へつなぎます。

自社で始めるときは、今あるメニューを見ながら、よく聞かれる質問に答えるページを実際に開いてください。見つけるまでに迷うなら案内を、到着しても答えがないなら原稿を修正する候補にします。この切り分けができると、制作会社にも「何となく分かりにくい」ではなく、直したい箇所と理由を伝えられます。

メニュー項目は、お客様の用事と答えるページから選ぶ

項目を選ぶ前に、お客様がサイトで済ませたい用事を書き出します。理由は、社内で載せたい情報の一覧と、お客様が探す情報が同じとは限らないからです。「返品・交換の条件を押す」では選ぶ項目を教えてしまいます。「買った品を交換できるかと、連絡方法を調べる」のように、知りたいことを文章にします。

来店前の用事なら、到着したページに営業時間と場所の両方が必要です。交換の用事なら、対象条件と連絡方法を読み取れることが必要です。表には「営業時間と場所を調べる」のように、確かめる用事をそのまま書きます。先に答えるページと必要な内容を決めておくと、別のページでも用事を済ませられた場合を含めて、結果を確認できます。

PC用の図を保存 ／ スマートフォン用の図を保存

こもれび用品店の修理ページは、原稿も受付条件も未確認です。そこで修理のリンク追加は保留し、内容を決める担当に確認します。自社でも、新しいサービス名をメニューに足す前に、行き先の本文と受付条件が整っているかを確認してください。問い合わせ窓口へのリンクだけで、まだ決まっていない条件を説明できるわけではありません。

用事を集める材料には、実際に受けた問い合わせと現在の原稿を使います。頻度の高い質問だけでなく、返品など見落とすと困る情報も候補にしてください。この教材の三つは説明用の課題数で、どのサイトも三つで足りるという基準ではありません。まだ把握していない頻度は、推測の数値を入れず未確認として扱います。

ページが少ない間は直接並べ、増えたら意味の近い項目をまとめる

階層とは、情報を大きなまとまりと、その中のページに分けた親子関係です。たとえば「お買い物案内」の中に「返品・交換の条件」を置くと、まとまりが第1階層、具体的なページが第2階層になります。分類する目的は、お客様が次に探す範囲を予想できるようにすることです。社内の担当部署ごとに分けることが目的ではありません。

PC用の図を保存 ／ スマートフォン用の図を保存

こもれび用品店の候補案では、店舗案内の中に営業時間・アクセス、お買い物案内の中に返品・交換の条件、法人のお客様の中にまとめ買いの相談準備を置きます。表の「掲載保留」は制作上の管理欄で、公開メニューに並べるグループではありません。修理の受付条件は、原稿が整うまでお客様の選択肢に加えません。

ただし、案内するページが少ないサイトで、必ず親子に分ける必要はありません。営業時間・アクセス、返品・交換の条件、まとめ買いの相談準備を直接並べる案も比較できます。直接並べると内容が見えやすい一方、ページが増えると選択肢が長くなります。グループにすると一覧を短くできる一方、その名前から中身を予想する必要があります。

自社では、今ある情報量で直接並べる案と、今後増える情報を含めて分類する案を作り、同じ用事で探し方を比べます。「必ず七項目以内」「三回クリック以内」のような数だけで採用せず、選ぶ名前が理解でき、到着先で答えを得られるかを見てください。複数の入口から同じページを案内する場合は、管理表で行き先をそろえます。

名前は社内用語を避け、開いた先の内容が伝わる言葉にする

メニューの表示名は、リンクを開いた先に何があるかを予想できる言葉にします。お客様は社内の担当分担を知らないため、「管理部」では返品条件を探せない場合があります。今回のページ内容なら、「返品・交換の条件」が具体的な候補です。短さだけで決めず、読者が知りたいことを表す語を残します。

PC用の図を保存 ／ スマートフォン用の図を保存

W3Cのリンク目的の説明では、リンクの文言、または対応する文脈と文言から目的が分かることを扱っています。メニューには周囲の説明が少ないため、項目名自体で行き先を伝える案を試します。「詳しくはこちら」のように、何について詳しいのかを読み返す必要がある名前より、内容を示す候補を用意します。

名前と到着先の約束も合わせます。「まとめ買いを申し込む」と書けば、申し込みを進められると受け取られます。到着先が相談前の準備案内なら、「まとめ買いの相談準備」が内容に合う候補です。自社でもメニュー名、到着ページの題名、冒頭の説明を並べ、読み手が期待する内容と合っているかを確認してください。

スマートフォンで名前が長くなると、改行や省略で意味が伝わりにくくなる場合があります。表示を確かめたうえで、問い合わせで使われる言葉を候補にして比較します。「返品」だけに短縮して交換も含むと理解されるかは、担当者の感覚だけで決めず、探してもらう用事として確認します。

案を採用する前に、名前と分類だけで情報を探してもらう

ツリーテストとは、見た目を外した文字の階層案で、課題の情報がどこにあるかを探してもらう方法です。名前と分類の分かりやすさを確認できます。たとえば「交換できる条件と連絡方法を調べてください」と伝え、どの項目を選ぶかを見ます。色や写真の工夫を始める前に、情報の整理に迷いがあるかを確かめるためです。

PC用の図を保存 ／ スマートフォン用の図を保存

用意するものは、メニュー全体の階層案と、先に整理した用事です。できれば想定するお客様に近い人に依頼し、正解の項目を教えずに試してもらいます。選んだ順番、戻った場所、到着先、途中で諦めたことを記録してください。表の旧案は記入方法を示す架空例で、新しい候補案の結果は空欄です。実際の利用者で試した成果ではありません。

表の候補案には、実際に選ばれた経路と到着先がまだ入っていません。記入するときは、未実施を成功や迷いゼロに置き換えないでください。少数の確認から得た気づきを、全訪問者の成功率や売上改善へ置き換えることもできません。

結果は修正箇所の判断に使います。「管理部」が何を示すか分からないなら名前を、返品条件を店舗案内の中に探すなら分類を見直します。目的のページに着いても条件がないなら、本文の問題です。何を変えた結果か分かるように、一度に全てを変えず、案の版と試した用事を記録してください。

案を比べるときは、先に見た案を覚える影響も考えます。同じ人に続けて試してもらうだけで、後の案が優れていると断定しないでください。また、文字の案で分類が分かっても、実際のサイトでメニューを開けるとは限りません。次に、実装された画面の操作を別に確認します。

実装したメニューは、スマートフォンとキーボードでも確かめる

制作担当がメニューを組み込んだら、名前と行き先だけでなく、実際に選べるかを確認します。パソコンで表示できても、狭い画面では名前が切れたり、開いたメニューから本文へ戻れなかったりする場合があるためです。トップページと代表的な下層ページで、共通項目の名前・順序・リンク先を比べます。

PC用の図を保存 ／ スマートフォン用の図を保存

W3Cの一貫したナビゲーションの説明は、同じページ群で繰り返す案内の相対順序をそろえることを扱います。ページごとに主要な項目を探し直さなくて済むようにする考え方です。下位の案内を追加できないという意味ではありません。店舗案内と返品ページでも、共通項目の順序をそろえて確認します。

スマートフォンでは開く・選ぶ・閉じる操作を、キーボードではTabキーでの移動とEnterキーなどによる操作を試します。今どこを操作しているかが見え、メニューの外へ移動できるかも確認してください。マウスを重ねたときだけ現れる項目には、タッチやキーボードで使う方法も必要です。操作位置や本文が固定メニューに隠れないかも見ます。

現在位置は、ページの題名やパンくず、現在のメニュー項目の表示で伝えます。検索から下層ページへ直接来た人も、場所と次の行き先を理解できるかを確かめます。ここでの点検はメニューの確認で、Webサイト全体のアクセシビリティ、つまりさまざまな条件の人が利用できることへの適合評価を完了したという意味ではありません。

最後はログアウトした状態で公開URLを開き、予定のページへ進めて必要な答えを読めるかを確認します。担当者だけが見られる下書きや作業用URLが残っていないかも見てください。問題時に戻せるよう、変更前の名前とリンク先の一覧を保存し、修正を担当する人を決めておきます。

ナビゲーション設計でよくある質問

メニュー項目は何個までにすればよいですか？

個数だけで決めません。情報量と名前の分かりやすさを見て、主要な用事で探せるかを確認します。少ないページを無理にグループ化したり、異なる用事を「その他」にまとめたりすると、かえって行き先を予想しにくくなる場合があります。

検索窓があれば、メニューは簡単でもよいですか？

検索窓とメニューは別の入口として考えます。お客様が検索に使う言葉を思いつけるとは限らず、検索結果からページを選ぶ必要もあります。営業時間や交換条件など、主要な用事への案内を用意したうえで、検索でも必要な情報を探せるか確かめます。

更新を兼務する一人の担当者でも始められますか？

まず、問い合わせを一つ選んで、答えるページと現在のメニュー名を書き出せます。自分で内容を点検したあと、可能なら想定するお客様に近い人に探してもらいます。社内で使う言葉に慣れた担当者の確認だけでは、お客様の理解を確かめきれません。

メニューを変えれば、問い合わせは減りますか？

この手順だけで減少を約束することはできません。情報が見つからない問い合わせには案内の改善が役立つ可能性がありますが、ページに必要な内容がない場合や、個別判断が必要な相談もあります。公開後は質問の内容を見て、案内と原稿のどちらを見直すか判断してください。

まず一つの問い合わせから、直す箇所と依頼内容を決める

ナビゲーション設計では、お客様の用事、答えるページ、表示する名前、情報のまとまりを順に結び、実際に探せるかを確かめます。ページ不足をメニューの変更だけで解決しようとせず、迷った場所から修正対象を決めることが大切です。

PC用の図を保存 ／ スマートフォン用の図を保存

制作担当へ渡すときは、「営業時間を探せない」という用事と、答えるページ、表示名、直接置くかグループ内に置くかの案を一組にします。この教材では、ページ台帳、用事の一覧、階層案、名前の比較、確認票を使えます。修理のような未確認項目は、原稿を整える担当と保留理由も添えます。

ページを追加する際も、先にそのページが答える用事を整理します。既存のグループに含めるか、本文から案内するか、共通メニューへ置くかを再検討してください。公開後に受けた質問や、確認で迷った場所を残すと、次の修正理由を説明しやすくなります。

今日始めるなら、よく聞かれる質問を一つ選び、サイトのどこからどのページへ進めば答えを読めるかを確認してください。下の設計メモに、現状の名前・行き先・迷う箇所を記入します。架空の記入例を使う場合は、自社で確認した内容へ置き換え、まだ試していない結果は未確認のまま残します。

整理したメニュー案についてDREEXYへ相談する場合は、記入した台帳と、迷っている名前・原稿が足りないページをそろえると、変更する範囲を話し合いやすくなります。対応範囲と費用は個別に確認してください。

呼び名・階層・到着先をまとめる設計メモ

架空記入例を、自社で確認した事実へ置き換えて使います。入力はこの画面内だけで、外部送信しません。

ナビゲーション設計メモ 対象サイトと版： 訪問者が調べること： 答えるページと内容： 第1階層と第2階層： 表示名と到着先の対応： 掲載を保留するページ・理由： 確認条件・確認日： 実際に選ばれた経路と到着先： 迷った言葉と修正候補： 実装・公開後の未確認項目： 原稿・実装・再確認の担当：

保存して使う教材

• ページ台帳の記入例（CSV）を保存
• お客様の用事と到着先の記入例（CSV）を保存
• メニューの階層案（CSV）を保存
• 確認結果の架空記入例（CSV）を保存
• 確認結果の空欄シート（CSV）を保存
• 設計メモの空欄（TXT）を保存
• 設計メモの架空記入例（TXT）を保存
• 原稿不足で保留する場合の記入例（TXT）を保存
• 教材一式（ZIP）を保存