ブランドの世界観が伝わるShopifyで構築されたハイクオリティなECサイト

2022年4月4日

おはようございます、こんにちは、こんばんは。アートディレクター / デザイナーとして、先月FRACTAにジョインしました、間部と申します。

これまでのキャリアでは、BtoB企業の案件を中心にWebサイトを起点としたデジタル領域のブランディングを行ってきました。その知見を生かし、今回はFRACTAとは切っても切り離せない関係である、ECプラットフォーム "Shopify” の活用事例の中でも、特にブランドの世界観の作り込みが素晴らしいなと思ったWebサイトを中心に集めました。

最後までお付き合いいただけると嬉しいです。

BRANCHÉ CHOCOLAT | ブランシェ・ショコラ

“食のリテラシーを磨く”をコンセプトに、カリナリープロデューサーとしても活動する薬師神陸シェフを起用した、カレ・オ・ショコラという、高級チョコレートスイーツブランドのECサイトです。

余韻が残るような滑らかなアニメーションと、ブランドのキーワードの"至福の四角形"とも親和性のある矩形に切られた写真で統一されたレイアウト。断面の美しさを感じさせる、テクスチャーのような写真とブランドオリジナルの書体を組み合わせたタイポグラフィなど、隅々まで美意識を感じさせるウェブサイトになっています。

全画面に表示されるカート画面など、購入導線もとてもわかりやすく見ているだけで背筋が伸びる、美意識の高いデザインになっています。

飛騨牛販売指定店 - 養老ミートオンラインストア

岐阜県の飛騨地方で肥育される黒毛和牛ブランド、飛騨牛を一頭買いできるECサイト。

まずECでは珍しく、商品画像がファーストビューにないのに驚きです。専務の方の目利き力を相撲の行司さんに例え、イラストレーターの矢野恵司さんにより描かれたビジュアルはインパクト大。思わずサイトの全貌を知りたくなるような衝動を掻き立てられます。縦書きや筆文字を多く取り入れた和風の書体、イラストと実写を組み合わせた商品写真など、細部までのこだわりが随所に感じられます。

また、これだけ高画質な画像やリッチなアニメーションを使っているのに全くストレスを感じさせないヘッドレスCMSを使った実装も素晴らしいです。

先日サイトの目玉コンテンツである千人前横綱セットが、先日売れたそうでとても驚きました。

OUTDOOR GUILD MURACO

世界に誇る日本の金属加工の技術力を生かして作られたアウトドアブランドのECサイト。モノトーンな配色とクールなステンシル風のロゴとモノトーンで統一し、無駄を削ぎ落としたようなシンプルなレイアウトの上に、標準テキストに秀英ゴシック銀を使い、質実でクラシックな印象を感じさせています。トップページから商品ページ、ブログコンテンツのアイキャッチ画像や、陰影の強いモノトーンの写真がクラフトマンシップを感じさせるアバウトページなど、隅々まで質実でボールドなプロダクトの世界観が見事に統一されているウェブサイトになっています。

VIBTEX – Virus Blocking Textile

コロナ禍に生まれた、ウイルスを減少させる素材を使ったアパレルブランドのECサイト。海外の医療チームのユニフォームのようなデザインのタイポグラフィ、ロゴとブランドカラーである鮮やかな蛍光ブルーが目を引きます。レイアウトは至ってシンプルなグリッドレイアウトですが、縦写真を効果的に使うことで、単調な印象にならないようにしています。また、海外ブランドを彷彿とさせるような写真を使用することで、世界vsウイルスという構図も遠回しに連想させるデザインではないでしょうか。

AGILE COSMETICS PROJECT

イメージではなく効果を追求し、あなたの肌をアップデートし続ける、というスキンケアブランドのECサイト。コントラストの強いタイポグラフィーと影の強い写真、パッケージやテキストのライティングも特に効果を訴求するようなものが多く、コンセプトの意志を視覚化したような、スタイリッシュでコントラストの強い世界を印象づけています。

ソフトウェアで使われる"アジャイル開発”と言う名前を冠したブランド名の通り、商品にはバージョン表記がしてあり、商品のQRコードから常にフィードバックを受け付けていて、アップデートし続けると言うブランドのスタイルもとても興味深いものです。サイトではアップデートの履歴も見ることができ、ユーザーと共創しながら成長していく、稀有なプロダクトではないでしょうか。

Nagi 公式オンラインストア

独自の吸水システムを採用したサニタリーショーツブランドのECサイト。体型や肌の色を限定せず様々なモデルを採用するのは世界的な流れだと思いますが、このサイトも同様にダイバーシティに富んだモデルを採用しているのに目を惹きます。トレンド感のあるくすんだグリーンとNの流れるようなグリフが印象的なロゴ。そのロゴのニュアンスをさまざまなディティールに生かし、女性独自の悩みを軽やかでポジティブに変換しているデザインとなっています。

FRIENDLY HEALTH CLUB（フレンドリーヘルスクラブ）UMAMIサプリ公式オンラインストア

サプリ感覚のヘルシー出汁という、出汁を使った健康食品のECサイト。"出汁”、と言うとついつい和風な方向に舵を取ってしまいがちですが、この商品では"サプリ感覚”というコンセプトが強調されています。イエローを起点とした配色とスムーズなスクロールアニメーションにドット絵のフォントや絵文字などを組み合わせ、ポップでスタイリッシュなイメージと共に、機能的な側面も感じさせるトンマナになっています。

MARKAWARE

