モバイル向けアプリとWebサイトのUXを改善する10の方法

モバイルデバイスの利用者は、この20年間に凄まじい勢いで増加しました。特に2011年ごろからはスマートフォンが普及し、より多くの人がモバイルデバイスを使っています。使用目的もずっと多様になりました。

そんなモバイルデバイスですが、現在、ユーザーエクスペリエンスをいかに改良するかが大きなテーマとなっています。使用前、使用中、使用後にわたってユーザーが心地よく使うことができるか、コンテンツが理解しやすいかを考慮する必要があります。

さらに、どんな種類のデバイスからも一様にアクセスできるように設計する必要があります。新しいデバイス、古いデバイス、ハイエンド、ローエンドなどの特性を踏まえた上で、一定のクオリティーを満たした体験を提供しなければなりません。

Giovanni Luperti / dribbble

昨今では、ユーザーエクスペリエンスの良し悪しはそのサービスを提供する会社自体の評価にもつながってしまいます。この流れに対応するために、多くの会社が時間とお金をつぎ込み、ハイクオリティーなアプリやWebサイトを作ろうとしています。

この記事では、モバイルユーザーエクスペリエンスをクライアント向けのアプリやWebサイトに応用できる10の方法を紹介したいと思います。ぜひ参考にしてみてくださいね！

1. タスクへのアクセスを単純明快に

Jessie McCarron / dribbble

モバイルUXをデザインするなら、まずはモバイル機器の利用者が何を求めているかを明確にしましょう。たとえば、そのサービスはどんな状況下で使用されるのか。移動中でパソコンが使えないときや、すぐに何か特定のことをチェックしたいときに使われることが多いはずです。それを想定したサービスの場合、「素早くアクセスできる」という要素がとても重要になります。

モバイル機器で何かを探そうと努力する時間は、パソコンのそれに比べると圧倒的に短いので、必要な機能がすぐに見つからないと使用を中断されてしまいます。

重要なコンテンツにはできるだけ簡単にアクセスできるようにしましょう。

2.プログレッシブディスクロージャーの採用

Dual Pixel / dribbble

プログレッシブディスクロージャーとは、情報を段階的に表示し、ユーザーの注意を長くひきつけるというテクニックです。

モバイル機器の画面は小さいので、一度に多くの情報を詰め込むのは得策ではありません。全部見せるのではなく、段階的にオプションを表示することで、シンプルに、そして確実に、必要な情報に迫っていくことができます。

パソコンで見るWebサイトには、一度にたくさんのメニューがある方が好まれますが、モバイルUXにおいては、余計なものをできるだけ省いて、必要な情報だけを表示するのが好まれます。

3. CTAボタンを見やすくする

Suthan S. / dribbble

使いやすさを格段にアップさせる方法として、CTA（Call To Action）ボタンの使用は不可欠です。

CTAボタンとはコンバージョンを促進するための機能で、ゴールへのスムーズな移動を手助けします。このCTAボタンを押しやすいところに設置し、余計なステップを減らせば、ユーザーに良い印象をもってもらえます。

注目してもらいたい部分を際立たせることが大切なのです。重要でないコンテンツはメイン画面から避けておく、グループナビゲーションで同じ種類のコンテンツをまとめ、スクリーンの数を少なくする、重要な部分に広告が被らないようにする、など、注意をはらいましょう。

4. ナビゲーションをシンプルで直感的に

Jan Losert / dribbble

Webページも、モバイルブラウザー用のスタイルが必要です。

何度もクリックする必要がある階層的なマルチレベルメニューは避けましょう。クリック数の多さはユーザーの負担となり、コンバージョン率を下げてしまう可能性があります。

5. 顧客アンケートをとる

オンラインビジネスでの成功の鍵は、利用者が何を求めているかを知ること、そしてそれを実現することです。

顧客の意見を取り入れて常に最新の状態にしておくことで、そのサイトの長所や短所、改善点や問題点をいつでも把握することができます。問題への即時対応は高品質なカスタマーサービスにもつながります。

6. 短い形式を心がける

Fede Trevisan / dribbble

シンプルイズザベスト。この訓示は、理想のモバイルUX作りにも適用されます。ユーザーインターフェイス上の言葉やゴールまでのステップは、簡素であることに勝るものはありません。

特にメルマガへの登録や商品の購入などは、できるだけ短いステップで行えるようにしましょう。また、ユーザーが情報を入力するエリアも、本当に必要な入力内容は何かを考えて、できるだけ最小限に抑えると良いです。

7. インタラクティブな要素を前面にもってくる

アプリやWebサイト上の、ユーザーがタッチするところは見やすくしましょう。

モバイル機器を使う誰もが、アプリの操作が不明確で困ったという経験をしたことがあるはずです。また、操作方法がわかっていても指を動かしがしづらいと感じたこともあるでしょう。

この問題を防ぐためには、タッチするところにハイライトをあてるなどして強調するようにしましょう。

8. アクションゾーンを大きく

上記のとおり、モバイル機器のタッチスクリーンは小さいので、正確にタッチすることが簡単ではありません。この解決策はとてもシンプル。タッチするターゲットを大きくデザインしましょう。

たとえば、40px × 40pxのアイコンに10pxの余白を設ければ、理想的な大きさのタッチアイコンが作れます。

9. 優れた検索方法の導入

Virgil Pana / dribbble

検索機能をつけて、ユーザーが必要なものを見つけやすくしましょう。方法は2つあります。

ひとつめは、検索にフィルター機能をつけること。検索結果を絞ることができるので、比較的大きなWebサイトやアプリに向いています。

もうひとつは、自動で入力を予想してくれるスマートサーチを使う。調べたいテーマがあるけど正確な言葉がわからない、というときに、入力した言葉に関連する結果が自動で表示されます。

ユーザーにとって最も親切な検索システムではないでしょうか。

10. スピーディーな動き

Webサイトにモバイル機器でアクセスすると、PCで見るよりも動作が遅いということがよくあります。クリックしてからコンテンツが表示されるまでの時間が長ければ長いほど、ユーザーは離れてゆきます。原則として、ユーザーは待ち時間を嫌います。

文字だけのサイトなら表示時間は早いでしょうが、やみくもに軽くして見栄えが悪くなってしまっては元も子もありません。使いたくなるようなデザインを目指しつつも、大きい画像を使いすぎないようにしましょう。また、JavaScriptとCSSの使用を最小限にすることで、画面の表示時間を短縮することができます。サーバーに接続する回数と時間が少ないほど、画面表示時間は短かくなります。

モバイルUX改善のヒントは得られたでしょうか。「シンプル」、「素早く」、という2つのキーワードを心に留めておきましょう。ユーザーからより評価されるアプリやWebサイトを世に出せると良いですね。

（翻訳：Juri Ando）