色彩パッと見ただけで印象に残りやすいビビッドカラー。扱い方を間違えると、ただうるさく、ゴチャゴチャして見えるだけになってしまいます。今回はそんなビビッドカラーをうまく使っているWebサイトをいくつかまとめてみました。ビビッドカラーとのうまい付き合い方も合わせて読んでみてください!ビビッドカラーってどんな色?ビビッド(vivid)は日本語で「色鮮やかな」という意味。明度・彩度ともに高く、正式には「純色」と呼ばれる色相のことです。鮮やかで活発、強いイメージがある派手な色なので、アクセントカラーとしてデザインに取り入れることも多くあります。具体的なカラーコードを紹介しているサイトもありました。して並べて見るとかなり目がチカチカしちゃいますが、使うポイントを抑えておけば、とってもかっこいいデザインに仕上げられますよ。ビビッドな色を使う時のポイント一色だけでもかなり目立つビビッドカラー。アクセントとして一部に使うよく使われる手法がこちら。全体をシンプルにデザインし、ボタンや線など、一部の要素にのみビビッドカラーを使う方法です。鮮やかな色相がより一層引き立ちます。DiFaでは黄・緑・水色・ピンクという鮮やかな色相を、左上の角とテキストにのみ使用。他の要素がシンプルに押さえている分、複数の色相を使ってもうるさく感じません。全体の背景色として使う時は、余白をたっぷりとビビッドな背景色だけで賑やかな印象を与えることができるため、余白をとり、他の要素の数は極力少なく、抑えめに表示しましょう。ファーストビューではロゴとキャッチコピーのみ表示されています。派手な色相を扱うなら、これくらい大胆に他の要素を削ぎとってもいいですね。無彩色との相性バッチリ!無彩色とは、黒・白・灰色の、色味を持たない色相のこと。鮮やかなビビッドカラーと合わせるなら、黒や白などが見栄えもバランスも良く見えます。Technologiesはモノクロベースの動画に赤いフォントをプラス。他のセクションでは逆に、背景色に赤、テキストに白を使っているところも。Proctor派手なピンクと、顔の画像が印象的なサイト。ファーストビュー以下はシンプルにデザインされています。Notes色合いの他、ウネウネの模様も可愛らしいです。他のページは違う色で表示されます。Bambach彩度の高い色でも、写真と重ねるとまた印象が変わってきますね。Conference白をベースに、アクセントとして彩度の高いピンクや紫を使用。写真もモノクロで統一しているので、鮮やかな色相が引き立ちます。émergente真っ赤と紺色の組み合わせが面白いサイト。飛び出るロゴ画像やパララックス効果も素敵。Porter大きな背景画像・動画の上に乗せたビビッドな赤がかっこいい!とってもシンプルなのに印象的なデザインです。Friends真っ赤な画面を囲む白い枠線がいい味出してます。4つのメニューは画面の角に配置するなど、ちょっと変わったデザイン。Interface赤と言うか朱色と言うか?エリア境界線の三角形もおしゃれ。Playtikaページを開くとドドーンと表示されるロゴが真っ赤な背景色とあっていますね。ロゴはスクロールするとひゅっと小さくなります。オレンジMJML補色の青をCTAボタンに使うという大胆な配色。Louisモノクロの背景画像にポイントとして使われているオレンジが印象的!若干グラデーションがかっているところも素敵です。黄色Vibrantモノクロの大きな背景画像にほんのちょっとビビッドな黄色を入れるだけでおしゃれ度倍増!メニューパネルは黄色い背景色でかなり目立ちます。Koto黄色のファーストビュー以下はモノクロでシンプル。ページの最後までスクロールすると、ふんわりと黄色い背景に戻ります。Balloon.css黄色・赤・黒という派手な配色ですが、文字サイズも大きめで読みやすいです。Maglevこちらも黄色と無彩色の組み合わせ。ファーストビューではわずかに動く背景が素敵です。Triner黄緑に近い黄色を使っています。ページ下の方では薄いグレーの背景にリンク色としてこの色が使われています。Koudstaal緑・白・紺の三色のみで構成されているサイト。シンプルながらインパクトがあります。Studio一見シンプルなデザインに明るい緑でアクセントをつけています。三角形を取り入れたデザインにも注目。Roots黒を基調にした背景に蛍光緑のアクセント!グッとデザインが引き立ちます。青Outline青・緑・黄色を使っていますが、どれも彩度高め。それらを組み合わせてまとめているのがすごい...。NewDealDesignこちらは青とビビッドピンクの組み合わせ。配色が派手な分、太めのフォントで引き締めています。ランダムでピンクメインの配色に切り替わったりします。today?水色と黄色の組み合わせ!きつくなりがちな配色を丸っこいフォントを使って和らげています。元気でクール、組み合わせによってはとってもオシャレに見せられるビビッドカラー。皆さんはどんな組み合わせでデザインしてみたいですか?シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。