Home / ネットワーク・IT / IT基礎知識 / webデザイン / より美しく!ECサイトデザインの法則とおすすめギャラリー全11選

より美しく!ECサイトデザインの法則とおすすめギャラリー全11選

※本ページにはプロモーション(広告)が含まれています

「自身のECサイトを作りたいけど、どんなデザインにしていいかわからない。」そんなときは、ギャラリーサイトを活用しましょう。国内外の多くのサイトが載っており、デザインの参考になるサイトがきっと見つかります。

業種や色、構築方法、デザインなど、さまざまな切り口からサイトを探せるため、自分に合った利用が可能です。

そこでこの記事では、ECサイトをデザインする際に役立つ法則やおすすめのギャラリーサイトをご紹介します。サイトのデザインに行き詰った人は、一度参考にしてみてはいかがでしょうか。

ECサイトとは?

ECサイトは、商品またはサービスをウェブサイトを通して販売するもの。ECはエレクトリックコマースの頭文字をとっており、電子商取引を意味します。

簡単にいえばネットショップがECサイトとほぼ同義。Amazonや楽天といったECサイトが規模としては大きく、大抵の方は商品を購入したことがあるはずです。

ECサイトのメリットは、外に出なくても欲しいものが発送されてくるため手間が少ない点。逆にデメリットとして実物を触ったうえで選ぶということができないことが挙げられます。

上記は顧客目線の話ですが、今回紹介するのはデザインする運営側の目線です。ECサイトはデザインだけでもアクセスしてきた人がすぐに離脱したり買い物をしてくれたりと差が生まれるので、非常に大切な要素といえます。

ということで今回は、デザインの法則とギャラリーサイトを紹介していきます。

1.ダサくないECサイトデザインのための4つの法則

abc6089f16e4b6f028533768a4485eb8_s

ECサイトを作る前に、デザインの4つの法則について把握しておきましょう。シンプルで当たり前の内容に見えますが、いざサイトを作る際・デザインする際に意外に蔑ろになりがちな点ばかりです。これらの法則を意識して作り上げていきましょう。

①近接

近接はECサイトだけでなく、資料などを作る際にも押さえておくべき法則です。近接の原則とは、「関係のある情報は近づける」というシンプルなものですが非常に重要です。

関係あるものは近づけて、関係ないものは遠ざけて配置します。そうすることで、見る側は「近い配置=関係ある情報」「遠い配置=関係ない情報」と認識することができます。

近接をうまく使えば視認性がアップして回遊率を高め、離脱率を下げられるので取り入れてみてください。

②整列

整列の法則とは、文字やフォント、色などを揃えて統一感を出すことです。文字の配置がバラバラだとまとまりがなく、見る側にわかりづらい印象を与えてしまいます。

線を配置することでバランスをとる際に役立つグリッドシステムによってしっかりと縦横を整列させ、統一感のあるデザインを作りましょう。

③反復

反復の法則とは、意識的に繰り返し同じデザイン・要素を使うことです。繰り返されることにより、全体に一貫性を持たせることができます。

同じページ内や同サイトのページ違いでも反復の法則を使うことでまとまりのあるサイトができあがります。

まとまりがないサイトは余計な情報を読み手に与えて購買意欲を低下させることもあるので、反復で一貫性を持たせましょう。

④コントラスト

コントラストとは強弱をはっきりとつけることです。情報の優先度を明確にすることで、わかりやすいデザインにすることが可能です。

太さやフォント、色などを使い、優先順位の高い情報とそうでない情報にコントラストをつけます。そうすることで、ひと目で何の情報かがわかるようになります。

2.ECサイトデザイン特化のギャラリーサイト4選

ab032ee97cf547c6fa7b7d6525f6aa9e_s

ここでは、おすすめのギャラリーサイトを紹介します。いずれも、国内や海外のECサイトに特化したギャラリーサイトなので、デザインのヒントを効率的に得ることが可能です。
気になるギャラリーサイトがあれば、一度閲覧してみることをおすすめします。

ARTNOC.COM

ギャラリーサイトのARTNOC.COMには、さまざまな企業等のサイトが掲載されています。サイトの全ページを一覧で見ることができ、制作会社や他のユーザーが付けた評価も知ることができます。

ホテル、レストラン、スポーツクラブ、ドリンク、旅館、病院、お酒、大学、アイウェア、コンピューター、スイーツなど、他にもたくさんのタグがあります。

また、アパレル・ファッション、デザイン・クリエイティブ、飲料・食品メーカー、学校・教育・資格、レストラン・飲食店・カフェなど、多くの業種カテゴリが用意されているため、自分の目当てのサイトをすぐに見つけることができます。

約1,700ものサイトがあるため、デザインのヒントを見つけることができるのではないでしょうか。

ウェブサイトはこちら:http://art-noc.com/

ネットショップギャラリー

iphone_pc

ネットショップギャラリーには国内のECサイトが掲載されており、業種や構築方法、雰囲気、色、地域、レイアウトから好みのサイトを探すことができます。

詳細ページを開くと該当サイトのページと説明文を見ることができ、同じジャンルのサイトも「こちらのショップもチェック」などと紹介してくれる機能もあります。

業種や色などでサイトを探せるギャラリーが多い中で、雰囲気や構築方法、地域などで探せるのは大きな特徴です。また、構築方法はEC CUBEや楽天、MakeShop、カラーミーショップなどから選ぶことができます。

ウェブサイトはこちら:http://ec.ysig.jp/netshop-gallery

cart craze

cart crazeは海外のギャラリーサイトで、1,500以上のショップのサイトが集まっています。一つひとつのサムネイル画像が大きくてわかりやすく、すべてに5段階評価が表示されています。

気になるサイトを開くと該当サイトのページが一覧で確認でき、構築方法やサイトの説明、評価を見ることができます。

関連サイトも紹介してくれるため、デザインのヒントを効率的に得ることが可能です。海外サイトのデザインを中心に見たい場合におすすめのギャラリーサイトです。

ウェブサイトはこちら:http://cartcraze.com/

ECサイトのWebデザイン|ズロック

ファーストビューで個性的なロゴが人を惹きつける魅力を持つサイトがズロック。S・M・Lの三段階のサムネイル表示でウェブサイトを確認できるのが魅力です。

管理人はゴトウさんという方で、運営者によって選ばれた世界中のウェブサイトを2800以上確認可能。掲載サイトの募集もしているため、お気に入りのサイトを登録してもらうこともできます。

カラーやコンテンツ、業種からレイアウトといった絞り込み検索もできるので、ある程度デザインを絞り込んでいる方が参考にする場合は最適です。

ウェブサイトはこちら:http://www.zzrock.net/archives/category/sort/ec

3.ECサイトデザインも含むのギャラリーサイト7選

1 2

Check Also

まずは体験!Adobe Illustrator利用の3大メリット

Adobe Illustrat …