ECサイト構築のAtoZ全28回

0 0/28 28

Lesson6 デザイン編

18ECサイトデザインのトレンド未学習

ここで学ぶ概要

この講座は約7分で読めます


「ECサイトのデザインを考えたいけど、どんなデザインが流行っているの？」
と思っている方。

ECサイトデザインのトレンドを知るには、「機能のデザイン」と「見た目のデザイン」を押さえることが大切です。

とはいえ、どのようなデザインなのか具体的なイメージはつきにくいですよね。

そこで、この記事では、

  • 機能のデザインにおけるトレンド
  • 見た目のデザインにおけるトレンド

についてお伝えします。

「デザインのことはよくわからない」という方もいるかもしれませんが、トレンドをおさえるだけならハードルはそこまで高くありません。
まずはこの記事で、ECサイトデザインのトレンドを知りましょう！

機能のデザインにおけるトレンド

ECサイトにおける機能のデザインとは、ECサイトのお客様が使う部分におけるデザインをさします。

例えば、

  • サイトメニュー
  • 商品アイコン
  • 画面スクロール

などが、機能のデザインです。

このトピックでは、

  • ハンバーガーメニュー
  • カルーセル
  • 無限スクロール

の3つについて、トレンドをお伝えします。

ハンバーガーメニュー

ハンバーガーメニューとは、3本の横線が並んだアイコンのことです。このアイコンをタップすることで、メニューが開き、希望するページを選ぶことができます。

ハンバーガーメニューのメリットは、

  • メニュー表示エリアを省略できること

です。

画面が小さいスマートフォン向けのECサイトでよく使用されており、ほとんどの場合ECサイトの上のヘッダーエリアに配置されています。

実際に、参考サイトで確認してみてくださいね。

参考サイト：lifehacker

カルーセル

カルーセルとは、ひとつのスペースに複数のコンテンツを置いて、スライドショーのように見せることのできるデザインです。

カルーセルは多くの場合、ECサイトを訪れたお客様がまず最初に目にする「ファーストビュー」に配置されます。Amazonのファーストビューもカルーセルですね。

カルーセルのメリットは、

  • ファーストビューに複数のコンテンツを表示できること

です。

たとえECサイトのターゲットが複数の場合でも、ターゲットそれぞれに合わせたコンテンツを表示することができます。

参考サイト：Amazon

無限スクロール

無限スクロールとは、お客様がコンテンツを下にスクロールするたびに、ページが自動で更新されるデザインです。

一般的にお客様は、クリックするよりもスクロールするときの方を心地よく感じます。

無限スクロールではコンテンツが続けて表示されるので、お客様はスクロールを継続しやすくなり、より快適に多くの商品を目にしてもらうことができますよ。

無限スクロールのメリットは、

  • ECサイトを訪れたお客様に、長く滞在してもらえること

です。

多くのコンテンツの中から、気に入ったものを「探してもらうこと」を目的としたECサイトにオススメのデザインです。

参考サイト：Pinterest

トピックまとめ：ECサイトにおける機能のデザイン

まとめると、ECサイトにおける機能のデザインとは、ECサイトを訪れたお客様が使う部分のデザインをさすことをお伝えしました。

例えば、

  • サイトメニュー
  • 商品アイコン
  • 画面スクロール

などが、機能のデザインです。

