テーマカラー1色をメインに用いたWebサイト50

thumb-colourfulwebsite

前回の記事「WebデザイナーにおすすめのEvernote活用術」で紹介したように、私はEvernoteに素敵なデザインをストックする際、使われているテーマカラー別にタグをつけて分類しています。気がつけば各色のデザインストックが増えてきたので、その中でも厳選した5サイト×10色の合計50サイトを紹介します。単色をデザインに使う時のポイントも一緒に読んでみてくださいね!



追記:リンク切れサイトを削除したため、数が減ってます…

テーマカラーをメインに取り入れる時のポイント

配色に自信がなくても!Webデザインが好きになる配色ツールと使い方」でも紹介したとおり、きれいな配色でもベタ塗りしただけではデザインの魅力が半減してしまいます。特に今回のようにテーマカラーを使う面積が広ければ広いほど他の要素の役割が重要になってきます。

テクスチャを使う

紙・布・木目などなど、テーマカラーにテクスチャをプラスしてサイト全体の雰囲気を変えてみます。

テクスチャを使う

グラデーションを使う

テーマカラーを徐々に明るく/暗くするだけでベタ塗りとは違った奥行き感が出ます。

グラデーションを使う

パターンを使う

テーマカラーと、その色に少しだけ彩度や明度に変化をつけた色を使ったパターンを背景に使用します。

パターンを使う

写真を使う

テーマカラーとほぼ同じ色合いの写真を使って個性を出します。

写真を使う

アクセントカラーを使う

全体に同じ色を使っているので、ポイントとなるCTAボタンやリンクカラーに変化をつけて引き締めます。

アクセントカラーを使う

テーマカラー1色をメインに用いたWebサイト

ピンク

Desina

うっすらとしたテクスチャが素敵。

Pink Mitten

明度を変えた同系色配色でまとまったデザイン。

WIRED f x sweet

WIRED f x sweet

もうかわいすぎて涙がでそう。

iconSweets 2

iconSweets 2

キルト生地風のパターンで可愛さ倍増!

Work Life Balance Centre

ピンクと黒のミニマルなデザイン。

Republic2

赤と黒の配色&大きめフォントがかっこいい!

Collision

ゴールドと組み合わせてリッチな雰囲気に。

Bowtie

カーテンの質感の出し方は必見。

Gorilla Coffee

大きなイラストが迫力満点!

Logo Heroes

グラデーションを使った模様がエレガント。

茶色

James Lai Creative

グランジ感がかっこいい。

We Love WP

ロゴのハートがアクセントに。

Wishbone Design

イラストがちょこちょこ動いてかわいい。

Web Designer freelance Michela Chiucini

レトロな雰囲気ただよってます。

オレンジ

Happycom

ほのぼのとしたイラストがポイント。

Snapplr

中心に向かったグラデーションがきれい。

Safarista Design

ちょっぴりレトロな雰囲気。

Colourpixel

コンテンツ部分の黒が全体を引き締めています。

黄色

Mooze Design

各セクションで色が変わります。

Helveticons

紙の陰影の表現の仕方が秀逸。

ESPIRA

手描きイラストとグランジ感がとってもかっこいい!

booreiland

Flashサイト。シアン・マジェンタ・イエローを使ったど派手な配色。

Tori’s Eye

手作り感あふれるあったかいイメージのサイト。

A Modern Eden

背景テクスチャの質感とほのぼのとしたイラストに注目。

Evernote

白と組み合わせて清潔なイメージに。

Talk To Gary

レイアウトの組み方がおもしろい。

Easy*Peasee

キャラクターのオレンジがアクセントになっています。

SkyLuke.cz

くねくねした点線がアクセントに。

Established 1986

Flashサイト。一番上の黒の細いラインが全体を引き締めています。

Icebrrg

半透明のボックスが美しい。

Appear

濃い紫とベージュの組み合わせがとってもエレガント。

Siebennull

カーソルに合わせて画面が動きます。手作り感あふれるかっこいいサイト。

bressane

大きな背景画像に半透明の黒を重ねたクールなサイト。

The Old State

フォントや装飾など、昔の雑誌を思わせるデザイン。

Westin Hotels & Resorts

背景画像を効果的に使った清潔感あふれるデザイン。

SOFA

美しすぎるベクターイラストは必見。

FLOWmarket

大きな写真が特徴のミニマルデザインのサイト。

Face

マウスオーバー時の文字色はインパクト有ります。

Fourth Floor Interactive

fourthfloorinteractive

部分的に使われているテクスチャが魅力的。

同じレイアウトでもテーマカラーひとつで印象がぜんぜん違いますね!デザインのアイデアの参考になれば幸いです!

シェアする

コメント

  • @bellkaz

    とても参考になりました!
    というか、シンプルにすればするほど
    センスが必要というのを思い知らされます!
    あ~もうできればManaさんにサイト依頼したいですよ
    私個人的には。

  • なるほど~
    アイデアが大事ですね~

    模倣は創造の母、と言いますし
    参考にさせていただきます^^

  • ナオ

    なるへそ。 なるへそ。
    メモ メモ!

    つくづく自分は基本をすっとばしてサイト作ってるのが分かります。

    作り方に迷った時にこのパターンを知っていれば、すぐに手を動かせそうですね。

    ありがとうございます。

  • Pingback: HI-ROM BLOG » Webデザイン()

  • Pingback: 2011年1月のこれだけ読めば分かる Web 制作者向け情報まとめ | ウェブル()

  • Pingback: HI-ROM BLOG » Webデザイン参考サイト()

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)