コンバージョン率向上に直結する「速さ」を生み出すテクニックとは？- Meta／Google／X（旧Twitter）を歴任したUXデザイナーに学ぶ – 【セミナーダイジェスト】

Webサイトやアプリの表示速度は、ユーザーエクスペリエンス（UX）の改善だけではなく、コンバージョン率などビジネス成果の向上にも直結する重要な要素です。

2024年9月26日のウェビナーでは、MetaやGoogleでデザインをリードし、現在はShopifyで活躍されているムスタファ・クルトゥルドゥさんにご登壇いただき、ユーザー心理を巧みに活用した”ユーザー体験の高速化テクニック”を教えていただきました。

ビックテックを歴任した現役プロダクトデザイナーから、具体的なデザイン事例やリサーチインサイト、テクニカルなノウハウを交えて解説いただいたので、今回はそのダイジェストをご紹介します。

※著作権の関係上、当日投影された資料の掲載はありません。

1 はじめに
2 ユーザー理解に関する事例
3 表示速度とUXの関係について
4 画像の軽量化
5 認知容易性の高いUIデザイン
6 視覚的なフィードバック
7 最後に
8 Q&Aセッション

はじめに

私は、現在Shopifyでスタッフプロダクトデザイナーを務めています。
本日は「ユーザーを理解し、戦略的に取り込む」というテーマのもと、スピードや効率性をどのように改善できるのか、具体的なテクニックや事例を交えながらトピックごとにご紹介いたします。

【無料ダウンロード】UI改善の基礎

4つのデザイン構成要素を操り、優先順位をつけるための「レイアウト / 配置」「形」「色」「動き」について図付きで解説します（全45ページ）。ぜひUIの改善にご活用ください。

UI改善の基礎を見てみる＞＞

ユーザー理解に関する事例

事例：空港での待ち時間における苦情の解決

まずは空港の事例です。アメリカのとある空港では「荷物を受け取るまでの待ち時間が長すぎる」という多くの苦情が寄せられていました。その苦情を解決すべく、テクノロジーを導入するなど、数百万ドルを投資して最適化に取り組み、待ち時間を7分まで短縮できましたが、それでも苦情は絶えませんでした。

7分というのは非常に短い時間ですが、飛行機に乗ること自体がストレスフルな体験であるため、飛行機を降りた人たちは、通常よりストレスを感じやすい状態になっています。

そのため、この空港は追加で「飛行機をターミナルから離れた地点に着陸させて、移動時間を長くし、ユーザーが立ち止まって待つ時間を短縮する」という方法を打ち出しました。待ち時間自体を短くするのではなく、同じ待ち時間でもいかに短く感じさせるかを考えたのです。その結果、苦情を減らすことに成功しました。

事例：レガシーシステムのUX改善

次は、レガシーシステムの事例です。昔からある大企業ではよく発生しますが、「エレベーターが遅い」という苦情がファシリティマネージャーに多く寄せられていました。

このような場合、エレベーターを新しいものに交換して、エレベーターの速度を上げるという解決策がすぐに思いつきますが、それは非常にコストがかかります。さらに、時間が経てば再度同じ苦情が入ってくるため、根本的な解決にはなっていません。

ここでの問題は、エレベーター自体のスピードではなく、目的の階までの待ち時間が不快であるということです。レガシーシステムの担当者は、ユーザーが退屈に感じない体験を作ることが重要であると考え、エレベーター内にハンドサニタイザーや鏡を設置したり、音楽をかけたりなど目的の階までの待ち時間がより快適な体験になるように取り組みました。

レガシーシステムの改善は、システム自体が問題なのか、ユーザー体験に問題があるのかを見極めることが重要です。

表示速度とUXの関係について

Googleは、ユーザーリサーチの結果から、Webサイトの読み込みが遅いほど購入に進むユーザーは減少すると発表しています。しかし、ユーザーの行動はそれ以外にも、所要時間や検索意図、心理状態、体の状態、その情報の重要性などさまざまな要素に影響されていることを念頭に置く必要があります。

Webサイト・アプリを見ている状況は同じでも、ウィンドウショッピングをしているだけのリラックスしている状態と、次の飛行機を予約するためにいち早く情報が必要でストレスを抱えている状態では、ユーザー心理は異なります。緊急性や必要性が高い状況での体験こそ、そのサービスを評価するうえで重要となるのです。

また世界にはインターネットのスピードが非常に遅い地域があります。そのような地域を考慮するのと同時に、緊急性、必要性の高い情報をいかに速く提供できるか考えていきましょう。

