はじめに
本記事では、現在開発中のWebアプリケーションにおける配色についての所感と改善提案をまとめています。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
書こうと思ったきっかけ
受講しているITスクールのハッカソンの開発の一環で、UIデザインの一部として配色に関する議論があったため、忘れないように記事として記録することにしました。
実際にメンバーと評価したデザイン
内容
現在の配色に関して
- 背景：薄緑と白のストライプで落ち着いた印象
- ナビバー：紺ベースに白文字、ログアウトボタンは緑で視認性良好
- キャラクター表示部：キャラの視認性がやや弱く、背景に沈んで見える可能性がある
検討案1：もっとポップな配色
- 背景：クリーム色や薄いピンク系に変更
- キャラ背景：個別に丸みのある色枠を追加
- フォント色：柔らかい茶色系なども検討
| 要素 | 色名 | カラーコード |
|---|---|---|
| 背景 | クリーム色 | #FFF9E3 |
| キャラ背景 | ペールピンク | #FFDDE1 |
| フォント（茶系） | ソフトブラウン | #7A5C4F |
検討案2：ビジネス向けのトーンに
- 背景：単色のベージュやライトグレー
- ナビバーとボタン：統一感あるブルー・グレー系
- 全体的にモダンで落ち着いた印象に
| 要素 | 色名 | カラーコード |
|---|---|---|
| 背景 | ベージュ | #F5F5DC |
| 背景（代替案） | ライトグレー | #EAEAEA |
| ナビバー | ダークブルー | #2C3E50 |
| ボタン | スチールグレー | #6C7A89 |
| フォント | チャコールグレー | #333333 |
検討案3：レトロ感の演出
- 背景：セピア系の色合い
- ナビバーやロゴ：深緑やエンジ色で懐かしさを演出
- キャラクターフォント：明朝体やレトロ風フォントに
| 要素 | 色名 | カラーコード |
|---|---|---|
| 背景 | セピア | #F4ECD8 |
| ナビバー | 深緑 | #355E3B |
| ロゴ・アクセント | エンジ | #9B1C31 |
| フォント | ダークブラウン | #3B2F2F |
まとめ
現在の配色は落ち着きがあり万人受けしやすいが、目的やターゲット層に応じてより親しみやすさ・ビジネス感・レトロ感などを強調する選択肢もアリかと思っています。
今後の開発方針に応じて柔軟に変更を検討していきたいと感じました...！