« ブログのトップページに戻る

必見!Eコマースサイトのデザイントレンド

   投稿者 : 2015年2月17日 By

イメージ写真

スマートフォンの普及により、Eコマースにおいては、モバイルを含むあらゆる端末からスムーズに閲覧できるサイトが増えつつある。今回はそうした流れを踏まえつつ、2015年のデザイントレンドを紹介する。

1. 必要な情報を隠す!? メニューアイコン

サイトのナビゲーションのように、ウェブサイトにおいて必要不可欠な情報であっても、スマートフォンの小さな画面では邪魔になってしまうことが少なからずある。
そこで使われ始めているのが、三本線のメニューアイコンだ。アメリカではハンバーガーアイコン(バンズと中身の三段重ねに見えることから)と呼ばれているこのアイコン。
モバイル向けのサイトデザインで使用されることが多が、PC向けにも利用されることが増えてきれいる。
キュレーションマガジンのAntennaでは、PC向けの画面でもこのメニューアイコンが使われており、クリックすれば「ジャンル一覧」「CMライブラリ」などのメニューがずらりと表示される。
スマートフォンのようなモバイル端末の普及により、メニューアイコンの認知度は上がっており、デザイン性を重視してこのアイコンでメニューを隠してしまうサイトが増えつつある。

antenna
Antenna

2. 画像サイズの大型化

ウェブサイトの読み込み速度は、ユーザーの離反に関わる重要な要素です。ファイルサイズの大きな画像は読み込み速度を遅くしがちである。スマートフォンでも読み込み速度を落とさずに見られるインターフェースの作成が追求された結果、画質を落とさずにファイルサイズを圧縮できる技術が普及している。

ホームページだけでなく、商品一覧の写真や商品の紹介に添える写真にも大きめサイズの画像を使うウェブサイトが増加しています。美しい写真はブランドイメージを高めたり、商品の良さをより鮮明に伝えたりすることができ、ひいては売上の増加にもつながるため、大きな画像をウェブサイトに採用する流れは今後、ますます増えていくだろう。

north
north

3. Googleのマテリアルデザイン

「マテリアルデザイン」とは、Googleが2014年に発表した、新しいユーザーインターフェースの仕様に関するデザインのガイドラインである。
科学技術の進歩を取り入れ、Googleが持つすべてのプラットフォーム(PCやスマートフォンのみならず、スマートウォッチやTVなども含め)において違和感のないデザインにすることを目的として開発された。
すでに昨年11月にはAndroid向け日本語入力アプリ「Google日本語入力」(Android4.0以降で利用可能)やAndroid5.0で、新たにマテリアルデザインが採用されている。「マテリアル」とは英語で「物質的な」という意味で、現実世界の物質を扱うような感覚をデザインに取り入れ、合理性とデザイン性が追求された作りになっている。
マテリアルデザインでは、アプリの構造、機能をユーザーに伝えるために、サーフェス(表面)や影、アニメーションの動きが重視され、また、「bold(大胆で)、graphic(視覚的で)、intentional(意図的な)」インターフェースとするため、色はメインカラー(濃淡は利用可)と強調色の2色利用を原則とし、色やスペースの使い方にも細かく配慮されているのが特長となっている。
例えば、Google日本語入力では、文字ボタンがこれまでより平面的になっているが、タップすると色がアニメーションで変わり、選択された文字は影を伴って一段上に表示される。

google
また、Google Calendarでは、アプリだけでなく紹介しているウェブサイトでもマテリアルデザインが採用されているので、ページをのぞけばマテリアルデザインを体感できる。

google_calendar

今後もGoogleからはマテリアルデザインに沿ったソフトやサービスが提供され、Google以外でもマテリアルデザインを採用しているウェブサイトやアプリなどが登場いている。
これらはデザイントレンドとして押さえておいたほうが良い。

優れたサイトを参考に!

ウェブデザインに関しては、トレンドを押さえつつも企業の個性が感じられるものにするのが理想である。
紹介したトレンドに加え、デザインが優れていると評価されているウェブサイトを実際に閲覧し、トレンドを体感することで、より良いサイトデザインへのヒントが見つかるのではないだろうか。

 

参考:

6 Ecommerce Design Trends for 2015
Material design(Google)
マテリアルデザイン とは
Googleマテリアル・デザインから学ぶ4つの重要ポイント + 参考UIデザイン、無料素材まとめ
I/O 2014 アプリに学ぶマテリアルデザイン

関連する記事

加速する越境EC! 今、越境EC市場を捉える... 日本の総人口は、出生率の低下から、大きく減少することは明らかである。(図-1)を参考いただきたい。2010年に1億2806万人だった人口は徐々に減少し、50年後の2060年には8674万人とも予測されている。 さらに総人口の39.9%が65歳の高齢者となる。超少子高齢化社会となるのは周知の事...
アメリカで人気の日本食品はなんだ?... アメリカのEコマース市場規模は、世界第2位である。2018年のEC市場アメリカEC市場売上額は、5,231億米ドル(約57兆円)、前年比15.5%増で右肩上がりの上昇率を示している。EC化率も年々上昇し、2018年は9.8%と年々1%の上昇である。 アメリカではJapanブランド商品の人気...
押さえておきたい! スマホECユーザビリティ... 今、スマホ経由でのECサイトアクセス率が大幅に高まっていることを、ECサイトの運営をされている方は実感として感じていることだろう。スマホ経由のアクセスは今後、ますます、増加することは明白な事実である。 また、スマホECサイトのコンバージョン率はPCに比べ低くなりがちと言われるが、今後、ユーザ...
越境EC 米国向け販売で守るべき「FDAルール」とは?... 今、越境ECではアメリカ消費者に向けて、AmazonやeBayを利用して、日本の食品や化粧品を販売する人が増えている。アメリカに向けて食品、飲料、化粧品、医薬品など販売するには、FDA(Food and Drug Administration)という機関が定めたルールを守る必要がある。 A...
越境EC 韓国の集客ポイントは? 先週2月9日から、4年に一度の”冬の祭典”冬季オリンピックが、韓国、平昌で開幕した。 日本人選手のメダルラッシュが伝えられる中、今回の入場式では、選手団のスマートフォンでの撮影シーンが目立っていた。 これは、韓国Samsung Galaxyが、IOCと共同で出場選手や大会関係者全員に4,0...
フリマアプリはどこまで伸びるのか?... ここ数年、急激な成長を見せているフリマアプリ。「フリマアプリ」とはリアルフリーマーケットをスマートフォンで実現できるアプリである。スマートフォンで商品の写真を撮って出品できる手軽さ、初心者でも売買ができるシンプルさが受け、急激に市場を拡大している。今回はEC業界に大きな影響を与えている「フリマア...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。