現代のコネクテッドワールドでは、ユーザーはデジタル体験に高い期待を抱いています。そして、ハイエンドのノートパソコンやデスクトップであれば、その期待に応えるのは比較的簡単です。美しい大画面、高速インターネット、大容量ストレージ、さらにはキーボードやマウスといった追加の入力デバイスは、デザイナーや開発者に最高のユーザーエクスペリエンスを構築するための豊富なリソースを提供します。
しかし、モバイルデバイスにはこうした便利な機能がすべて備わっているわけではありません。そのため、組織が従来行ってきたように、まずは制限の少ない媒体から始めて規模を縮小しようとすると、モバイル上でユーザーエクスペリエンスが最適化されないことがよくあります。かつてのアプリケーション環境では、おそらくそれで問題ありませんでした。デスクトップアプリとモバイルアプリがあり、前者は作業を行うためのもので、後者は利便性を重視したユースケースでした。
モバイルファーストアプローチとは何ですか?
モバイルアプリやウェブサイトが登場した当初、デザイナーたちは「グレースフル・デグラデーション」と呼ばれる手法を強く推し進めました。これは、デスクトップからタブレットやスマートフォンへとエクスペリエンスが移行するにつれて、機能や機能性が削ぎ落とされることを意味します。
しかし、世界はここ10年で大きく変化しました。特に、働く場所、時間、そして方法に関しては顕著です。こうした変化するニーズに応えるため、モバイルファースト推進派は「プログレッシブ・アドバンスメント（漸進的進歩）」に着目しました。
プログレッシブ・アドバンスメントは、グレースフル・デグラデーションの逆です。最小の画面から始めて、コアとなるアプリケーションエクスペリエンスを提供できることを確認することで、デザイナーはより大きなクラスのデバイスごとに追加の機能や特徴を追加することができます。
そうすれば、ユーザーとアプリケーションが交わる場所がどこであっても、一流のユーザー エクスペリエンスと、作業を遂行するために必要なコア機能が期待できます。
参照: このシンプルなアプリを使えば、コードを書かずにカスタムモバイルアプリを構築できます (TechRepublic Academy)
今日のデジタル環境においてモバイルファーストが意味を持つ理由
現在、20億人以上がスマートフォンからインターネットにアクセスしています。一部のアナリストは、2025年までにインターネットユーザーの70%以上がスマートフォンでインターネットを利用するようになると予測しています。
2012年以降、スマートフォンの販売台数はデスクトップパソコンの販売台数を大幅に上回っています。モバイルゲーム市場は、PCとゲーム機の合計販売台数を上回っています。モバイルユーザーを惹きつけ、魅了することがいかに重要かを示す統計データは、インターネット上に数多く存在します。しかし、この現象は、消費者が所有するデバイスの数だけを問題視しているわけではありません。
Googleのアルゴリズムは、モバイルフレンドリーなウェブサイトを優先します。実際、検索大手であるGoogleにとってモバイルフレンドリーは非常に重要であり、ウェブサイトのモバイルフレンドリー度をテストできるサイトまで作成されています。
ほとんどのアプリケーションにとって、検索エンジン経由のオーガニックトラフィックは長期的な成功の鍵となります。Googleのアルゴリズムに注意を払うことは、発見可能性を高めるための最良の方法の一つです。そして、モバイル性は重要な要素であるため、モバイルファースト戦略は競争優位性をもたらします。
コンテンツは紛れもなく王者
モバイルファーストを目指す際には、コンテンツこそが最重要だということを忘れてはなりません。デザイナーは、ユーザーが本当に必要とするコンテンツだけを提供することに注力すべきです。余分な要素はユーザーの集中力を削ぎ、画面スペースが限られていると生産性が低下します。
したがって、デスクトップ ビューではすべてのオプションが表示されるのが一般的ですが、適切に設計されたモバイル アプリケーションではコンテキストを使用して、いつ何を表示するか、そして同様に重要な、何を表示しないかを決定します。
これは、モバイル ユーザーがきめ細かなオプションのすべてにアクセスできないという意味ではなく、主な使用例を一般的にサポートしないオプションが、折りたたみ可能なメニューやアコーディオンなどの目立たない UI 構造の背後に隠れているという意味です。
モバイルファースト設計のベストプラクティス
ユーザーを念頭に置いて始める
アプリケーションは問題を解決しますが、モバイル デザインによってユーザーがその問題を迅速かつ効率的に解決できない場合は、機会を逃すことになります。
階層は重要
アプリケーションがユーザーにどのように表示されるかによって、その瞬間に何が最も重要かが明確に伝わるはずです。モバイルバンキングのサイトで送金手続きをする場合、残高が画面中央に表示されることを期待するはずです。
シンプルは良い
可能な限りナビゲーションのリンク数を減らし、縦スクロールを利用するページ数を減らしましょう。縦向きアプリの場合は、画面を2列以上に分割しないでください。また、大きめのフォントと幅広ですっきりとした枠線の使用を検討してください。
明確な行動喚起
各画面には明確な行動喚起（CTA）が必要です。明るく、大胆で、一貫性のあるデザインにしましょう。Googleのマテリアルデザインには、FAB（フローティングアクションボタン）と呼ばれる優れたCTA構造がありますので、ぜひ参考にしてください。
ユーザーを待たせない
読み込み時間を確認しましょう。ある調査によると、パフォーマンスが悪いと79%の買い物客がそのサイトを再度利用する可能性は低いことが示されています。可能な限り画像を圧縮し、「遅延読み込み」などの技術を活用して読み込み時間を短縮しましょう。
参照: 負荷テストとストレステスト: 主な違いは何ですか? (TechRepublic)
モバイルファーストアプリケーションのアイデア
インスピレーションをお探しなら、これらの優れたモバイルサイトを参考にしてみてください。これらの例が、モバイルファーストのアプローチがあなたの次のデジタルプロジェクトに適切なアプローチであるかどうかを考えるきっかけになれば幸いです。
花粉
Pollenの業務内容を見れば、洗練されたモバイルエクスペリエンスを提供していることは驚くことではありません。PollenはデザインとUXを専門とするデジタルスタジオです。サイトの読み込みは速く、余白を効果的に活用し、デスクトップ版とモバイル版のどちらでサイトが動作しているかに応じてナビゲーションメニューを巧みに調整しています（図A）。
図A
ターボタックス
税金計算は退屈だなんて誰が言ったのでしょうか? TurboTax アプリケーションは CTA を多用し、コンテキスト認識型のモバイルファーストのアプローチで複雑なワークフローを実現します (図 B )。
図B
ショッピファイ
eコマースのリーダーであるShopifyは、顧客がどこでサイトを目にしても、最高のユーザーエクスペリエンスを提供する必要があります。ここでは、Shopifyがモバイル端末上でグリッドレイアウトを簡素化した優れた例を見ることができます（図C）。
図C
モバイルファースト設計はユーザーエクスペリエンスを優先します
B2Cアプリでは一般的ですが、近年では多くのB2B企業もモバイルファースト戦略を活用しています。モバイルファースト開発では最小画面を優先するため、コア機能に関する焦点と難しい議論が効果的に左にシフトします。
より大きな画面やデバイスに移行する前に、まずスマートフォン上でのアプリの外観と操作方法を決定することで、開発者、設計者、製品所有者は、ユーザーと顧客にとって何が重要であるかについてすぐに合意することができます。
TechRepublic Academy の以下のリソースでモバイル アプリ開発について詳しく学んでください。
- 完全なモバイル＆アプリ開発バンドル
- モバイルアプリ設計の完全ガイド
- 2022年モバイルアプリ開発者バンドル
