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

前回に引き続き、最近よく見るECサイトのヘッダーパーツのUIデザインパターンについて、今回はスマホライク編です。

PCでもスマホライクなサイトのトップページを中心に見ていきたいと思います！

↓前回の記事はこちら↓

おさらいとして、一般的にECサイトのヘッダーに必要で設置すべきと言われている要素はこちらです。

1、ABC-MART GRAND STAGE

シューズ小売店のABCマートのラインで、各人気ブランドの限定アイテムなどを扱うGRAND STAGE公式オンラインショップです。

まずヘッダーに必要な要素はほとんど設置されています。

なおかつヘッダーデザインはPCもSPのレイアウトをそのまま採用されており、ハンバーガーメニュー内に基本的なメニューを配置されています。

ヘッダーのすぐ下に設置してある検索窓は、ページスクロールの際に上方向にスクロールした時にのみ画面上部固定で表示される仕様です。

また、ハンバーガーメニューとは別に検索窓の左端に配置されているアイコンメニューが絞り込み検索のフィルターのようです。

つまり商品一覧ページではなくとも、どのページを表示していてもこのアイコンから絞り込み検索ができる仕様です。

この仕様も、デザイン含めSP同様にPCも共通のようです。

コンテンツでもスライダーに矢印アイコンがないのは、スマホでスライダーはスワイプ操作することが多いことからそのようなデザインに統一されているのかと思いました。

完全にターゲットをスマホ操作がメインの世代のユーザーを狙っているのではと思います。

2、hince

韓国コスメブランドのオンラインショップです。

カラーリングだけでなく背景の角丸の形状など細部までトンマナが統一されていてとても素敵なデザインです。

こちらのサイトもヘッダーに必要な要素はほとんど設置されていて、PCもSP同様のハンバーガーメニューが設置されるレイアウトを採用されています。

そしてヘッダー背景が透明かつ四隅に寄せるデザインでコンテンツの邪魔になりにくく、ビジュアルでの訴求が重視されています。

ハンバーガーメニューでの違いといえば、SPよりもPCの方がメニューを開いた時の項目が細かく表示されており、SPではタップしてアコーディオン式に開いて選ぶところを、１アクション省略されています。

デザインは同じでも、こういった細かい仕様があるとPCとSP各々のユーザビリティが向上されると思います。

コンテンツもスプリットレイアウトをブロック毎に使用していて、PCではスクロールの動き、SPではスワイプの動きにそれぞれ合わせたデザインで、どちらのデバイスでも使い勝手が良いのではないでしょうか。

3、FABRIC TOKYO

こちらのサイトは以前の記事で紹介したオーダースーツブランドのオンラインショップです。

以前の記事で紹介した時からヘッダー周りのUIデザインがスマホライクに変化していました。↓

hinceのサイトのようにヘッダー背景は透明でハンバーガーメニューが設置されており、その他の要素もほとんど設置されていますが、こちらのサイトはPCではハンバーガーメニューだけでなくカテゴリーメニューを別に設置されています。

カテゴリーメニューとハンバーガーメニュー内の項目は、同じフライアウトが出現する仕様で、スマホでも同様の要素を画面のスペースに合わせレイヤーを分ける程度の違いで実装されています。

※ハンバーガーメニュー内もテキストだけでなく切り抜き画像を使用するなど工夫されているので直感的に操作ができるのではと思います！

PCはSPに比べてスペースに余裕があるので、このようによく使用される項目は出しておいた方がユーザーの操作は１アクションで済むので使いやすいかもしれません。

4、LACOSTE

アパレルブランドで有名なラコステのオンラインショップです。

こちらのサイトでは、PCは画面上部にヘッダー、左側にメニューが固定表示してあり、残りの右側のコンテンツ部分のみスクロールできる仕様です。

このメニューですが、下層ページでも同じように固定表示されているため回遊性に優れており、スマホではハンバーガーメニューとしてそのまま使用されています。

最近は１カラムレイアウトを意識したサイトが多く、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サイトの目的は商品を購入してもらい売上を向上させることなので、最も目に付きやすいヘッダーは特にセオリーを守ることは重要なことだと思いました。

