ミニマルなモバイルアプリUIで気をつけるべき6つのこと

Nick Babich

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。

この記事はNick Babichからの翻訳転載です。配信元または著者の許可を得て配信しています。

The Art of Minimalism in Mobile App UI Design (2016-07-22)

デザインはユーザーのエンゲージメントを高める上で、最も重要なものの一つです。ユーザーはシンプルなインターフェースを好むようになってきたので、UIを基本的で必要最低限な要素のみに残していくことが成功の鍵です。

ミニマリズムは、構造と機能の絶妙な組み合わせから成り立ちます。その最大の強味は、構造を明確化することにあります。線を整え、たっぷりと余白を残し、そして視覚的な要素を最小にすることで、最も複雑な主題(内容)でさえもシンプルになります(もちろん、効果的に使われればの話です)。

ミニマルデザインでは、簡潔さ、明確さ、そして一貫性が求められます。明確なビジュアルコミュニケーションによってユーザーの問題解決を導くべきです。ミニマルなデザインのアプリが評価されるのは、ユーザーが辿り着くべきところに辿りつき、コミュニケーション手法として強力な力を持つためです。

しかし目的に到達するためには、以下の点を重視する必要があります。

色彩設計をシンプルにする

色彩設計がシンプルになると、ユーザー体験が向上します。一方で、様々な色を使用しすぎると、悪影響を及ぼします。カラースキーム作りを簡単にするための定番スキームがありますので、特に初心者の方には以下をお勧めします。

単色スキーム

単色のカラースキームは特定の色相の中で、異なる明暗、濃淡、色合いから構成されます。単色の色相の彩度や明度を調整することで、様々な色を生み出すことが可能であり、目に優しい色彩設計となります。

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

青の単色を使用したカラースキーム(出典:Smashing Magazine)

 

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

出典:Dribbble

類似色スキーム

類似色のスキームは色相環にある隣り合わせの3色を使用して作成します。ミニマルなジェスチャーで操作する課題管理アプリ「Clear」は類似色を重要な課題を優先順位に色分けすることに使用し、最も重要な課題は目立たせています(一番重要な課題は目立つ色に、順位の低いものは希薄な色になっています)。

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

黄色とオレンジの混合色は類似色スキームの一例です(出典:tuts+)

 

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

iOSのClearアプリ

ブラー効果を使う

ブラー(ぼかし)効果は、ミニマルなUIを作る際に効果的で、UI要素のレイヤーや階層構造を扱いやすくします。ユーザーにとってレイヤーやフローがより明確になり、デザイナーにとってもさまざまなレイアウトの選択肢を与えてくれます。

Yahoo! Weatherアプリでは、天気のロケーションの写真を表示し、一回タップするだけで最も必要な詳細のデータを見ることができます。

このアプリでは写真を他のUIレイヤーで覆わずに、写真を背景に残しておくことで、タップした後でもユーザーを現在見ているページにとどめておくことができます。前開いていたページに一瞬で戻れるので、とても直感的なインタラクションとなっています。

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

iOSのYahoo! Weatherアプリ

一つのアプリに一つの活字書体を

異なるフォントを混ぜて使用すると、アプリにバラバラで乱雑な印象を与えてしまいます。

タイポグラフィの効果を最大限にするため、使用するフォントの種類を減らしましょう。アプリをデザインする際はいかに他のフォントを使わずに、フォントの太さ、字体、大きさ等を考慮し、構成するかを考えるべきです。

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

一般に、アプリ一つに一つのフォントを使用します(出典:Apple)

また、アプリにフォントの種類を選ぶ際には、プラットフォームのデフォルトフォントを使用するのが安全策であることを覚えておいてください。

  • Apple社は全プラットフォームにおいて、San Franciscoのフォントで統一しています
  • Google AndroidとChromeの標準の書体はRobotoとNotoです

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

一つのスクリーン上でフォントの種類を減らすことにより、タイポグラフィの力を発揮します(出典:Dribbble)

アクセントをつける

文字を大きくしたり、アクセント色を使用することで、特定のコンテンツに焦点を当てさせましょう。通常部分には中間色を使用し、行動喚起部分には正反対の色を加えます。それにより、ユーザーはこちら側がして欲しいことに焦点を当てることになるのです。

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

中間色のパレットの中に明るいアクセント色を入れることは、最も簡単なカラースキームの一つです(出典:Smashing Magazine)

文字を大きくし、アクセントカラーを増やすと、他の視覚的情報を使用せずに特定の場所に注意を引くことができます。これにより、ユーザーはより情報にアクセスしやすくなります。

1-3DfrZ4Lr5o0Z1GGUSBKMPA

文字を大きくし、ポップな色を用いることでユーザーの視点を特定の場所へ導く(出典:Dribbble

線を引かずに、余白で区分する

区切り線などは画面内の特定の区分やカテゴリーを分けるためによく使用されます。しかし線を引きすぎると、インターフェースが散らかってしまいます。

線を減らし、他の方法で区分けすることでインターフェースをすっきりさせ、現代的でより機能的になります。他の方法として、ブロック、余白、色を使うことで内容を分けることができます。Googleのカレンダーアプリは、線を引く代わりに余白や影を使用し、さりげなく分けています。

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

カレンダーアプリ内に余白を作ることにより、視覚的に見やすくなり、使いやすくなります。

アイコンの塗りつぶしを使い分ける

アイコノグラフィ(図像学)は機能性や内容を表現するために使用するビジュアル言語です。アイコンは即座に認識できるようなビジュアル要素であるべきです。

iOS 7以降、たくさんのミニマリストUIがストローク(線画)と塗りつぶしのアイコンを採用しています。この記事ではコンセプトそのものを批判することはしませんが、代わりにアイコンのストロークと塗りつぶしの実践的な側面について焦点をあてます。

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

時計のアイコン(ストロークと塗りつぶし)(出典:icons8

タブバーに表示されているアイコンを見てみましょう。バーのアイコンは他のアプリ部分へ誘導する働きがあるので、一律の方法で現在使用しているアプリの部分を強調させ、指し示すことが重要です。

塗りつぶされたアイコンは現在アクティブ(使用している、選択している)状態を表し、ストロークのアイコンは非アクティブ(使用していない、選択していない)状態を表します。これにより使用しているタブをより直感的に認識させ、より分かりやすくしています。

http://babich.biz/the-art-of-minimalism-in-mobile-app-ui-design/

AppleのAppStore アプリのタブバー(出典:viget)

まとめ

ミニマルUIと他のデザイン技法は確かに良いデザインをもたらす一つの方法ですが、それ自体が目的ではありません。究極の目的はいかにUIをシンプル且つ機能的で使用しやすいものにするかにあります。

ユーザーを円滑に誘導し、視覚的に明白にすることで、デザインはよりシームレスなインタラクションを作り出すことができるでしょう。