こんにちは！
スタジオディテイルズのチーム4989、新卒の福邉です。
ディテイルズに入社して約５ヶ月が経ちました！暑い日が続きますが名古屋オフィスはとても涼しく快適な毎日を過ごしています。
さて、前回に引き続きECサイトについてですが、今回は中でもShopifyを用いたサイトに焦点を当ててレビューを書いていきます。Vol.4です！

Shopifyとは？

Shopifyはカナダ発・世界最大のECサイト制作プラットフォーム。
「シンプルで高機能」なことを理由に世界中に広まり、今では世界175ヶ国、60万以上の店舗で利用されている。日本でもShopifyを利用する企業が増えており、今、ECサイト制作の流行の最先端にある注目のサービス。
出展： https://ec-recipe.com/what-is-shopify-2018/

No.1  SENN

［業界］　美容・化粧品
［イメージキーワード］
化粧水／高級感／余白／和／横長の写真
［ポリシー・コンセプト］
『「余白を生ける」きっかけを提供』
［予想されるターゲット］
・肌を大切に思う人
・オシャレなパッケージの製品が好きな人
・20代〜30代 女性
［使用フォント］
・din-2014
・Hiragino Mincho ProN W3

・マウスポインターが小さな丸になっている。表現画像にかかると色が反転し、浮遊感や透け感を感じさせる。
・見出しやGNにはDINを使用。字間を広く開けることで無駄のない洗練された印象を与える。また、DINは直線的なフォントであるため、文字の大きさが小さくても可読性とブランドイメージを両立させることができる。
・霞みがかった写真を使用することで澄み渡るような印象を与えることができる。肌触りが良さそうなイメージ。
・商品を大きく強く見せるのではなく、生花の写真を使用するなどしてブランドイメージを強くすることで商品の魅力を高めている。商品のイメージ付やファンの獲得を図る。
・シンプルな構成要素でできているが、モーションやスクロール、ホバー時の動作など細部にまで工夫が凝らされており丁寧な印象を受ける。
→商品の質も良さそう、という信頼感につながる。
・【商品詳細】天然由来成分の説明では、繊細さや優しさといった印象をつけたいからペン画のような細かいイラストで表現しているのではと思った。
・商品ごとにページの見せ方が異なり、抱くイメージも変わってくる。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　それぞれに特別感を出したかったのでは。

No.2  土屋鞄製造所

［業界］　雑貨・ファッション
［イメージキーワード］
革小物／鞄／革／ものづくり／温もり／愛着／上質
［ポリシー・コンセプト］
『時間を超えて、愛されるものを。』
［予想されるターゲット］
・良いものを長く使いたい人
・革製品が好きな人
・大切な人へ贈るギフトを探している人
・20代後半〜50代
［使用フォント］
・Minion Pro（見出し）
・DNP Shuei Mincho Pr6N（見出し）
・Raleway
・DNP Shuei Gothic Gin Std

・プロダクトの項目ごとにアイコンが付いているのがわかりやすい。直感的に選ぶことができ目的の商品にたどり着きやすい。
・写真は商品をメインにした写真が多い。一品に対する自信とこだわりが感じられる。
・欧文の見出し文字に使用しているMinionは柔らかく、優しい曲線が特徴。温もりを感じさせるような上質な印象にしたく使用したのではと思った。
また、テキストはグレートーンで統一されており全体的に優しい印象を与えると同時に写真の色をより際立たせている。
・【商品一覧】商品を切り抜いて並べることでより大きく見せている。同じ様な商品がたくさん並んでいても形状の違いがわかりやすく、デザインを伝えるのに効果的だと感じた。ホバーするとカラーバリエーションを見ることができる。最小限の動作で多くの商品を見ることができる。
・【商品詳細】実際に使用している写真やオシャレなイメージ写真が最初に目に入り、スクロールすると機能を紹介する画像になる。KVで興味を持たせた後に、自分視点に置き換えて考えることができる流れになっており購入意欲を沸かせるのに有効だと感じた。また、フッター部分が常に購入ボタンになっており購入するまでの導線がスムーズ。
・【商品詳細】商品ごとに購入者のレビューを見ることができる。良い評価であれば購入を検討している人に安心感を与えることができるとともに、親近感を与えることができるため効果的だと感じた。
・【ギフト選び】贈る相手や、カラー、価格帯などの項目で商品が紹介されている。様々な商品の中選ぶ基準ができるため購入を検討している人に優しい。項目で分かれていることによってサイト内で迷う時間を減らしている。

No.3  MURACO

［業界］　雑貨・アウトドア
［イメージキーワード］
アウトドア／プロダクト／工業製品／スタイリッシュ／モノクロ
［ポリシー・コンセプト］
『アウトドアを楽しむ全ての⼈へ、新しい選択を。』
［予想されるターゲット］
・アウトドアが好きな人（国内外問わず）
・スタイリッシュなデザインの製品に興味がある人
・20代後半〜30代 男性
［使用フォント］
・neue-haas-grotesk-display
・DNP Shuei Gothic Gin Std

・最初はただのブランドサイトのように見えるが、スクロールしてからのECサイトへ移る流れがスムーズ。TOPの商品紹介部分をそのままプルダウンメニューでも使用することで印象付けをするとともにECサイトであることを強調しているように感じた。
・使用しているフォントは両方とも安定感があり落ち着いた印象を与えるフォント。高い技術を持って作られる製品への信頼や安心感を表現するために使用しているのではと思った。
・現時点では英語対応しているわけではないが、メニュー項目や商品名がデフォルトで英語になっており、海外のユーザーもターゲットにしているのではと感じた。（←Shopifyの強みですね。）
【トップ】写真を全画面で使用。ナビを左にまとめ、線で区切ることでグループ化させ見やすくしている。広さを出しつつ、締りのある画面にしたい時有効だと感じた。
・【商品詳細】画面の半分が商品画像になる。その潔さがスタイリッシュさを引き出しているのではないかと感じた。商品自体のプロダクトデザインが洗練されており、画像が大きくなることで形や質感が印象に残りやすいため良さを引き出す手段として有効だと感じた。
・商品写真に人が写っていないことから、冷たく硬派なイメージを受ける。プロダクトにのみ意識がいくように一貫した表現にしているのではと感じた。（実際の使用画像が入っているサイトが多い印象だっため意外でした。）

感想・学び

今回はShopifyを用いたECサイトを見ていきました。個人的にはサイトによってデザインが大きく異なるということが一番印象的でした。特に感じたのは商品詳細ページでしょうか。商品写真の見せ方や、購入ボタンの配置など個性が表れていて面白いなと思いました。Shopifyの導入で今まで見たことがないECサイトが生まれていると思うととてもワクワクしますね…！
今後は海外のECサイトやスマートフォンに特化したサイトも見て行きたいです。最後まで読んでいただきありがとうございました！

先月、弊社でもShopifyのサイトを公開いたしました！
是非ご覧ください！