こんにちは、福岡オフィスの古賀です。

サイトを構成する上で必ず必要なパーツがいくつかありますが、中でもヘッダー・フッターパーツはECサイトにおいても重要なパーツです。

そこで最近よく見かけるECサイトのヘッダーパーツに注目し、大きなパターンをピックアップしてみました！

今回は、PC・SP独立型編と言うことで、

• デザイン上PCとスマホを切り分けているサイト
• サイト構築の構造上PC専用とスマホ専用で分かれているサイト

よりPCトップページを中心に紹介していきたいと思います。

まず、ECサイトのヘッダーに必要で設置すべきものは以下の要素です。

• ロゴ
• 会員登録/ログイン
• 買い物カゴ（カート）
• カテゴリーメニュー
• 商品検索窓

スペースや配置レイアウトによって見せ方を省略したり、他にも要素があったりサイトの方針によって異なってきますが、大体これらの要素がユーザーに一目で伝わるようにデザインされるのが一般的です。

これらの要素も踏まえて実際にサイトを見ていきたいと思います。

1. BEAMS
2. KINS
3. 銀座KUKI
4. SHIRO
5. まとめ

1. BEAMS

( 参考元：BEAMS（ビームス）公式サイト https://www.beams.co.jp/ )

アパレルブランドとして有名なBEAMSのオンラインショップです。

こちらのサイトのヘッダータイプは比較的スタンダードなパターンとしてECサイトでは一般的に使用されることが多く、このタイプから派生したレイアウトを使用されているサイトが多いと言っても過言ではないと思います。

ヘッダーに必要な要素は全て配置してあり、なおかつサイトの特徴として店舗スタッフのオムニチャネルコンテンツにも力を入れらているので、タイムライン形式で見ることのできるリンクもヘッダーに設置されています。

またヘッダーの下に、性別毎のタブが設置されており、性別毎のトップページに切り替えることができます。

コンテンツがとても充実しているサイトでも、このような工夫があるとユーザーが欲しい商品まで迷いにくく辿り着ける導線で使いやすいと思います！

一方スマホでは、画面上部固定のヘッダー内の設置要素は絞って、ハンバーガーメニュー内で導線を作られています。（スマホではこの形式が一般的に多く見られます。）

PCで配置していた他の要素はヘッダー下に配置されているのでファーストビューで見ることができます。

 

2. KINS

( 参考元：KINS | 菌と生きる。体が生きる。　https://yourkins.com/ )

化粧品やサプリを販売しているブランドのオンラインショップです。

ヘッダーに必要な要素は大方揃っており、基本的に背景は透明でMV上に重なっているので、コンテンツに視線をより集めるデザインだと思います。

こちらのサイトの特徴としては、トップページではMVでロゴを目立たせる為ヘッダーにはロゴは表示させていないようですが、トップページ以外の下層ページではしっかりヘッダーの中心にロゴを設置してあります。

最近写真で魅せるデザインや海外商品のサイトなどを中心によく見かけるのがこのパターンですね。

画像は商品詳細ページのものですが、とにかくトンマナに拘っておられてこだわりや商品一つ一つの魅力にフォーカスしたページ構成だと思いました。

 

( 参考元：BOOSTER（定期）KINS https://yourkins.com/products/boosterset_rsv_dec )

 

 

3. 銀座KUKI

 

( 参考元：銀座KUKI特選オンラインショップ　https://www.ginzakuki-shop.com/ )

お味噌の専門店のオンラインショップです。

こちらもPCではヘッダーの背景が透明でMV画像上に配置されています。

ヘッダーに必要な要素も揃っていて、違いはメニューや魅せるコピーなどを縦書きで表現することで和モダンな雰囲気を表現されていると思います。

和食や日本の伝統文化に属するものを扱われているサイトなどで縦書きを活用するサイトもよく見られます。

食品に使用する調味料なので、合う料理のレシピコンテンツが充実していて使用しているお味噌の商品詳細ページへの導線もあり、見せたいコンテンツもヘッダーメニューに配置されています。

 

5. SHIRO

 

( 参考元：SHIROオフィシャルサイト　https://shiro-shiro.jp/ )

化粧品で有名なSHIROのオンラインショップです。

こちらのサイトではヘッダーに必要な要素は大方揃っていて、ヘッダーメニューがMV画像の下に配置されているパターンです。

このパターンはECサイトではそこまで見られないパターンかもしれません。

PCのファーストビューでMV上にあるのはロゴとSNSアイコンのみで、MVが主役として目に入りやすくビジュアルでの訴求に強いと思います。

スクロールしてMV画像をすぎると、MV下にあったヘッダーメニューの左側にロゴが出現し、画面上部固定されます。

下層ページは、背景カラーが変わり回遊性を重視してなのか最初から画面上部固定です。

スマホはまた少し違い、画面下部にアプリのようにアイコンメニューが固定表示されます。

他にも工夫されている点がありスマホはスマホのユーザビリティを向上されています。

MV上のロゴと、PCではヘッダーとして機能していたMV下のカテゴリーメニュー群は配置は同じ位置ですが、項目が多いのでスマホでは追従しません。

ですがMV画像の高さと合わせて計算されていて、ファーストビュー内でカテゴリーメニューが見られるようになっています。

 

4. まとめ

今回は、PC・SP独立型編と言うことで、デザイン上PCとスマホを切り分けているサイトと、サイト構築の構造上PC専用とスマホ専用で分かれているサイトで見てきたのでレスポンシブ対応サイトも混在していました。

PC用とスマホ用にUIを適宜変更し別にしているので、実際の数値等はアクセス解析が可能でないと明言はできませんが、PCでのページ回遊性が高くなるのではと思います。

またセオリー通り必要な要素を隠さず表示するサイトが多い為、BEAMSのサイトのようなレイアウトをベースに派生したものになることが多いようでした。

あまり独特すぎるサイトデザインにするとオリジナリティは向上できるかもしれませんが、初めて訪れたユーザーにとっては操作に迷ってしまい欲しい情報に辿り着きにくくなってしまう可能性が高いです。

ECサイトの目的は商品を購入してもらい売上を向上させることなので、最も目に付きやすいヘッダーは特にセオリーを守ることは重要なことだと思いました。

 

こんにちは、福岡オフィスの古賀です。

ECサイトのデザインを作成する際、視認性やユーザビリティに重点を置いたり、

カートシステムを使用する為デザインの大枠はテンプレートに沿って作成する関係で、

基本軸のページは割と似たようなレイアウトのサイトになることも多いかと思います。

その中でブランドの個性を出しつつ使いやすいサイトを作るには、どんなことができるのでしょうか。。

以前のブログでECサイトとスプリットレイアウトについての考察を紹介しましたが、

今回は他にもECサイトを横断してみて、デザインが特徴的だと思うサイトを

レイアウトの視点から他にどんなことができるのか見ていきたいと思います！

 

1. GUCCI
2. nano・universe
3. FABRIC TOKYO
4. まとめ

 

1. GUCCI

 

( 参考元：GUCCI® JP　https://www.gucci.com/jp/ja/ )

誰もが知っているラグジュアリーブランド「GUCCI」のサイトです。

こちらのサイトで一番特徴的なページデザインは、商品詳細ページだと思います。

一般的に商品詳細ページで多く見られるレイアウトは、左側に商品画像・右側に商品情報とCVボタン群ですよね。

こちらのページでは、PCは商品情報ブロックを中心に配置し、商品画像でサンドイッチしたようなレイアウトで、

商品画像はこのまま2枚ずつスライドします。

また画像の使い方も大胆にはみ出した魅せ方で、まるでLPのMVのようです。

そして商品情報ブロックからカラーバリエーションの選択をしようとすると、

それまでファーストビュー下に設置されていたカラーバリエーション画像ブロックが上昇するので、

ファーストビュー＋1クリックだけでそのまま比較がしやすい仕様になっています。

この機能はSPでも使用されており、カラーバリエーションのボタンは商品画像が見えている間は追従します。

最も重要な商品画像をしっかり主役として表現しユーザーの視線を集めつつも、使いやすさも実現している点が

とても特徴的なデザインになっている理由だと思いました。

 

2. nano・universe

 

( 参考元：ナノ・ユニバース公式通販サイト　https://store.nanouniverse.jp/jp/ )

ファッションブランド「nano・universe」のサイトは特集記事や動画配信など、

コンテンツにも注力されているサイトです。

コンテンツの種類も豊富で、TOPページではそれぞれに背景もブロックデザインも異なります。

最も視線を集めるのは、PCではMVの次にくる特集ブロックかと思います。

画像面積が大きいのも理由の１つですが、他のブロックのレイアウトの使い方と比べると、

グリッドレイアウトを大変うまく応用されていて、動きのあるレイアウトにされている所以だと思いました！

ところがSPでは、MV下にくるグリッドレイアウトを応用したブロックが特集コンテンツではなく、

商品カテゴリブロックでした！

これは多様なコンテンツがある中でもSPユーザーが商品を見つけやすくする為の工夫だと思いました。

また、ブロックデザインがそれぞれ異なるのに、ごちゃっとした印象を感じさせずすっきりとした

飽きのこない印象に感じさせるのは、背景をグレーを基調に落ち着かせていることもあると思いますが、

ゆったりとした適切な余白をつけホワイトスペースを生み出しているからだと思いました。

全体を通して、レイアウトを考える上で重要な情報の優先順位をしっかりつけて優劣を表現することで、

特徴的なレイアウトを使用して組んだとしても成立するデザインだと思いました。

 

3. FABRIC TOKYO

 

( 参考元：オーダースーツのFABRIC TOKYO　https://fabric-tokyo.com/ )

オーダースーツブランドの「FABRIC TOKYO」のサイトは、オーダースーツという少し敷居の高さを感じてしまう

イメージを払拭するような明るく活発で親しみやすい印象のサイトデザインでした！

商品のほとんどがカスタマイズオーダーできるので、そもそも一般的なECサイトの購入フローとも少し違い、

デザインもより特徴的と感じるのだと思いますが、綺麗でとても見やすいデザインです！

まずレイアウトを綺麗に見せるのに重要な整列や要素のグルーピングを直感的に分かりやすくする為に

区別し反復することを徹底されていると思いました。

こちらのサイトも画像の使い方が本当に見事だと感じたのですが、

記事コンテンツのサムネ画像と、目立たせたいブロックや商品のこだわりを表すコンテンツなどで使用している画像は、

背景を一部白抜きにしていたり、全部背景が抜かれていたり、アクセントにカラー背景を入れたり、と細やかな工夫が

散りばめられていてコンテンツ毎の強弱をうまくつけられていると思いました。

それらにより、より見てほしいコンテンツへユーザーの視線を誘導できるのではと思います。

 

もうひとつ面白い工夫があり、コーディネートの雰囲気を抽象的な言葉だけでなく、

カジュアルかフォーマルかのメーターを目立つカラーのデザインで使用しホットスポットを作られていました！

スーツもこんなに着方で印象が変わるのですね。。

画像の作り方や活用の仕方で、コンテンツの対比をしっかり作ることで、

より特徴的な印象を表現されているサイトだと思いました。

（ラインナップは男性のみのようで、個人的にスーツ着る機会はほとんどないのですが女性ラインナップも今後増えると素敵だなと感じました！）

 

4. まとめ

 

いろんなECサイトを横断して、特徴的だと思ったサイトを今回じっくりと観察してみて

自分の中ではたくさんの気付きがありました。

今回紹介させていただいたサイトから共通して感じたのは、使いやすさ見やすさだけではなく、

ユーザーに何を見て欲しいか優先順位をつけ、それらを両立させるレイアウトに落とし込んでいることです。

実現するのに必要な、大胆な技や細やかな技が交錯していました。

優先順位はつけるだけでなく、直感的に伝わるようなイメージにどう近付けていくのかが大事なポイントですね。

今後もそういった技をもっと習得できるようにインプットとアウトプットを繰り返していきたいと今回強く感じました。

こんにちは、福岡オフィスの古賀です。

デザインを作成する上で必要不可欠な配色選び。

コーポレートカラーや見る人に適切に伝えるイメージカラー、ユーザビリティを重視した配色など

何か制作物を作成する際には、色選びだけでもたくさんの情報の中から最も適切な選択をする必要がありますね。

隙間時間にWebサイト上でそういった配色選びの際に、

自分の作業内容に合った様々なツールをぐるぐる探し回ることもあります。。

そんな中、外国語のサイトですが最近「dopely colors」というWebツールを見つけたので

使ってみた感じを紹介したいと思います！

 

1. 無料Web配色シミュレーションツールdopely color
2. カラーパレットのシミュレーター
3. コントラストチェッカー
4. グラデーションツールとパターン集
5. まとめ

 

1. 無料Web配色シミュレーションツールdopely colors

 

( 参考元：dopely colors　https://colors.dopely.top )

「dopely colors」は2019年設立した会社が運営されているようで比較的新しいサイトです。

オールインワン配色ツールとも言われることもあるほど、機能がたくさんあります。

サイト自体のデザインはシンプルであり非常に直感的に操作できるUIで、

英語表記でもさほど使用感的には不便は感じませんでした。

普段配色パターンやパーツデザインなどのアイデアを気軽に収集する際にpintarestを利用して集めることもありますが、

こちらの「dopely colors」は大きく分けて、配色シミュレーションツールと配色アイデアのネタ帳に分けられるようです。

特にWebデザインを制作する上で役立ちそうだと感じたツールに注目してみたいと思います。

 

2. カラーパレットのシミュレーター

 

( 参考元：dopely colorsカラーパレット　https://colors.dopely.top/palettes/unsaved-palette )

カラーアイデア帳には単色だけでも12万以上あり＋パレット各種を検索することができますが、

配色の組み合わせパレットは選んだパレットでシミュレーションツールを利用することができます。

たくさんの配色パターンがありシミュレーションで自由に色数の増減・入れ替えができるのも魅力ですが、

特にこちらの機能が便利だと思いました。

 

①パレットの形状変化によるシミュレーションパターン

②色覚異常シミュレーション

 

①については、パレットの形状が複数変化でき、形状によって使用カラーのグラデーション作成や、

トーン別の配色をシミュレーションすることができます。

そして、これらは全て画像だけでなくscssで出力してくれます！

②はその配色は色覚異常の状態でどのように見えるか、細かいタイプごとに切り替えて表示することができます。

そこでデザインを制作する前に予めカラーを調整することでシェイプなど形に左右されることなく

ユニバーサルデザインの向上にも繋げられるのではないでしょうか。

 

3. コントラストチェッカー

 

( 参考元：dopely colorsコントラストチェッカー　https://colors.dopely.top/contrast-checker/26b630-f1eeea )

こちらのツールでは、WCAG 2に従ってベタの背景色とテキストカラーとのコントラストをチェックしてくれます。

ツールについての解説にWebアクセシビリティにおける色のコントラスト比についても説明されています。

実際のツール自体もその解説通り適切なコントラスト比率をクリアしているかどうかが

赤と緑のアイコンと目標比率の表示で瞬時に判断できるUIになっています。

あらかたの配色が決まった後に、テキストが読みにくくないか細かく調整できるのは

デザインガイドラインを作成する上でも役立つのではないでしょうか。

個人的には任意のテキストの入力やフォントの選択ができるとなお嬉しいと思いました。。

今後のアップデートに期待です。。！

 

4. グラデーションツールとパターン集

 

( 参考元：dopely colorsグラデーションツール　https://colors.dopely.top/gradient-generator )

こちらはかなり直感的にグラデーションが作成できるツールです。

なんと最大15色を使用して作成でき、角度も自由自在に調整できます。

惜しい点は何故かこのツールではscssでの出力がうまくいかない点でしょうか。。

( 参考元：dopely colorsグラデーション　https://colors.dopely.top/gradients/ )

一方グラデーションパターン集では、12万以上のパターンがあり、

ランダムですが色数の増減ができ角度の調整まではそのままできるようでした。

そしてこちらはscssでの出力も可能です。

パターン集でありながらシミュレーションの要素もあるので短時間で見つけ使用したい際に便利かと思います。

今回のブログのサムネイル画像のグラデーション背景でも使用してみました。

いくつかのパターンの中から選び色を追加変更が直感的にできるので、

イメージに近い配色をスムーズに見つけ出すことができました。

 

5. まとめ

 

紹介しました機能以外にも便利な機能は他にもたくさんありました！

Googleアカウントでのサインアップフォームがあり何故かサインインがエラーになってしまい使用できませんでしたが、

パレットを保存したりいいねをしたりもできるようなので、エラーが改善されればますます便利なツールになるかと思います！

作成したグラデーションをPhotoshopなどでパターンとして追加していくのも良いですね。

なんと言ってもかなり直感的に使用できる点と画面の見やすさで楽しみながら、

デザインのアイデアやインスピレーションになる知識として配色選びができるのではと感じました！

日々のアイデア収集としてもしばらく使用してみようと思います。

こんにちは、福岡オフィスの古賀です。

私は普段の業務でアパレル系ECサイトの構築に携わることが多いのですが、海外ハイブランドのECサイトデザインを観察していると、

商品詳細ページにスプリットレイアウトを採用しているサイトをしばしば見かけることがありました。

そこで今回は実際の商品詳細ページデザイン例を比較してECサイトとスプリットレイアウトについて注目してみました！

 

1. スプリットレイアウトとは
2. MACKINTOSH
3. BURBERRY
4. Dior
5. まとめ

 

1. スプリットレイアウトとは

 

スプリットレイアウトといえば、サイトの画面を大きく分割して表現されるレイアウト方法です。

対比を表現するのに２分割＋カラー反転させて使用される広告などでも良く見られます。

スプリットレイアウトを使用することで、対比の効果や要素を互いに引き立たせることができ、

Webサイト上では分割された画面にスクロール時の動きが加わることでその効果をより視覚的に発揮し、

オリジナリティを強調した印象を与えることも可能です。

PCではそのように画面を分割し横並びにすることで表現できますが、スマホ端末のように小さい画面では縦並びに変化するというような

レスポンシブデザインに対しても組み込みやすいのも特徴のひとつと言われています。

またスクロール時に視差効果をつけたり、動画と組み合わせたりといろいろと応用方法はありますが、

大きく分けると、分割した画面を全て固定表示するタイプと片方のみスクロールするタイプがあり、

ECサイトの商品詳細ページでよく使用されているのは片方のみスクロールのタイプになります！

 

2. MACKINTOSH

 

   　

( 参考元：MACKINTOSH　https://www.mackintosh.com/jp/woman )

トレンチコートで有名な英国の老舗ブランドですね。

こちらのスプリットレイアウトは少し珍しく、ファーストビューでは見えていた商品名からCVボタンまでのブロックは普通にスクロールされますが、

商品詳細情報のブロックがページ上部に固定される仕様でその効果を発揮されています。

そしてスクロールし隠れた、商品名や価格、CVボタン周りについてはヘッダー下に新たに固定表示されるようになります。

これにより常にCVボタンが画面上に存在しユーザーはいつでもカートインができ、

そのままスマホ画面も同様のデザインで固定表示となり（固定位置は変わりますが）、分割していたブロックが縦並びになるので、

レスポンシブしやすく崩れにくい構造で使いやすいデザインになっていると思います。

 

3. BURBERRY

 

　

( 参考元：BURBERRY　https://uk.burberry.com/ )

日本では「バーバリーチェック」で有名な大人気のブランドですね。

こちらの商品詳細ページは、商品画像と商品情報部分が背景ごとはっきりとセパレートに分けられたレイアウトです。

商品画像が１カラムなのでインパクトが強く、より印象的になります。

またレイアウトを維持しやすくする為に、なるべく詳細情報を隠し、表示する際もモーダルとして表示される仕組みなので、

レスポンス時のレイアウト崩れが起きにくくスプリットレイアウトの効果が強く発揮されています。

また、スマホではPCで分割していたブロックを縦並び＋cssを応用して視差効果を与えるデザインになっており、

スマホでもオリジナリティを強調したデザインになっていました。

そしてスプリットレイアウトとは別に、商品在庫がある店舗を検索できる機能や付近の店舗の訪問予約ができる機能、

チャット機能も活用しており、セールスDXにも積極的に取り組まれているのが分かりました。

 

4. Dior

 

　

( 参考元：Dior　https://www.dior.com/ja_jp )

ファッションだけでなく化粧品などでも有名なブランドですね。

こちらも商品画像と商品情報部分でセパレートに分かれたレイアアウトでスマホでは縦並びになります。

商品画像が２カラム表示なので少ないスクロール量で多くの写真を見ることができますね。

バーバリーと比較すると詳細情報部分がアコーディオン式で開閉されますが少し縦長に伸びてしまうようです。

それにより商品画像の枚数によっては、商品情報部分の固定表示が先に解除しページ下部へスクロールされ、

スプリットレイアウトの視覚的な効果を維持しにくくなってしまうかもしれません。

ただスプリットレイアウトとは別に、Diorでも在庫のある店舗検索ができ、かつその店舗の訪問予約を一連の流れで取得できる機能があったり、

レコメンド商品をページ遷移せずにモーダル表示でカートインが可能な機能などCVボタン周りのUIが優れていたりと

購入前のちょっとした手間を削減できるユーザー目線のデザインだと思いました。

 

5. まとめ

 

スプリットレイアウトをECサイトの商品詳細ページで使用すると、

商品画像がより引き立つことで印象強く与えられるのと同時に、レスポンシブ時のレイアウト崩れが起きにくい構造になる利点が分かりました。

また、PCだけでなくスマホの縦並びのレイアウト＋スクロール時の動きの見せ方にひと工夫加え共通化させることで、

PCとスマホの両方で印象的なページにすることが可能なのだと思いました。

しかしスプリットレイアウト自体はただ画面をセパレートに分けて固定表示させればいいと言うものではなく、

スクロール量も関係するのでブラウザの高さや固定表示させる情報の取捨選択・その見せ方にも気を付けて作成する必要があります。

ユーザビリティ向上の為の機能やUIデザインとうまく組み合わせ、そのような注意点に即した使い方ができれば、

商品の魅力をより印象的に伝えられて、なおかつ使いやすいECサイトデザインにできる強い味方になるのではないでしょうか。

こんにちは、福岡オフィスでデザイン業務に携わっている古賀です。

普段、私はアパレル系のE Cサイトデザイン＆フロント構築を主に担当しています。

Webデザインを作成するときに適切なアウトプットができるように、

いろんなサイトからデザインのインプットすることもひとつの方法ですよね。

販売する商品のジャンルにより実店舗でのディスプレイ方法が違うのと同じで

ECサイトでも魅せ方は違ってくるのでは？？と気になったので、

今回は普段担当しているアパレル系以外のECサイトを観察して、デザインのポイントについて考えてみました！

※モール等ではなく自社でカートシステムを導入しているサイトに絞りました。

 

1. 家具・ファブリック系ライフスタイルショップ「unico」
2. コスメブランド「shu uemura」
3. ボタニカルライフスタイルブランド「BOTANIST」
4. まとめ

 

１. 家具・ファブリック系ライフスタイルショップ「unico」

 

( 参考元：unico公式通販サイト株式会社ミサワ　https://www.unico-fan.co.jp/shop/default.aspx )

デザイン性や質にこだわったインテリアショップです。

大きな家具から生活雑貨まで揃っていてトータルでお部屋を揃えてしまいたくなるデザインの商品ばかりです。

そんな豊富な商品の魅力を様々なコンテンツを用いて紹介しているサイトです。

とは言え、家具などの高い買い物はなかなかWeb上でポチッとはしにくいですよね。

こちらのサイトはたくさんポイントがありますが、、ずばり、

“購買心理のプロセスに沿ったコンテンツデザイン”

実店舗のコーディネートもとても素敵でそれを参考にしても良いのですが、

まず家具のシュミレートがWeb上でもでき作成された見積もり番号でカートインまでできちゃいます。

（店頭での見積もりも注文できるようです！）

そしてInstagramの投稿や店員さんたちの実際のお部屋のコーディネートの紹介を活用して、

実店舗で見て触れた後でも十分に商品について検討ができるのです。

実店舗とECサイトを連携したオムニチャネル化により、大きな買い物に購入検討の時間を設けたいユーザーの購買心理を掴んでいると思いました。

 

２. コスメブランド「shu uemura」

 

( 参考元：シュウ ウエムラ公式オンラインショップ　https://www.shuuemura.jp/)

デパートコスメの代表格ブランドのひとつですね。

商品の魅力が際立ち、雰囲気も統一感を感じられるポイントが随所に散りばめられていますが、

こちらのサイトのトップページの構造は、特集、商品ランキングやベストセラーなどの紹介と割とシンプルな構造です。

そもそもコスメを購入する時、自分の肌に合う色かどうか、、、とか

いろいろ試して決めたいからネットより実店舗で選ぶ方が多いかもしれません。

ずばりこちらのサイトのポイントは、

“商品詳細ページや特集などで、対象商品のバーチャルメイクができる”

PCでもスマホでもできます。

気軽にいくつも試せて、画像保存もできるので比較もしやすく、購入したい気持ちの後押しにもなります！

 

３. ボタニカルライフスタイルブランド「BOTANIST」

 

( 参考元：BOTANISTオフィシャルサイト 【ボタニスト】｜シャンプー・トリートメント・スキンケアの通販サイト　https://botanistofficial.com/shop/default.aspx)

ドラッグストアなどで大人気のシャンプーで有名なブランドで、

独自の世界観とスタイリッシュなデザインが支持を集めています。

そのボタニカルな雰囲気をゆとりのあるデザインですっきりと表現されています。

日々購入する機会の多いシャンプーはリピートしたり限定の香りが出ていると、ついつい購入したくなりますよね。。

ずばりこちらのサイトのポイントは、

“ターゲットユーザーに対しての適切な導線構造”

こちらのサイトでは、商品詳細ページはもちろんありますが、

基本的にどのページでも商品詳細ページに飛ばずとも１ポチッとするだけでカートインできちゃいます。

そして、商品にはスタンダードやプレミアム、ヴィーガンなどの販売ラインがあり、欲しい商品がすぐに見つけられます。

実は初めて知ったのですが、こちらのシャンプーはパーソナルラインがあり、

Web上での簡単なカウンセリングで自分だけの特別なシャンプーを購入できるようなのです。

このように様々な販売方法がWeb上で取りやすいのも導線構造がしっかりしている証拠だと思いました。

 

４. まとめ

 

やはり商品ジャンルによって、コンテンツはもちろんですが、商品ページやカート周りの展開方法が違うことが分かりました。

商品ジャンルや価格、使用シーンによってユーザーの行動が違いますが、

今回観察したどのECサイトでもユーザーの行動に沿ったデザインを作成されていました。

これからもクライアントのエンドユーザーにより着目して、適切なデザインを作成できるよう精進します！