こんにちは、福岡オフィスの古賀です。
前回前々回と、最近よく見かけるECサイトのヘッダーパーツについてPCトップページを中心に注目してきました。
ピックアップしてきたサイトから獲得できた情報を整理し今回の記事でまとめたいと思います。
一般的にECサイトのヘッダーに必要で設置すべきものは以下の要素です。
- ロゴ
- 会員登録/ログイン
- 買い物カゴ(カート)
- カテゴリーメニュー
- 商品検索窓
スペースや配置レイアウトによって優先順位をつけ見せ方を省略したり、他にも要素があったりとサイトの方針によって異なりますが、大体これらの要素がユーザーに一目で伝わるようにデザインされます。
今回様々なECサイトを見てきて、優先順位をつけるとすれば以下のような傾向が多いのではと思います!
- 1、会員登録/ログイン
- 1、買い物カゴ(カート)
- 2、ロゴ
- 3、カテゴリーメニュー
- 4、商品検索窓
会員登録/ログインと買い物カゴ(カート)は今回紹介したサイトはすべて表示していたので同率1位にしました。
2位にロゴとしたのですが、トップページに関しては、ヘッダー上ではなくMVで表現するケースもいくつか見られたので会員登録/ログインと買い物カゴ(カート)よりは下位にしましたが、ファーストビューでは必ず見せるべき要素だと思います。
続いて3位にカテゴリーメニュー、4位に商品検索窓としましたが、こちらの2つはサイトの方針、前回前々回のPC・SP独立型編とスマホライク編のようなサイトの構成で変動するかと思いました。
2、PC・SP独立型
デザイン上PCとスマホを切り分けているサイトと、サイト構築の構造上PC専用とスマホ専用で分かれているサイトでよく使用されるヘッダーパターンについて簡単にイラストにしてみました。
▼ヘッダー背景あり
▼ヘッダー背景なし
このようなレイアウトを選択しているサイトの特徴としては以下のことが挙げられると思いました。
- PC用とスマホ用にUIを適宜変更し別にすることで、PCの広いスペースを活かしてページの回遊性を上げられる。
- セオリー通りヘッダーに必要な要素を隠さず表示するサイトが多い為似たレイアウトになりやすい。
- セオリー通りが多い為初めて訪れたユーザーでも操作に迷いにくく欲しい情報に辿り着きやすい。
実際に注目したサイトの詳細についてはこちらの記事をご覧ください。
投稿: 2021年10月12日
こんにちは、福岡オフィスの古賀です。 サイトを構成する上で必ず必要なパーツがいくつかありますが、中で・・・
3、スマホライク型
PCデザインもスマホライクにデザインされているサイトでよく使用されるヘッダーパターンについてこちらも簡単にイラストにしてみました。
▼PCヘッダーカテゴリーメニューなし
▼PCヘッダーカテゴリーメニューあり
特に海外サイトが多い印象ですが、次のレイアウトもしばしば見かけます。
▼PCヘッダーサイドメニューあり(SPのハンバーガーメニュー)
また、スマホライクなレイアウトを選択しているサイトの特徴としては以下のことが挙げられると思いました。
- ヘッダーに必要な要素を残しつつ、ターゲットのスマホ操作に慣れている世代のユーザーに合わせたデザイン。
- レスポンシブデザインの場合、レスポンシブ時の切り替えの違和感が少なく、ソース管理もしやすい。
- 目に入る情報量が少なくなるので、ビジュアルやコンテンツでの訴求強化に適しているが、メニューを隠す場合はPC上では次のアクションとなるものを探す必要があるのでユーザーが迷いにくいようなコンテンツ構成も重要。
実際に注目したサイトの詳細についてはこちらの記事をご覧ください。
投稿: 2021年10月26日
こんにちは、福岡オフィスの古賀です。 前回に引き続き、最近よく見るECサイトのヘッダーパーツのUIデ・・・
4、まとめ
ECサイトのヘッダーパターンについてPC・SP独立型とスマホライク型を2軸にいろんなサイトから分析してきましたが、この2軸の切り口だけでも、それぞれの共通した特徴が浮かび上がってきたと思います。
サイトのジャンルがまた違うと、必要な要素も変わりますしレイアウトも変わってきます。
また別の切り口で分析してみるのも面白そうです。
サイトをデザインすることは、見た目を良くすることだけではなく、ユーザーにとってストレスなく考えさせない操作性を模索し提供することでそのサイトで伝えるべき情報をいかに明確に伝えられるかが重要だと思います。
その為には、デザインに入る前に、お客様の狙うターゲットユーザー層や、何を重視してサイト作りをしていきたいのかなどしっかりと情報収集し整理していくことが、どんなレイアウトにするのが適しているのか選択していくためにも大変重要なことだと改めて思いました!
今後もお客様のご要望に適切なデザイン提案ができるよう日々の情報収集を引き続き行っていきたいと思います。
こんにちは、福岡オフィスの古賀です。
前回に引き続き、最近よく見るECサイトのヘッダーパーツのUIデザインパターンについて、今回はスマホライク編です。
PCでもスマホライクなサイトのトップページを中心に見ていきたいと思います!
↓前回の記事はこちら↓
投稿: 2021年10月12日
こんにちは、福岡オフィスの古賀です。 サイトを構成する上で必ず必要なパーツがいくつかありますが、中で・・・
おさらいとして、一般的にECサイトのヘッダーに必要で設置すべきと言われている要素はこちらです。
- ロゴ
- 会員登録/ログイン
- 買い物カゴ(カート)
- カテゴリーメニュー
- 商品検索窓
1、ABC-MART GRAND STAGE
シューズ小売店のABCマートのラインで、各人気ブランドの限定アイテムなどを扱うGRAND STAGE公式オンラインショップです。
まずヘッダーに必要な要素はほとんど設置されています。
なおかつヘッダーデザインはPCもSPのレイアウトをそのまま採用されており、ハンバーガーメニュー内に基本的なメニューを配置されています。
ヘッダーのすぐ下に設置してある検索窓は、ページスクロールの際に上方向にスクロールした時にのみ画面上部固定で表示される仕様です。
また、ハンバーガーメニューとは別に検索窓の左端に配置されているアイコンメニューが絞り込み検索のフィルターのようです。
つまり商品一覧ページではなくとも、どのページを表示していてもこのアイコンから絞り込み検索ができる仕様です。
この仕様も、デザイン含めSP同様にPCも共通のようです。
コンテンツでもスライダーに矢印アイコンがないのは、スマホでスライダーはスワイプ操作することが多いことからそのようなデザインに統一されているのかと思いました。
完全にターゲットをスマホ操作がメインの世代のユーザーを狙っているのではと思います。
2、hince
韓国コスメブランドのオンラインショップです。
カラーリングだけでなく背景の角丸の形状など細部までトンマナが統一されていてとても素敵なデザインです。
こちらのサイトもヘッダーに必要な要素はほとんど設置されていて、PCもSP同様のハンバーガーメニューが設置されるレイアウトを採用されています。
そしてヘッダー背景が透明かつ四隅に寄せるデザインでコンテンツの邪魔になりにくく、ビジュアルでの訴求が重視されています。
ハンバーガーメニューでの違いといえば、SPよりもPCの方がメニューを開いた時の項目が細かく表示されており、SPではタップしてアコーディオン式に開いて選ぶところを、1アクション省略されています。
デザインは同じでも、こういった細かい仕様があるとPCとSP各々のユーザビリティが向上されると思います。
コンテンツもスプリットレイアウトをブロック毎に使用していて、PCではスクロールの動き、SPではスワイプの動きにそれぞれ合わせたデザインで、どちらのデバイスでも使い勝手が良いのではないでしょうか。
3、FABRIC TOKYO
こちらのサイトは以前の記事で紹介したオーダースーツブランドのオンラインショップです。
以前の記事で紹介した時からヘッダー周りのUIデザインがスマホライクに変化していました。↓
投稿: 2021年5月25日
こんにちは、福岡オフィスの古賀です。 ECサイトのデザインを作成する際、視認性やユーザビリティに重点・・・
hinceのサイトのようにヘッダー背景は透明でハンバーガーメニューが設置されており、その他の要素もほとんど設置されていますが、こちらのサイトはPCではハンバーガーメニューだけでなくカテゴリーメニューを別に設置されています。
カテゴリーメニューとハンバーガーメニュー内の項目は、同じフライアウトが出現する仕様で、スマホでも同様の要素を画面のスペースに合わせレイヤーを分ける程度の違いで実装されています。
※ハンバーガーメニュー内もテキストだけでなく切り抜き画像を使用するなど工夫されているので直感的に操作ができるのではと思います!
PCはSPに比べてスペースに余裕があるので、このようによく使用される項目は出しておいた方がユーザーの操作は1アクションで済むので使いやすいかもしれません。
4、LACOSTE
アパレルブランドで有名なラコステのオンラインショップです。
こちらのサイトでは、PCは画面上部にヘッダー、左側にメニューが固定表示してあり、残りの右側のコンテンツ部分のみスクロールできる仕様です。
このメニューですが、下層ページでも同じように固定表示されているため回遊性に優れており、スマホではハンバーガーメニューとしてそのまま使用されています。
最近は1カラムレイアウトを意識したサイトが多く、ECサイトでも画面幅いっぱいに画像を表示させることもよく見られるようになりました。
世界観を魅力的に表現できるのですが、画像の比率やバランスの制御の仕方によっては画像が大きすぎてPC環境によって見辛くなってしまうケースも見受けられます。
こちらのサイトのように片側にメニュー固定すると、コンテンツ幅いっぱいに画像を使用したとしてもそういった見辛さが解消されていると思います。
このように左側にカテゴリーメニュー含め必要な要素を配置したヘッダーを固定表示させるパターンもECサイトで見かけることが増えたのではと思います。
ただし、このようなレイアウトを組む場合はデザイン以前に、できるだけ情報量を整理しスッキリさせることが肝になってくるかと思います。
5、まとめ
今回はスマホライクなサイトを見ていきましたが、ECサイトのヘッダーに必要な要素を残しつつ、ターゲットのスマホ操作がメインの世代のユーザーに合わせたデザインをされていました。
スマホ操作に慣れているということは、スマホのUIとして一般的なアイコンやレイアウトの方がターゲットにとっては自然体でよりユーザビリティ的に適しているのだと思います。
また、PCもスマホライクなデザインにすることで、レスポンス時の切り替えの違和感も少なく、ソースの運用もしやすくなることが多いので、レスポンシブ対応により適した仕様にできると思いました。
ただPCでそのままスマホのデザインを流用するのではなく、ソース構造が変わらない程度のちょっとした工夫をデザインに取り入れた方が、現状は幅広いユーザー層に受け入れられやすいのではないかと思いました。
狙うべきターゲットユーザーにとっていかにストレスなく考えさせない操作性を提供できるUIデザインとはどんなものなのか、自分の体験も1ユーザーとして踏まえた目線で考えていくことが大事なのだと思います。
こんにちは、福岡オフィスの古賀です。
サイトを構成する上で必ず必要なパーツがいくつかありますが、中でもヘッダー・フッターパーツはECサイトにおいても重要なパーツです。
そこで最近よく見かけるECサイトのヘッダーパーツに注目し、大きなパターンをピックアップしてみました!
今回は、PC・SP独立型編と言うことで、
- デザイン上PCとスマホを切り分けているサイト
- サイト構築の構造上PC専用とスマホ専用で分かれているサイト
よりPCトップページを中心に紹介していきたいと思います。
まず、ECサイトのヘッダーに必要で設置すべきものは以下の要素です。
- ロゴ
- 会員登録/ログイン
- 買い物カゴ(カート)
- カテゴリーメニュー
- 商品検索窓
スペースや配置レイアウトによって見せ方を省略したり、他にも要素があったりサイトの方針によって異なってきますが、大体これらの要素がユーザーに一目で伝わるようにデザインされるのが一般的です。
これらの要素も踏まえて実際にサイトを見ていきたいと思います。
1. BEAMS
アパレルブランドとして有名なBEAMSのオンラインショップです。
こちらのサイトのヘッダータイプは比較的スタンダードなパターンとしてECサイトでは一般的に使用されることが多く、このタイプから派生したレイアウトを使用されているサイトが多いと言っても過言ではないと思います。
ヘッダーに必要な要素は全て配置してあり、なおかつサイトの特徴として店舗スタッフのオムニチャネルコンテンツにも力を入れらているので、タイムライン形式で見ることのできるリンクもヘッダーに設置されています。
またヘッダーの下に、性別毎のタブが設置されており、性別毎のトップページに切り替えることができます。
コンテンツがとても充実しているサイトでも、このような工夫があるとユーザーが欲しい商品まで迷いにくく辿り着ける導線で使いやすいと思います!
一方スマホでは、画面上部固定のヘッダー内の設置要素は絞って、ハンバーガーメニュー内で導線を作られています。(スマホではこの形式が一般的に多く見られます。)
PCで配置していた他の要素はヘッダー下に配置されているのでファーストビューで見ることができます。
2. KINS
化粧品やサプリを販売しているブランドのオンラインショップです。
ヘッダーに必要な要素は大方揃っており、基本的に背景は透明でMV上に重なっているので、コンテンツに視線をより集めるデザインだと思います。
こちらのサイトの特徴としては、トップページではMVでロゴを目立たせる為ヘッダーにはロゴは表示させていないようですが、トップページ以外の下層ページではしっかりヘッダーの中心にロゴを設置してあります。
最近写真で魅せるデザインや海外商品のサイトなどを中心によく見かけるのがこのパターンですね。
画像は商品詳細ページのものですが、とにかくトンマナに拘っておられてこだわりや商品一つ一つの魅力にフォーカスしたページ構成だと思いました。
3. 銀座KUKI
お味噌の専門店のオンラインショップです。
こちらもPCではヘッダーの背景が透明でMV画像上に配置されています。
ヘッダーに必要な要素も揃っていて、違いはメニューや魅せるコピーなどを縦書きで表現することで和モダンな雰囲気を表現されていると思います。
和食や日本の伝統文化に属するものを扱われているサイトなどで縦書きを活用するサイトもよく見られます。
食品に使用する調味料なので、合う料理のレシピコンテンツが充実していて使用しているお味噌の商品詳細ページへの導線もあり、見せたいコンテンツもヘッダーメニューに配置されています。
5. SHIRO
化粧品で有名な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サイトを横断してみて、デザインが特徴的だと思うサイトをレイアウトの視点から他にどんなことができるのか見ていきたいと思います!
投稿: 2021年4月6日
こんにちは、福岡オフィスの古賀です。 私は普段の業務でアパレル系ECサイトの構築に携わることが多いの・・・
1. GUCCI
誰もが知っているラグジュアリーブランド「GUCCI」のサイトです。
こちらのサイトで一番特徴的なページデザインは、商品詳細ページだと思います。
一般的に商品詳細ページで多く見られるレイアウトは、左側に商品画像・右側に商品情報とCVボタン群ですよね。
こちらのページでは、PCは商品情報ブロックを中心に配置し、商品画像でサンドイッチしたようなレイアウトで、商品画像はこのまま2枚ずつスライドします。
また画像の使い方も大胆にはみ出した魅せ方で、まるでLPのMVのようです。
そして商品情報ブロックからカラーバリエーションの選択をしようとすると、それまでファーストビュー下に設置されていたカラーバリエーション画像ブロックが上昇するので、ファーストビュー+1クリックだけでそのまま比較がしやすい仕様になっています。
この機能はSPでも使用されており、カラーバリエーションのボタンは商品画像が見えている間は追従します。
最も重要な商品画像をしっかり主役として表現しユーザーの視線を集めつつも、使いやすさも実現している点がとても特徴的なデザインになっている理由だと思いました。
2. nano・universe
ファッションブランド「nano・universe」のサイトは特集記事や動画配信など、コンテンツにも注力されているサイトです。
コンテンツの種類も豊富で、TOPページではそれぞれに背景もブロックデザインも異なります。
最も視線を集めるのは、PCではMVの次にくる特集ブロックかと思います。
画像面積が大きいのも理由の1つですが、他のブロックのレイアウトの使い方と比べると、グリッドレイアウトを大変うまく応用されていて、動きのあるレイアウトにされている所以だと思いました!
ところがSPでは、MV下にくるグリッドレイアウトを応用したブロックが特集コンテンツではなく、商品カテゴリブロックでした!
これは多様なコンテンツがある中でもSPユーザーが商品を見つけやすくする為の工夫だと思いました。
また、ブロックデザインがそれぞれ異なるのに、ごちゃっとした印象を感じさせずすっきりとした飽きのこない印象に感じさせるのは、背景をグレーを基調に落ち着かせていることもあると思いますが、ゆったりとした適切な余白をつけホワイトスペースを生み出しているからだと思いました。
全体を通して、レイアウトを考える上で重要な情報の優先順位をしっかりつけて優劣を表現することで、特徴的なレイアウトを使用して組んだとしても成立するデザインだと思いました。
3. FABRIC TOKYO
オーダースーツブランドの「FABRIC TOKYO」のサイトは、オーダースーツという少し敷居の高さを感じてしまうイメージを払拭するような明るく活発で親しみやすい印象のサイトデザインでした!
商品のほとんどがカスタマイズオーダーできるので、そもそも一般的なECサイトの購入フローとも少し違い、デザインもより特徴的と感じるのだと思いますが、綺麗でとても見やすいデザインです!
まずレイアウトを綺麗に見せるのに重要な整列や要素のグルーピングを直感的に分かりやすくする為に区別し反復することを徹底されていると思いました。
こちらのサイトも画像の使い方が本当に見事だと感じたのですが、記事コンテンツのサムネ画像と、目立たせたいブロックや商品のこだわりを表すコンテンツなどで使用している画像は、背景を一部白抜きにしていたり、全部背景が抜かれていたり、アクセントにカラー背景を入れたり、と細やかな工夫が散りばめられていてコンテンツ毎の強弱をうまくつけられていると思いました。
それらにより、より見てほしいコンテンツへユーザーの視線を誘導できるのではと思います。
もうひとつ面白い工夫があり、コーディネートの雰囲気を抽象的な言葉だけでなく、カジュアルかフォーマルかのメーターを目立つカラーのデザインで使用しホットスポットを作られていました!
スーツもこんなに着方で印象が変わるのですね。。
画像の作り方や活用の仕方で、コンテンツの対比をしっかり作ることで、より特徴的な印象を表現されているサイトだと思いました。
(ラインナップは男性のみのようで、個人的にスーツ着る機会はほとんどないのですが女性ラインナップも今後増えると素敵だなと感じました!)
4. まとめ
いろんなECサイトを横断して、特徴的だと思ったサイトを今回じっくりと観察してみて自分の中ではたくさんの気付きがありました。
今回紹介させていただいたサイトから共通して感じたのは、使いやすさ見やすさだけではなく、ユーザーに何を見て欲しいか優先順位をつけ、それらを両立させるレイアウトに落とし込んでいることです。
実現するのに必要な、大胆な技や細やかな技が交錯していました。
優先順位はつけるだけでなく、直感的に伝わるようなイメージにどう近付けていくのかが大事なポイントですね。
今後もそういった技をもっと習得できるようにインプットとアウトプットを繰り返していきたいと今回強く感じました。
こんにちは、福岡オフィスの古賀です。
デザインを作成する上で必要不可欠な配色選び。
コーポレートカラーや見る人に適切に伝えるイメージカラー、ユーザビリティを重視した配色など何か制作物を作成する際には、色選びだけでもたくさんの情報の中から最も適切な選択をする必要がありますね。
隙間時間にWebサイト上でそういった配色選びの際に、自分の作業内容に合った様々なツールをぐるぐる探し回ることもあります。。
そんな中、外国語のサイトですが最近「dopely colors」というWebツールを見つけたので使ってみた感じを紹介したいと思います!
1. 無料Web配色シミュレーションツールdopely colors
「dopely colors」は2019年設立した会社が運営されているようで比較的新しいサイトです。
オールインワン配色ツールとも言われることもあるほど、機能がたくさんあります。
サイト自体のデザインはシンプルであり非常に直感的に操作できるUIで、英語表記でもさほど使用感的には不便は感じませんでした。
普段配色パターンやパーツデザインなどのアイデアを気軽に収集する際にpintarestを利用して集めることもありますが、こちらの「dopely colors」は大きく分けて、配色シミュレーションツールと配色アイデアのネタ帳に分けられるようです。
特にWebデザインを制作する上で役立ちそうだと感じたツールに注目してみたいと思います。
2. カラーパレットのシミュレーター
カラーアイデア帳には単色だけでも12万以上あり+パレット各種を検索することができますが、配色の組み合わせパレットは選んだパレットでシミュレーションツールを利用することができます。
たくさんの配色パターンがありシミュレーションで自由に色数の増減・入れ替えができるのも魅力ですが、特にこちらの機能が便利だと思いました。
①パレットの形状変化によるシミュレーションパターン
②色覚異常シミュレーション
①については、パレットの形状が複数変化でき、形状によって使用カラーのグラデーション作成や、トーン別の配色をシミュレーションすることができます。
そして、これらは全て画像だけでなくscssで出力してくれます!
②はその配色は色覚異常の状態でどのように見えるか、細かいタイプごとに切り替えて表示することができます。
そこでデザインを制作する前に予めカラーを調整することでシェイプなど形に左右されることなくユニバーサルデザインの向上にも繋げられるのではないでしょうか。
3. コントラストチェッカー
こちらのツールでは、WCAG 2に従ってベタの背景色とテキストカラーとのコントラストをチェックしてくれます。
ツールについての解説にWebアクセシビリティにおける色のコントラスト比についても説明されています。
実際のツール自体もその解説通り適切なコントラスト比率をクリアしているかどうかが赤と緑のアイコンと目標比率の表示で瞬時に判断できるUIになっています。
あらかたの配色が決まった後に、テキストが読みにくくないか細かく調整できるのはデザインガイドラインを作成する上でも役立つのではないでしょうか。
個人的には任意のテキストの入力やフォントの選択ができるとなお嬉しいと思いました。。
今後のアップデートに期待です。。!
4. グラデーションツールとパターン集
こちらはかなり直感的にグラデーションが作成できるツールです。
なんと最大15色を使用して作成でき、角度も自由自在に調整できます。
惜しい点は何故かこのツールではscssでの出力がうまくいかない点でしょうか。。
一方グラデーションパターン集では、12万以上のパターンがあり、ランダムですが色数の増減ができ角度の調整まではそのままできるようでした。
そしてこちらはscssでの出力も可能です。
パターン集でありながらシミュレーションの要素もあるので短時間で見つけ使用したい際に便利かと思います。
今回のブログのサムネイル画像のグラデーション背景でも使用してみました。
いくつかのパターンの中から選び色を追加変更が直感的にできるので、イメージに近い配色をスムーズに見つけ出すことができました。
5. まとめ
紹介しました機能以外にも便利な機能は他にもたくさんありました!
Googleアカウントでのサインアップフォームがあり何故かサインインがエラーになってしまい使用できませんでしたが、パレットを保存したりいいねをしたりもできるようなので、エラーが改善されればますます便利なツールになるかと思います!
作成したグラデーションをPhotoshopなどでパターンとして追加していくのも良いですね。
なんと言ってもかなり直感的に使用できる点と画面の見やすさで楽しみながら、デザインのアイデアやインスピレーションになる知識として配色選びができるのではと感じました!
日々のアイデア収集としてもしばらく使用してみようと思います。
こんにちは、福岡オフィスの古賀です。
私は普段の業務でアパレル系ECサイトの構築に携わることが多いのですが、海外ハイブランドのECサイトデザインを観察していると、商品詳細ページに スプリットレイアウト を採用しているサイトをしばしば見かけることがありました。
そこで今回は実際の 商品詳細ページデザイン 例を比較してECサイトとスプリットレイアウトについて注目してみました!
1. スプリットレイアウトとは
スプリットレイアウトといえば、サイトの画面を大きく分割して表現されるレイアウト方法です。
対比を表現するのに2分割+カラー反転させて使用される広告などでも良く見られます。
スプリットレイアウトを使用することで、対比の効果や要素を互いに引き立たせることができ、Webサイト上では分割された画面にスクロール時の動きが加わることでその効果をより視覚的に発揮し、オリジナリティを強調した印象を与えることも可能です。
PCではそのように画面を分割し横並びにすることで表現できますが、スマホ端末のように小さい画面では縦並びに変化するというようなレスポンシブデザインに対しても組み込みやすいのも特徴のひとつと言われています。
またスクロール時に視差効果をつけたり、動画と組み合わせたりといろいろと応用方法はありますが、大きく分けると、分割した画面を全て固定表示するタイプと片方のみスクロールするタイプがあり、ECサイトの商品詳細ページでよく使用されているのは片方のみスクロールのタイプになります!
2. MACKINTOSH
トレンチコートで有名な英国の老舗ブランドですね。
こちらのスプリットレイアウトは少し珍しく、ファーストビューでは見えていた商品名からCVボタンまでのブロックは普通にスクロールされますが、商品詳細情報のブロックがページ上部に固定される仕様でその効果を発揮されています。
そしてスクロールし隠れた、商品名や価格、CVボタン周りについてはヘッダー下に新たに固定表示されるようになります。
これにより常にCVボタンが画面上に存在しユーザーはいつでもカートインができ、そのままスマホ画面も同様のデザインで固定表示となり(固定位置は変わりますが)、分割していたブロックが縦並びになるので、レスポンシブしやすく崩れにくい構造で使いやすいデザインになっていると思います。
3. BURBERRY
日本では「バーバリーチェック」で有名な大人気のブランドですね。
こちらの商品詳細ページは、商品画像と商品情報部分が背景ごとはっきりとセパレートに分けられたレイアウトです。
商品画像が1カラムなのでインパクトが強く、より印象的になります。
またレイアウトを維持しやすくする為に、なるべく詳細情報を隠し、表示する際もモーダルとして表示される仕組みなので、レスポンス時のレイアウト崩れが起きにくくスプリットレイアウトの効果が強く発揮されています。
また、スマホではPCで分割していたブロックを縦並び+cssを応用して視差効果を与えるデザインになっており、スマホでもオリジナリティを強調したデザインになっていました。
そしてスプリットレイアウトとは別に、商品在庫がある店舗を検索できる機能や付近の店舗の訪問予約ができる機能、チャット機能も活用しており、セールスDXにも積極的に取り組まれているのが分かりました。
4. Dior
ファッションだけでなく化粧品などでも有名なブランドですね。
こちらも商品画像と商品情報部分でセパレートに分かれたレイアアウトでスマホでは縦並びになります。
商品画像が2カラム表示なので少ないスクロール量で多くの写真を見ることができますね。
バーバリーと比較すると詳細情報部分がアコーディオン式で開閉されますが少し縦長に伸びてしまうようです。
それにより商品画像の枚数によっては、商品情報部分の固定表示が先に解除しページ下部へスクロールされ、スプリットレイアウトの視覚的な効果を維持しにくくなってしまうかもしれません。
ただスプリットレイアウトとは別に、Diorでも在庫のある店舗検索ができ、かつその店舗の訪問予約を一連の流れで取得できる機能があったり、レコメンド商品をページ遷移せずにモーダル表示でカートインが可能な機能などCVボタン周りのUIが優れていたりと購入前のちょっとした手間を削減できるユーザー目線のデザインだと思いました。
5. まとめ
スプリットレイアウトをECサイトの商品詳細ページで使用すると、商品画像がより引き立つことで印象強く与えられるのと同時に、レスポンシブ時のレイアウト崩れが起きにくい構造になる利点が分かりました。
また、PCだけでなくスマホの縦並びのレイアウト+スクロール時の動きの見せ方にひと工夫加え共通化させることで、PCとスマホの両方で印象的なページにすることが可能なのだと思いました。
しかしスプリットレイアウト自体はただ画面をセパレートに分けて固定表示させればいいと言うものではなく、スクロール量も関係するのでブラウザの高さや固定表示させる情報の取捨選択・その見せ方にも気を付けて作成する必要があります。
ユーザビリティ向上の為の機能やUIデザインとうまく組み合わせ、そのような注意点に即した使い方ができれば、商品の魅力をより印象的に伝えられて、なおかつ使いやすいECサイトデザインにできる強い味方になるのではないでしょうか。
こんにちは、福岡オフィスでデザイン業務に携わっている古賀です。
普段、私はアパレル系のE Cサイトデザイン&フロント構築を主に担当しています。
Webデザインを作成するときに適切なアウトプットができるように、いろんなサイトからデザインのインプットすることもひとつの方法ですよね。
販売する商品のジャンルにより実店舗でのディスプレイ方法が違うのと同じでECサイトでも魅せ方は違ってくるのでは??と気になりました。
そこで今回は普段担当しているアパレル系以外のECサイトを観察して、デザインのポイントについて考えてみました!
※モール等ではなく自社でカートシステムを導入しているサイトに絞りました。
1. 家具・ファブリック系ライフスタイルショップ「unico」
デザイン性や質にこだわったインテリアショップです。
大きな家具から生活雑貨まで揃っていてトータルでお部屋を揃えてしまいたくなるデザインの商品ばかりです。
そんな豊富な商品の魅力を様々なコンテンツを用いて紹介しているサイトです。
とは言え、家具などの高い買い物はなかなかWeb上でポチッとはしにくいですよね。
こちらのサイトはたくさんポイントがありますが、、ずばり、
“ 購買心理のプロセスに沿ったコンテンツデザイン ”
実店舗のコーディネートもとても素敵でそれを参考にしても良いのですが、まず家具のシュミレートがWeb上でもでき作成された見積もり番号でカートインまでできちゃいます。
(店頭での見積もりも注文できるようです!)
そしてInstagramの投稿や店員さんたちの実際のお部屋のコーディネートの紹介を活用して、実店舗で見て触れた後でも十分に商品について検討ができるのです。
実店舗とECサイトを連携したオムニチャネル化により、大きな買い物に購入検討の時間を設けたいユーザーの購買心理を掴んでいると思いました。
2. コスメブランド「shu uemura」
デパートコスメの代表格ブランドのひとつですね。
商品の魅力が際立ち、雰囲気も統一感を感じられるポイントが随所に散りばめられていますが、こちらのサイトのトップページの構造は、特集、商品ランキングやベストセラーなどの紹介と割とシンプルな構造です。
そもそもコスメを購入する時、自分の肌に合う色かどうか、、、とかいろいろ試して決めたいからネットより実店舗で選ぶ方が多いかもしれません。
ずばりこちらのサイトのポイントは、
“ 商品詳細ページや特集などで、対象商品のバーチャルメイクができる ”
PCでもスマホでもできます。
気軽にいくつも試せて、画像保存もできるので比較もしやすく、購入したい気持ちの後押しにもなります!
3. ボタニカルライフスタイルブランド「BOTANIST」
ドラッグストアなどで大人気のシャンプーで有名なブランドで、独自の世界観とスタイリッシュなデザインが支持を集めています。
そのボタニカルな雰囲気をゆとりのあるデザインですっきりと表現されています。
日々購入する機会の多いシャンプーはリピートしたり限定の香りが出ていると、ついつい購入したくなりますよね。。
ずばりこちらのサイトのポイントは、
“ ターゲットユーザーに対しての適切な導線構造 ”
こちらのサイトでは、商品詳細ページはもちろんありますが、基本的にどのページでも商品詳細ページに飛ばずとも1ポチッとするだけでカートインできちゃいます。
そして、商品にはスタンダードやプレミアム、ヴィーガンなどの販売ラインがあり、欲しい商品がすぐに見つけられます。
実は初めて知ったのですが、こちらのシャンプーはパーソナルラインがあり、Web上での簡単なカウンセリングで自分だけの特別なシャンプーを購入できるようなのです。
このように様々な販売方法がWeb上で取りやすいのも導線構造がしっかりしている証拠だと思いました。
4. まとめ
やはり商品ジャンルによって、コンテンツはもちろんですが、商品ページやカート周りの展開方法が違うことが分かりました。
商品ジャンルや価格、使用シーンによってユーザーの行動が違いますが、今回観察したどのECサイトでもユーザーの行動に沿ったデザインを作成されていました。
これからもクライアントのエンドユーザーにより着目して、適切なデザインを作成できるよう精進します!