More than 3 years have passed since last update.

Webデザイン色のイメージ

Posted at 2020-11-16

#はじめに
現在オリジナルアプリを作成中です。トップページのフロント実装時に色合いの考え方を調べました。忘れても思い出せるよう書き記します。

開発環境
ruby 2.6.5
Rails 6.0.3.4

#目次
1.色の効果
2.オリジナルアプリの配色

#1.色の効果
Webデザインで使う色は目的別で選ぶ必要がある。Webサイトを利用するユーザー目線に立つことが重要である。

赤系

熱い、生命力、警告

近親感、陽気

好奇心、協力

自然、リラックス

冷たい、静けさ、誠実

後期、威厳

柔らかい、可愛い

安定、信頼、歴史

#2.オリジナルアプリの配色
オリジナルアプリは大きく分けて下記2つの機能を有する。トップページからそれぞれリンク先に遷移できるように実装した。
・ユーザーへの掃除提案
・掃除したデスク画像の共有

「ユーザーへの掃除提案」リンクを赤系にした。これは清掃を促す(警告)するためである。「掃除したデスク画像の共有」は青にした。これは清掃後のデスクを想定したため、清潔感をイメージする青を選択した。