デザインにおける色選定について改めて言語化する

オンライン家庭教師マナリンクのデザイナーのHiraChikaです。

先日マナリンクのアプリとWebで新機能『宿題機能』がリリースされました。マナリンクのアプリは先生と生徒さん・保護者さんを繋ぐアプリです。

今回はその機能の細かいUIの話ではなく（ないんかい）、サービスで使用している色について、どんなところにどうゆう意図で使用したかを言語化しようと思います。

色はデザイナーがうっかり感性で選んでしまいがちなところです。それぞれの持つ色のイメージなどはなんとなく把握しているからこそ考えるよりも先に感性で選んでしまい「なんでこの色にしたの？」と突っ込まれた時に意外とすらすらとは答えられないことも…。今回のデザインを通して色に関する記事を読み直すことが多かったので、書き記しておこうと思います。

警告と注意の色は明確に区別する

赤が警告色でエラーの印象を与えるのは共通の認識だと思います。
たまにフォームの必須マークや注釈にガンガン赤を使用しているサービスを見かけますが、緊急性が高そうな印象の赤が多いとユーザーとしては少し落ち着かないだろうな…😅と感じてしまいます。

幸いマナリンクのアクセントカラーがオレンジなので、必須マークや注釈のような「注意喚起を促す要素はオレンジ」、ユーザーの操作に対して「警告を与える要素は赤」としました。

いろんなアプリのデザインを参考にしていましたが、改めて必須マークや注意喚起の要素のデザインに注目してみると、割と新しめのデザインを採用しているサービスほど赤は避けるか、控えめに表現している傾向にあるように感じました。

ステータスを表す3つの配色

赤にはエラーや緊急性が高そうな印象を与えるとお話しました。
今回の機能の詳細は割愛しますが、先生が出した宿題には3つの「ステータス」があります。
そのステータスは色で見分けられるようになっていると良いと思い、以下のように配色しました。

それぞれ「提出待ち」は青、「未採点」はピンク、「終了」は緑です。
わかりやすく言うと信号機の色ですね🚥

「提出待ち」の青

緑と近い印象を持っていますが、安全状態かつ進行中（処理中）といったイメージを持たせます。提出待ちは特にアクションする必要ではないが、完了していないという中間の位置付けとして青にしました。

「未採点」のピンク

赤ほど緊急性が高くないが、ユーザー側のアクション待ちですよ！といったことを表現するためにピンクにしました。オレンジが他に使われていなかったらオレンジでも良いかもしれません。

「終了」の緑

成功や完了などの肯定的なイメージを持たせます。緑のステータスにある宿題は終わったもの、気にしなくて良いものだと安心してもうらう意図で緑にしました。

使い慣れてきた時に、ピンクのところに何もないかを意識すればOKというUXになれば良いなと思います🦄

余談

マナリンクはアプリもWebも既存のデザインがあるので、当たり前ですが色やトンマナを合わせつつデザインしていますが、「オンライン家庭教師」というサービス自体が比較的新しいものであることもあり、じわじわと新しさ、新しい雰囲気にしていくことも必要かなと感じています。

とはいえ基本的にユーザーはデザインの大幅な改修は嫌うので、少〜〜〜しずつアップデートをかけていくことを目論んでいきたいと思います。

以上！誰かの役に立てば幸いです😊