BETA現在ベータ版で公開中です。現在ベータ版で公開中です。ベータ版

LAY-002 公開 更新

ハブ型の会社案内

会社案内を、代表メッセージ・企業理念・沿革などの下層ページへの入口として作る構成。情報量が多く、目的の違う人が訪れる会社向け。

向いている

  • 代表メッセージや沿革を、それぞれ1ページ分しっかり書きたい会社
  • 事業や拠点が複数あり、会社案内の情報量が多い会社
  • 取引先・採用・来訪など、目的の違う人が会社案内を入口に使う会社

向かない

  • 載せる情報が少なく、下層ページの中身が薄くなる会社
  • 会社案内を1回で読み切ってほしい会社
  • ページを分けても、それぞれを更新する手間をかけられない会社

ワイヤーフレームと順番の理由

このワイヤーは、型の一例です。
実際のサイトでは、業種や伝えたいことに合わせて、セクションの数や順番が変わります。

ワイヤーフレーム
ハブ型の会社案内のPCワイヤーフレーム

このワイヤーは、ハブ型の会社案内の一例です。実際のサイトでは、業種や伝えたいことに合わせて、セクションの数や順番が変わります。
ワイヤー内の社名・数字・住所・人名は、すべて架空の表示例です。

PCワイヤーのプロンプト

この構成の考え方

ハブ型は、会社案内のページそのものには多くを書かず、代表メッセージや沿革などの下層ページへ案内する「入口」として作る構成です。

会社案内に来る人の目的は、取引前の確認、代表の考えを知りたい、所在地を調べたいなど、人によって違います。
全員に同じ順番で読ませるのではなく、知りたいことを自分で選んでもらうことを優先しています。

ただし、基本情報だけを確認したい人に下層ページまで行かせるのは手間です。
そのため、会社概要の主要な項目だけはこのページにも置き、ここで用が済むようにしています。

制作時のよくある失敗

下層ページの中身が薄く、入口だけが立派になる

入口カードを6枚並べても、その先のページが数行しかないと、読み手は行き来するだけで何も得られません。
1ページ分の中身を書けない項目は、下層ページに分けず、このページか別のページにまとめます。

入口カードの数が多すぎて選べない

10枚、12枚と並べると、どれを見ればよいか迷わせてしまいます。
よく見られるページを6つ前後に絞り、それ以外はフッターのリンクで案内します。

カードにページ名しか書いていない

「企業理念」「沿革」だけでは、その先に何が書いてあるか分かりません。
各カードに一行の説明を添え、押す前に中身を想像できるようにします。

会社概要の要約と下層ページの内容がずれる

このページの要約だけ更新し忘れると、住所や代表者が食い違います。
要約に載せる項目は少なくし、更新するときは両方を確認する手順を決めておきます。

よくある質問

1ページ完結型とハブ型は、どう選べばよいですか?

下層ページそれぞれに、1ページ分の中身を書けるかどうかで考えるのが分かりやすい方法です。
代表メッセージや沿革を数行で収められるなら1ページ完結型、それぞれをしっかり書きたいならハブ型が向いています。

入口カードに写真は必要ですか?

必須ではありません。
写真がない場合は、アイコンや一行の説明を大きめにして、カードの違いが分かるようにします。

下層ページが少ない場合でもハブ型にしてよいですか?

下層ページが2〜3つしかない場合は、入口カードが少なく寂しい印象になりやすいです。
その場合は1ページ完結型にして、長くなる部分だけを別ページに分ける方法もあります。

同じ種別のレイアウト

会社案内のレイアウト一覧を見る

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このレイアウトを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。