WEBsite research！ Vol.3 【ECサイト編】
こんにちは！
スタジオディテイルズのチーム4989、新卒の福邉です。
先日弊社より養老ミート本店のECサイトが公開されました！
私も少々お手伝いをさせていただいたのですが、Webサイトの種類によってデザインの視点やポイントが大きく変違うことに改めて気付かされました。中でもECサイトは「売る」という確立された目的があり、「人を動かすデザイン」とはどういったものなのだろうか、と考えさせられました。
そんな訳で今回はECサイトに焦点を当てたレビューを投稿していこうと思います。Vol.3です！
ECサイトとは
“ECサイトとは、ネット上で実際に商品やサービスを直接販売できるサイトのこと。商品やサービスの購入に繋げて売上をアップさせることが目的”
出展：ホームページの9つの種類／それぞれの用途・目的を徹底解説
No.1 TOSACO
［業界］ 食品
［商品数］ 15～30
［イメージキーワード］
ビール／高知／絵の具／イラスト／かわいい／角丸／丸ゴシック
［ポリシー・コンセプト］
『家族や仲間と一緒に乾杯できるビールをつくり、いつもの食卓に、たくさんの幸せを届けたい。家族や仲間が一緒に乾杯することで、一緒にすごす時間を、さらに幸せなものにしたい。』
［予想されるターゲット］
・地域のビールに興味がある人。
・高知出身の人。高知に興味がある人。
・お土産やお祝いの品に悩んでいる人。
［使用フォント］
・秀英にじみ丸ゴシック B
・中ゴシックBBB
-----------------------------
［ファーストビュー］
・左右に切れるようにイラストを配置することで画面に広がりを出している。同時に他ページとの差別化をしている。
・季節に合ったおすすめ商品をファーストビューに入れることで訪れた人へ購買を促すデザインになっている。
［Top］
・素敵なファーストビューで興味をもたせた後、「これはどんなビールなのだろう？」という疑問を最初に解決するように次のスクロールで製品の特徴を簡潔に説明しているのが良いと思った。
・ラインナップをカルーセル（画像をスライドして表示させること）で表すことで下にスクロールしやすいようにしている。
・商品をメインに紹介していおり、Topだけでおおよその商品はつかめるようになっている。ラインナップ（ビール全商品）→セット商品→限定商品という流れになっており、商品単体で興味をもたせた後にセット商品を紹介する流れ。
［ラインナップ］
・写真と文字だけでは商品の差別化をしにくいところを材料のイラストを加えることで差を出している。（パッケージに大きな差が無い商品の場合どう商品を差別化して見せるかが大切？）また、味のイメージをしやすくただ商品写真が配置されているよりも美味しそうな印象を受ける。
・カテゴリごと並べられており、スクロールだけで全ての商品を見ることができる。カードのように写真・名前・見出し・値段の描かれた製品が並べられており詳細ページに飛ばなくてもどんな商品があるのかが一目でわかるようになっている。
・地域コラボビールは色で商品が分けられているなどカテゴリごとに表現が統一されている。違うカテゴリの商品であることが直感的にわかる。
［商品詳細］
・商品説明等は単色のテキストでまとめられており、シンプルでまとまりがある。文章量的にも読みやすく、商品を一言で表す見出しが入っているのが良い。（細かい文章を読まなくてもどんな製品なのかがわかる。）
・料理と合わせた場合の食べ方が書かれており、買ってからビールを楽しむ姿を想像しやすい。料理との組み合わせによってはそれだけで購入したくなるから大切。料理を含めたビールの写真があるともっとよかったのかもしれない。
［共通・他］
・プルダウンメニューの商品一覧は一緒に写真が入っており、ぱっと見で項目を選ぶことができる。
・イラストが動いている。派手ではないが明るくて楽しげなサイトだと感じる。
・ホバーすると文字の色が変化したり、矢印が動くなど、些細な動きの中に見やすくなる工夫がされている。
・麦のイラストで区切ってありと、流れを途切れさせることなく情報をまとめて表示している。区切られていることで内容（項目）が変わったことがわかる。余白があっても納得する。
［スマートフォン］
・PC版に比べてみ使いやすさを重視してまとめられているように思う。ラインナップは全画面の中で区切られており、タップしやすい。
No.2 SISI
［業界］ 美容・化粧品
［商品数］ 3
［イメージキーワード］
美容／スキンケア／パッケージ／グラフィカル／タイポグラフィー
［ポリシー・コンセプト］
『肌を思う、私を思う』
［予想されるターゲット］
・肌に悩みを抱える社会人。
・自分を綺麗に保つことを大切にしている人。
［使用フォント］
・SS Soil
-----------------------------
［ファーストビュー］
・商品をグラフィカルに表現したビジュアルが印象的。美容や化粧品に興味を持つ人はオシャレなものに対して感度が高い人が多い。そのため情報で押すのではなく、ビジュアルのクオリティの高さで訪れた人を引き込み、スクロールさせることに繋げているのではと感じた。
［Top（商品一覧）］
・はじめに3つの商品が紹介されている。どんな商品があるのかすぐに理解できると同時に、おしゃれなパッケージやデザインに惹かれ詳細ページに移りやすい流れになっている。扱っている商品数が少ないからこその見せ方だと感じた。
・商品それぞれテーマカラーが決まっており、そのカラーを生かしたスタイリッシュなデザイン。アクセントとなるモーションが入っておりアイコンとなっている。
・商品が表示される際のモーションはとてもならかで水が染み渡っていくようなイメージ。
［商品詳細］
・テーマカラーを生かしたまとまりのあるデザイン。テキストの中でも値段と右下の購入ボタンにはテーマカラーが使用されており視認性に優れていると同時に、画面の見え方のバランスを整えていると感じた。
・定期便のセールスポイントや数字には、ロゴやパッケージに見られる線で表現した円を使用しており、まとまって見える。
・スクロールすると最後に改めて購入を勧める構成になっており、購入を検討する場面を多く組み込んでいる・右下には常に値段と購入ボタンが表示されており、購入を決めたタイミングですぐに購入画面に進むことができる。
［共通・他］
・全体として写真の見せ方が魅力的。このサイトにおける商品の強みは写真映えが良く印象に残りやすいことではないかと思った。
・レウアウトに変化をつけ、視点を動かすことでシンプ且つ飽きのない画面にしている。
［スマートフォン］
・全体的に写真を大きく見せる構成になっている。インパクトが強い。
・商品詳細ページの購入ボタンはPC版と同様、スクロールしても表示されるようになっている。より縦長のサイトになっているため購入に進みやすい。また、画面の中での良いアクセントとなっている。
感想・学び
今回、業界や取扱商品数の違う2つのECサイトについて書かせていただきました。両サイトも特徴を活かした素敵なデザインで、隅々まで見てしまいました…。
改めてサイトを見比べると商品数によって一覧の見せ方が大きく違ってくることがわかります。また、魅力的に感じるECサイトは「ファーストビューで商品やサイトのアピールができていること」と「購入するまでの導線がわかりやすいこと」の二つが前提としてクリアできていると感じました。それをクリアした上でどう魅力を伝えていくかで良いサイトになるか否かが決まるのではと思いました。
自分に足りないのはとにかく経験と知識だと思います。様々な発見ができるように来週以降も何か一つテーマを決めてリサーチしていこうと思います！最後まで読んでいただきありがとうございました。