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

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

実際のアプリに学ぶ!モバイルデザインにおける配色の重要性

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、エンジニアのNick Babich氏によって投稿されました。

 

配色は、モバイルデザインにおいて、おそらく機能性の次に重要なものです。人間からコンピュータへの命令は主に、グラフィカルUI(GUI)の要素へのインタラクションを通して行われ、「配色」は重要な役割を担っています。

 

ユーザーが、アプリのコンテンツを見て理解し、アクションするときに役立ちます。すべてのアプリにはそれぞれに独自の配色があり、主な領域には原色を使っています。

新しいアプリをデザインするとき、可能な色の組合わせは無数に存在するので、それに合う配色を決定することは困難です。この記事では、モバイルデザインの配色で最も重要なことについて紹介します。

 

伝統的な配色のパターン(モノクロ―ム、類似色、補色)、どのパータンにも依存しない配色を自作する方法、ユーザビリティに優れたアプリのための色の選び方をテーマとして扱います。

また、この記事で紹介しているAdobe XDは、ダウンロードして無料で試用することもできます。

 

効果的な配色を選ぶ方法

配色を作るときには考慮すべきことがたくさんあります。

例えば、(あなたの製品や組織の)ブランドカラー、あなたの地域に調和するカラーなどです。

 

使うカラーの数はいくつにするべきか?

カラーの組合わせをシンプルにすると、ユーザーエクスペリエンスを向上する効果があります。シンプルな配色は、人間の目に自然になじみやすく、コンテンツの理解を促進します。反対に、過度に多くの場所に過度に多くの色を使う場合には、混乱したデザインになります。

トロント大学がAdobe Color CCの使用に関する調査を行ったところ、ほとんどの人が2〜3色のみ使用するシンプルな色の組み合わせを好むことが明らかになりました。

 

配色を作る方法

この2~3色を選ぶには、カラーホイール(色相環)を使うのが効果的です。

既存の配色は豊富にありますが、これらを利用すると新しいスキームの作成が容易になります。特に初心者の方にとっては。

 

モノクローム

モノクロは、各色が同じベースカラーから生成されるため、最もシンプルな配色です。モノクロームのカラーは全体的な色の調和を生み出し、すっきりとした印象になります。


画像:モノクロームの配色は、単色、そのティント(色相に白色を混ぜて生まれる色)、そのシェード(色相に黒色を混ぜて生まれる色)、そのトーン(色相に灰色を混ぜて生まれる色)から構成されます。

特に、青や緑のモノクロームの配色は、人間の目に優しい色合いになります。

画像引用元:Adobe Color CC

画像引用元:Louis Saville

モノクロームの配色は、クリーンで洗練された印象になります。

 

類似色

類似色の配色は、互いに調和する、カラーホイールで隣り合う色から作られます。そして、1色をドミナントカラー(支配色)として使い、他の色は配色を引き立てるために使います。

画像:12色のカラーホイールで隣り合う3色を使うことで、類似色の配色が作られます。

類似色の配色は比較的簡単ですが、色の鮮やかさが強調されやすいため、その決定が重要です。

 

例えば、ジェスチャー駆動のToDoリストアプリであるClearは、視覚的にタスクの優先順位を示すためにこの配色を使っています。

画像引用元:Adobe Color CC

Clearのデフォルトの配色は、ヒートマップを連想させるようなデザインで、より重要度の高いタスクは、鮮やかな赤い色で画面に表示されます。

 

一方、瞑想アプリのCalmはユーザーがリラックスできるように、類似色の配色に青と緑を使っています。

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