こんにちは。デザイナーのアリです。推しの牛丼チェーンは吉◯家です。

突然ですが、みなさんはUIデザインに携わる際「配色」についてどれくらい意識できていますか？

実はUI設計において「配色」は結構重要な役割を持っていて、背景や文字の色一つで一気に見やすさや印象がガラッと変わってきたりもするのです。

というわけで今回はこれからミニアプリ構築、サイト構築などを始めようとしているノンデザイナーの方に向けてUIデザインに欠かせない、カラーパレット作りのコツをご紹介いたします！

まずは配色の基本知識！

配色を考える前にまずは覚えていただきたいことがあります。 それは色相環です。こんなやつ↓

この図を頭に入れておくことで、今後配色をする際にどのように配色をするべきか考えやすくなります。続いて単色・モノクロ、類似色、補色この３つのパターン

①単色・モノクロ

メインカラーを基調に影、トーン、明るさを調節した配色

②類似色

選択したメインカラーの両隣にある色を加えた配色

③補色・反対色

メインカラーの反対側に存在する色と合わせた配色

カラーパレットを牛丼で覚える！

配色の基本をざっと覚えたところで、カラーパレットに使う色の種類を覚えましょう。 カラーパレットに使用する色の種類は大まかに４つあり、各カラーを牛丼の材料で例えてみました。

それではさっそく見ていきましょう！（序盤に牛丼の話をしたのは、これがしたかったからです）

①ベースカラー（ライス）

土台のなみなみ盛られたライスがないと牛丼とは呼べませんよね！

ベースカラーは全体の背景やベースのテキストカラーなど、メインカラーを際立たせる全体の土台となるカラーです。 使用面積はおよそ60%〜80%。 ベースカラーのほとんどは白や黒が使われていますが、一言に白黒と言ってもデフォルトの白や黒（#FFFFFFや#000000）を使用するのは基本的にはNGです。

両色トーンを抑えるだけでグッと見やすくなった様に見えませんか？

これは実生活において完全な黒はほとんど存在しないため、真っ黒はユーザーにとってあまり馴染みがないからです。

黒のベースカラーは#161616や#222222、白は#FAFAFAなどを試してみましょう。

②メインカラー（牛肉）

牛丼の主役といえば牛肉ですよね！

同じ様にメインカラーは主にプライマリーボタンやメインテキストなどで使用されるページの基準となる主役の色のことです。

使用面積は20%〜30%と面積が広く、高彩度の色を使用してしまうと目がチカチカししてしまうことがあるので、もし高彩度の色をメインにする場合は使用量を減らすようにすることが大切です。

メインカラーの選び方は、センスだけじゃダメ！メインカラーを決めるセオリー（リンク先また書きます）をぜひ参考にしてみてください！

③サブカラー（玉ねぎ）

牛丼全体のバランスを取る玉ねぎはサブカラーと同じ働きをしてくれます！

サブカラーはセカンダリーボタンなどで使用され、メインカラー含め全体の配色を補う色のことをいいます。つまりメインを青とした場合は水色や紺色などがサブカラーで、メインカラーが持つ世界観をより引き立てるために使われます。

メインカラーを基準に色相環の①単色・モノクロや②類似色を参考にしてみてください。使用面積は10%〜20%ほど。

④アクセントカラー（紅生姜）

ガツガツ食べながら一拍おきたい時の紅生姜はまさにアクセントカラー！

アクセントカラーはランキングのアイコンやタグなどで使用されるいわゆる差し色ですね。使用面積は5%ほどがベストでしょう。メインカラーを基準に色相環の③補色・反対色を参考にしてみてください。

まとめ

今回は、ノンデザイナーの方必見のUIデザインにおけるカラーパレットの作り方を、途中牛丼を織り交ぜながらご紹介しました。この配色の考え方はUIデザインのみならずパワーポイントの資料やちょっとしたデザインタスクにもきっと役立つと思いますので、今後デザインに携わる際には是非実践してみてください！

それでは、牛丼の話してたら完全に牛丼の口になってきたので吉◯家ランチ行ってきます！
以上、亜吏でした！