UX領域でのヒエラルキー

UXの領域において、「読み込みスピード」はもっとも重要であり、その他の要素の優先度は、以下の通りとなります。

＜UX領域でのヒエラルキー＞

Webサイトの表示速度
Webサイト内で必要な情報を簡単に探せるか
画面上に正しく情報が収まっているか
Webサイトの使いやすさ
Webサイトの見た目の良さ

この中で、「Webサイトの見た目の良さ」は優先度が低くなっていますが、ブランドの認知としては重要であるため、軽視してはいけません。

画像の軽量化

画像は、Webサイトを構築する要素の中でも読み込みに負担がかかる部分です。Googleで働いていたときの同僚が、Squooshという画像変換・圧縮Webツールを開発したのでご紹介します。

Squooshは、ブラウザ上に画像をドロップして取り込むだけで、ファイルサイズを圧縮できます。目視ではわからない程度に画質を下げられるので、画像のクオリティを保ちながらファイルサイズを削減できるといったメリットがあります。

2018年に行われたGoogleのデベロッパーサミットでは、掲載する画像などのファイルサイズによって、Webサイトのスピードを上げられることがわかりました。

認知容易性の高いUIデザイン

事例：Googleでのクレジットカード情報の読み込み方法

GoogleのUXベストプラクティスに記載されている、クレジットカード情報の読み込み方法を事例としてお話しします。

スマートフォンには、「クレジットカード情報をスキャンすると、その後自動的に支払いができる」という機能があります。
開発側は、スマートフォンのカメラを使って、画面に表示される枠内にカードを映してスキャンしてもらうために、「クレジットカードをここにおいてスキャンしてください」という文言を表示させました。しかし、ユーザーはクレジットカードをスマートフォンの上に置いてしまい、正常に動作しないのを確認してから、クレジットカードの写真を撮る行動をしたのです。

開発者側としては、説明しなくても伝わる簡単な行動に感じますが、ユーザー側の受け取り方は異なっていました。そのため、ユーザー目線に立って、わかりやすく、認知容易性の高いUIデザインを実現する必要があります。

例えば、音楽では音がない部分があることで、その後のパートがさらに力強く感じられます。デザインというのは、コンテンツやプロダクトの中でコントラストを作ること。重要な部分をどのように強調して見せるのか、コントラストを引き出すことがデザインの役割です。

認知させるモーション

人間の目というのはどのように動いているのでしょうか。サバンナで生きていた私たちの祖先は、敵の動物が近くにいたらすぐに動けていましたが、現代の私たちはそのような感覚を持っていません。ただ、視覚的な刺激は現在の私たちの認知にも関わっているので、反射的な動作を引き出す刺激が、画面上にもあると良いです。

トロント大学の研究では、「動きのある標的の方が、動きのない標的に比べて早い反応が得られる」ということがわかりました。これは、Webサイトやアプリのデザインにおいても活用できる考え方です。しかし、動きを使いすぎてしまったり、動きの幅が小さかったりすると、注目度に欠けてしまうため、意図を持って適切に使用しましょう。人の興味を引きたい際は、見せたいところを大げさに見せていくことが重要です。

また、新しいものをデザインする際、新しいパターンを作成するのか、既存のパターンを使うのかを考えます。X（旧Twitter）で働いていたエンジニアは、スクリーンをリロードする際に、リロードボタンを押さなくてもリロードされるように改善しました。単純にリロードボタンを外したらどうなるのかを考え、下にスクロールするとリフレッシュできるような新しい形に変更したのです。そしてこの動きが、パターンとして確立され、今では他のアプリにも導入されています。

新しいパターンをレクチャーして、ユーザーに覚えてもらうことも重要です。新しい使い方やパターンを打ち出した際は、ユーザーに慣れてもらうために時間がかかることを理解する必要があります。

認知させるアイコン

日本のExcelの上書き保存ボタンを見て、「なぜ上書き保存ボタンが自動販売機のアイコンになっているのか」と考えた人がいました。しかし、このボタンは、自動販売機のアイコンではなく、フロッピーディスクを表しています。フロッピーディスクを見たことがない人たちが今の時代には多くいますが、このように時代によって認知の仕方は変化していきます。

例えば、検索ボタンに虫眼鏡のアイコンがあります。このマークをインドで見せると、卓球のラケットと受け取られ、「なぜ検索ボタンが卓球のラケットになっているのか」という質問が出ました。時代だけでなく、地域によっても認知に差があることが分かります。

