Stylebook

インターネットやIT技術は年々進歩を遂げ、現在ではネット上であらゆる購入が可能となる時代を迎えています。そんな時代のニーズに応えるECサイトが欠かせません。

ECサイトは店舗運営と並び、新たな売上の柱、あるいはそれ以上の存在となり得ます。店舗運営では内装にこだわることで店作りを行うでしょう。それと同様に、ECサイトでもデザインにこだわり、洗練されたサイトを作成することが求められます。

この記事では、洗練されたECサイトを作る重要性やそのポイント、また、洗練されたECサイトの事例をご紹介いたします。

1 おしゃれなecサイトの重要性
2 おしゃれなecサイトを作成する上でのポイント
3 ECサイトのおしゃれ化における成功事例10選
4 【まとめ】ECサイトを洗練させておしゃれなデザインにしよう

おしゃれなecサイトの重要性

ECサイトを洗練することは、ECサイトにおける売上向上のための重要な要素の一つです。

単純に洗練された方が売上が上がるというイメージがあるかもしれませんが、洗練されたECサイトの重要性について詳しく解説します。

ECサイトのデザインは、実店舗における内装に相当します。たとえば、学生が集まり、賑やかな雰囲気のカフェの場合、大人数が一つのテーブルを囲むための円卓や、活気を醸し出す明るい照明が設置されることでしょう。

一方、落ち着いた雰囲気を求めるカフェでは、ゆっくりとくつろげるソファや観葉植物が配置されるかもしれません。最近ではリモートワークが主流になりつつありますから、Wi-Fiが利用でき、充電用のコンセントが自由に使え、かつ手元を照らすライトが設置されたカフェも考えられます。

このように、店のコンセプトによって内装は異なります。

これはECサイトにおいても同様です。例えば、大人の女性向けのエレガントな化粧品を扱う店舗が、原色の多い子供向けの色調のECサイトであれば、商品のイメージが大きく変わってしまいます。

つまり、ECサイトのデザインは、そのサイトがどのようなターゲット層に向けて、どのような商品を販売しているのかを表現する手段の一つとなります。また、自社の商品やブランドイメージにも密接に関わってきます。

したがって、ECサイト自体のコンセプトやターゲット層、そして販売する商品の特性やコンセプトを明確に定めた上で、それに合わせたデザインに仕上げることが非常に重要となります。

商品が売れるかどうかはコンセプトに大きく依存すると言われています。ECサイトのデザインはそのコンセプトを具現化する要素の一つであり、コンセプト全体を形作る大部分を占めています。そのため、サイト内で販売する商品が売れるかどうかを左右する大きな要素と言えます。

おしゃれなecサイトを作成する上でのポイント

ECサイトを作る上で、デザインはコンセプトを表すものであり売り上げにも関わってくるのでとても重要です。

それではオシャレなECサイトを作成する上ではどのようなことを意識すればよいのでしょうか。ポイントを紹介していきます。

ユーザーエクスペリエンスの向上

最初の重要なポイントは、ユーザーエクスペリエンスの向上です。ユーザーエクスペリエンスとは、自社のECサイトを訪れたユーザーがリンクをクリックしたり、画面をスクロールしたりしたときに得られる全体的な体験を指します。スクロールに応じてテキストが順次表示されるアニメーションや、ボタンを押すと光るなどのエフェクトがユーザーエクスペリエンスに含まれます。

ユーザーエクスペリエンスでは、エレガントさと利便性の両方を考慮する必要があります。エレガントさを優先してボタンの色が背景に溶け込みすぎて視認性が低下した場合、ユーザーはボタンの位置を探す手間を強いられます。逆に、視認性を重視してボタンを極度に目立たせた場合、デザインの一貫性が損なわれる可能性があります。

たとえば、淡いピンクの背景色が特徴的なサイトでは、淡い水色で見出しやボタンを設計することで、デザイン性を保ちつつ、重要な要素を視覚的に強調することが可能です。

さらに、レスポンシブデザインに対応し、スマートフォンやPC、タブレットの画面サイズに合わせて表示を変えること、コンセプトに合った高解像度の画像を使用すること、一目見ただけでどの部分を押せばどのような操作が可能であるかがわかるデザインにすること、も重要な要素です。

