Product site layout sample

価値を、
画面の順番で
伝える。

堺打刃物を題材にした、高付加価値な製品サイトの構成見本。写真を並べるのではなく、第一印象、由来、比較、質感、相談導線の順に、買う理由を静かに積み上げる。

堺 刃文
First view · 一目で価値を置く Texture · 動かして質感を見せる CTA · 相談へ自然に落とす

LAYOUT 01 · 視線の順番

まず、売らずに
価値を置く。

高単価な工芸品は、説明量で売らない。最初に質感を見せ、次に由来を置き、最後に仕様と相談導線へ運ぶ。画面の順番そのものが、信頼をつくる。

01 — First view Product first

最初の画面では、商品を大きく、静かに置く。余白を広く取り、言葉は短く。まず「これは安くないものだ」と体で分かる状態をつくる。

02 — Context Story, not folklore

工房、土地、素材、職人の所作。背景は長く語らず、信頼の根拠として置く。文化を説明しすぎず、商品価値の下支えにする。

03 — Decision Detail to CTA

比較、仕様、手入れ、相談ボタン。購入前に必要な不安を一つずつ消し、最後は「問い合わせる」だけにする。導線は少なく、迷わせない。

LAYOUT 02 · 比較で理解させる

専門性は、
図で短く伝える。

片刃と両刃の違いのような専門情報は、長文で説明しない。まず図で見せ、次に二、三行で意味を添える。難しいことを簡単に見せるほど、ブランドの信頼は上がる。

この区画の役割は、読者に「分かった」と感じてもらうこと。売り込みではなく、判断材料を静かに渡す。

Module — comparison diagram
Copy — short, factual, restrained
Purpose — remove hesitation before inquiry

Comparison module

両刃General type
片刃Specialized type
Drag to rotate · pinch / scroll to zoom
白紙二号 · 霞 Kasumi — new, carbon 刃文 之銘 堺 刃文

LAYOUT 03 · 商品面の設計

商品面

01 3D · material switch · specification grid

商品ページでは、写真だけで質感を説明しきれない。2D の静かな見せ方と、必要な時だけ開く 3D 表示を併置する。材質の違い、経年変化、細部の仕様を、同じ画面で比較できるようにする。

Main visual
商品を画面の主役にする。余白を広く取り、背景は暗く、説明は最小に。
Texture
素材差を切り替えて見せる。言葉ではなく、表面の変化で理解させる。
Story
由来と技法は、短い文で添える。歴史を語りすぎず、価値の根拠にする。
Proof
図解、仕様、比較を置き、読者の不安を一つずつ消す。
Motion
3D は常時見せない。必要な人だけが触れる、静かな追加情報にする。
Mobile
縦画面では、商品、説明、CTA の順を崩さず、迷わない流れにする。
CTA
購入ボタンではなく、相談・見積り・導入確認へ自然に接続する。

CTA 設計

  • 高額商品ほど、即購入よりも相談導線が合う。
  • CTA は一つに絞る。見積り、相談、来店予約など、次の行動を明確にする。
  • フォームへ飛ばす前に、判断材料を十分に置く。
  • 不安を消した直後に CTA を置くと、押されやすい。
  • 朱砂色はここだけに使い、画面全体を煽らない。
Contact flow このサンプルでは、商品理解が深まった後に相談へ落とす。伝統工芸、刃物、食品、地域文化など、説明が難しい商材ほど有効な構成。

LAYOUT 04 · 展開

下層へ、
静かに広げる。

下層は商品を増やす場所ではなく、判断材料を整理する場所。必要な情報だけを三つに分け、深追いしたい人だけが進める構造にする。

構成
First-view structure
主役・余白・短い言葉01
比較
Comparison module
違いを一目で見せる02
導線
Inquiry flow
迷わせず次の行動へ03
構成メモ · Site AI
24時間の一次対応 · 自社専用AI
Layout
このページは、刃物を売るためではなく、高付加価値な製品サイトの組み立て方を見せるためのサンプルです。商品ページには、サイト内AIを常設できます。

サイト内に、自社専用AIを置く。

商品知識、FAQ、過去の問い合わせ、接客方針を読み込ませ、店や工房の言葉で答えるAIとして育てる。営業時間外も一次対応し、答えきれない質問は要点を整理して、翌営業日の人による対応へ渡します。

01 · 自社資料を学習 02 · 24時間一次返信 03 · 未回答を整理 04 · 営業時間に人が対応
Demo — site AI + human handoff