しかし検索ボタンは、アイコンがなければユーザーに気づかれず、クリックされません。その範囲で何を示しているのか、アイコンによって明確にする必要があります。

視覚的なフィードバック

ユーザーが何かを操作している際に、ボタンを押しても反応がなければ、ストレスを与えてしまいます。そのため、ユーザーが何かアクションを起こしたときは、フィードバックできるように、確実に設定する必要があります。

読み込み中の視覚的なフィードバック

システムを読み込んでいる際は、ユーザーの注意が他に向くようなものを設置することをおすすめします。

例として、ダウンロード中の進捗がわかるバーがあります。しかし、そのバーは、進捗のパーセンテージを均等に分けておらず、0%から進むにつれて段々と細かくなるように範囲を設定しています。人は100%に近づくほど、だんだんとイライラしていくため、このような設定になっているのです。
このように、時間は均等に認知されるわけではありませんので、「すべてがイコールでなければいけない」という純粋な考え方をする必要はありません。

Youtubeでローディングしている際にもアニメーションが出てきますが、実はこれは本当の読み込み時間を見せているわけではなく、あくまでも感覚のためのものです。

読み込み中の画面について、もう少し詳しくお話しします。スピナーのローディングアイコンだけを表示していると、実際に読み込まれているのかがよくわからないため、あまり意味がありません。また、スケルトンスクリーンのみだと、サイトが正常に動いているのかわかりません。

そのため、まず最初はスケルトンスクリーンでフレームを表示させて、次に文字を表示、最後に画像、というように読み込んでいるコンテンツを順番に表示させることで、Webサイトが正常に動いていることを伝えられると良いです。そして、読み込みが正常に行われていて、これから表示されることをユーザーに感じ取ってもらうことが重要です。

最後に

デザインを考える際は、常にユーザーの認知を意識してみてください。たくさんの例を紹介しましたが、人の目がどのように動くのかを理解して、シンプルに考えることが大切です。

私は長い間デザイナーとして仕事をしています。その中で、さまざまな会社で仕事をしてきました。デザイナーの仕事は、短距離走ではなくマラソンのような長距離のキャリアです。まれに、ラッキーですぐにうまくいく方もいらっしゃるかもしれませんが、通常は長い道のりで構成されるものなので、皆さん辛抱強く頑張ってください。

デザインというのは、速いスピードでさまざまなものが変化します。その変化に対して、柔軟に対応できる姿勢が必要です。ツールやテクノロジーについても、新しいものに素早く反応して、柔軟に取り入れる姿勢を持ってください。

また、長い目線で小さなところから少しずつ始めて、経験を積み上げていってください。一晩で世界を変えてしまおうと意気込むのではなく、小さな成功を重ねていくことが重要だと思います。

Q&Aセッション

– Q1.

表示速度の改善が、コンバージョン率向上など、ビジネス成果に直結することは理解できます。しかし、すべての改善が必ずしもビジネス指標に結びつくとは限りません。UXデザイナーとして、ビジネス目標とユーザー体験の両方を最大化するために、どのような指標を参考にしながらデザインを進めていますか？

– A.
UXとビジネスが相反することはよくあるので、UXリサーチャーはどの指標を追っていくのか定義する必要があります。例えば、スピード改善をゴールにおいたとしたら、スピードに関するデータを収集・分析しないといけません。そのため、どの部分のクオリティを改善したいのか、定義を明確にすることが重要です。

コスト削減や時間短縮などのビジネス観点でも、定量的な指標まで落とし込む必要があります。UXで何か改善した場合、指標が定義されていないと、第三者は何を改善したのか理解するのが難しくなってしまいます。改善する中でさまざまな調査をすると思いますので、ゴールを設定して、プロトタイプを作った際、結果がわかりやすいように定義することが大切です。

– Q2.

私はUXデザイナーですが、開発チーム全体への意識改革に苦労しています。具体的には、表示速度の重要性を開発チーム全体に浸透させることは、容易ではないと考えています。開発者、デザイナー、プロジェクトマネージャーなど、それぞれの立場の人々に、高速化の重要性を理解してもらうための具体的な施策について、ムスタファさんのご経験を元に教えていただけますか？

– A.
まずは、ケーススタディを紹介するのが良いスタートだと考えています。例えば、私が今日お伝えした事例を使っていただいて構いませんので、お金やユーザー、スピードなど何らかのビジネスインパクトを伝えていくことが重要です。また、他の企業の方に技術的なトピックを話し合う場を設けていただくのも良いと思います。