ブランドイメージの表現

デザインでブランドイメージを表現しましょう。前述の通り、デザインはお店や商品のコンセプトを表すものであり、お客様はECサイトのデザインを見てブランドに対するイメージを固めます。そのため、顧客に抱いてほしいイメージに近づけるようにECサイトをデザインしていきましょう。

例えば30代女性に、サロン帰りの綺麗な髪を保てる高級なシャンプーを販売しているECサイトの場合を考えてみましょう。

20代ではなく少し大人な30代がターゲットとなっていて、かつ安物ではなくリッチなシャンプーを販売しているので、ワインレッドのような高級感も感じられながら女性的な色合いがメインの色彩になってくるでしょう。

書体は高級感の感じられる明朝体、ロゴも高級感を感じられるように細い線で描かれたエンブレムや商品名の文字列などといったものになるでしょう。

商品写真とビジュアルコンテンツ

商品写真やECサイトに挿入するビジュアルコンテンツは、サイトのコンセプトを伝達し、スタイリッシュな雰囲気を創出するための重要な要素となります。

たとえば、成熟した女性像に近づきたいと願う20代前半の女性を対象にリップ製品を販売するECサイトを考えてみましょう。そのサイトのカラースキームは、若々しさと女性らしさを強調するピンクを基調とする可能性が高いです。ただし、子供っぽいパステルピンクではなく、成熟した雰囲気を持つビビッドピンクがコンセプトをより適切に表現するでしょう。

