Google UXデザイン：モバイルファーストのデザイン

はじめに

わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

これまでの振り返り

デバイスや製品を横断的にデザインするためのアプローチ

あなたは、モバイルアプリとレスポンシブWebサイトの両方をデザインする準備を開始するところです。この時点まで、あなたは2つの異なる課題に対して、スタンドアロンのモバイルアプリとレスポンシブWebサイトをデザインしてきました。

今度は、すべてまとめて、同じユーザーの問題に対処するモバイルアプリとレスポンシブWebサイトをデザインします。このプロジェクトに着手するにあたり、モバイルアプリとレスポンシブWebサイトのどちらを先にデザインすべきなのか、悩むかもしれません。

デバイスや製品を横断的にデザインする場合、2つのアプローチがあります。

• プログレッシブ・エンハンスメント（Progressive enhancement）
• グレースフル・デグラデーション（Graceful degradation）

プログレッシブ・エンハンスメント

プログレッシブエンハンスメントとは、最小の画面から最大の画面へとデザインすることです。プログレッシブエンハンスメントのアプローチは、ボトムアップ設計とも呼ばれます。これは、携帯電話など、サイトの最小かつ最も基本的なバージョンを最初に設計し、次に大きな画面サイズに合わせてデザインを装飾していくからです。

プログレッシブ・エンハンスメントのアプローチにより、私たちデザイナーは、 プロジェクトの最初の段階で、設計する製品の基本的な機能に焦点を当てる ことができます。小さな画面サイズから始めることで、画面上で優先すべき最も重要な要素を選択する必要があります。そして、より大きなデバイスや画面サイズに移行するにつれて、より高度な機能やインタラクションを追加していくことができるのです。

デザイナーは、プログレッシブエンハンスメントのアプローチを使用することで、最初から最も重要なコンテンツを強調し、あらゆるデバイスサイズとタイプでウェブサイトをどのように表示すべきかという明確なビジョンを思い描くことができるようになります。

プログレッシブエンハンスメントは、モバイルファーストの考え方と密接に関係しています。モバイルファーストの思想とは、まずモバイル版のデザインから始め、後にタブレット、ノートパソコン、デスクトップパソコンなどの大画面に適合させることを指します。

以前は、多くのデザイナーがデスクトップ版のウェブサイトから始めて、タブレットや携帯電話などの小さなスクリーンに合わせようとしました。しかし近年、UXデザインの世界では、モバイルファーストのアプローチがますます一般的 になってきています。なぜでしょうか？それは、年々、世界中の携帯電話利用者が増えているからです。ユーザーのニーズを最優先してデザインするわけですから、彼らが最も使っているデバイスや画面サイズに合わせてデザインすることになります。

NBU（Next Billion Users）:
今後、初めてウェブにアクセスする世界中の10億人のことを指します。彼らがインターネットを日常的に利用するようになれば、モバイル端末を使う可能性は非常に高くなります。ですから、モバイルファーストの思想に基づいてソリューションを設計することが大切になります。

世界広告研究所によると、2025年までに全インターネットユーザーの72％が、インターネットにアクセスする唯一の手段としてスマートフォンを利用する

グレースフル・デグラデーション

グレースフル・デグラデーションとは、最大の画面からより小さな画面へと設計することです。なぜなら、多くの機能とインタラクションを備えた大きな画面から始めて、機能やインタラクションが縮小された小さな画面に向かって作業を進めるからです。

UXデザイナーの間では、デスクトップパソコンが最も利用されていた時代に、このアプローチが流行しました。

どのアプローチを目指すべき？

この2つのアプローチを踏まえた上で、デザインする際には、どちらを用いるべきでしょうか？

それは、対象とするユーザー によって決めるべきでしょう。

どのようなユーザーを対象として設計するのかを明確にすることは、プロジェクトに取り掛かる前の重要なポイントです。これが、デザインプロセスが共感から始まる理由の一つであり、ユーザーをよく知ることができるのです。

ケース１

たとえば、新興市場やオンラインショップの利用者を想定しているのであれば、プログレッシブ・エンハンスメントのアプローチが適しています。この方法では、ユーザーが最も使用する可能性の高い携帯電話の画面に、まずデザインを集中させることができます。

ケース2

一方、教室で学ぶ学生をターゲットにした場合は、デスクトップPCでの体験を優先させるため、グレースフル・デグラデーションアプローチが有効でしょう。

モバイルファーストで気にしなければならないこと

ロードタイムを減らす

モバイルファーストのデザインは、読み込みに必要な要素や機能が少ないため、ユーザーがコンテンツにすばやくアクセスできるようにします。

モバイル端末にはデスクトップパソコンほどのコンピュータパワーがないため、これは重要なことです。

最初に大きな画面サイズ向けにデザインした場合、複雑な画面のデザイン要素をすべて小さな画面に取り込み、ロード時間に影響を与えないようにするのは、後で難しくなる可能性があります。

これも、モバイルファーストの設計思想が有効である理由のひとつです。

デバイス間で優れたユーザーエクスペリエンス

UXデザイナーとして、作成したデザインがデスクトップPC、タブレット、携帯電話、スマートウォッチ、テレビ、スマートディスプレイなど、複数のデバイスにどのように適応するかを考えることが重要です。

デバイス間で優れたユーザーエクスペリエンスを提供するには、4つのCを念頭に置いてください。

Consistency

デバイスや製品を問わず、ユーザーが親しみを感じられるような統一されたデザインであること

Continuity

デバイス間を移動するユーザーにスムーズで中断のない体験を提供すること

Context

特定のデバイスのニーズと、ユーザーがそのデバイスをどのような状況で使うかを想定すること

Complementary

各デバイスでの製品設計が、全体的なユーザーエクスペリエンスをどのように向上させるかを考慮すること