最初に大きな提案をしてしまうと、受け手は躊躇してしまうので、まずは小さいところから始めましょう。例えば、画像サイズの縮小によって読み込みスピードを上げるなど、簡単で小さいところから始めて実績を出し、信頼を得ることが必要です。そうすることで、より大きな取り組みを行えるようになります。

– Q3.

パーソナライゼーションと高速化のバランスについて悩んでいます。パーソナライズされた体験を提供するために、多くのデータを処理する必要がありますが、適度なデータ処理によって、表示速度の低下に繋がる可能性を危惧しています。パーソナライゼーションと高速化の両立を図るために、どのような設計思想が求められるでしょうか。ムスタファさんが実際に経験された事例があれば、それを踏まえて教えてください。

– A.
前提として、重要な部分から順番に読み込んだり、表示したりすることが大切です。そのため、まずはどこが一番重要なのかを定義します。例えば、最初のウェルカムメッセージが重要と定義した場合は、ウェルカムメッセージを最初に読み込んで表示します。同時進行で次に重要なものがバックグラウンドで動いて、順番に表示していく形で読み込みをしていくのが良い例です。

パーソナライゼーションを行う上で存在するさまざまな要素について、意味のある要素を吟味し、見極めていくことが重要だと考えます。

– Q4.

グローバルなプロダクトをデザインする際、文化や言語、地域の特性によって、ユーザーの期待値は大きく異なると感じています。表示速度に関しても、国や地域によって異なる価値観が存在します。MetaやGoogleといったグローバル企業で、ムスタファさんはどのように高速化戦略を推進してこられたのでしょうか？異なる地域や文化を持つユーザーに対して、一貫した高速な体験を提供するための工夫について教えてください。

– A.
Googleでは、インドの地方など、もっともネットワークのスピードが遅い2Gの地域に対して、より多くの時間をかけてリサーチをしました。加えて、サービスとユーザーが信頼関係を築くうえで、どのようにそのデバイスをユーザーが利用しているのか、という点についても調査していました。また、世界にはさまざまな言語が存在しているので、それぞれの地域でどの言語を表示するのかについても深く考えました。

コンテンツデザインは、どれだけクイックでシンプルにできるかが重要です。そのため、Googleでは、なるべく早く画面上に表示できるようなロゴデザインが考えられています。

Metaでは、特にFacebookについてさまざまな地域でリサーチを行いました。その結果、インターネット回線が遅い地域では、10年ほど前から「Facebook Lite」という画像がないシンプルな形のFacebookをサービスとして提供しました。このように、元のサービスとは別でライトバージョンを作成するのは、さまざまな企業が試している方法です。

– Q5.

AI技術の発展により、UXデザインの領域でも新たな可能性が広がっていると日々感じています。AIを活用して、よりカスタマイズされた高速なユーザー体験を提供された事例はありますか？また、AIとUXデザイナーの協働において、どのような点に注意すべきでしょうか。ムスタファさんの考えを教えてください。

– A.
私は、AIについて懐疑的です。

皆さんの仕事の効率化においては非常に使いやすいツールだと思いますが、ChatGPT自体がデザインを考えることや、特にUXデザインを考えることに関してはおすすめできません。

ChatGPTが作るデザインは見栄えが非常に良いですが、実際に使いやすいか考えると、微妙なものが多いと感じます。人間が使いやすく、意味のあるUXを作る部分では、まだ人間の関与が必要であると考えています。

登壇者プロフィール

ムスタファ・クルトゥルドゥ氏　Mustafa Kurtuldu
Shopify Inc.
スタッフプロダクトデザイナー
Staff Product Designer

現在はShopifyのスタッフプロダクトデザイナーとして、ShopifyのデザインシステムPolarisに従事。以前は、Metaのインキュベーションリードを務め、それ以前はTwitter (現 X) の消費者向けデザインシステム「Horizon」のデザインリード、GoogleではUXデザインリードとしてChromeのインストーラビリティに携わる。その他、BBCやMiddlesex University、Londonタイムズ等、様々な業界や組織においてプロダクトデザイナーとして24年以上の経験を持つ。また、デザインのベストプラクティスやプログレッシブWebアプリ、デザインスプリントについての書籍や記事の執筆のほか、世界各国で行われるカンファレンスやワークショップで講演を行うなど、幅広い活動を通じてデザイン情報の普及に尽力している。

無料DL｜UI改善の基礎