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

必見!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 アプリに学ぶマテリアルデザイン

関連する記事

注目される関西インバウンド 今後の展望はいかに...   日本政府観光局(JNTO)は2018年の訪日外国人客(インバウンド)数は前年比、8.7%増の約3,119万人と発表した。 昨年は大型台風、関空の閉鎖、北海道胆振東部地震などの影響で9月は前年比でマイナスとなったが、全体的にはプラスの伸びとなった。 国別のインバウンドで...
EコマースとMコマースの違いとは? 最近のショッピング事情と言えば、従来の店舗に行って実際に商品を手に取ってレジで並んで購入するスタイルではなく、オンラインで好きなものを自由な時間に購入するスタイルにシフトしているようだ。 各個人ののショッピングスタイルの好みによるが、まず、オンラインで購入する場合、一般的に知られているEC...
越境ECはどう変わる?【2017年JETRO報告書から】... 7月31日、日本貿易振興機構(ジェトロ)は2017年版『世界貿易投資報告』を発表した。 報告書の内容は、世界貿易全体では3.1%の減と2年連続の減少となったことや、日本の貿易収支は6年ぶりの黒字であったこと、さらに電子商取引(Eコマース)市場の将来などがまとめられている。 今回は、この報...
LINEの目指すビジネスモデルとは? 無料通話&チャットアプリのLINEは、8月27日、同社が運営するEコマースサイトLINE MALLに新たなサービスを追加すると発表しました。さまざまな感情や心境をイラストで送ることができるスタンプの人気もあって、3年間で約4.9億人(国内は5,500万人)までユーザー数を増やしたLI...
売上&ロイヤリティアップにつながるオファー事例集... 顧客や見込み客への働きかけは大切ですが、セールのしすぎでブランドイメージを損なうことのないように、適切な頻度で対象を絞ったオファーを実施することも重要です。 そこで今回は、基本のオファーパターンを押さえたうえで、ユニークなオファー事例を6つご紹介します。 基本のオファータイプ まずはアメ...
「GDPR対策」の為のGoogleアナリティクス設定はどうするの?... 今年5月25日、「Google Analyticsのユーザーデータとイベントデータが自動的に削除されるようになります。」というアナウンスがあった。 削除対象は、ユーザーやブラウザといった「プライバシーに関連するデータ」である。このGoogle内容は、EU域内で取得された個人情報に関する法律...
このエントリーをはてなブックマークに追加
 

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