サステナブルな天然原料と日本の優れた技術を生かした服作りを行う、ファッションブランドのECサイト。ニュアンスカラーをベースにした落ち着きのある上品なトーンと無機質で自然と調和するような写真。タイポグラフィはやや小さめに文字サイズを設定し、コンテンツを細い罫線で区切り、フラットなカタログのような雰囲気を演出し、上質なブランドのイメージを訴求しています。

マウスオンすると着衣イメージとフラットな商品画像が切り替わるインタラクションもとても効果的でよいアイデアですね。

お肌に優しい無添加の固形石鹸、保湿クリームをお探しなら「HOLO」へ

ボトル型にくり抜かれたビジュアルが印象的な、無添加の固形石鹸、保湿クリームを販売するブランドのECサイト。無添加という言葉の持つ優しさやぬくもりを、丸みを持ったオブジェクトやディティール、タイポグラフィーなどで表現しています。また、イラストや文字周りは薄いブルーで統一していますが、ボトルの色であるイエローを差し色に使うことで製品の特徴を印象づけています。

写真も利用シーンを多く使うことで、製品が生活に寄り添う様子が伝わり、来訪者はより自分ごと化しやすく親しみを持ってコンテンツを見れるのではないでしょうか。

Nukmel | ヌクメル

レンジで温めてから食べるというユニークな食べ方を提案しているチーズケーキブランドのECサイト。シネマグラフを採用した不思議なメインビジュアルと、ケーキの表面を思わせるなめらかな曲線がニュアンスカラーを採用した配色とマッチして、上品でどこか親しみやすい印象を与えています。スクロールしていくと背景色が黒に変わり、ケーキが回転している動画サムネイルを合わせることで、温め中のレンジの中に入り込んだような演出をしているアイデアも素晴らしいです。

現在製造工程を見直しているとのことで、再販が待ち遠しいですね。

神戸牛通販｜神戸元町辰屋

神戸にある、神戸牛専門のお肉屋さんのECサイト。イラストの店主さんがさまざまな言葉を投げかけるような接客で迎えてくれる、ユニークなUXが特徴的です。

ギザギザなテクスチャーで写真をトリミングしていたり、細部まで考慮されたアナログな雰囲気と丁寧な写真が信頼感を存分に感じさせていたり、ぜひこの人からお肉を買いたい！と思わせてくれるようなユニークなデザインになっています。

Ashley & Co

海外のサイトを一つご紹介。ニュージーランドのライフスタイルブランドのECサイト。まず、商品と自然の石や木、果物などを融合させた写真のアートディレクションがとても素晴らしいのと、中間色を中心にかなり色数を使っていながらごちゃつかず、アブストラクト且つアーティスティックな世界観に仕上げています。また、随所に使われているマイクロインタラクションが心地よく、サクサクとカートに商品を運ぶことができるのもとても良いですね。

＊マイクロインタラクション...ユーザーのアクションに対するフィードバックやステータスの変化を正しく伝えるための細かなデザインのこと。

まとめ

いかがだったでしょうか、今回ご紹介したサイトを見ていくと、いくつかの共通点が見えてきました。

ファーストコンタクトのインパクト

SNS、広告、検索、インフルエンサーのリンクなどなど、Webサイトへの流入経路も多様化していますが、来訪者とブランドのファーストコンタクトとなる時間はとても重要です。

写真、イラスト、3Dなどのビジュアルデザイン、ブランドの想いを凝縮したメッセージコピーを、どう伝えればインパクトを最大化できるのか、とても慎重に検討する必要があります。

これだけ世の中に良いデザインが溢れている中で、パっと見いいかを判断できないものに対して、人は興味を持つでしょうか。今回ご紹介したサイトはどれもロジカルな部分だけではなく、絵的にも美しく魅力的な部分を画面から感じ取ることができますね。初見のインパクト・印象を残すことは非常に重要であると考えます。

ストーリーテリングを訴求するアバウトページ

今回紹介した事例はいずれもすでに多くのファンがいるような著名なブランドではなく、０→１で何かの課題を解決したり、新しいアイデアをもって作られたプロダクトです。

地球環境にやさしい、社会的な課題を解決したい、男女の特有の悩みを解決したいなど、ブランドが生まれたストーリーはさまざまですが、「誰が、何のために、誰に、何を届けたいのか」を伝え、最終的にあなたに届けたいということを、ブランドから伝える必要があります。

Webサイトに販売員はいません。
導入から共感を生み、ファンを醸成し、最終的に売り上げにつながるという一連の流れの中で、視覚的なデザインや数字的な情報からは読み取れない情緒を伝えるために、重要なストーリーテリングとなるアバウトページは非常に重要なコンテンツになります。

迷いのない購入動線

もう一つは迷いのない購入導線の確保です。画面上でいくら良い感じにブランドの想いや価値を伝えても、購入にストレスがかかっては意味がありません。

常時カートやマイページボタンを画面上に表示しておいたり、後で比較検討するためのお気に入りリストを設置しておいたり。迷った時の問い合わせ機能などの機能面はもちろん、ボタンを押した時のインタラクションや、コンバージョンボタンのUXライティング、購入後に商品が発送されるまでのアフターフォローなど、細かな面にも配慮しながら、流入から購入→開封までのあらゆる可能性を考慮し、迷いのない購入体験を設計することが必要です。

＊こちらで掲載している情報は、2022年4月4日時点のものです。

FRACTAでは毎週月曜日と木曜日に新しい記事を公開中です！

FRACTAメンバーの思いへの共感や、FRACTAとのお仕事に興味をお持ちいただけましたら、ぜひお問い合わせください！

https://fracta.co.jp/