サービスが多いホームページ、どう整理する？入口を分ける考え方

まず「何を探して来る人か」を書く

社内では部署名や商品名で仕事を分けていても、初めての人が同じ言葉を知っているとは限りません。「どの部署か」ではなく「今、何をしたいのか」を手がかりにする方が合う場面もあります。

例えば、地域の音楽団体なら「活動に参加したい人」と「イベントへの出演を頼みたい人」では必要な情報が違います。これは説明用の架空例です。二つの入口を作るなら、前者では活動内容や募集条件、後者では出演内容や依頼の流れへ進めるように考えます。

まず、想定する人と探していることを一組ずつ書き出します。そのうえで既存のページやサービスを結び付けると、メニューの見た目を決める前に、足りない説明や重なっている入口を見つけられます。

サービス別・目的別・対象者別を使い分ける

分け方に一つの正解はありません。次の三つを候補にして、読者が最初に答えられる問いはどれかを考えます。ここで挙げる名称は分類の説明例であり、Bee Kindのサービス一覧ではありません。

• サービス別：すでに名称が分かっている人向け。「車検・整備」「鈑金・塗装」など、依頼したい仕事を直接選べる分け方です。
• 目的別：やりたいことは分かるが、商品名や専門用語が分からない人向け。「開業の準備をしたい」「運営中の困りごとを相談したい」などから案内します。
• 対象者別：相手によって条件や手続きが大きく異なる場合。「個人のお客様」「法人のお客様」など。内容がほぼ同じなら、入口を分ける必要があるか再検討します。

住吉グループ様：会社名と、扱う仕事を一緒に見せる

住吉グループ様の制作では、グループ・リーダー・各会社の情報を整理し、構成企画、文章作成、デザイン、実装、公開まで担当しました。ロゴと写真はお客様からのご提供です。

下の各会社紹介の画面では、写真と会社名の近くに、その会社が扱う事業を並べています。名前を知っている人は会社名から、知らない人は事業内容から確認できます。「グループにはどんな会社があり、それぞれ何をしているか」を一つの一覧で見せる構成です。

小規模な事業者が複数のサービスを案内する場合にも、名称だけを並べず、その横に「何を頼めるか」を添える考え方は使えます。ただし、この画面をそのまま使えば問い合わせが増えるという意味ではありません。事業の違いに合わせて分類と説明を選びます。

double one様：全体の案内と、個別の説明を分ける

記事冒頭のdouble one様の画面では、サービス全体の見出しに続いて、新車・中古車販売の写真と説明が配置されています。その中で扱う内容を短い語句で示し、在庫車への入口を用意しています。全体を紹介する文章と、個別サービスを選ぶための情報は、別の役割を持っています。

この案件では、お客様から具体的なページ構成案と掲載内容をご提案いただき、Bee Kindが構成整理・文章作成・デザイン・実装・公開を担当しました。企画のすべてをBee Kindだけで考えた事例ではありません。

自分のサイトでサービスを並べるなら、「どんな相談に対応するか」「具体的に何をするか」「次にどこを確認するか」を共通の順序で揃えてみてください。説明の量が違っても、比較したい情報の位置が揃うように考えます。写真や見出しの大きさだけで違いを伝えようとしないことも大切です。

一覧は選ぶ場所、詳細は確かめる場所にする

一覧の段階で、すべての条件や作業内容を説明しきる必要はありません。まず対象・主な内容・違いを短く示し、自分に合う候補を選べるようにします。詳しい条件、対応範囲、依頼の流れなどは、その先で確認できる形にします。

説明が短く、共通する内容が多いなら、一つのページ内で見出しと移動先を分ける方法もあります。サービスごとに条件・事例・よくある質問が大きく違うなら、個別のページを用意する案を検討します。サービスの数だけ薄いページを増やすことが目的ではありません。

複数の入口から同じサービスを案内する場合は、料金や条件の詳細をどこで管理するかも決めます。目的別と対象者別で同じ説明を別々に持つと、片方だけ更新して食い違う可能性があるためです。入口は複数でも、詳しい説明の置き場所は揃えられます。

1. 01一覧で選ぶ

   対象・主な内容・違いを確認する

2. 02詳細で確かめる

   対応範囲・条件・事例を読む

3. 03次へ進む

   相談・依頼など、目的に合う入口へ

見出しとリンクは、行き先が分かる言葉に

デザイン上の英語見出しや写真の印象に加えて、初めての人にも内容が分かる言葉を用意します。例えば、新しく設計する相談リンクなら「詳しくはこちら」だけでなく、「車検・整備について相談する」のように、何の入口かを具体的にする方法があります。

Googleのリンクに関する案内では、リンク先に関連する、具体的で適度に簡潔なテキストが推奨されています。また、Googleがたどれる形のリンクとして、移動先を指定したHTMLのリンク要素が案内されています。見た目がボタンになっていることと、ページへのリンクとして実装されていることは、分けて確認します。

見出しも、文字を大きくするだけでなく、内容のまとまりを表すものとして設計します。W3Cのチュートリアルでは、見出しはページの構成を伝え、支援技術などによるページ内の移動にも使われると説明されています。デザイン上の区切りと、HTML上の見出しの関係を合わせて確認します。

スマホで「一つ選んでみる」と、迷う場所が見えてくる

並べ方を決めたら、サイトの構成を知らない人に、具体的な用事を一つ伝えて探してもらいます。正しい入口を先に教えず、どの名前を見て選び、どこで迷ったかを確かめてください。これは確認方法の提案であり、今回の事例で測定した結果ではありません。

• サービス名を知っている人として、該当する説明と相談先を探す。
• 困っている内容だけを知っている人として、どのサービスが合うかを考える。
• 別の候補も比べたい人として、詳細から一覧へ戻る。

情報を減らす前に、選ぶ手がかりを揃える

複数の事業やサービスを持つこと自体が問題なのではありません。大切なのは、読者が何を手がかりに選び、その先で何を確かめられるかです。まず主な分類を決め、それぞれに対象・内容・次の入口を添えるところから整理できます。

Bee Kindでは、提供しているサービスや伝えたい内容を伺い、構成・文章・デザインへまとめる仕事をしています。今あるページや箇条書きの情報からでも、どこを一覧にし、どこを詳しく説明するかを一緒に考えられます。