こんにちは、Mochiです。
Webデザインにおいて、色は重要です。適切な色に決めることで、Webサイトをより魅力的に見せることができます。
でも、どうやって無数にある中から、適切な色を決めればいいの？実際にはどんな手順でやるといいの？🤔
そんな方に向けて、色を決める実例を解説しながら、色を決めるときのコツや便利なツールの使い方を説明します。この記事を読むことで、効果的な色の決め方をマスターする事ができます。
この記事では前の記事「魅せるWebデザインの色のルールと組み合わせ方・役立つツール」で解説した、色に関するルールやツールをもとに色を決めます。そのため、一読していただくとこの記事をより深く理解できると思います。
では、さっそく色を決めていきましょう！
🎨色の決め方
まずはメインカラーを選び、次にグレイカラー、最後にアクセントカラーの順で決めてみましょう。
メインカラー
メインカラーはデザインの印象を大きく決めます。まずは「魅せるWebデザインの色のルールと組み合わせ方・役立つツール」で学んだ色のイメージと色の温度から、作成するWebサイトやアプリケーションに合う色を絞りましょう。ここでは、デザインを通じて何を伝えたいのか、どんな問題を解決したいのかを考えることも重要です。
例えば、今回は信頼感のある、落ち着いた印象にしたいため「青っぽい色」を選んでみます。
次は、色のトーンを決めます。「魅せるWebデザインの色のルールと組み合わせ方・役立つツール」で紹介した3つのトーンを決めるツールのうち、皆さんの好みのツールを使ってみましょう。そして、メインカラーとして使う色のトーンを選びましょう。
例えば、tailwindcssの色を使ってみます。青っぽい色の”Sky”、”Blue”、”Indigo”のうち、より信頼感と落ち着いた印象が強い”Blue”を選んでみます。
さらに、”Blue”の中から落ち着きつつも注目を集められそうな700の色「#1d4ed8」を選んでみます。ここで700などの数字は大きくなるほど、色が暗くなることを表します。よって、今回の最終的なメインカラーは「#1d4ed8」に決まりました。
グレイカラー
次は文章などの文字に使うグレイカラーを決めます。こちらもツールを使って、メインカラーとの相性を考えつつ色と色のトーン決めてみましょう。coolorsを使ったコントラストのチェックも行うと安心です。
例えば、同じくツールtailwindcssの色を使ってみます。 今回は、メインカラーが青っぽい色のため、モノクロカラーの中でも青っぽい”Slate”を選んでみます。”Slate”の中から、文字として見やすそうな800の色「#1e293b」に決めます。
coolorsで選んだグレーカラー「#1e293b」と白「#ffffff」のコントラストを確認してみると、”Super”と出て非常に見やすいコントラストである事がわかります。文字に使う際にも問題なさそうです！
アクセントカラー
次はアクセントカラーを決めます。 こちらもメインカラーとの関係性を考えると、魅力的な色を決めやすくなります。更に「魅せるWebデザインの色のルールと組み合わせ方・役立つツール」で紹介した色の組み合わせを決めるツールを使って、アクセントカラーの色とトーンを効率的に選んでみましょう。
例えば、ツールcoolorsで配色の自動生成を行ってみます。初期画面の”Start the generator”ボタンから生成画面に移動できます。バツボタンで色を3つに絞ってみて、メインカラー「#1d4ed8」とグレーカラー「#1e293b」を入れます。そして、 両方鍵マークで色が変わらないようにロックします。
次にスペースを押すことで、自動的に色が切り替わります。この色を切り替える中で、 印象に合うアクセントカラーを考えます。今回は落ち着いた印象がありつつもアクセントの効く色「#99E1D9」に決めます。
また、上の”Visualize colors”ボタンから、実際に色の組み合わせを使った例を表示できるので、参考にしてみましょう。いい感じですね👏
明るい色と暗い色を作る
メインカラー、グレイカラー、アクセントカラーを決めた後は、それぞれの明るい色と暗い色を作ります。これにより、色数を増やさずに色の表現を増やすことができます。
色を決めるのに紹介したツールを使った場合には、すでに明るい色と暗い色が設定されているので、それらを使いましょう。自分で色を決めた場合は、ツールTint & Shade Generatorを使って明るい色と暗い色を簡単に作ってみましょう。
例えば今回の場合、メインカラーとグレイカラーはtailwindcssを使っているので、一緒に表示されていた明るい色と暗い色を使ってみます。
アクセントカラーは、Tint & Shade Generatorを使って明るい色と暗い色を用意してみます。中央のグレーの部分に色コードを入力し、”Make tints and shades 🎉”をクリックします。そうすると、自動的に明るい色と暗い色が作られます。楽ですね！🙌
以上でメインカラー、グレイカラー、アクセントカラーを決められました。直感で迷う場面が少なく、ツールを使って効率的に色を決めることができたかと思います。
🎉まとめ
Webデザインで適切な色を決めることは、より良いWedサイトなど作るために重要です。今回は実例とともに、色を決める方法を解説しました。
皆さんはこの記事を読んだことで、効果的な色の決め方をマスターする事ができました！素晴らしいスキルアップです！👏
--
今回学んだ色を決める方法を使って、自身が作成するWebサイトに合った魅力的な色を簡単に、効率的に決めてみてください。