アプリUIデザインに役立つミニマリズムの4つのポイント

連載

エクスペリエンスデザインの基礎知識

近年、アプリのインターフェースデザインは、利用状況を意識し、目的に沿うよう整えられたものに変化してきました。必要な要素だけに絞り込まれた、簡素なUIが最近の流行です。ミニマリズムはこの動向の最前線にあり、最近のデザインガイド（マテリアルデザイン、iOSヒューマンインターフェースガイドライン、Metroデザイン言語など）は揃ってミニマリズムから影響を受けています。

この記事では、ミニマリズムの特徴から、アプリのデザインに役立つ主要なヒントを解説します。

ミニマリズムとは？

ミニマリズムは、機能と形態の組み合わせの最適化です。また、「少ないほど良い」の原則に従います。そのため、ユーザーの目的達成に真に必要な要素以外は取り除かれます。デザイン内に残るすべての要素は意図を持って配置され、何らかの目的を果たす機能を持ちます。

ミニマリズムを受け入れるならば、ユーザーのタスク完了に不要な要素を排除して、インターフェースを簡素化する方法を求めるでしょう。それを実現したければ、以下の項目が役に立ちます。

1．色を賢く使う

色は、デザイナーの道具箱の中のもっとも強力なツールのひとつです。グラフィカルな要素を追加しなくても、色だけで視覚的な面白さをつくったり、注意をひきつけることができえます。

色彩設計はシンプルに

多すぎる色はユーザー体験に悪い影響を及ぼすことがありますが、色の単純化はユーザー体験の向上に貢献できます。使用する色の数を制限することは、白と黒だけを使うという意味ではありません。正確なデザインの表現に必要な色だけを使用するという考えです。単色や類似色のような、単純な色彩設計から始めるのは良い手法です。

青系の単一色相のカラーパレットの例。 画像著作権: Smashing Magazine

画像著作権: louis saville

類似色のカラーパレットは、12色のカラーホイールから隣り合う3色を選んでつくられる。

Clearの色使いは、注目の場所を真っ赤で示すヒートマップを連想させる。

ここで、色の組み合わせが十分なコントラストを持ち、視力の弱い人や色覚異常のある人にも判読可能であることを確認するのは重要な点です。

色で操作やデータを目立たせる

一次的な操作や重要な情報を目立たせるため、アクセントカラーを意図的にかつ一貫性を持たせて使いましょう。通常の項目には目立たない配色を用意しておいて、操作を促したい項目には明瞭な色を追加すると、ユーザーの注意を特定の操作に集中させるのに役立ちます。

中間色のパレットに明るいアクセントカラーを追加するのは、最も簡単なカラーパレットの作り方。視覚的にもっとも目立ちやすいパレットのひとつでもある。

色が目立つことで、画面の特定の領域にユーザーの注意を惹き付ける。AirBnBは、ユーザーに押させたい“Book It”ボタンに目に付きやすい色を使っている。

2．タイポグラフィの持つ力を使う

コミュニケーションは、デザインの本質的な役割です。アプリ内のテキストの目的は、アプリとユーザー間の明確な関係を作り上げて、ユーザーの目的の達成の助けになることです。優れたタイポグラフィは、メッセージをはっきりと伝える重要な要素として利用できます。

ひとつのアプリには、ひとつの書体

いくつもの異なるフォントを混在させると、アプリの印象は、ばらばらで統一感の無いものになります。画面上のフォントの数を減らすことで、タイポグラフィの持つ力を呼び起こすことができるでしょう。アプリをデザインする際は、異なる書体の組み合わせではなく、大きさ／太さ／スタイルを駆使することでタイポグラフィが効果を発揮する方法を考えます。

一般的には、アプリ内では単一のフォントを使用する。 画像著作権: Apple

iOSとAndroid標準の書体を使う

ブランディングのためなどの選択の余地が無い理由を除き、プラットフォーム標準フォントを利用します。

画面上のフォント数を減らすことで、タイポグラフィ本来の力を利用できる。 画像著作権: Brian Plemons

重要な情報を強調する

