masaca（@masaca_dApps）です。
Webデザイン初心者のときは配色が上手くいかずに、苦労する場面は多いと思います。
感覚で配色してしまうと統一感がない配色になったり、落ち着かない配色になったりしてしまいがちです。
基本ルールさえ覚えておけば、誰でも配色で失敗しないようになります。
Webデザイン初心者の方でも簡単に配色が学べるスライド資料の紹介と、私が普段から使っている便利な配色ツールの紹介をしますので参考にしてください。
masaca
失敗しない配色の基本ルールがわかるスライド
配色について解説しているサイトはたくさんありますが、この2つのスライドが最もわかりやすいです。
非常にポイントに絞って失敗せずにまとまった配色ができるテクニックが紹介されており、すぐに実践することができます。
色彩センスのいらない配色講座
配色の知識やセンスが全くなくても、このスライドを見るだけで失敗しない配色ができるようになります。色の基本知識から、実際の配色の考え方がとてもわかりやすいです。
配色の第一歩としてオススメします。
ノンデザイナーのための配色理論
なぜ色選びに失敗するのかを丁寧に解説してくれています。調和の取りやすい配色理論についても参考になります。
masaca
便利な配色ツール
私はWebデザインするときは、いつも配色ツールを使っています。
配色ツールを使用することで、相性の良い配色が簡単に見つけられるので失敗しない＆時間短縮ができます。
配色に苦手意識を感じている方はツールを積極的に使ってみることをオススメします。
配色の見本帳
「配色の見本帳」の色検索がとても便利です。
Photoshopなどから取得したカラーコードを入力すると、色の情報と配色パターンを表示してくれます。
カラーコードを入力するだけ
カラーコードを入力して、「色の情報と配色パターンを調べる」ボタンを押すだけ。
日本語の色名表示が嬉しい
日本語で色名を表示してくれるのが嬉しいです。
色相を表示してくれる
さまざまな配色例を表示してくれる
様々なルールに乗っ取った配色例を出してくれるので、色選びが確実になります。
HUE/360
HUE/360は色を選ぶだけで、自動的に他に調和する色を選んでくれる便利な配色ツールです。
全く配色の知識がなくてもまとまった配色ができるので、配色が決まらないときはよく使います。
はじめに色の明るさを選びます。
右側の色相環から好きな色を選ぶと、調和の取れる色だけが表示されます。
選んだ配色はページ下部のバーに表示されます。
好きな色をいくつか選んだら「Print User Color」を選択すると、カラーコードが表示されます。
まとめ
配色の基本をスライドで学んだら、失敗しない配色ができるようになります。さらに配色ツールを使うことで、さらに配色方法が広がり時間の短縮にもなります。
配色に自信がないWebデザイン勉強中の人は一度試してみてくださいね。
masaca
コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！
SPONSORED LINK
コメントを残す