小さなブランドが今すぐに使える詳細ページの9段階構造
目次 ➖
知らない人があなたをどこかに連れて行こうとしています。
あなたが道を歩いていたら誰か知らない人が話しをかけてきました。
着ている服はボロボロで帽子とマスクで顔は見えない知らない人。
この人があなたをどこかに連れて行こうとしています。
「本当においしいものをこちそうしますのでついてきて。」と言っています。
「この道を渡るとすぐあそこに美味しいとろろがあるから、一緒に行きましょう。」と言っています。
向こう側を見てみると、そこには空いている小さな食堂が見えます。
あなたはこの人について一緒にお店にに行きますか？
（1）ついて行く
（2）ついて行かない
知らない人と一緒にお店に行くと答えた人は、本当に勇気のある人だと思います。
ほとんどの人は無料で食べられると言われても「誰か知らないしなぜ行く？」、「何が起こるか分からないし、怖い」と言うでしょう。
最近は外食をする際に、まずはスマホでお店を調べて、メニューをみて行く。
食べた後はレビューまで残す。この流れにとても慣れていると思います。
この「一般的な流れ」が習慣のように身についています。上記に述べた状況は、一般的な流れとは遠いです。
ここで話そうとしている商品詳細ページも同じです。
ところですが、多くの販売者、デザイナーの方々がこの部分を見落としている場合がたまにあります。
あるいは分かってても見逃してしまってる場合もあります。
いつの間にか自分が帽子を深く押して被って、ボロボロの服を着ている怪しい人になっているかも…
これまで多くのサービスページ、詳細ページを制作しました。
ネットで自社商品を販売する会社の商品詳細ページから大手企業のサービスページまで様々な制作に手かけました。
また、直接商品を企画して商品販売までした経験もあります。この時は大きな金額ではありませんが、広告費用はほとんどかけずに毎月の売上が3倍ずつ上昇した経験をしました。
デザイナーとしてディレクターとして、または販売者としての経験を元に小さなブランドが今すぐに使える詳細ページの構造をお伝えします。
この記事はこんな方におすすめ
この記事では「詳細ページ」の基本的な構造について説明します。下記のような方におすすめです。
- 商品(サービス)はちゃっと作ったけど、どういう説明すればいいのか分からない。
- 詳細ページを作ってほしいと依頼されたけどもらったのは商品、サービスの詳細だけ。
- 詳細ページを作ったが、よくできているのか不安。
この記事は理論的な内容より、すぐに使える基本的な内容です。
基本的な内容ですので、「当たり前のことじゃないか。」と思う方もいるかもしれません。
しかし、小さな企業やブランドが基本的な構造を知ることでより効果的な成果を出せる詳細ページを作れるようになると思うので、ぜひ参考にしてください。
商品、サービスを販売するのに必要な2つ
それは流入と転換です。本当に重要で基本的なことですが、こちらについて少し説明します。
流入
流入とは、ユーザーが商品・サービスのページに入ってくることを言います。
商品・サービス（以下、商品に統一します。）を検索すると、何十万個の商品が出て来ます。
その中から目に入ってクリックしたくなるサムネイル（画像）がありますね。
「クリックしたくなる」というのを「流入率が高い」と言います。
転換
転換は購入に転換されることを言います。
ユーザーは見たページ全ての商品を購入するわけではありません。
ページを見て購入する行動に移る確率、これを転換率(CVR)と言います。
販売は流入率も高くて転換率（ユーザーが説得する率）も高いときに起きます。
ユーザが商品を購入するまでのプロセスを分けることができれば、どの部分を改善すれば良いのかより具体的に計画を立つことができます。商品を購入するまでのプロセスをもっと詳しく説明することもできますが、一番簡単な形で説明する上記の画像のような感じになります。
この記事で説明するの詳細ページの制作なので、中心になる内容は流入より転換に近いです。
転換は基本的に流入がなければ起こりません。（ページに入って来なければ、販売は起こらないので。）
順番的には流入が先ですが、キーワード、サムネイルなど流入に関する内容は別の記事でお伝えします。
もう一つ、知っておけばいいこと。
「セールスファネル（Sales funnel）：セールス活動の漏斗（ろうと）」です。
セールスファネル（Sales funnel）
ユーザーが商品を購入するまでのプロセスを説明する概念でセールスファネルはマーケティング、セールス分野で昔から使われています。
認知（見て）、興味（興味を持って）、欲望（欲しくなって）、行動（購入する）
このように大きく4つで分けれます。
商品をネットのどこかで見て、「これは何？」と興味が湧いて検索します。ここからLPの内容を読だりします。そこで「これよかったですよ！」というレビューを見て 「私も買おうかな！」と行動に移るのです。
最近は商品を売り出す方法が非常に多く、セールスファンネルで消費者を予測するのは難しいと言う方もいますが、ここでは「こんな概念があるんだ」くらいで読んでください。
流入経路(媒体、SNSなど..)を分けてセールスファンネルを解釈しているところも多いですので特定の流入経路から販売、サービスの広告を開始しよう考えている方は、こういう内容を検索してみるのも良いと思います。
Facebookのセールスファネルはどのように見えますか？
販売が遅い時期にツイートする内容は次のとおりです
https://www.affde.com/ja/twitter-sales-slow-period.html
詳細ページは、どんな分野の商品なのか（商品のカテゴリ）、どのような媒体に載せるのかによって構造が変わることもあります。
ここでは最もよく使われる基本的な構造について説明します。少し長くなりますが、最後まで読んでいただけると、きっと詳細ページ製作に役立つと思います。
Q. こんな内容までデザイナーが知っておかないとダメなんですか？
A. 小さいブランドほどデザインの環境は頻繁に変わります。
もちろん、大きい規模の企業やブランドではディレクター、マーケター、コピーライター、エンジニアなどさまざまな分野の専門家と一緒にチームを組んで制作します。また、社内のデザインシステムに従って（またはテンプレートを使って）作業するのでデザイナーの好みで戦略がぶれることは少ないので、必要ないと思うかもしれません。
(ここまでは分かってなくても仕事はできるかもしれませんが、説得力のあるデザインをするためにはこういうのも考えるべきだと思います。)
でも小さなブランド、企業ではこういったシステムが構築できていないことが多いので商品の詳細だけ(商品のスペックのみ)提供されたりします。こういう時、デザイナーはAからZまで全てを把握してやらなければなりません。
戦略がないデザインは説得力がないのでユーザーから購入したい気持ちを起こすことは難しいです。
ここで、セールスファネルの概念を知っておけば、デザインの目的、方向性を決めることができるのて、デザイナーにとっては一つのガイドラインになってくれるでしょう。
また、デザインの個性に片寄るのではなく、商品を使うユーザーの観点から見ることができるのです。
「この部分でユーザーは迷わうかも。」と詳細ページを客観的に把握することができると思います。
結論、ページに流入されたユーザーが購入まで至るためには、
どうすれば良いのかを改善策を生み出せることができます。
さて、最初に戻って、見知らぬ人が紹介してくれた無料で食べ物をくれるお店の事例と
ユーザーを迷わす詳細ページのデザインを比較してみます。
一度も見たことのないブランド、企業（知らない人）が、商品を勧める。
デザインは何だかはっきりせず（着ている服はボロボロで）、提供元がどこなのかも分からない（帽子とマスクで顔は見えない）。ページは1+1キャンペーンをやっているが（おいしい食べ物を無料で贈ろうとする）、 商品を購入した人はなさそうだ（空いている）。
ここで重要なのは、自分が作ったページが上記の状況かを認識することです。
実はみんなちゃんと見ていない。
詳細ページの一番の目的は購入を起こすことです。
ページに興味を持たせて滞在時間を増やす、コンテンツを読んでもらって納得して購入するようにする。これが一番大事です。研究によると、人は時間を長く使うものに愛情が湧くと言います。自分が使った時間が無駄だったと思いたくないので..
しかし、多くの人は詳細ページをちゃんと最後まで見ていないです。見る時間がない。
PCやスマホにはたくさんの面白いものがあって、通知もいっぱいくるので集中できないです。
詳細ページに入ってからLINEが来るとすぐ離脱する..そんな環境なのです。多分、このブログの記事も最後まで読む方は少ないでしょう。
じゃあ、どうすれば良い？
ユーザーの疑いを解消してあげるのです。
よく知られているブランド、企業の商品はみんながすでに知っている。でも小さなブランド、企業は？
初めて見たブランド、初めて見た商品なので、
「あなたの時間をここに使って大丈夫ですよ！」思わさせなければなりません。
疑いを解消する構造9段階は次の通りです。
疑いを解消するページの構造 9段階
この構造で絶対にやらなければならないということではありません。
分野のカテゴリーや掲載する媒体によって戦略が違います。そして、詳細ページにも流行りがあって構造も少しずつ変わります。ここでは最も基本的な内容で構成組んでいます。初めてで「どうすれば良いのか全然分からない」と思う方はこの順番にすれば楽だと思います。
1. 販売の実績（もしかしてこれ買うの私だけ？）
あるお店のすごい行列を見たら「あのお店は行っても大丈夫かも。」と思いませんか？
すでに多くの人々が並んでいるので安心できる、美味しいのに間違いないと。
ネットで物を買って失敗した経験はみんなあると思います。
届いた商品が思ったのと全然違ったり、配送がすごく遅れてたり、新品のはずのものがギスだらけだったり..
色々失敗経験があると思います。
ユーザーは多くの人が選んだ商品なのかについて確認したいです。
これは、ユーザーが最も大事に思う部分の一つです。
それでは販売の実績をどのように見せれば良いでしょうか？
2. 実際に購入されたお客様のレビュー
3. 商品モニターまたはインフルエンサー、セレブのレビュー
重要なのは、流入されたユーザーが空いているお店だと思わないように、販売の実績をみせるのです。
ユーザーは購入に失敗したくないのです。
行動分析をしてみるとページに流入してからレビューだけを見て購入するかどうかを決めるユーザーが多いことが分かります。レビューをサイトの上部に位置できる仕組みでなければ、ページの内で納得できる部分に配置したほうが良いです。
また、実際に購入したユーザーの声を動画で載せたりするのも良い方法です。商品によっては商品を使って変化された姿を載せることもユーザーに説得力ある方法です。
2. 商品のサポート（これ買ったらちゃんと届く？）
「商品をちゃんとサポートしている」というところをアピールしなければなりません。
連絡、サポートに関する内容をページの分かりやすい場所に入れましょう。
また、シンプルで分かりやすいデザインは自然に「カスタマセンターがよく運営されている」と印象を与えてくれます。
具体的にどんな内容？
2. 商品の検収について
3. ブランド、企業の情報（電話番号、位置など）
この内容は商品、サービスの特性によって変わる部分です。
例えば、 野菜、果物のような商品を販売するとしたら、配送はとても大事です。
いつ届くのか配送日指定はできるのか…など。配送について詳しくページの上部に記載したほうが良いです。
早く届くのかどうかで購入を決めるユーザーも多いです。
また、いつ頃届くのか問い合わせしてくるユーザーに対してお客様センターの業務コストも減らせるので非常に重要なところだと思います。
3. 保証、認証（本当に大丈夫？）
この部分は、 信頼できる機関の保証、認証（レバレッジ）が必要です。
1. A/S保証内容
2. 機関の証明書、マーク
3. 特許、著作権など
食品を販売する際、「有機JASマーク」など認められた事業者だけがつけられるこういうマークはユーザーに信頼を与えます。小さい企業の場合、こういうやって認められたマークがあっても目立たないデザインをしていて販売に繋がらないので残念なことも多くです。認められることも大事ですが、認められたことを「知らせる」ことも大事です。
そして、A/S期間など保証期間があれば、上部に記載してユーザーの疑いを無くしましょう。大手企業の商品を利用する理由は耐久性がよくて、保証できるというところが大きいです。保証期間を大きく表示することで信頼度も上がるでしょう。
4.メインビジュアル（今買おうとしてるのはどんなもの？）
メインビジュアルを見るとどんな商品かを判断します。
例えば、キャンプ用品を売る場合は実際にキャンプをしているイメージを演出して撮影した方がより効果的です。
多くの方が白抜きで商品画像を載せますが、ユーザーは商品を使ってどんな「利点」があるのか考えながら見るのでより効果的だと思います。
「これ買ったら、今週末のキャンプでめっちゃ便利そう！」、「これ映えそうだな！こんな感じで撮ったら良さそう！」など、ユーザーが実際に使って満足するイメージをメインで構成した方が良いです。
第一印象でその商品のイメージが決まることが多いのでメインビジュアルは一番力入れるところでもあります。
写真や画像の構成については、非常に多い方法論がありますが、この部分は別の記事で話します。
簡単に言うと媒体別でも適切な画像の形態があり、モバイル最適化は必ずしなければならないということがポイントです。
5. アプローチ（この商品、私に本当に必要？）
ユーザーは自分が持っている問題を解決できるかに注目します。(キャンペーンなどで得られる特典より..)
ユーザーに商品を使ってどんな問題が解決できるのか説明しましょう。例えば、クレンジングフォームを販売するメーカーなら「毎朝、ニキビで悩んでいませんか。」など、ユーザーが悩んでいるところを具体的で分かりやすいキャッチコピーで伝えるのです。感性と理性の両方を考えて書いたらより良いです。「あ、そういえばこの問題があってすごく面倒臭かった！」と思わせるように。
詳細ページに入ってきた人は抱いている問題の大きさは違うと思いますが、結局、商品が必要だから入ってきたのです。（誤ってクリックした場合でなければ。）
「これが私に必要かな？」とは思うけど具体的に「こんなとことが問題だった！」までは考えていないです。その人の心を読んだように具体的な例で見せましょう。その問題が発生した状況をイメージで見せても効果的です。ここで大事なのは「まるで、私の話だ。」と思わせることです。
6. 詳細画像（もっと詳しく知りたい。）
商品の仕様、詳細を分かるように詳細画像を載せましょう。
商品の各部分がどのような機能をしているのかを表現できれば良いです。ここでもう一つのポイントは商品を説明する時、スペックだけに集中しないことです。
電化製品を販売する場合、難しい用語を使って説明しているページも少なくありません。
難しい用語よりその商品をどのような場面で使えるのかを説明した方が良いです。
例えば、ドライヤーの熱がどれほど熱いのか、どれくらい風が強いのかを「数字」で示すより、髪を乾かす時間がどれくらい短縮できたか..これで出勤時間に焦ることがなく準備できた..などを載せた方がはるかに良いと思います。
ポイントは商品を使うと「あなたの人生がこのように変わります。」をポジティブに表現することです。
「本当にこれは必要な機能を持っているわ！これは合理的な消費だ。」と思うように。
7. ブランドストーリー（このブランド、信用できる？)
小さいブランドほど、この部分で強みを出すことができます。
1. このブランドを始めるきっかけ
2. 代表個人の履歴、経験談
3. 所在地、工場の生産環境など
詳細ページはブランドを表現するのに最適な空間です。この部分は多くのデザイナーの方々が見逃している部分でもあります。ブランドについてシンプルにロゴだけを載せたりして終わらせる場合も多く見てきたので。
統計分析結果によると、ユーザーは一日に数千個のブランドと出会います。
一日の終わりにユーザーの記憶に残るブランドは何個あるでしょう。自分がきれいと思ったロゴデザインがユーザーの記憶には残らないかもしれません。残念ながら、小さい企業ほど記憶には残らないです。
だから、「ブランド」が持っているストーリーを話しましょう。
ブランドがどんなものを作って、どんなプロセスで作っているのか。この内容を簡単に、そして暖かくイメージで表現しましょう。デザインスペースが限られているなら、リンクで入れてもいいと思います。
何も言わないと誰もブランドの価値に共感できません。
8. オファー（今買わなくても良くない？）
ここに購入ボタンを入れるのです。
ここまでの内容でユーザーが納得しているのであれば、ユーザーはもう購入する準備ができました。
しかし、しばらく悩みます。
「もうちょっと違うのを見てみようかな？」
頻繁にセールをするブランドは普段、あんまり売れないです。
少し待ってば、割引されるし、同じ商品を高く買いたくないからです。
ユーザーに今買わないといけない理由を作ってあげましょう。
1. 価格割引
2. 追加の特典
3. 速い配達
期間限定のセール価格、1+1プロモーション、今買うと明日には届く..などこういうキャンペーンの内容です。上記に述べた内容以外でもベネフィットと思わせる企画をしてみることができると思います。
ユーザーが商品をカートに入れて買うのを待つだけではダメなんです。
購入が遅くなるほど、ユーザーを競争の商品に奪われる可能性が高いです。
こういう理由で、詳細ページによってはこの部分を一番上段に載せることもあります。
今すぐ買わなければならない理由を作りましょう。
9. 詳細情報（もう一度確認してみよう。）
1. 製品詳細仕様
2. カスタマーセンター
3. 製品交換または払い戻し
4. 配送関連のお知らせ
商品の詳細、仕様の情報をまとめて表示しましょう。
ユーザーが大きさ、重さはどうなのか、長く使える材料で作られたものなのか確認できる部分です。
注文にオプションがある場合はもう一度オプションについて説明しても良いでしょう。
商品の交換、払い戻しの基準、配送についてよく整理されたらユーザーは購入します 。トラブルがある場合、ちゃんと対応してくれるという信じられるので。
終わりに
ここまで、商品詳細ページの9段階を記載してみました。
上記を参考するとより良いページを作り出すことができると思います。
最後に、この記事で記載されている内容通りに絶対やらなければならないというわけではないので。
小さなブランドがこの内容をすべて入れることは難しい部分もあると思います。入れられる内容は入れて変更したい部分は変更して自分たちだけのページを作ってみてください。
ユーザーの滞在時間が短くなると成果出ないので、最後まで見たくなるように作ることが大事です。モバイルは特に離脱しやすい環境なので、ユーザーが購入ボタンを押すようにどうすれば良いのかブランドに合う戦略を立ててみてください。
何よりも重要なのは一度完成してみること。
完成して、読んでみながら自分の商品に合わせて調整しましょう。頭の中で想像するだけではなく、実際に作ってみることで、デザインが良くなるのを感じられると思います。
全く真っ白な状況でデザインを始めるのが簡単なことではありません。どこかで悩んでいる方々に役立つことを願いながら書いてみたので少し長くなりました。自分がデザインしたページで売上が上がるという経験は今後も大きな力になると思います。