モデルを起用する場合は、単に若くかわいらしい女性よりも、若さと成熟さを兼ね備えたモデルがデザインのコンセプトとより一致します(参考: https://lp-kanji.com/lp/15526/)。

モデルがリップを塗るシーンの表情では、無邪気な笑顔よりも、きりっとした成熟した表情の方が、「大人へのステップアップ」を体現するリップというコンセプトを伝えるでしょう。

また、商品画像は高画質であることは言うまでもありませんが、自然光を取り入れた撮影、余白の均等な配置、シンプルな白背景での撮影、カメラ角度の調整なども重要なポイントとなります。

自然光が不足している場合や、他の問題が生じた場合は、写真編集を通じて光量を調整したり、色彩や温度を調整することで、より魅力的な商品写真を創り出すことが可能です。

シンプルでスタイリッシュなレイアウトとデザイン

シンプルでスタイリッシュなデザインもまた、スタイリッシュなECサイトを創出する上での重要な要素となります。

自社の商品の魅力を詳細に伝えたいという願いは理解できますが、情報を過剰に詰め込むと、顧客にとっては視認性が低いECサイトとなってしまう可能性があります。必要な情報を明瞭で視認しやすい位置に配置することが重要であり、そのためにはシンプルでスタイリッシュなレイアウトを意識することが求められます。

シンプルかつスタイリッシュというのは、余分な情報が排除され、一見で必要な情報をすべて把握できるという状態を指します。

自社商品の熱心なファンであれば詳細な説明文も読むかもしれませんが、そうでない大多数の顧客は、サイト内をスムーズにスクロールしながら情報を探し求めます。

そのような状況においても、顧客に必要な情報を伝えるためには、不要な情報は可能な限り排除し、一見で理解できるデザインを追求することが大切です。

具体的には、余白を適切に設けて必要な情報を中心に配置したり、サイトのトップに目次やメニューを表示したり、商品の概要を1枚の画像にまとめて掲載するなどの方法が挙げられます(参考: https://lp-kanji.com/lp/10367/)。

ソーシャルメディアとの連携

ソーシャルメディアとECサイトの連携は、サイトの魅力をさらに引き立てる手段となり得ます。

特に、写真主体のSNSであるインスタグラムやPinterestは、ECサイトと絶妙な相性を示しています。

例えば、インスタグラムにおいて多数の商品を魅力的に展示し、スタイリッシュなアカウントを構築している場合、そのアカウントをECサイト内に設置するだけで、独特のギャラリーが完成します。

加えて、インスタグラムはハッシュタグ機能を備えているため、商品を購入したユーザーの投稿をリポストするなど、ユーザーを巻き込む企画を展開することも可能です。

具体的な事例として、小型アクションカメラGo Proのインスタグラムアカウントは、ユーザーが投稿した映像をリポストする形で運用されています(参考：https://www.instagram.com/goprojp/)。

モバイルフレンドリーなデザインとパフォーマンス

スマートフォンの普及に伴い、Webサイトを閲覧する人々の大多数がスマートフォンを使用するようになりました。そのため、ECサイトはスマートフォンに対応する形で設計されることが求められます。モバイルフレンドリーとは、モバイルデバイスでも容易に閲覧できることを意味します。

デザインの面だけでなく、ページの読み込み速度も重要な要素となります。デザインや視覚効果にこだわりすぎてサイトが重たくなり、読み込み時間が長引くと、その効果は逆効果となります。なぜなら、ユーザーは読み込みに3秒以上かかると30%が、5秒以上かかると90%が離脱すると言われているからです。

したがって、レスポンシブなデザインになっているか、ページの読み込み速度がどの程度なのか、などを定期的に確認し、必要な調整を行うことが重要となります。

ECサイトのおしゃれ化における成功事例10選

これまでに、洗練されたECサイトを設計する上で留意すべき要点について述べてまいりました。ここでは、参考となるECサイトを10例紹介し、それぞれがどのような点で示唆を与えてくれるかを詳述します。

また、画像と画像が一画面内で途切れないように設計され、一度のスクロールで次の画像に移動できるよう工夫されています。これはユーザーフレンドリーな設計で、見る者にとっては非常に見やすい形といえます。

UNIQLO

引用：https://www.uniqlo.com/jp/ja/

ユニクロは幅広い層に認知されているアパレルブランドで、そのECサイトも独自のこだわりが見受けられます。まず目を引くトップの画像では、ユニクロ独特のシンプルなスタイルを身に纏ったモデルが登場します。商品名と価格が併記されているため、一瞥しただけで購入を検討することが可能です。

Nike

引用：https://www.nike.com/jp/

ナイキはアパレルブランドでありながら、スポーツ用品やスポーツウェアを主軸に展開しています。トップページの冒頭部には、スケートボードを操る足元やバスケットボールを投げるシーンなど、ブランドのコンセプトを体現する動画が配置されています。

さらに、「生理中の運動をサポート」といったニッチな課題を提示し、その解決策として商品を提案しています。

メンバー特価の商品を並べたり、売れ筋商品を陳列することで、「メンバーシップの存在」「現在人気の商品」といった情報を顧客に対して自然に伝えることが可能となっています。

LUSH

引用：https://www.lush.com/jp/ja

ラッシュは石鹸を主力商品とするブランドであり、画面全体に大きな画像が配置され、没入感を提供するデザインが特長となっています。

それぞれの画像は一つの商品カテゴリーを示し、例えば「スキンケア」の大きな画像には、洗顔料&クレンジング、フェイススクラブ&角質ケアといったより具体的な分類が含まれています。これらをクリックすることで該当の商品を閲覧することが可能です。

洗練された雰囲気に加えて、自身が求める商品を容易に見つけることができる構成となっており、非常にユーザーフレンドリーなデザインです。また、画像上部にはメニューボタンも設けられており、こちらからも商品カテゴリーを探すことができます。利便性が高いサイトと言えるでしょう。

BAKE cheese talt

引用：https://cheesetart.com/

こちらはチーズタルトを専門に販売しているECサイトで、サイトを開くとまずアニメーションでロゴが表示されます。洗練された印象は与えますが、直ちにサイトの内容を確認したいユーザーにとっては余計な動作と感じられ、ページの読み込み速度も高速ではないため、これが原因で離脱するユーザーも存在するかもしれません。

しかし、その内容部分は、チーズタルトの魅力を伝える多種多様な表現での商品写真が充実しており、商品撮影の参考になります。

一方で、購入ボタンがメニュー部分にしかないため、価格表示部にも購入ボタンを設けたり、ページ最下部に購入用フォームを設置すると、ユーザーがより容易にアクションを起こしやすくなるでしょう。