アプリ内で最も重要な情報を目立たせるために、フォントの太さと大きさを利用します。フォントを大きくすることで、視覚的な要素を追加することなく、画面内の特定の領域にユーザーの注意を向けられます。その結果、ユーザーはよりすばやくより簡単に情報を目にすることになるでしょう。ここで注意すべきは、タイポグラフィを使って注意を惹くやり方は、テキストが意味のある情報を伝える場合のみ有効であるという点です。

重要な情報に大きく太いフォントを使用。 画像著作権: Andrée Afonso

3．空白を使って要素を分ける

従来から使われてきた縦や横の線でコンテンツを分ける手法は、デスクトップでは効果的です。しかし、モバイル画面では、貴重なスペースを占めるという大きな欠点があります。その上、線を多く使うと、見た目が煩雑で込み合ったインターフェースになります。

昔ながらの仕切り線の例。細く軽い罫線が、ページ内やリスト内のコンテンツをグループ分けする。 画像著作権: Material Design

線が少ないほどインターフェースはすっきりし、現代的で機能性を感じさせます。コンテンツのグループ分けには、空白の使用など、他の手法が利用できます。

空白

空白は、デザイナーが配置した要素が何も存在しない領域です。空白は、ミニマリズムにおける骨格と呼ばれています。十分な空白は、混雑したインターフェースを、魅力的で使いやすそうに見せてくれます。それぞれの要素を分けたり、要素を目立たせる空間をデザインの中につくるのです。

線の代わりに空白を使うと、目障りにならずに異なる要素を分けられる。 画像著作権: Goutham

影

影はUIに奥行きを与えるだけでなく、視覚的にコンテンツを分けることもできます。Googleのカレンダーアプリはこの良い例で、コンテンツの邪魔をする線を使わずに、影と空白を組み合わせて異なる領域を表しています。

影と空白の適切な使用により、見た目の分かりやすさと使いやすさを実現したカレンダーアプリ。

4．シンプルで誰もがわかるアイコンを使う

イコノグラフィーは機能やコンテンツの表現に使われる視覚的な言語です。アイコンは、即座に認識でき理解できる視覚的な要素のこと、とされています。

アイコンを単純化しすぎない

ミニマリズムにおいて、アイコンをつくるときは、意味のある情報に貢献していない要素が削られます。ほとんどのアイコンがフラットなのはそのためです。しかし、アイコンの元来の目的は理解可能であることです。たとえほんの些細な箇所の削除でも、ユーザビリティを損なっていないかきちんと確認するのは重要です。例えば、下はKindleのホームアイコンの最近の変化を示しています。

Amazon Kindleのホームアイコンの進化。 画像著作権: uxdesign

アマゾンはアイコンを単純化することを決めて、グラフィック要素を少しずつ削除しました。 3つ目のバージョンは、ひと目では理解が難しいものになっています。

線と塗りのアイコンにより状態の変化を表現する

iOS 7以降、多くのミニマリズムUIは、線と塗りのアイコンを使用しています。この手法は、ひとつのアイコンに、2種類の特徴を持たせることができます。

カメラアイコンの線と塗りのバージョン。 画像著作権: icons8

線と塗りのアイコンのペアは、ナビゲーションバーのアイコンとして優れています。モバイルアプリの画面下にいくつか並んでいるのをよく目にします。バーの中のアイコンは、アプリの持つ機能へのナビゲーションとして使われるため、今選ばれているかどうかを見て理解できることが重要です。選択されていることを示すために塗りのバージョンを、選択されていないことを示すために線のバージョンを使えば、選択されている項目を直感的に示すことができます。

AppStoreアプリのタブバー。 画像著作権: viget

おわりに

ここで紹介したミニマリズムの特徴は、良いデザインを達成する手段となります。しかし、これは目的ではありません。最終的な目的は、ミニマリズムによるインターフェースの簡素化を通して、より機能的にし、同時に使いやすにアプリにすることです。言語と同様、デザインは人々の使い方によって定義されます。ミニマリズムが強力なツールだとしても、ユーザーの必要性に合致させなければ意味がありません。

アプリは、明確な視覚的コミュニケーションを通じて、ユーザーの課題に応えるべきです。優れたユーザビリティと美しいミニマリズムの正しい組み合わせは、継ぎ目の無いインタラクションをユーザーに提供する助けとなるでしょう。

※ この記事はXD Essentials: The Art of Minimalism in App Design（著者:Nick Babich）の抄訳です