ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

知識がなくても簡単に使える!WEBデザイン配色お助けツールまとめ

  • WEBデザイン

WEBサイトの制作で、悩みの種になることが多いのが「配色」。発注側と制作側のイメージがなかなか噛み合わず、何度も修正が発生…などということもよくあります。希望する色のイメージを伝えたいんだけど、どうやって説明すればいいか…そんな風に悩むことはありませんか?

WEBデザインの配色は印刷物などと比べて指定の仕方が難しい上、流行りの色や配色が明確にある場合も多いので、レイアウトは良くても配色次第で古い感じに見えてしまうこともありがち。そのため、プロのデザイナーでも配色設計(カラースキーム)に役立つオンラインサービスを使用することが多くなっています。今回はそれらの中から、専門的な知識がない発注側の方でも感覚的に簡単に使えるものをご紹介します。希望する色のイメージを伝えたい時などにぜひ使ってみてください!

カラーパレット系ツール

まずご紹介するのは、流行色や人気の配色など、最初から色の組み合わせが設計された状態のカラーパレットが紹介されているツールです。多くの中からイメージに合うものを選べば、簡単にバランスの取れた配色のサイトを作ることができます。

PLTTS

01http://pltts.me/

いろいろな人が作成したカラーパレットを共有するサービスが、この「PLTTS」。人気の色や注目されている色で素敵に配色されたパレットが多く、数も豊富なので、イメージに近いものが見つかりやすいと思います。クリックすればそれぞれの詳細画面になり、そこからカラーコードを取得することができます。会員登録すると気に入ったものを保存できますが、登録しないでも利用できます。

BrandColors

02http://brandcolors.net/

「BrandColors」は、その名のとおり企業のブランドカラーの配色をまとめたサービスです。FacebookやTwitterなどのSNSや様々なWEBサービス、有名企業のWEBサイトなどで使われている配色を、カラーパレットにしてくれています。こちらも色にカーソルを合わせると、簡単にカラーコードを取得することができます。気になるブランド名をクリックして複数選択し、配色をまとめてダウンロードすることも可能になっています。

配色ジェネレータ

ここから紹介するのは、カラーパレットのように最初から色が決まっているのではなく、自分の選んだ基調色を元に相性の良い色を選んで、配色の手助けをしてくれるツールです。

color hailpixel

03http://color.hailpixel.com/

マウスを動かすとそれに合わせて色が変化、クリックするとその色を保持してくれるという直感的な使い方ができるツールです。

  • マウスを左右に動かすことで、色相を変更
  • マウスを上下に動かすことで、明度を変更
  • 上下スクロールで、彩度を変更

というしくみになっていて、画面を見ながら感覚的にカラースキームを作れます。配色はURLのパラメーターとして表示されるので、URLウインドウからコピーしてメールなどで連絡して、同じページを見ながら打ち合わせ…などという使い方もできます。

Colourco.de

04http://colourco.de/

基本的なしくみは、さきほどの「color hailpixel」と似ていますが、作ったカラースキームを画像として保存したり、カラーコードをLESSファイル(テキスト形式ファイル)として保存したりもできるなど、より多機能なツールになっています。感覚的に使いやすい方を選べばいいと思いますが、シンプルにカラースキームを作りたいだけなら「color hailpixel」、様々な形式で書き出したり保存したりしたいなら「Colourco.de」のように、使い分けてみても良いかもしれませんね。

0to255

05http://www.0to255.com/

「0t0255」は、ひとつの色を決めると、その色を元に、より明るいカラーからより暗いカラーまでを教えてくれるサービスです。ボタンなどのホバー時にカラーを少し明るくしたい、エレメントのコントラストのために境界を暗くしたい、などといった時の色選びに役立ちます。グラデーションの領域決めなどにも便利です。基調色はサービスのトップページに表示されている色から選択できる他、カラーコードを入力して決めることもできるようになっています。

日本の伝統色

和風のWEBサイトを制作する時には、色味も日本の伝統色を使いたいですよね。とはいえ、普段はなかなか使わない色も多いので、色の名前も思いつきにくいもの。カラーパレットなどで視覚的にわかるサイトを知っておくと便利です。

NIPPON COLORS

06http://nipponcolors.com/

日本独自の伝統色が紹介されているサイトです。クリックした色で画面全体が染められていくような感じになる作りや、縦書きのUIなど、インフォグラフィックスを使ったWEBサイトとしてもクオリティが高く参考になります。RGBのあたりにカーソルを持っていくと、カラーコードが表示されるようになっていますので、コピーして配色に使用することができます。ただし、対応しているブラウザではGoogle ChromeとSafariのみとなっています。

和色大辞典

07http://www.colordic.org/w/

カラーチップのような形で、日本の伝統色を色相ごとの一覧で見ることができるサイトです。1画面で、ずらりと見られるので便利。和風の同系色でまとめたようなサイトを作りたい…などという際に、とても参考になるのではないでしょうか。一覧から気になる色をクリックするとその色が全画面に表示され、RGBやCMYKの数値もわかるようになっています。

今回のまとめ

数ある配色お助けツールの中でも、できるだけ感覚的に、そして簡単に使えるものに絞ってご紹介しましたが、いかがでしたでしょうか。

配色は、どうしても自分の好みのものや見慣れたものに偏りがち。自分の中にある色数の引き出しは、思いの外少ないものです。今回ご紹介したような配色ツールを使用すると新た配色の発見があり、自分の中にストックされる色数も増えていくはず。制作を依頼する側の方もこのようなツールをどんどん使いながら自分のイメージを具体的に伝えていけば、より円滑なコミュニケーションが図れるのではないでしょうか。イメージを共有して、素敵な配色のサイトを作っていきましょう!

<関連情報>
プロのWEBデザイナーが厳選!WEBデザイン・ギャラリーサイト20
WEB担当者のデザイン力を高めるための3つの基本ポイント
WEBサイト運営者必見!2015年のWEBデザイン、5つの大胆予測!

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  7. 7

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

  8. 8

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  9. 9

    言葉に悩むあなたに。文章作成を助けてくれる便利ツール9選

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  8. 8

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」