はじめに
現在オリジナルアプリを作成中です。トップページのフロント実装時に色合いの考え方を調べました。忘れても思い出せるよう書き記します。
開発環境
ruby 2.6.5
Rails 6.0.3.4
目次
1.色の効果
2.オリジナルアプリの配色
1.色の効果
Webデザインで使う色は目的別で選ぶ必要がある。Webサイトを利用するユーザー目線に立つことが重要である。
赤系
熱い、生命力、警告
オレンジ系
近親感、陽気
黄系
好奇心、協力
緑系
自然、リラックス
青系
冷たい、静けさ、誠実
紫系
後期、威厳
ピンク系
柔らかい、可愛い
茶色系
安定、信頼、歴史
2.オリジナルアプリの配色
オリジナルアプリは大きく分けて下記2つの機能を有する。トップページからそれぞれリンク先に遷移できるように実装した。
・ユーザーへの掃除提案
・掃除したデスク画像の共有
「ユーザーへの掃除提案」リンクを赤系にした。これは清掃を促す(警告)するためである。「掃除したデスク画像の共有」は青にした。これは清掃後のデスクを想定したため、清潔感をイメージする青を選択した。
参考
1冊ですべて身につくHTML-CSSとWebデザイン入門講座
Qiitaのマークダウンで色をつける方法[140色]