株式会社デジナーレのグループ会社である、プライマルホールディングス株式会社は、販売パートナーシップ契約を締結している、株式会社NTTドコモ（以下、ドコモ）提供の AIによる自動応答電話ソリューションサービス「AI電話サービス」において、2021年8月30日（月）より新たに提供される「金融業界パッケージプラン」の販売取扱いと、導入に伴うWebサイトの制作・改修のご支援を開始いたします。

デジナーレのUI/UX改善を強みとしたwebサービス構築の実績と、プライマルホールディングスの保有する各種金融機関様とのネットワークを活かし、AI電話サービスと連携したウェブサイト構築など、様々な企業様のUI/UXの向上・DX推進をドコモと共に進めて参ります。

※AI電話サービスサイト
※ドコモ報道発表「金融業界向けのパッケージプランの提供開始」

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

ECサイトのデザインを作成する際、視認性やユーザビリティに重点を置いたり、カートシステムを使用する為デザインの大枠はテンプレートに沿って作成する関係で、基本軸のページは割と似たようなレイアウトのサイトになることも多いかと思います。

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

以前のブログでECサイトとスプリットレイアウトについての見解を紹介しましたが、今回は他にもECサイトを横断してみて、デザインが特徴的だと思うサイトをレイアウトの視点から他にどんなことができるのか見ていきたいと思います！

1. GUCCI

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

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

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

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

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

そして商品情報ブロックからカラーバリエーションの選択をしようとすると、それまでファーストビュー下に設置されていたカラーバリエーション画像ブロックが上昇するので、ファーストビュー＋1クリックだけでそのまま比較がしやすい仕様になっています。

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

最も重要な商品画像をしっかり主役として表現しユーザーの視線を集めつつも、使いやすさも実現している点がとても特徴的なデザインになっている理由だと思いました。

2. nano・universe

ファッションブランド「nano・universe」のサイトは特集記事や動画配信など、コンテンツにも注力されているサイトです。

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

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

画像面積が大きいのも理由の１つですが、他のブロックのレイアウトの使い方と比べると、グリッドレイアウトを大変うまく応用されていて、動きのあるレイアウトにされている所以だと思いました！

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

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

また、ブロックデザインがそれぞれ異なるのに、ごちゃっとした印象を感じさせずすっきりとした飽きのこない印象に感じさせるのは、背景をグレーを基調に落ち着かせていることもあると思いますが、ゆったりとした適切な余白をつけホワイトスペースを生み出しているからだと思いました。

全体を通して、レイアウトを考える上で重要な情報の優先順位をしっかりつけて優劣を表現することで、特徴的なレイアウトを使用して組んだとしても成立するデザインだと思いました。

3. FABRIC TOKYO

オーダースーツブランドの「FABRIC TOKYO」のサイトは、オーダースーツという少し敷居の高さを感じてしまうイメージを払拭するような明るく活発で親しみやすい印象のサイトデザインでした！

商品のほとんどがカスタマイズオーダーできるので、そもそも一般的なECサイトの購入フローとも少し違い、デザインもより特徴的と感じるのだと思いますが、綺麗でとても見やすいデザインです！

まずレイアウトを綺麗に見せるのに重要な整列や要素のグルーピングを直感的に分かりやすくする為に区別し反復することを徹底されていると思いました。

こちらのサイトも画像の使い方が本当に見事だと感じたのですが、記事コンテンツのサムネ画像と、目立たせたいブロックや商品のこだわりを表すコンテンツなどで使用している画像は、背景を一部白抜きにしていたり、全部背景が抜かれていたり、アクセントにカラー背景を入れたり、と細やかな工夫が散りばめられていてコンテンツ毎の強弱をうまくつけられていると思いました。

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

もうひとつ面白い工夫があり、コーディネートの雰囲気を抽象的な言葉だけでなく、カジュアルかフォーマルかのメーターを目立つカラーのデザインで使用しホットスポットを作られていました！

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

画像の作り方や活用の仕方で、コンテンツの対比をしっかり作ることで、より特徴的な印象を表現されているサイトだと思いました。

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

4. まとめ

