デザイン

デザイン

モバイル表示を意識した8つの「最新カラースキーム」。モバイルページの配色にお困りのデザイナーに!

203 views

配色を決めるカラースキームのトレンドを一言で表すならば、以前にも増してモバイルページやモバイルアプリでの表示を意識したものに変わり続けています。

 

今後もこうした動きは続くものと思われますが、本稿では最新のカラースキームに関する8つの兆候(トレンド)をご紹介します。刺激的な実例を見ながら、モバイルを意識したカラースキームを掴んでいきましょう!

 

モバイルを意識した最新カラースキーム8選

 

【1】ミニマルな色合い

1-minimal-color-usage-with-focused-palettes

上の画像では、白い部分を多く残し、色の使用は最小限に抑えています。2色のパレットはリンクやアクティブ要素を見分けるのに十分適しています。このミニマル、かつ効果的なトレンドは2017年も続くでしょう。

 

2ハイコントラスト

2-high-contrast-experimental-colors

数年前にiOS7が発売されてから、アップルは蛍光ピンクや緑、赤などハイコントラスト色をモバイルユーザーインターフェースに用いるようになりました。これらの色ははっきりしていて、視覚的にインパクトもあります。

 

3色のついたシャドウ

3-subtle-colored-shadows-1

以前は白黒のシャドウが使われていましたが、最近は青やピンク、黄色などの色のついたシャドウを見るようになりました。特に上の画像のように落ち着いた色合いの背景色である場合に、美しい視覚的効果を得られます。

 

4目立つ派手な色合いのアイコン

4-bold-bright-colored-iconography

アイコンを、目立つ派手な色を使って差別化することもよく見られるようになってきました。上の画像のアプリでは、5つの異なる対照的な色を使い、アクションと要素を差別化しています。視覚的にインパクトがあり、分かりやすくなります。

 

5パステル色、控えめな色

5-pastel-muted-colors

パステル色と控えめな色はここしばらく使われ続けていますが、他のモバイルトレンドと組み合わせてとても素晴らしいデザインとなっている例が出てきています。例えば上の画像では、要素の差別化と全体的なバランスが上手く取れているだけでなく、使いやすいデザインになっています。

 

6黒色

6-blacks

ミニマルなインターフェースデザインというトレンドにより、色の使用を最小限に抑え、白、黒、グレーのみでデザインするケースもあります。上の画像がとても優れた例で、暗いだけのミニマリズムには陥らず、効果的に黒色を使用しています。

 

7ハイコントラストグラデーション

7-high-contrast-complimentary-gradients

以前は、UI要素として同系色のグラデーションをよく見かけましたが、最近では補色を使ったハイコントラストグラデーションを見るようになりました。上の画像のように使われた場合、とても美しく見えます。

 

8カラフルなイラスト

8-colorful-illustrations

モバイルアプリでイラストが使われるケースが増えてきています。イラストには、とてもカラフルで目立つパレットが使われる傾向にあります。トレンドである最小限のインターフェースと組み合わせた時、上の画像のように素晴らしい効果が得られます。

関連記事

おすすめ記事