6つの事例から学ぶ！モバイルデザインのテクニック集
本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投稿されました。
近年の最も成功したデザインを観察してみると、勝者のデザイナーは基礎を完璧に実践していることに気づくと思います。
彼らは、人間の自然な動作に合ったデザインを考え、障壁となるものを私たちも気づかないうちに上手く取り去っています。
そして、外観のデザインとインタラクティブなユーザーエクスペリエンス、特にスキャナビリティ（Scanability：コンピュータの画面上の文字が読みやすいこと）に力を注いでいるようです。
モバイルデザインの最も重要なテクニックとその活用法を見てみましょう。
目次
効果的なタイポグラフィ
Webサイト上やアプリ内のテキストの目的は、ユーザーとの関係を構築し、ユーザーの目的達成を助けることです。このインタラクションにおいて重要な役割を担っているのが、「タイポグラフィ」です。
テキストのサイズやレイアウトは、ユーザーが文字を読む体験に大きな影響を与えます。
文字のサイズが小さく、行の高さと余白が十分に設定されていないテキストは、ユーザーにとって読むのに非常に時間がかかります。結果としてユーザーは、情報のほとんどを読み飛ばすことになるでしょう。
これは特にモバイルにおいて顕著です。高輝度の小さな画面が小さな文字で埋めつくされていると、ユーザーは読みにくいと感じます。画面のサイズが小さいほど、タイポグラフィをよく考える必要があります。
出典元：Usertesting
モバイルデザインにおけるタイポグラフィの秘訣は、余白を上手く使って、可読性を高めることです。適切な文字サイズと余白を選択することが最も重要です。
文字が狭いスペースに詰め込まれたようなテキストとならないように、文字は読みやすいサイズにして、行間には十分な余白を設定しましょう。
iOSアプリにおける文字サイズと余白の良い例
アドバイス：モバイルデバイスにおける可読性を保証するには、1行あたり30～40文字に収めましょう（日本語に換算して約15～20文字）。これは、デスクトップにおける1行あたりの理想的な文字数とされる60～75文字（日本語に換算して約30～38文字）の約半分です。
シンプルなカラースキーム（配色）
カラーは、外観のデザインの中でも最も難しい分野かもしれません。カラースキームをシンプルにするとユーザーエクスペリエンスの質を向上する効果がある一方、多くのカラーを使い過ぎるとユーザーエクスペリエンスにマイナスの影響を与えます。多くのカラーを複雑に組み合わせることは、絶対に避けましょう！
単一の色相の明度・彩度を調整するだけでも、豊富なカラーを表現できますし、カラースキームがユーザーの目に派手過ぎると映ることもないと思います。
単一の色相（青色）によるカラースキーム 出典元：Smashing Magazine
次の例も、単一の色相によるカラースキームです。単一の色相（青色）の、トーン（Tone：色相に灰色を混ぜて生まれる色）、シェード（Shade：色相に黒色を混ぜて生まれる色）、ティント（Tint：色相に白色を混ぜて生まれる色）の濃淡を変えて、複数のカラーを作っています。
出典元：Louis Saville
アドバイス：オリジナルのカラースキームを作るのは難しく思えるかもしれませんが、それほど複雑なことではありません。例えば、中間色のカラーパレットに、明るいアクセントカラーを1色だけ加える方法があります。明るいアクセントカラーによって効果的に人目を引くことができます。
出典元：Maximlian Hennebach
カード型の要素＆コンテンツベースのナビゲーション
アプリのコンテンツは、ユーザーに最大限利用してもらうことがその目的となると思います。コンテンツベースのナビゲーションは、オーバービュー画面から詳細表示の画面への遷移を、自然に表現するためのデザインパタンです。
このようなデザインのナビゲーションは、カード型の要素と組み合わせることが効果的です。というのもカード型の要素は、大量の情報を見やすい形に整理するのに適したデザインだからです。
- カード型の要素には、コンテンツを意味のまとまりごとに区切り、画面のスペースを節約する効果があります。ちょうど文章においてパラグラフ（段落）が各文をまとめるように、カード型の要素はコンテンツをまとめるのです。
- カード型の要素は操作も非常にシンプルです。カードを開く操作や、次のコンテンツに進むためにカードをスワイプする操作を、ユーザーは直感的に理解できます。
出典元：Ramotion Agency
アドバイス：UIを可能な限り隠すこと――コンテンツを中心としたデザインに徹しましょう。
レイヤーと奥行き
デスクトップとモバイルの画面の一番大きな違いは、サイズです。
モバイルサイトやアプリの画面はスペースが少なく、この短所を補うために、近年多くのインターフェースが、既存のデザインのレイヤーの上にさらにレイヤーを追加することで、Z軸を加えるようになっています。
レイヤーによってZ軸を加えるデザイン手法は、インターフェースに奥行き感を与え、より知覚しやすい3D空間のデザインを生み出します。
Googleのマテリアルデザインの次のデザイン例は、複数のレイヤーを重ねてインターフェースを作っています。マテリアルデザインは、現実の物理的な世界における人と物体のインタラクションを模しています。
レイヤーには、優れたインタラクションを作る効果があります。サーフェス（Surface：影であるシャドウを落とす要素）とシャドウ（Shadow：影の要素）を使えば、アプリの構造を表現することができます。シャドウを加えた要素は下に影が落とされたデザインとなるので、他の要素やオブジェクトから浮き出て見えます。
レイヤーはインタラクションにおけるユーザーへのヒントになります。出典元：GoogleのMaterial Design
複数のレイヤーを重ねて作るインターフェースには、次のような機能的なデザインもあります。
フローティング操作ボタン（Floating action button）
UI上に浮かぶ円形のアイコンで、操作を促すためによく使われます。
出典元： pocketmeta
ズームイン（Zoom-in）
典型的な例として、ユーザーがリストから特定のアイテムを選択した場合に、そのアイテムの詳細が画面全体に表示され（このときリストの画面は覆い隠されます）、また元のリストの画面に戻るデザインなどがあります。
出典元： androidcentral
スティッキーナビゲーション（Sticky navigation）
ユーザーがスクロールなどの操作をしても、メニューが画面上に固定されたまま留まります。
上のナビゲーションバーは、スクロール操作をすると画面から消えます。出典元：exisweb
上のナビゲーションバーは、スクロール操作をしても画面に固定されたままです。出典元：exisweb
モーダルウィンドウ（Modal window）
既存のウィンドウの上に、子ウィンドウを重ねて表示し、ログイン画面、広告、リマインダーなどを知らせます。
出典元：GoogleのMaterial Design
アドバイス：ユーザーフローはシンプルにしましょう。1つの画面は一度に1つのフローのためだけにデザインします。
ジェスチャー機能
ジェスチャー機能に対応したデバイスの登場は、インタラクションのあり方にも大きな影響を与えました。
近年、スワイプ、タップ、ズームなどが最も一般的なジェスチャであり、従来のマウスのポイントやクリック操作のように、直感的に分かる操作となりました。
ジェスチャーは、前のページに戻る、メニュー画面を表示する、お気に入りに登録する、アイテムを変更・削除するなどの操作によく使われています。
出典元：Aaron Wade
ジェスチャーによる操作を増やせば、その分画面上のボタン要素は少なくて済むので、コンテンツのためのスペースをより広く確保できまます。
そのため、アプリ開発をコンテンツを中心に進めやすくなるはずです。
出典元：Bady
アドバイス：ここで紹介したのは、標準的な（直感的に分かる）ジェスチャーです。新しく作ったオリジナルのジェスャーを使う場合には、注意が必要です。通常、ジェスチャー機能はアプリ上では隠れています。もし指示などが示されないとしたら、ユーザーはアプリの操作に戸惑うかもしれません。
機能的なアニメーション
機能的なアニメーションとは、ユーザーインターフェースのデザインに組み込む微かなアニメーションのことです。インタラクションを高める次のような効果があります。
- フィードバック（応答）を視覚的に返す
ユーザーがクリックやタップなどの操作をした後に、アニメーションがフィードバック（応答）として現われれば、ユーザーは操作が受理されたことが分かりやすくなります。
- スムーズな画面遷移を生み、変化に注目を集める
この例では、アイコンを2パターンに変化させることで、2つの機能を備えていることを伝えています。
アドバイス：アニメーションやトランジションを絶妙に使うことで、ユーザー体験の質を向上させることができます。ただし、アニメーションは目的を考えて使うように注意しましょう。
アニメーションは、ユーザーを楽しませるためというよりも、ユーザーにとって役に立つ機能を実現するために使うべきです。
結論
現代のUIデザインは、不要な要素を削ぎ落として、より機能性を重視する方向に動いています。
整理されたインターフェース・シンプルな色合い・美しい外観デザインが、現代的なインターフェースを生み、ユーザーが使いやすい製品を生み出す秘訣なのです。
[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい方はぜひご参加ください。
