連載
近年、アプリのインターフェースデザインは、利用状況を意識し、目的に沿うよう整えられたものに変化してきました。必要な要素だけに絞り込まれた、簡素なUIが最近の流行です。ミニマリズムはこの動向の最前線にあり、最近のデザインガイド（マテリアルデザイン、iOSヒューマンインターフェースガイドライン、Metroデザイン言語など）は揃ってミニマリズムから影響を受けています。
この記事では、ミニマリズムの特徴から、アプリのデザインに役立つ主要なヒントを解説します。
ミニマリズムとは？
ミニマリズムは、機能と形態の組み合わせの最適化です。また、「少ないほど良い」の原則に従います。そのため、ユーザーの目的達成に真に必要な要素以外は取り除かれます。デザイン内に残るすべての要素は意図を持って配置され、何らかの目的を果たす機能を持ちます。
ミニマリズムを受け入れるならば、ユーザーのタスク完了に不要な要素を排除して、インターフェースを簡素化する方法を求めるでしょう。それを実現したければ、以下の項目が役に立ちます。
1．色を賢く使う
色は、デザイナーの道具箱の中のもっとも強力なツールのひとつです。グラフィカルな要素を追加しなくても、色だけで視覚的な面白さをつくったり、注意をひきつけることができえます。
色彩設計はシンプルに
多すぎる色はユーザー体験に悪い影響を及ぼすことがありますが、色の単純化はユーザー体験の向上に貢献できます。使用する色の数を制限することは、白と黒だけを使うという意味ではありません。正確なデザインの表現に必要な色だけを使用するという考えです。単色や類似色のような、単純な色彩設計から始めるのは良い手法です。
- 単色の色彩設計は、特定の色相の異なるトーンの色で構成します。ある色相の彩度や明度を変えることで、目に穏やかな複数の色の組み合わせを生成できます。
ここで、色の組み合わせが十分なコントラストを持ち、視力の弱い人や色覚異常のある人にも判読可能であることを確認するのは重要な点です。
色で操作やデータを目立たせる
一次的な操作や重要な情報を目立たせるため、アクセントカラーを意図的にかつ一貫性を持たせて使いましょう。通常の項目には目立たない配色を用意しておいて、操作を促したい項目には明瞭な色を追加すると、ユーザーの注意を特定の操作に集中させるのに役立ちます。
2．タイポグラフィの持つ力を使う
コミュニケーションは、デザインの本質的な役割です。アプリ内のテキストの目的は、アプリとユーザー間の明確な関係を作り上げて、ユーザーの目的の達成の助けになることです。優れたタイポグラフィは、メッセージをはっきりと伝える重要な要素として利用できます。
ひとつのアプリには、ひとつの書体
いくつもの異なるフォントを混在させると、アプリの印象は、ばらばらで統一感の無いものになります。画面上のフォントの数を減らすことで、タイポグラフィの持つ力を呼び起こすことができるでしょう。アプリをデザインする際は、異なる書体の組み合わせではなく、大きさ／太さ／スタイルを駆使することでタイポグラフィが効果を発揮する方法を考えます。
iOSとAndroid標準の書体を使う
ブランディングのためなどの選択の余地が無い理由を除き、プラットフォーム標準フォントを利用します。
- Appleは、San Franciscoをすべてのプラットフォームに提供
- Google AndroidとChromeの標準書体はRobotoとNoto
重要な情報を強調する
アプリ内で最も重要な情報を目立たせるために、フォントの太さと大きさを利用します。フォントを大きくすることで、視覚的な要素を追加することなく、画面内の特定の領域にユーザーの注意を向けられます。その結果、ユーザーはよりすばやくより簡単に情報を目にすることになるでしょう。ここで注意すべきは、タイポグラフィを使って注意を惹くやり方は、テキストが意味のある情報を伝える場合のみ有効であるという点です。
3．空白を使って要素を分ける
従来から使われてきた縦や横の線でコンテンツを分ける手法は、デスクトップでは効果的です。しかし、モバイル画面では、貴重なスペースを占めるという大きな欠点があります。その上、線を多く使うと、見た目が煩雑で込み合ったインターフェースになります。
線が少ないほどインターフェースはすっきりし、現代的で機能性を感じさせます。コンテンツのグループ分けには、空白の使用など、他の手法が利用できます。
空白
空白は、デザイナーが配置した要素が何も存在しない領域です。空白は、ミニマリズムにおける骨格と呼ばれています。十分な空白は、混雑したインターフェースを、魅力的で使いやすそうに見せてくれます。それぞれの要素を分けたり、要素を目立たせる空間をデザインの中につくるのです。
影
影はUIに奥行きを与えるだけでなく、視覚的にコンテンツを分けることもできます。Googleのカレンダーアプリはこの良い例で、コンテンツの邪魔をする線を使わずに、影と空白を組み合わせて異なる領域を表しています。
4．シンプルで誰もがわかるアイコンを使う
イコノグラフィーは機能やコンテンツの表現に使われる視覚的な言語です。アイコンは、即座に認識でき理解できる視覚的な要素のこと、とされています。
アイコンを単純化しすぎない
ミニマリズムにおいて、アイコンをつくるときは、意味のある情報に貢献していない要素が削られます。ほとんどのアイコンがフラットなのはそのためです。しかし、アイコンの元来の目的は理解可能であることです。たとえほんの些細な箇所の削除でも、ユーザビリティを損なっていないかきちんと確認するのは重要です。例えば、下はKindleのホームアイコンの最近の変化を示しています。
アマゾンはアイコンを単純化することを決めて、グラフィック要素を少しずつ削除しました。 3つ目のバージョンは、ひと目では理解が難しいものになっています。
線と塗りのアイコンにより状態の変化を表現する
iOS 7以降、多くのミニマリズムUIは、線と塗りのアイコンを使用しています。この手法は、ひとつのアイコンに、2種類の特徴を持たせることができます。
線と塗りのアイコンのペアは、ナビゲーションバーのアイコンとして優れています。モバイルアプリの画面下にいくつか並んでいるのをよく目にします。バーの中のアイコンは、アプリの持つ機能へのナビゲーションとして使われるため、今選ばれているかどうかを見て理解できることが重要です。選択されていることを示すために塗りのバージョンを、選択されていないことを示すために線のバージョンを使えば、選択されている項目を直感的に示すことができます。
おわりに
ここで紹介したミニマリズムの特徴は、良いデザインを達成する手段となります。しかし、これは目的ではありません。最終的な目的は、ミニマリズムによるインターフェースの簡素化を通して、より機能的にし、同時に使いやすにアプリにすることです。言語と同様、デザインは人々の使い方によって定義されます。ミニマリズムが強力なツールだとしても、ユーザーの必要性に合致させなければ意味がありません。
アプリは、明確な視覚的コミュニケーションを通じて、ユーザーの課題に応えるべきです。優れたユーザビリティと美しいミニマリズムの正しい組み合わせは、継ぎ目の無いインタラクションをユーザーに提供する助けとなるでしょう。
※ この記事はXD Essentials: The Art of Minimalism in App Design（著者:Nick Babich）の抄訳です
