ガジェット通信 GetNews

見たことのないものを見に行こう
ワンダーウーマン

6つの事例から学ぶ!モバイルデザインのテクニック集

DATE:
  • ガジェット通信 GetNewsを≫

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投稿されました。

 

近年の最も成功したデザインを観察してみると、勝者のデザイナーは基礎を完璧に実践していることに気づくと思います。

彼らは、人間の自然な動作に合ったデザインを考え、障壁となるものを私たちも気づかないうちに上手く取り去っています。

そして、外観のデザインとインタラクティブなユーザーエクスペリエンス、特にスキャナビリティ(Scanability:コンピュータの画面上の文字が読みやすいこと)に力を注いでいるようです。

モバイルデザインの最も重要なテクニックとその活用法を見てみましょう。

 

目次

効果的なタイポグラフィ
シンプルなカラースキーム(配色)
カード型要素のナビゲーション
レイヤーと奥行き
ジェスチャー機能
機能的なアニメーション

 

効果的なタイポグラフィ

Webサイト上やアプリ内のテキストの目的は、ユーザーとの関係を構築し、ユーザーの目的達成を助けることです。このインタラクションにおいて重要な役割を担っているのが、「タイポグラフィ」です。

テキストのサイズやレイアウトは、ユーザーが文字を読む体験に大きな影響を与えます。

文字のサイズが小さく、行の高さと余白が十分に設定されていないテキストは、ユーザーにとって読むのに非常に時間がかかります。結果としてユーザーは、情報のほとんどを読み飛ばすことになるでしょう。

これは特にモバイルにおいて顕著です。高輝度の小さな画面が小さな文字で埋めつくされていると、ユーザーは読みにくいと感じます。画面のサイズが小さいほど、タイポグラフィをよく考える必要があります。

1-glx4qtsh0gez7ju23_-dfw

出典元:Usertesting

モバイルデザインにおけるタイポグラフィの秘訣は、余白を上手く使って、可読性を高めることです。適切な文字サイズと余白を選択することが最も重要です。

文字が狭いスペースに詰め込まれたようなテキストとならないように、文字は読みやすいサイズにして、行間には十分な余白を設定しましょう。

1-k2d-2l4pqnpw8kt_x0ezua

iOSアプリにおける文字サイズと余白の良い例

アドバイス:モバイルデバイスにおける可読性を保証するには、1行あたり30~40文字に収めましょう(日本語に換算して約15~20文字)。これは、デスクトップにおける1行あたりの理想的な文字数とされる60~75文字(日本語に換算して約30~38文字)の約半分です。

 

シンプルなカラースキーム(配色)

カラーは、外観のデザインの中でも最も難しい分野かもしれません。カラースキームをシンプルにするとユーザーエクスペリエンスの質を向上する効果がある一方、多くのカラーを使い過ぎるとユーザーエクスペリエンスにマイナスの影響を与えます。多くのカラーを複雑に組み合わせることは、絶対に避けましょう!

単一の色相の明度・彩度を調整するだけでも、豊富なカラーを表現できますし、カラースキームがユーザーの目に派手過ぎると映ることもないと思います。

0-fmmkpg9nkfprsokx

単一の色相(青色)によるカラースキーム 出典元:Smashing Magazine

次の例も、単一の色相によるカラースキームです。単一の色相(青色)の、トーン(Tone:色相に灰色を混ぜて生まれる色)、シェード(Shade:色相に黒色を混ぜて生まれる色)、ティント(Tint:色相に白色を混ぜて生まれる色)の濃淡を変えて、複数のカラーを作っています。

0-w_fvxwqg_6px2vge

出典元:Louis Saville

アドバイス:オリジナルのカラースキームを作るのは難しく思えるかもしれませんが、それほど複雑なことではありません。例えば、中間色のカラーパレットに、明るいアクセントカラーを1色だけ加える方法があります。明るいアクセントカラーによって効果的に人目を引くことができます。

1-w2h9aop_8rrtqpxt_2k4jg1 582602bfb2cb7767075559

出典元:Maximlian Hennebach

 

カード型の要素&コンテンツベースのナビゲーション

アプリのコンテンツは、ユーザーに最大限利用してもらうことがその目的となると思います。コンテンツベースのナビゲーションは、オーバービュー画面から詳細表示の画面への遷移を、自然に表現するためのデザインパタンです。

このようなデザインのナビゲーションは、カード型の要素と組み合わせることが効果的です。というのもカード型の要素は、大量の情報を見やすい形に整理するのに適したデザインだからです。
カード型の要素には、コンテンツを意味のまとまりごとに区切り、画面のスペースを節約する効果があります。ちょうど文章においてパラグラフ(段落)が各文をまとめるように、カード型の要素はコンテンツをまとめるのです。
カード型の要素は操作も非常にシンプルです。カードを開く操作や、次のコンテンツに進むためにカードをスワイプする操作を、ユーザーは直感的に理解できます。

5826046cb71d8374965536

出典元:Ramotion Agency

アドバイス:UIを可能な限り隠すこと――コンテンツを中心としたデザインに徹しましょう。

 

レイヤーと奥行き

