海外デザインブログCanva Design School Blogで公開された「Designing The Perfect Ecommerce Website: 45 Stunning Examples To Inspire You」より許可をもらい、日本語抄訳しています。
2015年の世界中のオンラインショップにおける販売額は、過去最高となる1.4兆円を超える予想で、ますますユーザーを惹きつけるビジュアル性に加えて、手軽なショッピング体験を提供できるかが、より重要になってきています。
視覚的にゴージャスなウェブサイトは、購入ユーザーを惹きつけて、扱っている商品やサービスの売上や販売数を増加させることができます。今回は、さまざまな業種から選りすぐった、さまざまなレイアウトを利用したオンラインショップのウェブデザインを、確認したいチェック項目と一緒にまとめています。今後のデザインプロジェクトのインスピレーションにいかがでしょう。
詳細は以下から。
01. 鮮やかな配色に、大きな商品画像を利用しよう。
New From Boseでは、新商品のヘッドフォン５種類を水平レイアウトに並べて表示しています。フラットスタイルの色使いも新鮮で、マウスホバーで商品が中央表示されるように工夫されています。
02. シンプル・イズ・ベスト
ETQ Amsterdamは、流行に流されない、エレガントで高品質な商品づくりを掲げた靴の販売を行っています。スッキリとした書体に、明るすぎない色使い、巨大なプロダクト写真を利用することで、モダンさを演出しています。ごちゃごちゃせずに、必要な商品にうまくフォーカスを当てたレイアウト。
03. 巨大で美しい写真を利用しよう。
Brdr. Krügerでは、背景スクリーン全体に表示されたプロダクト写真に、スッキリとしたミニマル書体を利用し、商品名と詳細を重ねるようにレイアウトしています。またモバイル端末では、フォントサイズも自動調整されます。
04. グリッドを利用してデザインしよう。
Chris Niedenthalでは、長年の制作実績をグリッドシステムを用いて展示しています。すっきりとした構造を実現でき、サイズの変更や、バラエティー豊富なレイアウトは、調和のとれたデザイン作成にも最適です。
05. 入力フォームの機能面に気を配ろう。
Chickenbotは、イタリアの鶏肉宅配販売サービスを行っている会社で、ハンバーガーメニューをクリックすることで、各メニューがオレンジ色の鮮やかな背景に、アニメーション付きでフルスクリーン表示されます。退屈なデザインになりがちなドロップダウンメニューの、素晴らしい代替アイデアと言えるでしょう。
06. ナビゲーションメニューを最小化しよう。
My Deejoでは、ユーザー好みに商品をカスタマイズできる、ナイフを販売しているウェブサイトで、イメージ写真がくっきり大きく表示されています。豊富なカスタマイズオプションも、ドロップダウンから選択するだけと、シンプルな操作のみとなっています。
07. インタラクティブな機能を追加しよう。
Emporium Piesは、オンラインベーカリーというユニークなショッピングサイトです。並べられた手づくりパイにマウスホバーすることで、情報が表示されるというユニークな仕掛けが採用されています。
08. 商品をきちんと紹介しよう。
JM & Sonsはカナダの家具会社で、扱っている商品をたくさんの写真と一緒に表示しています。ユーザーはあらゆる角度から商品を眺めることができ、好奇心を満たします。まるで実際に商品を手にとって、買い物している気分を味わうことができます。
09. 余白スペースをたっぷり確保しよう。
Best Made Coは、アウトドア専門オンラインショップで、商品イメージのまわりにたっぷりな余白スペースを適用することで、商品数が多くても、ウェブサイト全体をスッキリとした雰囲気に仕上げます。
10. カスタム・タイポグラフィーを利用しよう。
Leather Head Sportでは、美しいレザー関連のスポーツ用品を作成しています。ウェブサイトのヘッダー中央には、カスタマイズされたタイポグラフィー・ロゴが配置されています。よりショップデザインにオリジナル性を演出したいときに活用したいテクニック。
11. アクセントカラーで重要な情報を強調しよう。
アクセントとして色を利用することで、CTA（Call-to-Action）や、クリックできるUI要素を強調し、素敵なインターフェース機能を追加することができます。Longboard Livingでは、この3つのポイントをうまく押さえ、デザインにマッチしたナビメニューを採用しています。
12. 各ページに誘導しやすいようにしよう。
LEIFでは、購入ユーザーが探している商品を簡単に見つけることができるように、フィルタ機能付きの検索ボックスが利用されています。
13. 分かりやすく伝えるヘッダーデザインを心がけよう。
お菓子などのスイーツ販売サイトGrazeでは、ヘッダーにたくさんの商品を並べて展示することで、どのような商品を扱っているのか、ひと目で分かるように工夫されています。またフレンドリーな雰囲気を演出する、フォント書体の選び方にも注目です。
14. カスタマーサポートを強調しよう。
オンラインショップでお問い合わせページを延々と探すほど、苦痛でイライラする作業はないでしょう。Farmdropでは、手軽に問い合わせができるように、ページの右下にはいつもアイコンが表示されています。
15. 商品を魅力的に見せてみよう。
Verttyでは、取り扱っている商品のタオルを利用して、ユニークなグラフィック完成させています。通常とは異なるレイアウトで商品ブランドを魅せることで、たのしい雰囲気を演出しています。
16. カード状レイアウトを採用しよう。
Oliver Bonasでは、カード状レイアウトを利用し、商品をグリッド状に並べることで、それぞれの商品をうまく紹介、展示しています。全体イメージとも合わせやすく、情報をうまく伝えることができるテクニックです。
17. ビデオ動画で商品をより分かりやすく。
Bellroyでは、より分かりやすいビデオ動画を、商品ページに追加しています。ユーザーが商品のことを、より詳しく知ることができるテクニック。
18. 背景にテクスチャを利用しよう。
Dollar Shave Clubでは、各セクションの背景にテクスチャ素材が利用されています。これによって、より男性的なデザインに仕上げ、ターゲット層にマッチしています。
19. 文字数に応じてアコーディオン展開しよう。
Hard Graftは、商品の重要なディテールをうまく表現したいときに、参考にしたいウェブサイトです。文字数が多くなることで、デザイン性が崩れるの防止するために、アコーディオン機能が実装され、クリックで文字テキストが展開されます。
20. ヒーローイメージの代わりに動画を利用しよう。
オンラインショップで動画を利用することで、無限スクロールやたくさんのページを追加することなく、多くの情報を視覚的に伝えることができます。Cook Mellowは、このテクニックをうまく利用した好例と言えるでしょう。
21. マルチ・サイドバーメニューを提供しよう。
複雑なメニュー構造には、ドロップダウンやサブメニューを利用して整理してみましょう。Carolina Herreraでは、サイドバーを利用した素晴らしいナビメニューを実装しています。サブメニューの色を変えることで、ユーザーをよりうまく誘導できます。
22. ページ遷移なしで使えるショッピングカート機能を。
商品をカートにいれた後に、元のページに戻る作業は面倒くさく感じることがあります。Everlaneでは、商品リストにマウスホバーすることで、サイズや色などを選択することができ、ページ遷移することなくカートに商品を追加することができます。
23. あえて制限のあるレイアウトを利用しよう。
Helmut Langは、オーストリアのウィーンを拠点に活動するファッションデザイナーです。余分なものを削ぎ落としたシンプルで、エレガントな見た目を表現しており、もっとも重要なコレクションページへとユーザーを誘導しています。
24. ヘッダーにイメージスライダーを利用しよう。
Groovemadeでは、ヘッダー部分にイメージスライダーを利用することで、扱っているアクセサリー商品の情報をまとめて伝えています。スクロールをはじめる前に、ファーストビュー全体を覆うスペースを閲覧するだけで、さまざまな情報や商品に移動することもできます。
25. ファーストビューにイメージ写真を利用しよう。
Muncheryでは、ファーストビュー全体にイメージ写真を配置しています。2015年を代表するトレンドスタイルのひとつで、提供している商品をより新鮮に魅せます。フード関連のサービスに、美味しそうな皿料理を並べた写真は、効果的で美しい演出と言えるでしょう。
26. 。商品カラーをウェブサイトに反映しよう。
スタイリッシュなカミソリを販売しているHarry’sでは、商品にマッチしたカラーパレットをウェブサイトにも採用しています。オレンジ色のCTA購入ボタンに、オレンジ色と茶色、紺色を利用した、サイト全体のデザインがうまく商品コンセプトを表現しています。
27. 商品の詳細情報を伝えよう。
Beo Playでは、商品の詳細を美しいタイル状に並べ、関連情報と一緒に配置しています。商品名や金額を確認しながら、在庫の有無や特別バージョン、新コレクションなどの追加情報を、ひと目で確認することができます。
28. インタラクティブなスクロール体験を提供しよう。
Pencil by 53は、タブレット端末用スタイラスペンを販売しているオンラインショップです。ページを下方向にスクロールすることで、バラバラにした部品が合体する、ユニークな仕掛けを採用しています。ユーザーは、美しいタイポグラフィーや写真を利用することで、商品に関するストーリーをより深く知ることができます。
29. 商品を利用したデザインパターンをつくろう。
Aark Collectiveは、販売している時計を並べた、ユニークなパターンデザインが特長のウェブサイトです。すっきりとしたシンプルな書体に、落ち着いたカラーパレットを用いることで、魅力的なウェブデザインに仕上げています。
30. 360度バーチャルツアーを実現しよう。
Bagigiaは、イタリア発の高級かばんメーカーです。商品を紹介するために、どのアングルからも商品を確認することができる、360度バーチャルツアーを実装しています。戦略的な色使いもポイントで、商品バリエーションにのみ色を活用しています。
31. 王道グリッドレイアウトにスパイスを加えよう。
Dieselは左右対称の、王道グリッドレイアウトで商品アイテムを展開しています。それぞれの商品にマウスホバーすることで、背景テクスチャがグラデーションカラーに切り替わります。シンプルなエフェクトのみで、モダンな印象を演出することができます。
32. ソーシャルメディアへのシェア機能を導入しよう。
Vanmoofは、ウェブサイト内で自分だけのオリジナル自転車をカスタマイズ、購入できるオンラインショップです。作成した商品は、同ページ内からソーシャルメディアに気軽にシェア、共有できるようになっています。
33. ドロップダウンメニューを再構築しよう。
The Horseでは、文字テキストと一緒にイメージ写真を利用した、ドロップダウンメニューを採用しています。より商品に関する情報を伝えることができ、面白さや美しさも同時に演出しています。
34. 雑誌のようなレイアウトを用いよう。
Mr.Porterは、ナビゲーションメニューとメインコンテンツの間にある太ラインが印象的で、コンテンツ同士をうまく分割しています。また商品名に利用されているセリフ書体と、ブランドロゴのサンセリフ書体の組み合わせもスタイリッシュです。
35. ページが重なりあうインターフェースデザインを。
Travel Albertaでは、クリックすることでページが重なるようなエフェクトを実装しています。右上に配置されたXマークをクリックすることで、前ページに戻ることができ、パンくずリスト的な活用方法もできるでしょう。
36. ダイナミックな商品写真を利用しよう。
Nike Jordanでは、印象的なイメージ写真を用いることで、ブランドの特性をうまく表現しています。太字フォントとの組み合わせが、男性的でスポーティーな魅せ方となっています。
37. オーバーサイズの写真を活用しよう。
Warby and Parkerでは、商品ページごとにとても巨大なイメージ写真を利用しています。フレッシュで楽しいウェブ体験を演出するだけでなく、実際の商品をより細部まで確認することもできます。またモバイル端末でも、きちんと表示されるように工夫されています。
38. スムーズな決済方法を提供しよう。
Coinは、クレジットカードや店のメンバーカードなどの機能を、一枚のカードに集約することで、財布がパンパンになってしまうのを防ぐ、ユニークなアイデア商品です。購入ボタンをクリックすると、同ページ内でシームレスに決済を完了することができます。
39. 利用する色を限定しよう。
Capellosでは、モノクロ・カラーで統一されたパッケージを用い、パスタなどの商品を販売しています。ウェブサイトでも統一感のある白黒デザインにまとめられ、購入ボタンなど重要なパーツにのみ色を利用することで、コントラストをうまく表現しています。
40. タイポグラフィー中心のデザインを導入しよう。
フルスクリーン写真などのウェブデザイントレンドによって、文字をベースにしたデザインの美しさを忘れがちです。ECC Lighting & Furnitureでは、太字フォントを採用し、注意深く引かれたラインと、ミニマルな商品イメージ写真を組み合わせることで、まるでギャラリーを訪れたような雰囲気をつくりあげています。
41. オリジナルのテンプレートを活用しよう。
美味しそうな料理の出前サービスを行うDeliverooは、世界中の都市でサービスを展開しています。それぞれのお店とそのメニューを、同じテンプレートを用いて掲載することで、サイト全体の統一感を保ち、分かりやすい操作性を実現します。
42. 物語、ストーリー性を伝えよう。
ニューヨークになるレストラン Mapleでは、ビデオ動画を利用することで、お店のストーリーを伝えています。巨大な太字フォントと組み合わせ、レストランの慌ただしい厨房の様子を垣間見ることができます。
43. 商品イメージをシンプル表示しよう。
Visual Supply Coでは、番号と色をつかって商品をリストアップしています。すべてのショッピングサイトに当てはまるわけではなありませんが、商品のカテゴリや特長などを伝えるときに便利なテクニック。
44. 商品のカスタマイズ機能を導入しよう。
La Coq Sportifはスポーツアパレルブランドで、サイト内ではとても簡単に色やサイズ、数量などを指定することができます。オプション機能ははっきりとラベル化され、クリックしやすいサイズとなっています。
45. 商品を１ページにまとめて掲載しよう。
Hunters Wine Shopでは、ランディングページ自体にすべての商品がリストアップされており、ページ遷移することなく購入手続きをすすめることができます。ユーザーを誘導しやすく、心地よいユーザー体験を実現ています。
さいごに、。
いかがでしたでしょうか。2015年を代表する魅力的で、効果的なショッピングサイトを45個まとめました。各デザインのポイント、テクニックを次回プロジェクトにぜひ活用してみましょう。
参照元リンク : Designing the Perfect Ecommerce Website: 45 Stunning Examples to Inspire You – Canva Design School
