6つの事例から学ぶ！モバイルデザインのテクニック集
現代に合ったモバイルデザインとは。実際に6つのデザインを事例にしながらユーザー体験を向上させられるデザインについて語っています。ナビゲーションやアニメーションなど実際に動きを見ながら説明しているので、ぜひ参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投稿されました。
近年の最も成功したデザインを観察してみると、勝者のデザイナーは基礎を完璧に実践していることに気づくと思います。
彼らは、人間の自然な動作に合ったデザインを考え、障壁となるものを私たちも気づかないうちに上手く取り去っています。
そして、外観のデザインとインタラクティブなユーザーエクスペリエンス、特にスキャナビリティ（Scanability：コンピュータの画面上の文字が読みやすいこと）に力を注いでいるようです。
モバイルデザインの最も重要なテクニックとその活用法を見てみましょう。
目次
効果的なタイポグラフィ
Webサイト上やアプリ内のテキストの目的は、ユーザーとの関係を構築し、ユーザーの目的達成を助けることです。このインタラクションにおいて重要な役割を担っているのが、「タイポグラフィ」です。
テキストのサイズやレイアウトは、ユーザーが文字を読む体験に大きな影響を与えます。
文字のサイズが小さく、行の高さと余白が十分に設定されていないテキストは、ユーザーにとって読むのに非常に時間がかかります。結果としてユーザーは、情報のほとんどを読み飛ばすことになるでしょう。
これは特にモバイルにおいて顕著です。高輝度の小さな画面が小さな文字で埋めつくされていると、ユーザーは読みにくいと感じます。画面のサイズが小さいほど、タイポグラフィをよく考える必要があります。
出典元：Usertesting
モバイルデザインにおけるタイポグラフィの秘訣は、余白を上手く使って、可読性を高めることです。適切な文字サイズと余白を選択することが最も重要です。
文字が狭いスペースに詰め込まれたようなテキストとならないように、文字は読みやすいサイズにして、行間には十分な余白を設定しましょう。
iOSアプリにおける文字サイズと余白の良い例
アドバイス：モバイルデバイスにおける可読性を保証するには、1行あたり30～40文字に収めましょう（日本語に換算して約15～20文字）。これは、デスクトップにおける1行あたりの理想的な文字数とされる60～75文字（日本語に換算して約30～38文字）の約半分です。
[PR] UI/UXデザインで挫折しない学習方法を動画で公開中
シンプルなカラースキーム（配色）
カラーは、外観のデザインの中でも最も難しい分野かもしれません。カラースキームをシンプルにするとユーザーエクスペリエンスの質を向上する効果がある一方、多くのカラーを使い過ぎるとユーザーエクスペリエンスにマイナスの影響を与えます。多くのカラーを複雑に組み合わせることは、絶対に避けましょう！
単一の色相の明度・彩度を調整するだけでも、豊富なカラーを表現できますし、カラースキームがユーザーの目に派手過ぎると映ることもないと思います。
単一の色相（青色）によるカラースキーム 出典元：Smashing Magazine
次の例も、単一の色相によるカラースキームです。単一の色相（青色）の、トーン（Tone：色相に灰色を混ぜて生まれる色）、シェード（Shade：色相に黒色を混ぜて生まれる色）、ティント（Tint：色相に白色を混ぜて生まれる色）の濃淡を変えて、複数のカラーを作っています。
出典元：Louis Saville
アドバイス：オリジナルのカラースキームを作るのは難しく思えるかもしれませんが、それほど複雑なことではありません。例えば、中間色のカラーパレットに、明るいアクセントカラーを1色だけ加える方法があります。明るいアクセントカラーによって効果的に人目を引くことができます。
出典元：Maximlian Hennebach
カード型の要素＆コンテンツベースのナビゲーション
アプリのコンテンツは、ユーザーに最大限利用してもらうことがその目的となると思います。コンテンツベースのナビゲーションは、オーバービュー画面から詳細表示の画面への遷移を、自然に表現するためのデザインパタンです。
このようなデザインのナビゲーションは、カード型の要素と組み合わせることが効果的です。というのもカード型の要素は、大量の情報を見やすい形に整理するのに適したデザインだからです。
- カード型の要素には、コンテンツを意味のまとまりごとに区切り、画面のスペースを節約する効果があります。ちょうど文章においてパラグラフ（段落）が各文をまとめるように、カード型の要素はコンテンツをまとめるのです。
- カード型の要素は操作も非常にシンプルです。カードを開く操作や、次のコンテンツに進むためにカードをスワイプする操作を、ユーザーは直感的に理解できます。
出典元：Ramotion Agency
アドバイス：UIを可能な限り隠すこと――コンテンツを中心としたデザインに徹しましょう。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
レイヤーと奥行き
デスクトップとモバイルの画面の一番大きな違いは、サイズです。
モバイルサイトやアプリの画面はスペースが少なく、この短所を補うために、近年多くのインターフェースが、既存のデザインのレイヤーの上にさらにレイヤーを追加することで、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デザイナーのサポートで学びたい方はぜひご参加ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
