2018秋の無料相談会
2018秋の無料相談会
2014.08.20

ECサイトでよく使われているUI・デザインまとめ6選「カルーセル」「プルダウンメニュー」など

よしたけはるき

お久しぶりです、元トリマーのWebディレクター・よしたけはるきです。

まだまだ暑い日々が続きますが、熱中症だけにはくれぐれもお気をつけください。(ワンコの熱中症も。鼻がぺちゃっとしたワンコは特に!)

さて今回は、ECサイトでよく使われているUIやデザインについてまとめてみました。

あのスティーブ・ジョブズも「デザインとは、単にどのように見えるか、どのように感じるかということではない。どう機能するかだ。」という言葉を残しているように、どう機能するか、というのはとても大切なことです。

サイト設計のうえで、Webディレクターが最も注意しなければいけないことは、まさにこの「どう機能するか」にあるのではないでしょうか。

それでは、早速いってみましょう。

1. カルーセル

1_carousel

ある特定のスペースで、順番に情報を見せていくことができる表示方法「カルーセル」。特集やキャンペーンなどのバナーを見せるのに効果的です。

表示位置としては、TOPページのファーストビュー、商品詳細ページの商品画像の部分などが多かったです。
 
▼プラグインの紹介

2. プルダウンメニュー

2_puldown

Amazonや楽天市場のサイドメニューなどでおなじみのプルダウンメニュー。商品量やカテゴリーの多いサイトなどで利用されていました。

ナビゲーションについては、こちらの記事がとてもよくまとめられています。
 
▼参考記事

LIGブログでも過去にメガメニューについてまとめた記事「スペースを活用!メガメニューを使用した国内参考サイトまとめ」がありますので、あわせてご参照ください。

3. 商品画像(アイコン・サムネイル)付きメニュー

3_thumbnail_menu

最近よく見かけるデザインの1つが、この商品画像(アイコン・サムネイル)付きメニュー。ただ、使い方によっては「見づらい」なんてことも起こりがちですので注意が必要です。
 
▼参考記事

  • 新規顧客を逃さないECサイトデザイン|Webクリエイターボックス
  • 4. 商品画像の拡大表示

    4_enlarge

    特にファッションや雑貨のECサイトで利用されているのが、商品画像の拡大表示。

    従来はモーダルで表示させることが多かったのですが、今は「虫メガネを使って拡大してみる」ようなデザインが多くなってきました。
     
    ▼参考サイト

    ▼プラグインの紹介

    5. 動画(Youtube/背景動画)

    5_movie

    取扱い商品が少ないサイトや、一部のおすすめ商品などに対して利用されることが増えてきたのが「動画」です。

    ECサイトに限らず、キャンペーンサイトやアプリのティザーサイトなど、Web上で見かける機会が多くなってきました。制作コストが下がったりインフラが整ったりしていくことで、今後ますます増えていくのではないでしょうか。

    こちらの画像でも使用させていただいた良品計画さんのサイトが参考になります。
     
    ▼参考サイト

    ※8/20 17:00追記 参考サイト名について修正をおこないました。大変失礼しました。

    6. その他参考ECサイト・記事紹介

    上記以外に、今回ECサイトを調査するうえで参考にさせていただいたサイトや記事を紹介します。どれも興味深い内容ですので、興味のある方はぜひご一読ください。

    LIGブログでもECサイトについてまとめた記事「売れるサイトはデザインもステキ!参考にしたいECサイト15選 」がありますので、あわせてご参照ください。

    まとめ

    いかがでしょうか。

    冒頭でも述べたように、デザインは単にどのように見えるか、どのように感じるかということではなく、どう機能するか、です。そしてECサイトのビジネスのゴールは、サイトを見て「カッコイイ」と思われることではなく、「売上」をあげることです。

    今回紹介したようなプラグインやデザインを実装した“だけ”では、売上があがることが保証されるものでもありません。

    これらを使いながら「クライアントのビジネスを成功に導くこと」が、Webディレクターにとって本当に大切なことなのではないでしょうか。

    それでは、また。