😸
ウェブアプリにおける考慮すべきカラーについて考察してみた
筆者はサーバーサイドが専門ですが、フロントも書くことがあるので勉強ついでにまとめてみました。
セマンティックカラー
セマンティックカラーとは意味を持つ色のことです。
一見様々な色が混在しているように見えるウェブサイトにもセマンティックカラーとして共通の意味があります。
例えば以下です。
- 緑：成功
- 赤：エラー
- 黄色：警告
- 青：お知らせ
他にも、セマンティックカラーに加え、サイト独自で設定すべきプライマリカラーやセカンダリカラー、背景色などがあります。
ウェブアプリにおける考えるべきカラー一覧
考慮すべき色の種類について説明していきます。
- プライマリカラー
- アプリケーションの主要な色で、ブランドのアイデンティティを表現
- 利用タイミング
- メインボタン、ヘッダー、 ナビゲーションバー、リンク
- アマゾンだと、ログイン・カートに入れる・FBAを始めるなど訴求した内容が実際に進む際のボタンとして機能している印象
- アマプラは青なので、ロゴの色と統一しているのかな？
- 例）アマゾンログイン時
- 例）アマゾンカートに追加
- セカンダリカラー
- プライマリカラーを補完する色で、キャンセルボタン、オプションボタンなど、プライマリボタンよりも重要度が低いが、依然として重要なアクション
- 利用タイミング
- 強調表示、アクションボタン、リンク、補助ボタン、アイコン、リンクのホバー
- アマゾンではこのセカンダリカラーが白＋アウトラインになっている
- 例）レビュー時
- 例）FBAの参加時
- 成功
- ポジティブなフィードバックを提供し、操作が成功したことを明確に伝えます。
- 利用タイミング
- 成功メッセージ、通知、アイコン
- 例）登録完了時
- エラー
- エラーを示すための色です。ユーザの問題を解決するまでは作業を進めることはできません。
- 利用タイミング
- エラーメッセージ、無効な入力フィールド、エラーアイコン
- 例）バリデーションエラー
- 警告
- 注意を促すための色です。先に進むことはできますが、問題ある場合に使用します。
- 利用タイミング
- 警告メッセージ、警告アイコン、重要な通知
- アップロード容量が限界に近づいている、入力フォームから画面を閉じる場合に入力データが消えてしまうときなどに利用する。
- お知らせ
- 情報を提供するための色です。先に進むことはできますが、問題ある場合に使用します。
- 利用タイミング
- 情報メッセージ、ツールチップ、インフォメーションアイコン
- メンテナンスやプレスリリースで利用する。
- 無効状態
- 無効化されたボタンやアクションの背景色です。大抵の場合クリックしてもなにも起きません。
- 利用タイミング
- リンク先がない場合
最後に
あくまで一例となりますので、プロジェクトごとに設定されているものを正としてください。
参考
Discussion