---
title: ユーザビリティを高めるサイト構造：Phase4 情報設計・サイトマップ策定
description: Phase4ではサイトマップやワイヤーフレームを作成し、情報を最適に配置。ユーザーが迷わず行動できる設計が集客とCV向上のカギです。
image: https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website04.jpg
---

[![cafenoma](https://cafenoma.jp/hubfs/common/logo/logo_symbol_grey.svg "cafenoma")](https://cafenoma.jp/)

[![logo_symbol_grey](https://cafenoma.jp/hubfs/common/logo/logo_symbol_grey.svg "logo_symbol_grey")](https://cafenoma.jp/)

<https://www.instagram.com/cafenomaforbusiness/>

<https://www.instagram.com/cafe_no_ma/>

[お知らせ](https://cafenoma.jp/news)

[無料相談](https://cafenoma.jp/meeting) [お問合せ](https://cafenoma.jp/inquiry)

[お問い合わせ](https://cafenoma.jp/inquiry)

More results

- [導入事例](https://cafenoma.jp/case)
- 私たちについて
  
  
  
  
  
  
  
  
  
    - [私たちのこと](https://cafenoma.jp/aboutus)
    - [フィロソフィ](https://cafenoma.jp/philosophy)
    - [Q&A](https://cafenoma.jp/faq)
- ナレッジ
  
  
  
  
  
  
  
  
  
    - [HubSpot CMS 活用ガイド](https://cafenoma.jp/knowledge-hubspot-cms)
    - [HubSpot CMS 構築ガイド](https://cafenoma.jp/hubspot-cms-web-development-series)
- [ソリューション](https://cafenoma.jp/solutions)

[ニュースレター](https://cafenoma.jp/newsletter)[無料相談](https://cafenoma.jp/meeting)[お問い合わせ](https://cafenoma.jp/inquiry)

- [暮らしメディア](https://cafenoma.style/)
- [オンラインストア](https://cafenoma.stores.jp/)

<https://www.instagram.com/cafe_no_ma/>

- [導入事例](https://cafenoma.jp/case)
- 私たちについて
    - [私たちのこと](https://cafenoma.jp/aboutus)
    - [フィロソフィ](https://cafenoma.jp/philosophy)
    - [Q&A](https://cafenoma.jp/faq)
- ナレッジ
    - [HubSpot CMS 活用ガイド](https://cafenoma.jp/knowledge-hubspot-cms)
    - [HubSpot CMS 構築ガイド](https://cafenoma.jp/hubspot-cms-web-development-series)
- [ソリューション](https://cafenoma.jp/solutions)

# ユーザビリティを高めるサイト構造：Phase4 情報設計・サイトマップ策定

執筆者 [**刈込 隆二**](https://cafenoma.jp/articles/author/刈込-隆二) 公開日 2025年 02月28日  
更新日 2025年 03月01日

![ユーザビリティを高めるサイト構造：Phase4 情報設計・サイトマップ策定](https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website04.jpg)

Webサイトが大規模になるほど、どこに何の情報があるのかわかりにくくなるリスクも高まります。Phase4では、情報設計とサイトマップ策定を行い、ユーザーが迷わない導線を構築するのが目的です。ページ間の関係性がクリアになれば、SEO効果やコンバージョン率アップも期待できます。

## サイトマップ作成

まずは**サイトマップ作成**。大分類・中分類・個別ページの階層を整理し、トップページから下層ページへの導線を明確にします。グローバルナビゲーションとフッターメニューの構成もここで検討しましょう。HubSpot CMS上で作成する場合は、メニュー機能を活用すると一括でナビゲーションを管理できます。

## ワイヤーフレーム作成

次に、**ワイヤーフレーム**を用いて主要ページのレイアウトをざっくりと設計。トップページのヒーローバナー、サービス紹介、導入事例、CTAなど、セクションごとに配置する要素を線画で描き出します。ここでページ内のテキスト量や画像スペースを想定しておくと、後のデザインや実装フェーズでの手戻りが少なくなるでしょう。

## コンテンツ構成要素の洗い出し

また、**コンテンツ構成要素の洗い出し**として、どのページにテキスト・画像・動画・フォーム・CTAなどを配置するかをリストアップします。ページの目的（集客用、CV用、ブランド訴求など）と紐づけて必要な要素を選別すると、無駄のない構成が可能です。  
この情報設計をしっかり行うと、ユーザーが「どのページに何があるのか」を把握しやすくなり、サイト全体の滞在時間やCVが向上しやすいです。

## まとめ

Phase4を終えると、サイトの“設計図”が完成します。デザインフェーズに入る前にこの段階をきちんと固めることで、プロジェクト全体のスムーズな進行とユーザビリティの高いWebサイトが実現しやすくなります。

【Phase4】情報設計・サイトマップ策定 - チェックリスト ![comptab-infoalt7-icon](https://273774.fs1.hubspotusercontent-na1.net/hubfs/273774/act3/images/comptab-infoalt7-icon.svg) (1)〜(5)に「YES」の上、情報設計とページ構成に問題なしと判断できれば次のPhaseへ。

サイトマップが完成し、必要ページがすべて網羅できている

![comptab-yes-icon](https://273774.fs1.hubspotusercontent-na1.net/hubfs/273774/act3/images/comptab-yes-icon.svg)

ページごとの目的やメインコンテンツがリスト化されている

![comptab-yes-icon](https://273774.fs1.hubspotusercontent-na1.net/hubfs/273774/act3/images/comptab-yes-icon.svg)

ナビゲーション構造がユーザーにとってわかりやすく設計されている

![comptab-yes-icon](https://273774.fs1.hubspotusercontent-na1.net/hubfs/273774/act3/images/comptab-yes-icon.svg)

ワイヤーフレーム（主要ページ）で各セクションの配置がイメージできている

![comptab-yes-icon](https://273774.fs1.hubspotusercontent-na1.net/hubfs/273774/act3/images/comptab-yes-icon.svg)

情報設計やレイアウト案に対し、チームレビューで合意が得られている

![comptab-yes-icon](https://273774.fs1.hubspotusercontent-na1.net/hubfs/273774/act3/images/comptab-yes-icon.svg)

 

### ワイヤーフレームやサイトマップの作成に悩む方、情報設計の段階から一緒に考えたい方は、ぜひご相談ください。

最適な階層設計とユーザーフローを描き、集客・CVアップにつながるサイト構築をお手伝いします。

[HubSpot Content Hubを活用したWebサイト構築サービス](https://cafenoma.jp/service-hubspot-cms)

トピックス: [HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms) [Webサイト構築](https://cafenoma.jp/articles/tag/webサイト構築) [情報設計](https://cafenoma.jp/articles/tag/情報設計) [サイトマップ](https://cafenoma.jp/articles/tag/サイトマップ) [ワイヤーフレーム](https://cafenoma.jp/articles/tag/ワイヤーフレーム) [ユーザビリティ](https://cafenoma.jp/articles/tag/ユーザビリティ)

成功するWebサイト構築HubSpot CMSで学ぶ

#### マーケティング戦略から公開・運用・保守まで、Webサイト構築に必要な工程をトータルで解説

[詳しくみる](https://cafenoma.jp/hubspot-cms-web-development-series)

前の記事

[← 機能要件を明確にし、後戻りを防ぐ：Phase3 要件定義・機能仕様策定](https://cafenoma.jp/articles/phase3-requirements)

<https://cafenoma.jp/articles>

次の記事

[ブランドイメージを具現化：Phase5 デザイン・クリエイティブ制作 →](https://cafenoma.jp/articles/phase5-design-creative)

\\ こちらもおすすめです /

[サイト全体の方向性を固める：Phase2 Webサイトコンセプト策定](https://cafenoma.jp/articles/phase2-site-concept)

![サイト全体の方向性を固める：Phase2 Webサイトコンセプト策定](https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website02.jpg)

[HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms)

### サイト全体の方向性を固める：Phase2 Webサイトコンセプト策定

2025年 02月28日

[サイトの価値を高めるコンテンツづくり：Phase6 コンテンツ制作](https://cafenoma.jp/articles/phase6-content-creation)

![サイトの価値を高めるコンテンツづくり：Phase6 コンテンツ制作](https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website06.jpg)

[HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms)

### サイトの価値を高めるコンテンツづくり：Phase6 コンテンツ制作

2025年 03月01日

[デザインを形にする：Phase9 フロントエンド実装でサイトを完成させる](https://cafenoma.jp/articles/phase9-frontend-development)

![デザインを形にする：Phase9 フロントエンド実装でサイトを完成させる](https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website09.jpg)

[HubSpot CMS](https://cafenoma.jp/articles/tag/hubspot-cms)

### デザインを形にする：Phase9 フロントエンド実装でサイトを完成させる

2025年 03月01日

Marketing Made Visual

## ニュースレター

コーヒー・暮らし・空間をテーマに、カフェノマが蓄えてきたノウハウやブランディング、デジタルマーケティングのヒントをお届けします。

[購読する](https://cafenoma.jp/newsletter)

**Marketing Made Visual**  
** 比較されない、選ばれるブランドへ。 **

[instagram @cafe\_no\_ma](https://www.instagram.com/cafe_no_ma/)

[ソリューション](https://cafenoma.jp/solutions)

- [ブランド体験の構築](https://cafenoma.jp/solutions#sec1)
- [DXの推進](https://cafenoma.jp/solutions#sec2)
- [ロイヤリティの強化](https://cafenoma.jp/solutions#sec3)

[導入事例](https://cafenoma.jp/case)

- [住宅・不動産](https://cafenoma.jp/case-real-estate-modelroom-concept)
- [ライフスタイル](https://cafenoma.jp/case-d2c-appliance-ltv-funnel-integration)

会社案内

- [私たちのこと](https://cafenoma.jp/aboutus)
- [フィロソフィ](https://cafenoma.jp/philosophy)
- [FAQ](https://cafenoma.jp/faq)

お役立ち

- [HubSpot CMS活用](https://cafenoma.jp/knowledge-hubspot-cms)
- [HubSpot CMS構築](https://cafenoma.jp/hubspot-cms-web-development-series)

© 2026 otonoma, Inc. (cafenoma is a registered trademark of otonoma Inc.)

- [オンラインストア　　｜](https://cafenoma.stores.jp/)
- [サービス利用規約](https://cafenoma.jp/hubfs/terms/ServiceTerms_v3.pdf)
- [プライバシー](https://cafenoma.jp/privacy-policy?hsLang=ja)

![icon-pf-karikomi](https://cafenoma.jp/hs-fs/hubfs/common/portrait/icon-pf-karikomi.png?width=513&height=513&name=icon-pf-karikomi.png)

### Ryuji Karikomi

Founder & CEO

大学卒業後、フランスへ留学。帰国後、複数のデザインハウス勤務、事業会社のマーケティング職を経て、2006年オトノマ創業。

Webディレクター/プロデューサーとしてのキャリアを基盤に、クリエイティブ領域（写真・映像・Web制作）とマーケティング領域（Webマーケ、コミュニティ構築、事業開発）の双方で実績を築く。

大手IT企業でのWebマーケティングの経験と、自社での事業プロデュースの経験から、新規事業のクリエイティブディレクションからSNS活用を含むデジタル施策、ブランディングまで一貫して推進可能。

おすすめ記事：  
[カフェノマのクリエイティブ・ディレクターという仕事](https://cafenoma.jp/articles/20240521)

![icon-pf-yuba](https://cafenoma.jp/hs-fs/hubfs/common/portrait/icon-pf-yuba.png?width=513&height=513&name=icon-pf-yuba.png)

### Nobuka Yuba

Co-founder

cafenoma（カフェノマ）主宰。  
前職ではチーフCAとして国際線を中心に延べ1万時間以上のフライトを経験。2012年より、日常にカフェのような心地よさを取り入れたライフスタイルと空間づくりを提案。著書に『うちカフェ（マイナビ出版）』他。住まいやマンション共用部などの空間スタイリングを通じて、暮らしそのものを豊かにするアイデアを発信しています。

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "刈込 隆二",
    "url" : "https://cafenoma.jp/articles/author/刈込-隆二"
  },
  "dateModified" : "2025-03-01T06:20:38.693Z",
  "datePublished" : "2025-02-28T09:09:59.000Z",
  "headline" : "ユーザビリティを高めるサイト構造：Phase4 情報設計・サイトマップ策定",
  "image" : [ "https://cafenoma.jp/hubfs/articles/b2b-b2c-instagram/hero_website04.jpg" ],
  "mainEntityOfPage" : {
    "@id" : "https://cafenoma.jp/articles/phase4-information-architecture",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://cafenoma.jp/hubfs/common/logo/logo_symbol_grey.svg"
    }
  }
}
```