WIREFRAME / 構成案

What Craft ／ カスタムオーダーLP
ワイヤーフレーム（第1案）

既存ECサイト（what-craft.com）の情報を素材に、「カスタムオーダーを体験してもらう」ことに目的を絞った縦1本のランディングページ構成案です。装飾は入れず、ブロックの順番・役割・文言の骨格だけを示しています。

目的：カスタム注文の開始 KGI：カスタム画面への遷移 想定：SNS広告からの流入 デバイス：スマホ優先

00 ／ 設計の考え方

現行サイトは「探して買うEC」、LPは「作る体験に一本化」

現行の what-craft.com は商品一覧・レザー解説・コレクションが並列に並ぶECです。ここから広告で人を呼ぶと、選択肢が多く離脱しやすい。LPでは「アイテム→レザー→カラーを選ぶと自分だけの一点ができる」という体験の一点に絞り、迷わせずカスタム画面まで運びます。

WHY強みは商品数ではなく「自分で組み合わせられること」。この体験の面白さを先に見せ、価格や納期の不安を後半で解消する順序にしています。

読ませる順番（4段）

  • 惹く：自分だけの一点が作れると理解させる（FV）
  • 分かる：作り方が4ステップで簡単だと示す
  • 選べる：素材と色の魅力＝選ぶ楽しさを見せる
  • 安心する：価格・納期・保証・声で不安を消して注文へ

01 ／ ページ構成（上から順に）

01HEADER ／ 固定

ロゴ ＋ 「カスタムする」ボタン のみ

グローバルナビは置かない。LPの離脱要因になるため、出口は1つに固定する。

カスタムする
WHYECのヘッダー（検索・カート・カテゴリ）をそのまま出すと回遊が始まり、LPの役割が壊れる。スクロール中も常に注文導線が視界にある状態にする。
02FIRST VIEW ／ 最初の1画面

主見出し：
「革も、色も、選べる。
あなただけの、ひとつを。」

副文：アイテム・レザー・カラーを選ぶだけ。世界にひとつの革小物が、約5週間で届きます。

カスタムを始める　作り方を見る

補助：「ご注文の製作には約5週間いただいております」を小さく明記

主役ビジュアル
（完成品／手元／色違いの並び）
WHY「カスタムできる」ことが一瞬で伝わらないと直帰する。見出しで“選べる”を言い切り、すぐ下にボタンを置く。納期は隠さず最初に出し、期待値のズレを防ぐ。
03共感 ／ 課題提起（短く）

「気に入る財布が、意外と見つからない。」

  • 色が好みじゃない／かぶる
  • 質は良くても、自分のものという感じがしない
  • 贈り物に、ありきたりを渡したくない

→ だから、選んで作る。

WHY長い共感パートは不要。3行だけ置いて、次の「作り方」へ橋渡しする役目に留める。
04HOW TO CRAFT ／ 作り方4ステップ（LPの核）
STEP図 01

01 アイテムを選ぶ
財布・バッグ・小物から

STEP図 02

02 レザーを選ぶ
オリジナルレザーから

STEP図 03

03 カラーを選ぶ
組み合わせは自由

STEP図 04

04 届く
自分にも、大切な人にも

実際にカスタムしてみる

WHYここがLPで最も重要。「難しそう」を潰す。4枚を横並びで一目で終わりが見える形にし、直後にボタンを置いて、理解した勢いのまま送り出す。
05LEATHER ／ 素材の魅力
レザーの質感アップ
（色数が伝わる並び）

「発色、育てる楽しみ、柔らかな質感。」

世界各地のレザー職人と一から作り上げた、What Craft オリジナルのレザー。種類ごとに個性が宿る。

カラーチップを横並びで見せる（選ぶ楽しさの可視化）

WHYカスタムの価値＝選択肢の質。ここで「安いカスタム」ではなく「良い革を選べる」と分からせ、価格の納得感をつくる。
06PRODUCTS ／ 何が作れるか＋価格
商品1

ラウンド長財布
¥16,500〜

商品2

オープンミニショルダー
¥12,100〜

商品3

L字コンパクトウォレット
¥13,200〜

全点は出さない。代表3〜5点＋「すべて見る」。価格は「〜から」で下限を見せる。

WHYECの一覧をそのまま貼ると選定疲れが起きる。代表だけ見せて「この価格帯なんだ」と分からせるのが目的。
07VOICE ／ 使っている人の声
声1（写真＋一言）
声2
声3

「贈り物にした」「色を迷ったが相談できた」など、注文前の不安に対応する声を選ぶ

WHYカスタムは「失敗したらどうしよう」が最大の障壁。第三者の実例で、選んだ結果が良かったことを見せる。
08ANXIETY ／ 不安をつぶす（納期・返品・ギフト）

約5週間

一点ずつ手作業のため。注文時に納期の目安を明記。

ギフト対応

名入れ・ラッピングの可否をここで明示。

修理・保証

長く使うためのアフター体制。

WHY「5週間」は後で知るとキャンセル理由になる。先に堂々と理由付きで出すほうが、むしろ手仕事の価値として効く。
09FAQ ／ よくある質問（5問前後）
  • 納期はどのくらいですか？
  • 色の組み合わせは自由に選べますか？
  • 実物の色を確認する方法はありますか？
  • 名入れはできますか？
  • 返品・交換はできますか？
WHY問い合わせを減らすためではなく、注文直前の最後のためらいを消すために置く。だから最終CTAの直前に配置する。
10LAST CTA ／ 締め

「あなたの一点を、作りはじめる。」

アイテムを選ぶところから。3分で、世界にひとつが決まります。

カスタムを始める

WHY最後は迷いの余地を残さない。リンクは1つだけにして、他の出口（一覧・ブランド紹介）は置かない。
11FOOTER ／ 最小限

特定商取引法に基づく表記／プライバシーポリシー／お問い合わせ／© WHAT CRAFT

WHYECのフルフッターは載せない。法的に必要なものと問い合わせ先だけ。

02 ／ スマホでの見え方（縦積みの順番）

広告流入はほぼスマホのため、上から順にこの並びで積みます。PCは 04・06・07 を横並びにするだけで、順番は変えません。

  • ヘッダー（ロゴ＋カスタムする）※固定
  • FV（見出し・副文・ボタン・納期）
  • 共感3行
  • 作り方4ステップ ＋ ボタン（ここまでで離脱を止める）
  • レザー ／ 商品と価格 ／ 声
  • 不安解消 ／ FAQ
  • 最終CTA ／ フッター

スマホは画面下に「カスタムする」を追従表示（03以降で出現）

03 ／ 決めていただきたいこと

  • LPの着地点：既存のカスタム画面へ送るのか、LP内で選択まで完結させるのか
  • 訴求の主役：自分用（自分だけの一点）か、ギフト（贈り物）か。どちらを前に出すかでFVの言葉が変わります
  • 写真素材：完成品・レザーの質感・製作風景の3種は必要です。既存サイトの流用可否
  • 載せる商品：代表3〜5点をどれにするか
  • お客様の声：使えるものがあるか（無ければこのブロックは外します）

04 ／ 次のステップ

  • この構成でよければ、文言を入れた清書版ワイヤーへ
  • その後、デザイン適用 → 実装 → 公開

構成の追加・削除・順番の入れ替えは、この段階が一番やりやすいです。気になる箇所を指してください。

What Craft LP Wireframe — 構成案（第1案）／ 検討用ドキュメント