いろんなECサイトを横断して、特徴的だと思ったサイトを今回じっくりと観察してみて自分の中ではたくさんの気付きがありました。

今回紹介させていただいたサイトから共通して感じたのは、使いやすさ見やすさだけではなく、ユーザーに何を見て欲しいか優先順位をつけ、それらを両立させるレイアウトに落とし込んでいることです。

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

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

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

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

今回は、「Adobe Summit 2021」で発表されたadobeの新製品について紹介します。

Adobe Summit はアドビが主催する年次カンファレンスで、今年は基調講演をはじめ、400以上のセッション、ライブトークなどが、4/27~4/29の3日間、オンラインで開催されました。その中で発表されたのが、新製品「Adobe Real-time Customer Data Platform(Real-time CDP）」です。

Cookieレス時代におけるアドビのマーケティングについての考え方や、今回の新製品・新機能について、まとめてみました。

1. Cookieレス時代におけるアドビの戦略
2. 「Real-Time CDP」の機能
3. 「Customer Journey Analytics」とは
4. 「Adobe Target」とは
5. まとめ

1.Cookieレス時代におけるアドビの戦略 

サードパーティのCookie廃止の流れが強まる中で、アドビは今回、業界で初めてファーストパーティデータの活用を強調しました。

まずは、ファーストパーティ、サードパーティとは何かについて説明します。

そもそもCookieとは、Webサーバーからブラウザに送られる小さなテキストデータのことで、ユーザーの情報を一定の期間保存し、ユーザーが再度Webページを訪れた時に、サイト訪問回数や前回のサイト内での行動の情報をサーバーに渡します。

このcookieによって、ECサイトなどでログイン状態が維持できたり、一度途中で閉じた動画を停止した部分から再生したりすることができます。

このように、ブラウザを特定するために一時的に保存されるデータがcookieです。

その中に、ファーストパーティcookieとサードパーティcookieがあるのですが、簡単に説明すると、「今見ているサイトのCookie」がファーストパーティcookieで、「今見ていないサイトのCookie」がサードパーティcookieです。

Webサイトの事業主体者が発行するcookieはファーストパーティcookieであり、むしろサイトの閲覧に便利な機能であると言えます。

一方で、近年問題視され、規制の流れが強まっているのがサードパーティcookieです。アクセスしたWebサイトの事業主体者とは別の第三者が発行するcookieです。

皆さんも、軽く調べた情報が、広告としてページ内に表示されるようになった経験があると思います。このようなリターゲティング広告などに使用されているのが、サードパーティcookieです。ユーザーの閲覧履歴データが同意なく広告ビジネスに使われていたことになるため、プライバシー保護の観点から、規制の動きが強まっています。

このような状況の中で、アドビはファーストパーティ戦略を重視し、ファーストパーティデータ指向型のReal-Time CDPを発表しました。

2．「Real-Time CDP」の機能

Real-time CDPは、従来のAdobe CDPがアップデートされたもので、さまざまな種類のファーストパーティデータが集約され、企業のデータ活用のハブとして機能します。

アドビの公式サイトによると、Adobe CDPによって既知顧客データや匿名顧客データを問わず、あらゆる個人および企業のデータを単一のデータフォーマットで結合することができます。

その上で、関連するデータをつなぎ合わせ、プライバシーに配慮していながら、詳細なプロファイルを構築できるのがReal-time CDPです。

このプロファイリングデータを、マーケティング戦略に活用することができます。

さらにアドビは、Real-Time CDPに合わせて「Customer Journey Analytics」と「Adobe Target」の2つの機能を使用することを提案しています。

3．「Customer Journey Analytics」とは

カスタマージャーニーは、顧客が自社の商品を知り、購入するまでに辿る思考、行動などのプロセスのこと。

「Customer Journey Analytics」では、オンラインとオフラインを横断して顧客データをリアルタイムで集約・分析し、カスタマージャーニー全体を視覚化することができます。ウェブだけでなく、リアルでの接点も分析してくれるので、マーケティング戦略の幅が、より広がりそうです。

4．「Adobe Target」とは

「Adobe Target」は、Real-Time CDPで構築されたプロファイルのデータをもとに、機械学習を用いて見込み顧客をリアルタイムにスコアリングし、最適な顧客体験を自動で提供する機能です。

見込み客の確度の高さがスコアとして計測されれば、優先度をつけて確度の高いユーザーから、細かなフォローを入れる対応もできます。

さらに、「Adobe Target」によって計測されたスコアの違いと先ほどのカスタマージャーニーの分析を照らし合わせることで、より見込み客の確度をあげていくための戦略を立てることができそうです。

まとめ

今回はcookieレス時代に向けたアドビの戦略と、新商品の「Real-Time CDP」について紹介しました。

前回紹介したGA4にも新たに機械学習が取り入れられていましたが、サードパーティcookieが規制されていく中で、プライバシーに配慮しつつ、計測の幅を広げていくため、機械学習の導入を各社がとっており、今後もその動きは強まりそうだと思いました。

機械学習による予測値の精度も、データが蓄積されていく中でどんどん高まっていくと思いますので、マーケティング戦略も効果的に実施できそうです。

特に今回アドビが提案していた「Customer Journey Analytics」は、オンラインとオフラインを横断して計測ができます。アパレルなどの分野は特に、オンラインよりもオフラインの店舗の方が、タッチポイントとしては強いと思うので、両方を横断し計測できるのは、今後とても役立ちそうだと思いました。

【参照】

・「アドビ、業界初のファーストパーティデータ指向型 次世代Real-Time CDPを発表」https://www.adobe.com/jp/news-room/news/202104/20210428_adobe-announces-industry-first-cdp-architected-for-first-party-data.html

・「Real-time Customer Data Platform（リアルタイムCDP）」https://business.adobe.com/jp/products/real-time-customer-data-platform/RTCDP.html

・「Cookieレス時代のマーケティングを支える、アドビの製品戦略」https://markezine.jp/article/detail/36218

・「クッキー規制で激変！　広告業界関連まとめ記事」https://xtrend.nikkei.com/atcl/contents/18/00190/00101

・「ITP対応やCookie規制の対策は? クッキーや広告規制の仕組み」　https://webtan.impress.co.jp/e/2020/10/16/37598

・サムネイル画像　Pch.vector - jp.freepik.com によって作成された business ベクトル

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

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

コーポレートカラーや見る人に適切に伝えるイメージカラー、ユーザビリティを重視した配色など何か制作物を作成する際には、色選びだけでもたくさんの情報の中から最も適切な選択をする必要がありますね。

隙間時間に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などでパターンとして追加していくのも良いですね。

なんと言ってもかなり直感的に使用できる点と画面の見やすさで楽しみながら、デザインのアイデアやインスピレーションになる知識として配色選びができるのではと感じました！

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

はじめまして、福岡オフィスの長野です。

今回は、「Google Analytics 4 プロパティ（GA4）」について、書いていこうと思います。

GA4とは、Googleが発表したアナリティクスの新しい規格のことで、2019年８月にベータ版として登場し、昨年10月に正式にリリースされました。 

4月に上場企業のwebサイトを調査した結果を見ると、3,757社中160社が導入済みで、導入率は4.26%。

まだまだ導入率は低く、ほとんどの企業が依然としてユニバーサルアナリティクスを使用しているようです。

しかし、1月の調査開始時から導入率を比べると、1月時点では2.51%でしたが、4月までの3ヵ月で4.26％まで増えています。

（参照元：SEM Technology「GA4の導入状況調査 2021年04月」https://sem-technology.info/blog/posts/00147/ ）

これからもっと、GA4の使用率やニーズは高まっていくと思いますので、既存のユニバーサルアナリティクスとはどこが違うのか、GA4ではどんなことができるのかを、解説していきたいと思います。

1. ユニバーサルアナリティクスとの違い①　アプリとウェブを統合したデータ解析ができる
2. ユニバーサルアナリティクスとの違い②　機械学習モデルを活用した「予測指標」を導入している
3. ユニバーサルアナリティクスとの違い③　測定機能が強化されている
4. ユニバーサルアナリティクスとの違い④　プライバシー問題に対応している
5. まとめ

1.アプリとウェブを統合したデータ解析ができる

ベータ版としてリリースされた際の旧称が「GoogleアナリティクスApp＋Webプロパティ」でしたが、その名のとおり、GA4では、アプリとウェブのデータを1つのレポートで見ることができます。

設定は、ウェブはこれまで同様GTMかタグの設置、アプリはfirebaseで設定可能です。

2.機械学習モデルを活用した「予測指標」を導入している

「機械学習モデルを活用した予測指標」と言われると難しく聞こえますが、要はユーザーの行動を予測できるようになりました！

例えば、「購入予測」「解約予測」「売上予測」といったもので、7日以内に購入する可能性が高い既存顧客といった予測ができるんです！

これまではコンバージョン数や、コンバージョンに至るまでの離脱率などを見ることはできましたが、今後のコンバージョンの予測や、コンバージョン後の解約予測まではわかりませんでした。そのためサイト改善の際は、PV数や離脱率などの数値から、ユーザーの行動を想像し、施策を実施することが多かったのではないかと思います。しかしこれからは、予測機能を活用することで、よりサイト改善の質を高めることができそうです！

3.測定機能が強化されている

ウェブだけではありますが、以下の6つを自動で計測できるようになりました！

1. ページビュー数
2. スクロール数
3. 離脱クリック
4. サイト内検索
5. 動画エンゲージメント
6. ファイルのダウンロード 

管理画面からオプションを有効にすることで、自動的に計測することができます。設定も簡単ですし、計測できる指標が増えることで、A/Bテストなども実施しやすくなるのではないかと思います。

(参照：「アナリティクス ヘルプ[GA4] 拡張計測機能」https://support.google.com/analytics/answer/9216061)

4.プライバシー問題に対応している

皆さんも、最近Cookieの使用に対して同意を求められるサイトが増えていると感じていませんか？GDPRやCCPAといった海外のプライバシー保護についての法律があり、日本のサイトであっても厳しい罰則を受ける可能性があるためです。

アナリティクスもCookieを使用してセッションを測っていますが、Cookieが段階的に廃止されていく中で、既存のユニバーサルアナリティクスでは、今後データが欠落する、不足するという問題があります。

しかしGA4では、将来的にではありますが、Cookieの有無にかかわらず、機械学習に基づいてデータのギャップを埋めるような開発を行っていくようです。

(参照：「アナリティクス ヘルプ[GA4] 予測指標」https://support.google.com/analytics/answer/9846734)

まとめ

いかがでしたか？

これまで以上に便利になったGA4ですが、UIも変わっているので、いきなり導入するのは難しいかもしれません。

そのため、まずはGoogleも推奨しているように、既存のユニバーサルアナリティクスと並行稼働していくのが良いと思います。新しいGA4でどんな数値が取れるのか、テストしながら使い方に慣れていきましょう！

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

私は普段の業務でアパレル系ECサイトの構築に携わることが多いのですが、海外ハイブランドのECサイトデザインを観察していると、商品詳細ページに スプリットレイアウト を採用しているサイトをしばしば見かけることがありました。

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

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

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

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

スプリットレイアウトを使用することで、対比の効果や要素を互いに引き立たせることができ、Webサイト上では分割された画面にスクロール時の動きが加わることでその効果をより視覚的に発揮し、オリジナリティを強調した印象を与えることも可能です。

PCではそのように画面を分割し横並びにすることで表現できますが、スマホ端末のように小さい画面では縦並びに変化するというようなレスポンシブデザインに対しても組み込みやすいのも特徴のひとつと言われています。

またスクロール時に視差効果をつけたり、動画と組み合わせたりといろいろと応用方法はありますが、大きく分けると、分割した画面を全て固定表示するタイプと片方のみスクロールするタイプがあり、ECサイトの商品詳細ページでよく使用されているのは片方のみスクロールのタイプになります！

2. MACKINTOSH

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

こちらのスプリットレイアウトは少し珍しく、ファーストビューでは見えていた商品名からCVボタンまでのブロックは普通にスクロールされますが、商品詳細情報のブロックがページ上部に固定される仕様でその効果を発揮されています。

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

これにより常にCVボタンが画面上に存在しユーザーはいつでもカートインができ、そのままスマホ画面も同様のデザインで固定表示となり（固定位置は変わりますが）、分割していたブロックが縦並びになるので、レスポンシブしやすく崩れにくい構造で使いやすいデザインになっていると思います。

3. BURBERRY

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

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

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

またレイアウトを維持しやすくする為に、なるべく詳細情報を隠し、表示する際もモーダルとして表示される仕組みなので、レスポンス時のレイアウト崩れが起きにくくスプリットレイアウトの効果が強く発揮されています。

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

そしてスプリットレイアウトとは別に、商品在庫がある店舗を検索できる機能や付近の店舗の訪問予約ができる機能、チャット機能も活用しており、セールスDXにも積極的に取り組まれているのが分かりました。

4. Dior

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

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

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

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

それにより商品画像の枚数によっては、商品情報部分の固定表示が先に解除しページ下部へスクロールされ、スプリットレイアウトの視覚的な効果を維持しにくくなってしまうかもしれません。

ただスプリットレイアウトとは別に、Diorでも在庫のある店舗検索ができ、かつその店舗の訪問予約を一連の流れで取得できる機能があったり、レコメンド商品をページ遷移せずにモーダル表示でカートインが可能な機能などCVボタン周りのUIが優れていたりと購入前のちょっとした手間を削減できるユーザー目線のデザインだと思いました。

5. まとめ

スプリットレイアウトをECサイトの商品詳細ページで使用すると、商品画像がより引き立つことで印象強く与えられるのと同時に、レスポンシブ時のレイアウト崩れが起きにくい構造になる利点が分かりました。

また、PCだけでなくスマホの縦並びのレイアウト＋スクロール時の動きの見せ方にひと工夫加え共通化させることで、PCとスマホの両方で印象的なページにすることが可能なのだと思いました。

しかしスプリットレイアウト自体はただ画面をセパレートに分けて固定表示させればいいと言うものではなく、スクロール量も関係するのでブラウザの高さや固定表示させる情報の取捨選択・その見せ方にも気を付けて作成する必要があります。

ユーザビリティ向上の為の機能やUIデザインとうまく組み合わせ、そのような注意点に即した使い方ができれば、商品の魅力をより印象的に伝えられて、なおかつ使いやすいECサイトデザインにできる強い味方になるのではないでしょうか。

こんにちは、エンジニアの野田です。
今回はAWSのサービス「RDS Proxy」について試してみたので
その結果を書いていきます。

RDS Proxyとは
その名の通りRDSの前に置かれるプロキシです。

使う目的
RDSではインスタンスタイプによって同時接続数が決まっています。
この接続数が埋まっている状態でアクセスが来た場合には接続失敗となります。
この接続失敗を避けるために、RDS Proxyを置きます。
こうすることによりRDS Proxyが同時接続数を超えた分の接続を待ち状態にし、
RDSが接続可能になるとRDSに接続してくれます。

いつ使うか
Lambdaでサーバーレスなシステムを構築するときです。
EC2などからRDSを使うときはいいのですが、問題はLambdaでサーバーレスな構成にしたときです。
Lambdaは性質上アクセスが来た分だけ起動します。
つまり大量アクセスが来てしまうと、その分全部RDSに接続しようとしますが、
ここで同時接続数を超えてしまいます。
なので今まではLambdaとRDSはアンチパターンとされてきました。

実験
実際ちゃんと動くか検証してみました。
方法としてはRDSからSELECTするプログラムをLambdaで書き、
apache JmeterからAPI Gateway経由でこれを叩きます。

条件
RDS：Aurora MySQLを使用、インスタンスタイプはt3.small
デフォルトの同時接続数は45（あくまで目安で実際は違います）
軽い処理だとさばいてしまうので、
10万レコード用意したテーブルからindex貼っていないカラムを指定してSELECTします。

計測ツール：apache Jmeter
100スレッド
10ループ
Ramp-Up　10秒

結果

RDS Proxyを使わない場合
1000リクエスト中
成功：637
失敗：363
成功したリクエストの処理時間は100ミリ秒～1000ミリ秒でした。

RDS Proxyを使った場合
1000リクエスト中
成功：1000
失敗：0
リクエストの処理時間は
同時接続数内のリクエストについてはRDS Proxyを使わない場合と同じ100ミリ秒～1000ミリ秒。
同時接続数を超えて待ちになった分のリクエストは2000ミリ秒前後でした。

まとめ
RDS Proxyを使うことで確かにすべてのリクエストをさばくことが確認できました。
注意点としては同時接続数を超えて待ちになった分のリクエストが2000ミリ秒前後かかることです。
実際にはもっとたくさんソースコードが書かれたプログラムになるのでもう少しかかると思います。
ただ同時接続内だと時間は変わらないので、非ピーク時は大丈夫だと思います。
判断基準としてはピーク時に時間がかかっても大丈夫かどうかだと思いました。
そこをクリアできれば今回のようにLambdaでもRDSを使った構成が実現できると思いました。

新年、明けましておめでとうございます。

旧年中は格別のお引き立てを賜り、厚く御礼申し上げます。
今後も変わらぬご指導と、末永いお付き合いをお願い申し上げます。

代表からのご挨拶をお送りさせていただきます。
下記URLをご参照ください。

https://www.primal-biz.co.jp/news/info/20210101.html

皆様のご多幸と繁栄をお祈り申し上げます。

令和3年 元旦
株式会社デジナーレ

日頃はご愛顧を賜り厚く御礼申し上げます。

誠に勝手ながら休業期間を下記の通りとさせて頂きます。
ご迷惑をお掛け致しますが、何卒ご了承願います。

＜休業期間＞

2020年12月29日（火）～2020年1月3日（日）

※2020年1月4日（月）から通常営業致します。
※休業期間中、Webサイトからのお問い合わせは通常通り受け付けておりますが、ご連絡は2021年1月4日（月）以降となります。
※弊社では引き続き新型コロナウィルス対策として全社員テレワークにて対応をさせていただいております。
　弊社へのお問い合わせは各担当者直通の電話、お分かりにならない場合はお問い合わせフォームより担当者名をメッセージ内容に明記をいただきご連絡下さいますようお願い申し上げます。

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

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

Webデザインを作成するときに適切なアウトプットができるように、いろんなサイトからデザインのインプットすることもひとつの方法ですよね。

販売する商品のジャンルにより実店舗でのディスプレイ方法が違うのと同じでECサイトでも魅せ方は違ってくるのでは？？と気になりました。

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

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

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

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

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

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

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

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

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

実店舗のコーディネートもとても素敵でそれを参考にしても良いのですが、まず家具のシュミレートがWeb上でもでき作成された見積もり番号でカートインまでできちゃいます。

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

そしてInstagramの投稿や店員さんたちの実際のお部屋のコーディネートの紹介を活用して、実店舗で見て触れた後でも十分に商品について検討ができるのです。

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

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

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

商品の魅力が際立ち、雰囲気も統一感を感じられるポイントが随所に散りばめられていますが、こちらのサイトのトップページの構造は、特集、商品ランキングやベストセラーなどの紹介と割とシンプルな構造です。

そもそもコスメを購入する時、自分の肌に合う色かどうか、、、とかいろいろ試して決めたいからネットより実店舗で選ぶ方が多いかもしれません。

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

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

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

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

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

ドラッグストアなどで大人気のシャンプーで有名なブランドで、独自の世界観とスタイリッシュなデザインが支持を集めています。

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

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

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

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

こちらのサイトでは、商品詳細ページはもちろんありますが、基本的にどのページでも商品詳細ページに飛ばずとも１ポチッとするだけでカートインできちゃいます。

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

実は初めて知ったのですが、こちらのシャンプーはパーソナルラインがあり、Web上での簡単なカウンセリングで自分だけの特別なシャンプーを購入できるようなのです。

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

４. まとめ

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

商品ジャンルや価格、使用シーンによってユーザーの行動が違いますが、今回観察したどのECサイトでもユーザーの行動に沿ったデザインを作成されていました。

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