ホームページ サイトマップ

ホームページ サイトマップ テンプレート

このテンプレートは、ホームページのトップレベルのナビゲーションとフッターをシンプルな色分けレイアウトで表したものです。サイトの情報アーキテクチャ（IA）を計画し、関係者に伝えるプロダクト マネージャー、UX/UI デザイナー、マーケター、エンジニア向けです。

構成の内訳

• 製品 (coral/red #ff6464)

  • 白い枠の円形アイコン（ショッピングカート）

  • ヘッダー “製品”

  • サブタイトル “ホームページと絞り込み”

  • 「ここにテキストを入力」と記載された白いプレースホルダーボックスが3つ

• パートナー (yellow/gold #ffbe44)

  • 白い枠の円形アイコン（握手）

  • ヘッダー “パートナー”

  • サブタイトル “ランディングページと絞り込み”

  • 「ここにテキストを入力」と記載されたプレースホルダーボックスが3つ

• Comapny (teal #5ec8b3)

  • 白い枠の円形アイコン（都市／建物）

  • ヘッダー “Comapny”

  • サブタイトル “ホームページ”

  • 「ここにテキストを入力」と記載されたプレースホルダーボックスが3つ

• お問い合わせ（シアン #4fd8dd）

  • 白い枠線の円形アイコン（アドレス帳）

  • ヘッダー「お問い合わせ」

  • サブタイトルなし

  • ブランド配置用の点線枠の四角（「YOUR LOGO」ラベル）

コンテンツ階層

• メインナビゲーションのセクションは上部に配置され、はっきりしたタイトルと小さなサブタイトル行が付く（「お問い合わせ」を除く）。

• 製品、パートナー、および Comapny の下には、サブページ、絞り込み、ディープリンク用のスロットとして使える 3 つの長方形のボックスが配置されます。

フッター セクション

• 「フッター（メイン + 追加ナビゲーション）」というタイトルのフッター領域は、縦の区切り線で分けられた 4 つの列で構成されます：

  1) 連絡先、ニュース、ヘルプ

  2) セクター（下線・太字）：セクター 1、セクター 2、セクター 3

  3) 製品（下線・太字）：サポート、アクセサリー、機器

  4) ニュースレター、サービス利用規約、ソーシャルメディア

ビジュアル要素

• 目立つ紫色のヘッダーバナー（#6631d7）。白い Georgia 書体で「ホームページ サイトマップ」と表示されています。

• セクションカードは上記の色をそれぞれ使用しており、各カードに丸いアイコンが組み合わされています。

• Contact カラムに専用のロゴエリアがあります。

• 下部に細い紫色の帯があり、配色をまとめています。

使用方法

1) 「Enter text here」をすべて実際のサブページ名やリンクに置き換えてください。

2) 必要に応じてセクションのタイトルやサブタイトルを更新してください（可読性を保つため色分けは維持してください）。

3) アイコンのプレースホルダーをブランドのアイコンセットに差し替えてください。

4) 破線で囲まれた「YOUR LOGO」エリアに自社ロゴを配置してください。

5) フッターの各列に確定したナビゲーション項目と法的リンクを配置してください。

ベストプラクティス

• 初期のウェブサイト計画、IA/UX ワークショップ、関係者レビュー、開発引き渡し時に使用します。

• セクション数は最小限に抑え、各列あたり 3〜5 件を目安にしてください。

• 色の一貫性を維持して、見やすさを高めてください。

• テンプレートをそのまま反映する場合は、“Comapny” ラベルに注意するか、公開前に修正してください。

よろしくお願いします！

Khawaja Rizwan