HPの途中ページから来た人へ、今いる場所と戻り先をどう示す？

料金ページや事例ページのURLを、お客様へ直接送ることがある事業者の方へ。HPは必ずトップから読まれるとは限りません。途中のページだけを開いても、何のページか分かり、ほかの案内へ進めるようにしておきましょう。

今回は「こもれび相談事務所」の制作見本を使い、ページの現在位置と戻り先の示し方を紹介します。会社情報を変更した掲載用サンプルで、受注・納品実績や成果を示すものではありません。

制作見本｜料金とご依頼の流れページの全体

■ トップの説明を読んでいる前提にしない

このページでは、上部に事務所名と共通メニューを置き、本文の冒頭に「料金とご依頼の流れ」と示しています。途中から開いた人も、どこのサイトで、何を確認するページなのかを読み取れる構成です。

例えば、相談の案内メールに料金ページのURLを添える場面を考えます。受け取った人は料金を確かめた後、相談できる内容や連絡先も知りたくなるかもしれません。そこで必要になるのは、トップを最初から読み直してもらうことではなく、次に必要な案内へ進める入口です。

制作見本｜ホームへの案内と現在のページ名

制作見本｜共通メニューと選択中の目印

■ 現在位置と、行き先の一覧は役割が違う

拡大画面の見出し上には「ホーム / 料金とご依頼の流れ」という短い案内があります。このような表示は「パンくずリスト」と呼ばれ、サイト内のどこにいるかを表します。ここでは、ホームへ戻るリンクと、今読んでいるページ名を並べています。

一方、上の共通メニューには「相談できること」「終活相談喫茶」「料金とご依頼の流れ」「事務所・相談案内」が並びます。「料金とご依頼の流れ」の下線は、開いている項目の目印です。パンくずは現在位置、メニューはほかに読める内容。両方を同じ目的で増やすのではなく、役割を分けます。

なお、パンくずはブラウザで直前に見たページの履歴ではありません。メールから来ても検索から来ても、サイト内で決めた位置関係を示します。

■ 「戻る」だけでなく、戻った先の中身を決める

商品詳細から同じ種類の商品一覧へ戻りたい場合と、事務所の料金からホームへ戻りたい場合では、必要な戻り先が違います。制作前に「このページはどの一覧・案内に属するか」を整理すると、無意味な中間ページを作らずに済みます。

例えば説明用の構成案なら「ホーム / 製品一覧 / 製品名」。製品の種類別一覧が実際にある場合には、その階層も候補になります。存在しない一覧を表示上だけ挟む必要はありません。

単一ページの小さなサイトでは、パンくずよりページ内の短い目次が合う場合もあります。表示を追加することが目的ではなく、読み手が迷う分岐に必要な案内を置くことが目的です。

■ 初稿は、途中のURLから開いて確認する

トップから順番に見るだけでなく、料金や事例のURLを直接開いてみます。「何のサイトか」「何のページか」「別の案内へどう進むか」を、先に説明せずに確かめる方法です。

スマホではメニューが閉じた形になることもあります。PCと同じ下線がそのまま見えるとは限らないため、スマホ側でもページ名と戻り先を確認します。パンくずを付けても、リンク先の内容や名称が曖昧なら、案内の問題は残ります。

■ 制作相談に使える、ページ位置の整理メモ

・直接URLを案内するページ：＿＿＿＿

・そのページだけ開く人が知りたいこと：＿＿＿＿

・ページが属する一覧・案内：＿＿＿＿

・戻った先で見比べたい内容：＿＿＿＿

・読み終えた後に進んでほしいページ：＿＿＿＿

・スマホで確認したい入口：＿＿＿＿

「料金をメールで案内する。そこから相談内容と所在地も確認してほしい」のようなメモが出発点になります。

USER ABILITIESのホームページ制作では、支給いただいた情報をもとにした構成・デザイン・実装、原稿の見出し整理、スマートフォン対応、メニューやページ間リンクを承っています。必要な掲載量・機能・作業範囲は購入前に確認します。

上記の整理メモと現在の資料を、共有してよい範囲で見積り相談へお送りください。

ホームページ制作サービス