〈ここをチェック！〉機能のデザインにおける3つのトレンド
  • 少ないスペースでメニュー表示エリアを確保できる：ハンバーガーメニュー
  • ファーストビューに複数のコンテンツを表示できる：カルーセル
  • ECサイトを訪れたお客様に、長く滞在してもらえる：無限スクロール
    • です。
    機能のデザインのトレンドを押さえて、自社ECサイトのデザインに活かしましょう！

    見た目のデザインのトレンド

    ECサイトにおける見た目のデザインとは、

    • コンテンツのレイアウト
    • フォントの種類
    • サイトの色使い

    などの、ECサイトを訪れたお客様が目にする部分のデザインです。

    このトピックでは、

    • スプリットスクリーン
    • タイポグラフィ
    • グラデーション

    の3つのトレンドをお伝えします。

    スプリットスクリーン

    スプリットスクリーンとは、画面を上下または左右で分け、別々のコンテンツを見せるレイアウト手法です。

    スプリットスクリーンのメリットは、

    • レスポンシブデザイン(複数のデバイスに対応したデザイン)と相性がいい

    です。

    例えば、パソコンの大きな画面で表示するときは横に並べ、スマホなどの小さな画面では縦に並べる、という対応ができます。

    参考サイト：ユニメディア

    タイポグラフィ

    「WEBデザインの95%はタイポグラフィである」

    と言われているタイポグラフィは、文字によるデザインのことです。

    タイポグラフィのデザインは、

    • デザイン性の高いテキストに仕上げて「文字を見せる」もの
    • テキストを読みやすくするための「文字を読ませる」もの

    の2つに分けられます。

    つまり、このデザインでは、

    • 伝えたい情報を「文字を見せる」「文字を読ませる」の2つの手段で伝えること

    が可能です。

    近年は、テキストのデザイン性を高めることによってインパクトを強めたり、印象的なイメージを与えるようなタイポグラフィが注目されています。

    参考サイト：P22

    グラデーション

    グラデーションとは、2つ以上の色を使い、色彩の変化を取り入れたデザインです。

    グラデーションのメリットは、

    • 単色では生み出せないオリジナリティと表現の幅を与えてくれること

    です。

    表現の幅が広がることで、個性のあるECサイトを作ることができ、競合サイトとの差別化が図りやすくなります。

    参考サイト：elje GROUP

    トピックまとめ：ECサイトにおける見た目のデザインとは、目にする部分のデザイン

    まとめると、ECサイトにおける見た目のデザインとは、ECサイトを訪れたお客様が目にする部分のデザインをさしました。

    例えば、

    • コンテンツのレイアウト
    • フォントの種類
    • サイトの色使い

    などが、見た目のデザインです。

    〈ここをチェック！〉見た目のデザインにおける3つのトレンド
    見た目のデザインのトレンドは、
    • スプリットスクリーン：レスポンシブデザインと相性がよい
    • タイポグラフィ：伝えたい情報を「文字を見せる」「文字を読ませる」の2つの手段で伝える
    • グラデーション：単色では生み出せないデザインにオリジナリティと表現の幅を与える
    です。
    見た目のデザインのトレンドを押さえて、自社ECサイトのデザインに活かしましょう！

    ECサイトデザインのトレンドを押さえて、自社ECサイトのデザインに活かす！

    ここまで、ECサイトデザインのトレンドについてお伝えしました。

    ECサイトのデザインは、

    • 機能のデザイン：使う部分のデザイン
    • 見た目のデザイン：目にする部分のデザイン

    の2つに分けられます。

    機能のデザインのトレンドとして、

    • ハンバーガーメニュー
    • カルーセル
    • 無限スクロール

    の3つをお伝えしました。

    また、見た目のデザインとして、

    • スプリットスクリーン
    • タイポグラフィ
    • グラデーション

    の3つをお伝えしましたね。

    これで、ECサイトデザインのトレンドについて、理解が深まったと思います。

    それぞれのデザインにおけるトレンドと、そのメリットを押さえて、自社ECサイトのデザインに活かしましょう。

    まずは、自社ECサイトのターゲットをはっきりさせることから始めてみてください。

    小テスト：機能のデザインと見た目のデザイン
    では、最後にこの記事のトピックをつかむための小テストをします。
    【問題】：次のうち、「機能のデザイン」に該当するものを一つ選びなさい。


    【正解】2：カルーセル
    「カルーセル」は、ファーストビューに複数のコンテンツを置いて、スライドショーのように見せることのできる機能のデザインです。
    「タイポグラフィ」と「スプリットスクリーン」見た目のデザインの1つでしたね。