デザイン

デザインに取り入れたい!ビビットカラーのウェブサイトまとめ

こんにちは、今回印象的なビビットカラーのウェブサイトを紹介させて頂きます。ビビッド(vivid)は日本語で「色鮮やかな」という意味。明度・彩度ともに高く、正式には「純色」と呼ばれる色相のことです。鮮やかで活発、アクセントカラーとしてデザインに取り入れることも多くあります

カラーチャートを具体的に紹介しているサイトもありましたので参考にしてみましょう。

http://www.colordic.org/v/

ピンク

http://toddproctordesign.com/

顔の画像が印象的なサイトです。ファーストビューだけで印象に残るサイトです。

http://mbambach.com/splash.html

WebデザイナーのMatthew Bambachさんのポートフォリオサイトでは、デュオトーンをビビッドカラーで取り入れています。デュオトーンは彩度を落として暗くする渋めのカラーが好んで使われる事が多いです。

ピンクのデザインに波打った模様が可愛いサイトです。

ブルー

https://www.newdealdesign.com/

こちらはブルーとピンクを組み合わせた斬新なデザインです。太めのフォントとの組み合わせもお洒落です。

http://outlinecss.co.uk/

青、緑、黄色をつかっていますが、それを組み合わせて繊細な色彩を作っています。爽やかなイメージに最適です。

http://www.gethyapp.com/

黄色と水色の組み合わせで、インパクトが強くなりがちなカラーを丸いフォントで全体のバランスをまとめています。

イエロー

http://vibrant.pratheev.com/

こちらは落ち着いたグレーとイエローの組み合わせですが、落ち着いた色彩にビビッドカラーを合わせて目を引くデザインを演出しています。

https://www.studiokoto.co/

シンプルなデザインにイエローをチョイスしている事で、インパクトを演出しています。フォントも可愛いですね。

http://triner.de/

目がチカチカするほどのイエローとホワイトの組み合わせで一目で他社と差別化できるサイトを構築できます。

グリーン

http://jpkoudstaal.com/

淡いグリーンのウェブサイトでシンプルながらも印象に残るサイトです。

http://www.case-3d.com/#home

こちらは、グリーンをアクセントカラーに使かっているお洒落なサイトです。

レッド

http://intromusique.ca/

レッドとネイビーの組み合わせでデザインされているウェブサイトです。飛び出すロゴなどのユニークな仕掛けも参考になります。

http://aaronporter.co/

シンプルな背景にレッドのロゴがアクセントカラーとしてウェブサイト全体を引き締めています。

まとめ

今回、ビビッットカラーのウェブサイトを集めてみました。ビビットカラーは背景全体に使用しても、アクセントカラーに使用してもお洒落です。ブラックやホワイトなどの無色系との相性がとてもいいので。幅広いデザインに使用できます。

最後まで読んで頂きありがとうございました。

designer/写真家/作家 冨永 淳

bridal photographerを経て独立、九州を拠点に作家活動と作品制作を行う。株式会社 HOUR INC.web magazine 企画・編集・執筆・デザインを行う。
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. 行動心理学から見る売り上げがあがるホームページの作り方

  2. Webデザインに絶対に役立つツール6選

  3. オリジナリティー溢れる!海外写真家のポートフォリオ10選

  4. 独学でプログラミングからWebデザインまで学べる国内の凄いサイト13選

  5. 2017年知っておきたい!ウェブデザイン流行とトレンド

  6. 2017年ホームページデザイン最新トレンド

  7. モノクロで洗練された美しいウェブサイト7選

  8. 海外のクリエイティブなホームページデザイン10選

PAGE TOP