小規模事業のWebサイトナビゲーション例（注釈付き）
小規模事業向けWebサイトナビゲーションの注釈付き例。顧客の目的、デザインの工夫、制約を示す6つのメニューパターン、比較表、コピーして使えるナビゲーション依頼書を掲載します。すべてWe.Incテンプレートデザインです。
小規模事業のナビゲーションは短く、顧客が使う言葉を使い、主な行動を常に示します。以下は異なるナビゲーションパターンを示すWe.Incテンプレートデザインで、顧客サイトではありません。それぞれについて、顧客の目的、スクリーンショットで確認できるデザイン上の工夫、制約を紹介します。
選定方法と対象読者
We.Incのショーケースから、電話、予約、料金確認を望むスマートフォン利用者が多い地域サービス事業と小売事業のデザインを選びました。メニューを開かずに主な行動を見つけられるか、ラベルが顧客の検索語に合っているか、スマートフォン幅でも機能するかの3点で評価します。画像はWe.Incのショーケースに掲載された各デザインの、デスクトップで最初に見える画面です。採用するデザインは公開前に自分のスマートフォンでも確認してください。
注釈付きの例
1. 短いテキストメニュー、主な行動はヒーロー内（配管業者）
目的：水漏れで困っている顧客がすぐ助けを求める。工夫：シンプルなリンク4つ（サービス、概要、設置、問い合わせ）と、最初の画面に「今すぐ予約」ボタン。制約：ヘッダーに電話番号やボタンがないため、ヒーローを通り過ぎると主な行動が見えなくなります。緊急対応が多い業種では、ヘッダーに電話ボタンを追加します。
2. 全画面動画の上に3語のメニュー（レストラン）
目的：メニューを確認して予約する。工夫：「メニュー」「店内」「予約」だけを表示し、最初の画面の下部に所在地と営業時間を載せています。制約：リンクが小さく、動く動画の上に薄い文字で表示されるため、スマートフォンでは読みにくくタップしづらいです。カラーコントラスト確認ツールで確認し、「予約」をボタンにします。
3. 短いメニュー、電話アイコン、ボタン（会計事務所）
目的：自分の仕事を扱っているか確認し、連絡する。工夫：リンク4つ（サービス、業種、手順、概要）、電話アイコン、右側に目立つ「今日から始める」ボタン。6例の中で最も充実したパターンです。制約：電話アイコンに番号や見えるラベルがありません。スクリーンリーダー向けの名前が必要で、番号を見たい訪問者もいます。
4. 最小限のショップヘッダー（ジュエリーショップ）
目的：商品を見る。工夫：ヘッダーには「概要」と「バッグ」だけがあり、ページ中央の「コレクションを見る」リンクから商品を探します。制約：オーダー、修理、予約への導線がヘッダーにありません。サービスでも売上を得る宝飾店は、メニュー項目に追加しましょう。
5. プロジェクト中心、メニューはほぼなし（建築事務所）
目的：過去の仕事の質を判断する。工夫：最初の画面をメニューではなく、「次のプロジェクト」「プロジェクトを見る」の操作があるプロジェクトビューにしています。制約：最初の画面に問い合わせリンクが見えません。ポートフォリオ中心のサイトにも、会話を始める方法が必要です。
6. メニューに対応地域とレビュー、電話ボタン（芝生管理）
目的：自分の地域が対象か、他の顧客が満足したかを確認する。工夫：サービス、施工例、対応地域、レビューに加え、電話ボタンを配置し、ヒーロー内に「見積もりを依頼」を表示。制約：デザイン内の数値はテンプレートの仮データです。公開前に検証可能な事実に置き換えるか削除します。
パターンの比較
| パターン | 例 | 向いている用途 | 注意点 |
|---|---|---|---|
| 短いメニュー、ヒーロー内に行動 | 配管業者 | シンプルなサービスサイト | スクロールすると主な行動が消える |
| 動画上の3語メニュー | レストラン | 雰囲気を重視する店舗 | コントラストとタップ領域 |
| メニュー + 電話 + ボタン | 会計事務所 | 多くの小規模事業 | アイコンだけのボタンにラベルを付ける |
| 最小限のショップヘッダー | ジュエリーショップ | 商品のみを扱う店舗 | サービスへの導線がない |
| プロジェクト中心 | 建築事務所 | ポートフォリオ型の事業 | 問い合わせ方法がない |
| 対応地域 + レビュー + 電話 | 芝生管理 | 地域サービス | 仮の数値 |
コピーして使えるナビゲーション依頼書
主な行動（常に表示し、スマートフォンでも表示）：
最上位の項目（最大5〜6個、顧客が使う言葉）：
1.
2.
3.
4.
フッターに置く項目（プライバシー、採用、FAQなど）：
スマートフォンのメニュー：「メニュー」ボタン。主な行動はメニューの外に表示
現在のページを強調表示：はい
キーボード：Enter/Spaceで開き、Escapeで閉じる応用する点と、そのままコピーしない点
- ラベルではなくパターンを応用し、顧客が検索する言葉を使います。
- 5ページのサイトに大規模小売店のメガメニューをコピーしないでください。
- 電話番号や主なボタンをスマートフォンメニューの中に隠さないでください。
- キーボードで操作できることを確認します。Webアクセシビリティチェックリストをご覧ください。
適したテンプレートから始める
ビジネステンプレートから事業に合うパターンを選び、We.IncのWebサイトビルダーで編集します。Freeではwe.incのアドレスでテンプレートサイトを最大3つ利用できます（AIクレジットと独自ドメインは含まれません）。Starterは月額$20でAIによる作成と独自ドメインが追加されます（料金プラン）。Webサイト評価ツールで結果を確認し、Webサイト費用計算ツールで予算を立てましょう。
よくある質問
Webサイトのメニューには何項目入れるべきですか？
小規模事業なら、最上位項目は通常4〜6個にし、電話や予約などの主な行動を見える場所に置きます。
ナビゲーションに電話番号を入れるべきですか？
電話を受ける事業なら、はい。スマートフォンではメニューの中に隠さず、見えるようにします。
これらは実在する事業のWebサイトですか？
いいえ。ナビゲーションのパターンを示すために使ったWe.Incのテンプレートデザインです。
無料で始める · クレジットカード不要
製品
- AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
- ホワイトラベル プラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
- エンタープライズ：SSO、個別の SLA、専任サポート
- 開発者向け API：自社の SaaS にサイト生成機能を組み込み
ご利用いただける方
- 制作会社・代理店向け：自社ブランドで再販
- フリーランス向け：自分ブランドのビルダーを持つ
- ホスティング事業者向け：サービスにビルダーを追加
- SaaS プラットフォーム向け：API でサイト作成を組み込み
- スタートアップ向け
- 金融サービス向け
- 医療・ヘルスケア向け