ECサイトブラッシュアップセミナー「第2回 売り上げを伸ばすためのWEBデザイン」（後編）
ご挨拶
本記事にアクセス頂きありがとうございます。
このnoteでは、三重県の県産品を販売される方々に向けて、インターネット通販（ＥＣ）による販売活動の成功に必要な考え方やスキルを発信しております。
このアカウントについて
このnoteアカウントは、三重県雇用経済部 県産品振興課『県産品ECサイト等ブラッシュアップ支援事業』にて運用されています。
三重県内の県産品を扱う事業者の皆様が、今後効果的にインターネットを活用した販売活動を進めるうえで役に立つ情報を発信していきます。
全7回の「ECサイトブラッシュアップセミナー」の第2回目は、売り上げを伸ばすためのWEBデザインの概要を前編・後編の２回に分けてご説明していきます。本ページは第2回の「後編」ですので、初めて訪問された方は「前編」もぜひご覧ください。
デザインの基礎知識（続き）
「フォント」デザインの雰囲気を決める際、非常に重要になります。フォントはたくさん種類がありますが、大きく分けて次の5つが代表的です。
① 明朝系 上品で繊細な雰囲気を出せるため、女性向けサイトは明朝系を見出しに使うことが多いです。ただ、本文も明朝系にしてしまうとちょっと読みにくくなります。
②ゴシック系 本文はゴシック系を使うと読みやすくなります。特に文字を小さく配置するときはゴシック系がおすすめです。
③筆字系
④手書き系
⑤POP系
主で使われる明朝とゴシックの見分け方ですが、明朝体は「ひげ」「ウロコ」と呼ばれる飾りがついていて縦が太くなる特徴があります。ゴシック体は、太さが均一になっていて、「ひげ」「ウロコ」がついていないという特徴があります。英文フォントで言うと、セリフ＝明朝体、サンセリフ＝ゴシック体に相当します。文字を小さくしていくと、見えやすくなるのはゴシック体です。
最近ではユニバーサルデザインフォントというものがあります。
ちょっと目が見えづらい方や、文字の判別がつきにくいという方に向けて何か発信する時に覚えておくと便利です。
フォントの基本がわかると、自社の商品やターゲットのイメージに合わせてフォントを選ぶことができます。注意点として、本文は読みやすさを確保してください。いろんなWEBサイトを見ると、本文が薄くて読みにくい、すごく細いフォントをなぜか指定してあって読みにくいものがあります。これは閲覧者が離脱してしまう原因になります。通常は①フォントの色を濃くする ②本文に明朝を使っている場合はゴシックに変更し、文字間や行間空ける だけでぐっと読みやすくなります。これだけでちょっと売上が変わるケースもあります。
「写真」写真はすごく大事です。特にネット通販は、試食や商品に触れることができず、直接商品説明を聞くこともできません。そういった場合、購入を決める消費の意思決定の約8割が写真で行われます。
商品撮影はプロに依頼しても、自分で撮影してもどちらでもOKです。
では商品撮影をプロに依頼した場合は全てお任せでよいかというと、このようなケースが出てきます。「写真は全部プロに撮ってもらったが、何かちぐはぐで揃っていない感じになってしまった。」なぜこのようなことが起こるのか。プロにせっかく撮影してもらっても、全部バラバラなオーダーをしてしまうと統一感がなくなります。同じ壁を背景に撮影する、縦なら縦・横なら横で揃える、同じような光が入る条件で撮影する、など条件を揃えることが非常に大事です。自分で撮影するという選択肢もあります。その際に大事なことは向きをまず揃えることです。縦横それからサイズをきちんと揃えます。特にWEBサイトに載せるときに、ガタツキがないようにサイズを揃えること、写真を撮るときのテイスト・光の入り方、そういったものを揃えておくだけでだいぶ違ってきます。これらを押さえて撮影にのぞんでください。
スマートフォン中心の時代では、SNSをきっかけにして新規ECサイトで購入した人の割合が高くなります。特にInstagramの世界では写真がキーポイントになりますので、写真の扱いには非常に気を使ってください。掲載する写真も、ただ物を置いて綺麗に撮るというケースもあれば、生活の中でどんなふうに使われているという提案型の写真を撮ることもあります。
昨今の傾向を踏まえると、商品写真を撮る際にはInstagramやSNSに載せた時にどんな絵になるかを考えながら撮ることも心掛けてください。
自社商品はどんな撮り方をすればユーザーに目を留めてもらえるかと悩む場合は、Instagramで同業他社の写真を見てみると参考になります。フォロワーが多い・いいねがたくさんついている・よくコメントがついている画像はどんなものかを見るとヒントが詰まっています。
PCでWEBサイトを見た時どのように視線が動くか、をヒートマップで確認すると大半が「Z」のように目線が動いています。左の方から下に段々降りてくるというケースです。ところがこれがスマートフォンになると、ほぼ写真しか見ていません。あとは少し赤い文字を見ているくらいです。ですので、写真を小さくした時にきちんと綺麗に見えるか、商品そのものが認識できるかが非常に大事です。
撮影のコツは
• パッケージから出して撮影する
• ギフト商品：送り先へ届いた状態がわかる写真
（パッケージ、ラッピング、のし紙の写真も撮影）
• 商品全体と接近したカットの撮影
• 正面、上面、側面の最低3カットは必要
です。
最近のスマートフォンは性能が良いので、少し明るいところで撮影するだけでもそれなりに良い写真が撮れます。しかし、商品によってはボディーが黒くて光が映り込んでしまったり、人の姿が映り込む場合があります。そのような場合は、物撮り用撮影キットを使用する方が綺麗に撮影できます。
ギフト商品というものは、ギフトのパッケージがかわいいから買おうということが購入動機になります。ですので、ラッピングした状態の写真もぜひ掲載してください。
商品全体と接近したカットの撮影というのも必要になります。ネット通販でいろんなものを探している時に、写真が1枚しか載ってないというケースがあります。裏から見たらどうなのか、この角度から見たらどうなのか、全然わからないことがあり、そうすると購入対象からは外れてしまいます。情報伝達するという意味での写真をきちんと加えてください。
ECサイトのレイアウトについて
ECサイトのレイアウトは大きく分けて次の2つのタイプがあります。
2カラム（サイドバーあり）
•商品点数が多い
•回遊性を高めたい
•ネットショップらしさ
1カラム（サイドバーなし）
•ビジュアル優位
•ブランディング（世界観を伝える）
•オシャレな雰囲気
ECサイトは次の5パートに分かれています。
・ヘッダー
・ナビゲーション
・メインビジュアル
・コンテンツ
・フッター
ECサイトによっては既にこのレイアウトは決まってますが、特に重要視すべきは、ナビゲーションの中のカテゴリーです。商品情報ページのカテゴリーをきちんと設定することで、閲覧者を迷わせない設計にすることが大切です。カテゴリーを整理整頓すること、タグ設定などで検索キーワードを設定できる場合はその設定をきちんとしてください。最近はトップページから順に遷移してくるのではなく、いきなりカテゴリーページに飛ぶことが多いです。
カテゴリーのイメージが伝わる写真・画像を設定することも有効です。
カテゴリーの商品一覧には「HOT」「New」のようなバッジをつけたり、売れ筋ランキングを掲載することも効果的です。商品詳細ページには必ず写真を複数枚掲載し、目立つ購入ボタンを配置しましょう。
そしてできたECサイトは必ず第3者に操作性をチェックしてもらいましょう。
実際にうまく行っているECサイトを分析することもぜひ取り組んでください。いろいろなECサイトを検証して、その良いところや改善点を探してみることもおすすめです。
最近はモーダルやポップアップウィンドウが設定できるECサイトも増えてきていますので、それらを活用することもいいと思います。
LP（ランディングページ）について
ランディングページは、実はいろんな考え方がありますが、ここで言うランディングページとは、例えばネット広告から着地させる、縦に長い広告用のホームページです。
基本は1ページ1商品で、閲覧者が下の方まで読んでいくと購入意欲が高まっるような作りになっています。皆さんがもし取り組むとすれば、自社の中でイチオシの商品やその季節のキャンペーン、「ぜひこれだけは売りたい」というときに活用すると覚えてください。目的を明確にした上で活用してください。幅広い業種に取り入れられていますが、特に化粧品や健康食品、ネットショップの販売などによく使われています。
ページの流れの一例がこちらです。
①メインビジュアル・キャッチコピー
インパクトのあるキャッチコピーやビジュアルにしましょう
②購入や申し込みへの導線ボタン
ページ内に何度も配置します
③商品やサービスの特徴を説明
④商品のメリット
メリットを解説。3つ、5つ、7つなどにまとめるとよい（選ばれる理由など）
⑤お客様の声
⑥よくある質問
⑦購入・申し込みへの導線【重要】
※最後のひと押し
ペライチを使うと簡単・低コストでLPが作成できますので、ぜひ導入を検討してみてください。