さがせるサイトへ戻る

PAGE STRUCTURE PLANNER

基本5ページの構成を、
相談前に整理する。

ホームページ制作プランの標準構成を起点に、ページの役割・順序・伝えたいことを最大5ページで整理できます。高度な予約機能や自動保存は行いません。

MOTION SAMPLE SELECTOR

見せ方を、20種類から1つ選ぶ。

これは表示例です。高度なアニメーションがホームページ制作プランに標準で含まれることを示すものではありません。

LIVE PREVIEW

選んだ1種類だけを再生する。

編集内容・構成・プリセットの変更時に、選択中の表示例だけを最初から確認できます。

静かなフェードフェードの濃淡

TOP / 最初に知ってほしいこと

トップページ

事業概要、強み、主要導線を伝える

A

サービス・メニュー

提供内容、料金目安、利用方法を整理する

B

選ばれる理由・実績等

強み、プロフィール、安心材料を伝える

C

会社・店舗案内・アクセス

所在地、営業時間、アクセスをまとめる

D

お問い合わせ

予約・相談・問い合わせの入口を整える

ページ

確認

画像を確認

SITE MAP CANVAS

ドラッグしてページ構成を作る

カードを選ぶと、そのページを移動できるガイドが操作可能になります。

下に置く:上のページから進む下位ページ

横に置く:同じ親を持つ同列ページ

点線のガイドに重ねて離すだけで、接続線も自動で変わります

TOP下位 A同列 B

ページを選び、ドラッグまたはガイドのボタンで構成を変更できます

TOP

トップページ

事業概要、強み、主要導線を伝える

つかんでガイドへ移動
A

サービス・メニュー

提供内容、料金目安、利用方法を整理する

つかんでガイドへ移動
B

選ばれる理由・実績等

強み、プロフィール、安心材料を伝える

つかんでガイドへ移動
C

会社・店舗案内・アクセス

所在地、営業時間、アクセスをまとめる

つかんでガイドへ移動
D

お問い合わせ

予約・相談・問い合わせの入口を整える

つかんでガイドへ移動

IMAGE & REQUEST PREPARATION

構成画像と3コマを、別々に確認する。

画像は表示イメージ、構造データは制作範囲の確認用です。この画面では個人情報を入力させず、送信・保存も行いません。

選択中アニメーションを含む現在のページ構成図
構造データと選択内容を確認する
{
  "nodes": [
    {
      "id": "top",
      "label": "TOP",
      "role": "top",
      "brief": {
        "pageName": "トップページ",
        "message": "事業概要、強み、主要導線を伝える",
        "articleTheme": "最初に知ってほしいこと",
        "cta": "予約・相談へ進む"
      },
      "position": {
        "x": 468,
        "y": 72
      }
    },
    {
      "id": "page-a",
      "label": "A",
      "role": "service",
      "brief": {
        "pageName": "サービス・メニュー",
        "message": "提供内容、料金目安、利用方法を整理する",
        "articleTheme": "サービスとメニュー",
        "cta": "内容を確認する"
      },
      "position": {
        "x": 72,
        "y": 330
      }
    },
    {
      "id": "page-b",
      "label": "B",
      "role": "proof",
      "brief": {
        "pageName": "選ばれる理由・実績等",
        "message": "強み、プロフィール、安心材料を伝える",
        "articleTheme": "想い・プロフィール・実績",
        "cta": "詳しく見る"
      },
      "position": {
        "x": 336,
        "y": 330
      }
    },
    {
      "id": "page-c",
      "label": "C",
      "role": "access",
      "brief": {
        "pageName": "会社・店舗案内・アクセス",
        "message": "所在地、営業時間、アクセスをまとめる",
        "articleTheme": "基本情報とアクセス",
        "cta": "アクセスを確認する"
      },
      "position": {
        "x": 600,
        "y": 330
      }
    },
    {
      "id": "page-d",
      "label": "D",
      "role": "contact",
      "brief": {
        "pageName": "お問い合わせ",
        "message": "予約・相談・問い合わせの入口を整える",
        "articleTheme": "お問い合わせ方法",
        "cta": "フォームで相談する"
      },
      "position": {
        "x": 864,
        "y": 330
      }
    }
  ],
  "edges": [
    {
      "id": "edge-top-page-a",
      "source": "top",
      "target": "page-a"
    },
    {
      "id": "edge-top-page-b",
      "source": "top",
      "target": "page-b"
    },
    {
      "id": "edge-top-page-c",
      "source": "top",
      "target": "page-c"
    },
    {
      "id": "edge-top-page-d",
      "source": "top",
      "target": "page-d"
    }
  ],
  "animation": {
    "animationPresetId": "quiet-fade",
    "animationPresetName": "静かなフェード",
    "storyboardLabel": "フェードの濃淡",
    "frameLabels": [
      "開始",
      "中間",
      "完了"
    ]
  }
}

このイメージで依頼

これは依頼内容の画面内確認です。個人情報の入力欄はなく、URL、ブラウザ保存、解析イベント、外部送信には渡りません。

表示例
静かなフェード
ストーリーボード
フェードの濃淡
構成
TOPを起点とした最大5ページ