デスクトップとモバイルの画面の一番大きな違いは、サイズです。

モバイルサイトやアプリの画面はスペースが少なく、この短所を補うために、近年多くのインターフェースが、既存のデザインのレイヤーの上にさらにレイヤーを追加することで、Z軸を加えるようになっています。

1-02gdxjzosixtk_piapeqla

レイヤーによってZ軸を加えるデザイン手法は、インターフェースに奥行き感を与え、より知覚しやすい3D空間のデザインを生み出します。

Googleのマテリアルデザインの次のデザイン例は、複数のレイヤーを重ねてインターフェースを作っています。マテリアルデザインは、現実の物理的な世界における人と物体のインタラクションを模しています。

レイヤーには、優れたインタラクションを作る効果があります。サーフェス(Surface:影であるシャドウを落とす要素)とシャドウ(Shadow:影の要素)を使えば、アプリの構造を表現することができます。シャドウを加えた要素は下に影が落とされたデザインとなるので、他の要素やオブジェクトから浮き出て見えます。

0-dkgwcq4gbjoiowk8

レイヤーはインタラクションにおけるユーザーへのヒントになります。出典元:GoogleのMaterial Design

複数のレイヤーを重ねて作るインターフェースには、次のような機能的なデザインもあります。

 

フローティング操作ボタン(Floating action button)

UI上に浮かぶ円形のアイコンで、操作を促すためによく使われます。

1-odmdqy3jiqqzfw1jythhyq

出典元: pocketmeta

 

ズームイン(Zoom-in)

典型的な例として、ユーザーがリストから特定のアイテムを選択した場合に、そのアイテムの詳細が画面全体に表示され(このときリストの画面は覆い隠されます)、また元のリストの画面に戻るデザインなどがあります。

1-8ennklircgledz0zxcr9oq

出典元: androidcentral

 

スティッキーナビゲーション(Sticky navigation)

ユーザーがスクロールなどの操作をしても、メニューが画面上に固定されたまま留まります。

1-mlvl3atkc5653_qrbsdxxg

上のナビゲーションバーは、スクロール操作をすると画面から消えます。出典元:exisweb

1-d1qeokxxxtlenhiyytc0mw

上のナビゲーションバーは、スクロール操作をしても画面に固定されたままです。出典元:exisweb

 

モーダルウィンドウ(Modal window)

既存のウィンドウの上に、子ウィンドウを重ねて表示し、ログイン画面、広告、リマインダーなどを知らせます。

1-stcq5u-nehdzqkn6_lzc-a

出典元:GoogleのMaterial Design

アドバイス:ユーザーフローはシンプルにしましょう。1つの画面は一度に1つのフローのためだけにデザインします。

 

ジェスチャー機能

ジェスチャー機能に対応したデバイスの登場は、インタラクションのあり方にも大きな影響を与えました。

近年、スワイプ、タップ、ズームなどが最も一般的なジェスチャであり、従来のマウスのポイントやクリック操作のように、直感的に分かる操作となりました。

ジェスチャーは、前のページに戻る、メニュー画面を表示する、お気に入りに登録する、アイテムを変更・削除するなどの操作によく使われています。

582605f0c22b3939368269

出典元:Aaron Wade

 

ジェスチャーによる操作を増やせば、その分画面上のボタン要素は少なくて済むので、コンテンツのためのスペースをより広く確保できまます。

そのため、アプリ開発をコンテンツを中心に進めやすくなるはずです。

1-g-mhvlwpl1rf1w4uzik6qg

出典元:Bady

アドバイス:ここで紹介したのは、標準的な(直感的に分かる)ジェスチャーです。新しく作ったオリジナルのジェスャーを使う場合には、注意が必要です。通常、ジェスチャー機能はアプリ上では隠れています。もし指示などが示されないとしたら、ユーザーはアプリの操作に戸惑うかもしれません。

 

機能的なアニメーション

機能的なアニメーションとは、ユーザーインターフェースのデザインに組み込む微かなアニメーションのことです。インタラクションを高める次のような効果があります。
フィードバック(応答)を視覚的に返す

 

5826062253f9d141709771

ユーザーがクリックやタップなどの操作をした後に、アニメーションがフィードバック(応答)として現われれば、ユーザーは操作が受理されたことが分かりやすくなります。

 
スムーズな画面遷移を生み、変化に注目を集める

0-s372md0xh5gaxfr1

この例では、アイコンを2パターンに変化させることで、2つの機能を備えていることを伝えています。

アドバイス:アニメーションやトランジションを絶妙に使うことで、ユーザー体験の質を向上させることができます。ただし、アニメーションは目的を考えて使うように注意しましょう。

アニメーションは、ユーザーを楽しませるためというよりも、ユーザーにとって役に立つ機能を実現するために使うべきです。

 

結論

現代のUIデザインは、不要な要素を削ぎ落として、より機能性を重視する方向に動いています。

整理されたインターフェース・シンプルな色合い・美しい外観デザインが、現代的なインターフェースを生み、ユーザーが使いやすい製品を生み出す秘訣なのです。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい方はぜひご参加ください。

カテゴリー : デジタル・IT タグ :
TechAcademyマガジンの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。