【脱！配色難民】WEBデザインの色のはなし
WEB制作をしていると、
「配色が決まらん！！！( ｀皿´)ｷｰｯ!! 」
「なんか、いまいち...(´・ω・`; )」
と、モヤモヤしてきますよね...^^;
そんな配色難民の方向けに、
WEB制作の色のお話をしていきます！
数ある記事の中から目を留めて頂き、ありがとうございます！
WEBクリエーター集団Liall.(リアル)でWEBデザイナーをしています、
太良(たら)と申します┏○ﾍﾟｺ
昨日twitterをウロウロしていたところ、
WEBデザインの勉強をはじめられたこちらの方のツイートを拝見いたしました|・`ω・)
こんにちは！
— ryo (@design01ryo) May 18, 2020
最近webデザイナーに興味を持ち
皆さんと繋がりたいと思いTwitterを
初めました！ まだまだ駆け出しで
調べ始めたところです。
今は色について勉強しています。
これからよろしくお願いします🤲#webデザイナー #webデザイン勉強中
この方とお話をしていて
「そういえば私も、サイト制作の色のことで悩んだ時期があったな～」
と思い出しました^^;
そこで今回は、
・悩んでいた時にお伺いしたお話
・現在どんなふうに色を決めているか
・気をつけていること
をお話していきたいと思います！
なんか、いまいち...
のっぺりしていたサイト達。
WEBデザインの勉強をしていると、
・トーンを揃えましょう
・寒色や暖色の色の印象に気をつけて
・三色(メイン/サブ/アクセント カラー)を選びましょう
・テトラードやトライアド等、バランスよく色を選びましょう
などなど、色に関する話をたくさん聞くと思います。
私は職業訓練時代の授業で聞いた時、
「ルールがあるのも知らんかった！
これでおしゃれなサイトが作れるぞー！！（｀・ω・´）」
と、本気で思っていました。^^;
でも、現実は甘くなく...
いざ作ってみると「教科書どおりに色を選んでいるのに、なんでこんなにのっぺりしていて、微妙なんだ？？？」と、納得の行かないサイトを作っていました il||li ＿|￣|○ il||l
解決策①：トーンを少しだけ操作する
この色の悩みを、企業実習先のWEBデザイン会社で働いてる方に、質問してみました。
すると、
「少しだけトーンを変えてみると、メリハリが付いていいですよー！」
と教えていただきました！_φ(･v･ﾒﾓﾒﾓ
どういうことなのか、というと...
メインカラー ：#256592(紺)
サブカラー ：#f59b00(オレンジ)
アクセントカラー：#f5ce00(黄)
上記の様に決めた場合、それまでの私はこの三色だけを使ってサイトを作っていました^^;
それを場所によっては、各色の少しトーンを変えた色を配色することで、全く違った印象のサイトを作ることが出来るのだと教えてもらうことが出来ました！
クリックするとページ移動するボタンなど注目してほしい部分は、
少しトーンを上げることで、目立つようにしたり。
いくつも配置するナビやバナー部分は悪目立ちしないよう、
トーンを下げて、メインコンテンツが見やすいようにしたり。
元々使う色によって、トーンのずらし方は変わってくるので、
ぜひいろんなトーンにチャレンジしてみてください！！ (ง •̀_•́)ง‼
解決策②：色の見本を見つける
「そもそも、色がきまらないんだー！」っていう方もたくさんいらっしゃると思います。そんな方向けに私がしている色の探し方をお伝えしていきます！
①色を検索する
作りたいサイトに関するキーワードで画像検索をかけます！
ここから1色でも大丈夫なので、使いたい色を見つけます(p_-)ｼﾞｰ
例えば、今回「歯医者」に関するサイトを作る場合、
まずは「歯医者」で画像検索することで、世間一般の歯医者のイメージカラーを探します。
（詳しくはこちらの記事に書いてありますので、よかったらぜひ！）
②サイト検索サイトで
参考になりそうな色の組み合わせを探す
キーワード「歯医者」でイメージカラーが決まったら、これらのサイトでその色を使ったサイトを検索してみます！
そこではキーワードに関係なく、掲載されているサイトをみて、「この色と組み合わせると、こんな印象になるんだ！」とか、「この色はこんなふうに使うんだ...！」といった、色の使い方を見ていきます！
気をつけている事は...
色では絶対に挑戦しないこと。
「今までに誰も見たことがない、最強のデザインをつくるんだー！」
ってなってしまうデザイナーの方や、
「差別化するために、今までのイメージとは全く違う色にしてほしい！」
と言われるお客様も、中にはいらっしゃるかと思います...
例えば「プールのイベント用サイトを作りたいけど、青を使わずにサイトを作る！」となった場合...。キーワードのイメージカラーを使わずに作ったサイトは、見た時なんのサイトなのかわかりにくくなってしまうのです><
デザイナーでもクライアントでもなく、サイトを見る人にしっかりと目的や意図が伝わるようことを意識し、色では挑戦しないようにしています^^;
最後に...
こうして制作をしていると、改めて「日頃からいろんなことに注意して見なければいけないな～」と思うことが多くなりました。
「パソコンといえば、何色？」
「マウスは？」
「ペンは？」
「デスクは？」
と、意識するだけでいろんなことに気付けるようになりました(´∀｀*)
この記事が皆さんのお役に立ててたらすごく嬉しいですヾ(*´∀`*)ﾉ
今後もLiall.(リアル)では「今日のあなたのお役に立つ」情報をnoteを始め、
SNSやYouTubeを中心に発信しています。ぜひご覧下さい！
この記事が参加している募集
最後までお読み頂きありがとうございました！みなさまのサポートがメンバーそれぞれの励みになります！