このコラムをPDF形式でダウンロードする

EC基礎講座（全11回）
第8回：お客様が買う気になる、コンテンツの工夫とは？（前編）
～アパレル編～
執筆：杉浦 治（一般財団法人 ネットショップ能力認定機構）
第7回では、お客様の心理や習慣に合わせたページ設計の重要性をお話いたしました。しかし、良い設計ができても、良
いコンテンツ（画像や文字、動画といった情報）を載せなければ、伝えたい事が伝わらないのも事実です。ここでは、売れ
ているネットショップの商品ページ事例を挙げて、良質なコンテンツにする工夫を解説いたします。
[後編] 食品編 はこちら >>
商品ページでの表示位置と配置されるコンテンツの注意点
商品ページの位置におけるお客様の心理とコンテンツに関する注意点は、次の通りです。
1. ページの上部、ファーストビュー
ページを開けたら、最初に目に飛び込んでくる情報です。商品の魅力を一瞬で本能に訴える必要があります。お客様
はファーストビューを見て直感的に、「読みたいページか？」を判断します。3秒以内に、前のページに「戻る」か、その
ページを「読み込む」かを決めています。
2. ファーストビューの下～中段
ファーストビューで感じた直感的な印象（商品の魅力）を、詳細に解説したり、魅力の証拠を示したりと、論理的に解
説していきます。大量かつ詳細な情報を、斜め読みしても分かるように見やすくデザインします。
3. 中段～下段
カタログに記載されているような情報を網羅します。法令で表記が義務づけられている情報や、お客様にとってのマ
イナス情報なども漏れなく記載します。
4. 最下段
ショップのサービスや組織に対する信頼、安心のために必要な情報を記載します。ネットショップが伝えるべき標準情
報を漏れなく記載します。
1. ページの上部、ファーストビュー
（画像提供：アンジェ Web Shop）
このケースでは、使用シーンを想起させるコーディネート写真にキャッチコピーを重ねた画像をメインビジュアルとしてい
ます。着用イメージと特徴を同時に伝えるためです。写真だけでは着用しているどの商品のページか？が不明ですが、キャッ
チコピーにある「カーデ」の文字で、カーディガンの商品ページであることを明確にしています。もちろん画像の上に、
という商品タイトルがありますので、間違えるはずがないという意見もあるでしょうが、この例ではメインビジュアルだけを
見た、直感的な思い込みもカバーできています。
「定番」という単語は、「毎日着る」「しょっちゅう着る」「さまざまな組み合わせで頻繁に使える」「さまざまなシーンで使
える」という印象を与えていて、「最愛」という単語がそれをポジティブに後押ししています。「定番」に加えて、「上質」と
いう特徴を、イチオシの売りにしているのが分かります。
画像の上の説明文に目がいった場合は、最初に出てくるカタカナ文字の「シンプルな」が印象に残りやすいですね。この
ように、どんな単語を使うか？どの漢字を使うか？漢字を使うか？カタカナを使うか？といった点も工夫のしどころになり
ます。
モデルさんを屋外で撮影した写真は被写界深度（カメラのピントが合う範囲）を浅くして、衣服に焦点をあて、背景をボ
カすことで見て欲しい部分を明確にしています。また、モデルの目を構図から外しているのは、人物による主張を避ける
ためです。ちなみに、下の写真はこの点が全く逆で、人物（オーナー）による主張、想いを前面に出そうとしているのです。
さらに、下記の写真では被写界深度を深くしており、背景の「茶畑」にも焦点が合っていますね。
（画像提供：京都おぶぶ茶苑）
2. ファーストビューの下～中段
ファーストビューで伝わった印象は、「上質」「シンプル」そして「定番（最愛）」ですので、スクロールすると目に入ってくる
のは、これらの点の詳細解説になります。
（画像提供：アンジェ Web Shop）
「上質」という単語を「いつか着てみたかった」「特別」「リッチ」「超上質」と展開し、これら類義の言葉で文章を構成して
います。ここでは、特徴を具体的に解説する必要があるため、上質なカーディガンである理由を「3種類の素材」を使って
いるからだと切り出し、それぞれの素材を、認知されている高級素材名称（メリノウール、シルク、カシミヤ）の前に「最高
品質」「最高級品」「繊維の宝石」という装飾語を追加した表現で紹介しています。最後に生地の生産者を公表して、信
頼感も演出していますね。
「シンプル」という特徴については、下記のようにポイント部分をマップのようにレイアウトし、それぞれ慎重に単語を選ん
でいます。
（画像提供：アンジェ Web Shop）
「定番（最愛）」についてはカラーバリエーションとコーディネート例で具体化しています。画像の端に小さく、モデルさん
の身長と体重を記載していて、少しでもお客様が着た時のイメージをし易いように工夫しています。
（画像提供：アンジェ Web Shop）
屋内の写真は、右側に窓がある設定になっていますが、実際は人工の照明で撮影しているようです。太陽光がやわらか
く差し込んでいる様子をイメージさせ、商品の質感が伝わる写真を撮るために、ディフューザーを使用して照明を面光源
にしています。
モデルさんの左側にはレフ板を置いて、右からの光を反射させ、左側にできる濃い影を消しています。
3. 中段～下段
申込ボタンの下側には、アパレルに必須の表記を掲載しています。伝えたい内容の性質から、表形式で見た目を整え、
小さめの文字で整然と表示し、端的な表現を使っています。
（画像提供：アンジェ Web Shop）
別ページにリンクしていますが、アパレルではサイズに関する情報も重要なコンテンツです。試着したときに気になるよう
な部分を具体的に伝えられるように、十分な情報を提供しています。
（画像提供：アンジェ Web Shop）
4. 最下段
最下部にはフッターがあり、必要な情報を掲載していますが、表や円グラフ、クレジットカードのロゴなどを活用して見や
すくなる工夫をしています。
（画像提供：アンジェ Web Shop）
同じ種類の商品を扱う優良ショップを観察（ベンチマーク）することは、コンテンツの工夫をするために大変に役立ちます。
様々な視点で細かくチェックし、まずは真似してみるとよいでしょう。しかし、ネットショップのコンテンツに正解があるわけ
ではないというのも事実です。優良ショップも、新商品では思ったように購入率が上がらないケースが多く見られます。
では、優良ショップはどのように対処しているのでしょうか。実は、短い時間に評価と改善のサイクルをくり返して、ページ
のチューニングをしているのです。このチューニング作業を、継続して何度も行うことが重要なポイントです。もしも、写真
撮影や画像の加工、キャッチコピーのアイディア出しなどを、プロの外注業者だけに頼っていたらどうなるでしょうか。繰
り返し修正する分だけコストが上がってしまって、膨大な支出になってしまいますね。ですから、これらのことをできるだけ
自前ですることが大切なのです。
写真であれば、少なくとも絵コンテを描いてカメラマンに指示するとか、キャッチコピーであれば、単語の案を自分でたく
さん出しておくとか、そういった努力が成果に繋がるのです。
是非、ご自身もチャレンジしてみてください。
杉浦 治（すぎうら・おさむ）
一般財団法人ネットショップ能力認定機構　理事
2002年デジタルハリウッド株式会社取締役に就任。IT業界における経営スペシャリスト育成やEC事業者向け
研修開発を行う。2010年4月「ネットショップ能力認定機構」設立。ネットショップ
運営能力を測る「ネットショップ検定」を主催し、自ら講師として全国でセミナーを実施。
Copyright 2017 はじめてＷＥＢ All Rights Reserved.
http://hajimeteweb.jp/