「Webサイトを作ってみたけど、なんだかバラバラな印象になるな…」
SNSの投稿やブログのヘッダー。自分でデザインしてみるけど、なんかしっくりこない。。。そう感じている方は多いのではないでしょうか？
デザイナーになる前の自分の経験と、そしてデザインスクールでの学びからいうと。。
デザインは、とりあえずどんどん作り出し、あーでもないこーでもないと悩み。そうやって数をこなしていきながら、デザイン力は高めるものではあります！
とは言われても。。。って感じですよね。Webメディアの発信が楽しくなってきたら、どんどんやりたいことは出てくるし、時間も限られますしね。
ということで！プロでなくてもすぐに実践できる！色の決め方や実際の取り込み方のお話をさせていただきたいと思います。実際に私もこの方法でいつもやっているので、是非試してみてくださいね！
真似するだけでOK！プロっぽいWebサイトに変わる、実践的なカラーパレットの決め方
実は、Webサイトの印象は「色」で決まります。そして、その色の選び方に「センス」は必要ありません。
この記事では、デザイナーではない方でも真似するだけでOKな、実践的なカラーパレットの決め方を3つのステップでご紹介します。この方法を使えば、あなたのWebサイトも驚くほど統一感のある、プロっぽい印象に変わります。
ずは、あなたのWebサイトのテーマとなる色を1色だけ決めましょう。
例えば、
- かわいらしい、優しい印象にしたいなら「ピンク」
- 信頼感、誠実さを伝えたいなら「青」
- 自然、健康的なイメージなら「緑」
といったように、サイトの雰囲気に合わせて直感で選んでみましょう。
この1色を決めるだけで、あなたのWebサイトの世界観の軸ができます。
メインカラーを決めたら、次にその色に合う他の色を探します。そこで役立つのが、画像検索サイトのPinterest（ピンタレスト）です。
1. 検索バーに「（あなたの決めた色） color palette」と入力します。
例えば、「pink color palette」と入力して検索してみましょう。
2. すると、ピンクをメインに使ったおしゃれな配色の画像が大量に出てきます。
これらの画像は、プロのデザイナーやクリエイターが作成した色の組み合わせのアイデア集です。たくさんのパレットの中から、あなたのサイトのイメージに合うものをいくつか見つけてみましょう。
気に入ったカラーパレットの画像を見つけたら、いよいよサイトで使えるカラーコードを抽出します。
1. Google Chromeの拡張機能「ColorPick Eyedropper」など、カラーピッカーツールをインストールします。カラーピッカーについてはYouTubeでも解説しているので、よかったらそちらもご覧くださいね。
2. ツールを使って、Pinterestで見つけた画像から使いたい色のカラーコードを抜き取ります。
3. Canva（キャンバ）の「ブランドキット」にカラーコードを登録します。
Canvaは、WebサイトのバナーやSNSの画像作成によく使われるツールです。ここに登録しておくことで、いつでも同じ色を迷わずに使うことができます。色の数を多くても5色以内に絞って登録しておくと、より統一感を保てます。
注意点： ツールで抜き取ったカラーコードをCanvaにそのまま入力すると、わずかに色味が変わることがあります。サイトに適用する際は、必ず最終的な色味を確認してください。
【プロの秘訣】黒は「#000000」にしない
最後に、知っているだけでサイトの印象がグッと洗練される、プロの秘訣をご紹介します。
それは、文字や背景に使う「黒」の色です。
多くのサイトで使われる「#000000（真っ黒）」は、コントラストが強すぎて、見る人にキツイ印象を与えてしまうことがあります。特に女性向けや、優しい印象のサイトでは注意が必要です。
そこでおすすめなのが、少しだけグレーがかった黒です。
- #444444
- #414141
- #333333
などを使うことで、全体に柔らかさが出て、目に優しく洗練された印象になります。
まとめ
Webサイトの世界観作りは、決して難しいことではありません。
- メインカラーを1色決める
- Pinterestでカラーパレットを探す
- Canvaのブランドカラーに登録する
たったこれだけのステップで、あなたのWebサイトは生まれ変わります。
ぜひ、この方法を真似して、プロっぽい統一感のあるサイト作りを始めてみてください。
