体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

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

本稿は、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
1 2 3 4次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。
GetNews girl / GetNews boy

オスカー2018年晴れ着撮影会