縁の下のUIデザイン―少しの工夫で大きな改善!

第19回 上手に配色するためのコツとテクニック

この記事を読むのに必要な時間:およそ 2 分

UIデザインだけに限らず,プレゼン資料の作成時など,どのような配色にするか考える機会は意外と多いものです。少しでもユーザーに配慮した配色ができるようになると,与える印象も変わってきます。

色の持つ意味や考え方などゼロから学ぼうとするとそれなりの時間と経験が必要です。そこで今回は,主にUIデザインの配色選定をするうえで,最近私がよく考えることや指導するときによく話をするテクニックについて解説します。明日からでも実践できるような内容なので参考にしてください。

リアリティのある配色を考える

ゼロから新しいサービスやサイトなどを作る際,早い段階でリアリティのある色で考えることが大切です。

最初にメインで使う色選びは理想的にできても,サービスを作っていく過程で必要な色が増えていき,その都度判断に迷う,ということが起こりがちです。そうならないように,できるだけ事前にあとの工程のことも考えておくことでスムーズに進められます。

テーマカラー以外の色も合わせて検討する

UIデザインでは,ボタンの色やヘッダの色などUIに必要なテーマカラー注1だけではなく「エラー時に表示するメッセージの色」⁠動作が完了したことを伝えるメッセージの色」⁠操作できないdisableなフォームの色」などテーマカラー以外の色も必要になります。最初にテーマカラーだけを決めてそれ以外の色をあとから雑になんとなく決めてしまいがちですが,そうするとテーマカラーとの親和性など全体的な調和がとれなくなってしまいます。

テーマカラーを決める際に,そのトーンを合わせて図1のようにあらかじめ考えておくことで,全体的な調和が整えやすくなるのです。

図1 テーマカラー検討時にエラーなどの色も同時に検討する

図1 テーマカラー検討時にエラーなどの色も同時に検討する

注1)
サービス内で利用するメインカラー,アクセントカラー,ベースカラーなどの色のことです。

構成と配色をセットで検討する

UIデザインを考える際,重要な要素は大きく2つに分けることができると考えています。それは「構成」⁠レイアウト)「配色」⁠トーンアンドマナー)です。

これら2つの要素を行ったり来たりしながらあるべき姿にデザインしていく必要がありますが,この2つの要素は別々に考えられがちです。特に「構成」はワイヤフレームとして,⁠配色」はカラーパレットとして作られ,その2つを合わせていくようなプロセスでデザインされていることが多いように感じています。

しかし,⁠配色」はどこにどの色を,どれくらいの面積で使っていくか,隣にどんな色が来るかなど,⁠構成」と切り離せません。図2は,カラーパレットだけではなくワイヤフレームとセットでシミュレーションしている事例です。

図2 よく利用されるスマートフォンの画面パターンに当てはめて配色を考えている

図2 よく利用されるスマートフォンの画面パターンに当てはめて配色を考えている

シンプルなWebサービスなどの場合,画面の構成(レイアウト)「一覧画面」⁠詳細画面」⁠フォーム画面」など一般的なパターンが使われることが多く,それ以外の奇抜で珍しい画面を使うケースはあまりありません。簡単でもよいので,ワイヤフレームとカラーパレットをセットで考え,どういった感じでできあがるかを早い段階で作っておきましょう。そうすることで,チーム内やクライアントとのコンセンサスも取りやすくなるのです。

この方法を試すためのサンプルファイルを,Figma Communityの私のページから複製して使うことができます図3⁠。気になった方は,まずこのファイルを使って検討してみるとイメージが湧くと思います。

図3 Figmaファイルの複製画面

図3 Figmaファイルの複製画面

無彩色に一手間加えた表現

色には有彩色と無彩色があります図4有彩色は赤,黄,青などの色のあるもの,一方で無彩色は,白,黒,グレーなど色がないものを指します。わずかでも色が入っているものは有彩色と呼びます。

図4 有彩色と無彩色の違い背景に無彩色を利用したログイン

図4 有彩色と無彩色の違い背景に無彩色を利用したログイン

UIをデザインする際,背景色,ボーダー色,補足テキストなど,いろいろな場面で無彩色を利用することがあります。有彩色を複数用いるよりも,無彩色を組み合わせることによって色数を制限できます。それにより,複数使っても全体のトーンが維持され統一感が保たれるのです。しかし,無彩色を使いたい場面でも,工夫して有彩色を使ったほうが効果的なこともあります。

寂しい印象に見えるときには

背景に色を敷きたい場合,明るいグレーはよく利用する色です。しかし,このような場合でも無彩色にせず,少しだけ色を入れた有彩色を私はよく使います。図5(a)の背景は無彩色のグレーです。(b)は一見(a)と同じに見えますが,少し色が入った有彩色です。(a)のように,広い範囲に無彩色を利用すると,全体的に無機質で寂しい印象になりがちです。そのような場合は,(b)のようにテーマカラーなどで利用している色を少しだけ混ぜた有彩色を使うことで,全体の調和がとれ美しく見えます。色数を増やさずに全体の調和をとりながら明るい印象を出したい場合は,この方法がお勧めです。

図5 無彩色のグレーを利用した場合(a)と,少しだけ色を混ぜた場合(b)

図5 無彩色のグレーを利用した場合(a)と,少しだけ色を混ぜた場合(b)

グレーではなく「透過」も意識する

操作できないボタンや入力できないフォーム,操作のガイドを表す要素なども,無彩色を使って表現することが多くあります。しかし,これらの背景色が有彩色の場合,美しく見えないことがあります。図6はステップを示したUIです。現在ユーザーがいる地点ではない場所に,(a)は無彩色を利用し,(b)は背景の色と馴染むように無彩色に透明度を付けています。透明度を付けることで,ユーザーには背景に馴染んだ有彩色として見えます。このように,無彩色のグレーを単独の色として考えるのではなく全体の調和の中で考えてあげると,美しさと機能を兼ね備えたデザインにつながるのです。

図6 無彩色をそのまま背景に用いたパターン(a)と無彩色に透明度を付けてなじませたパターン(b)の比較

図6 無彩色をそのまま背景に用いたパターン(a)と無彩色に透明度を付けてなじませたパターン(b)の比較

色は,ユーザーの第一印象を決める大切な役割もありますが,細かい機能の使い勝手やわかりやすさを向上させる役割も担います。それぞれで使う色単体でとらえるのではなく,画面やサービス全体を見渡しながら配色を決めることがデザインの向上につながるのです。

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.118

2020年8月24日発売
B5判/176ページ
定価(本体1,480円+税)
ISBN978-4-297-11566-1

  • 特集1
    開発環境の整備,効果的な議論,評価制度
    実践リモートワーク
    オフィスに集まれない課題の解消方法
  • 特集2
    Pythonデータ可視化入門
    COVID-19/家計調査/財政データで実践!
  • 特集3
    ツールで簡単!
    はじめての脆弱性調査
    Rails,nginx,サブドメイン,DB,OpenSSL

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/