青と黒を使ったクールなWebサイトデザイン例とロゴ、WordPressテーマなど

スポンサーリンク

blueblack
青と黒の配色を上手く使ったクールなサイトデザイン例とロゴデザイン例、ついでにWordPressのテーマも少しご紹介します。そのサイトの属性に依存しそうな配色ではありますが、可視性を高めやすいのと大人の印象を与えられる事で利点も大きそうです。そんなサイトを作りたいときの配色など参考になりそう。

海外サイトのデザイン例、国内サイトのデザイン例、ロゴ、WPテーマの順にご紹介します。

海外サイト

配色やレイアウトが参考になります。

Blueray

blue-black01
暗くなりがちな青と黒の配色でも青を柔らかくすると印象が違いますね。

Blueray

markmeup

blue-black02
ロゴがいい。手書き系は合わない感じもするけどこれはマッチしてます。

markmeup

Massive Blue

blue-black03
オーソドックスだけお細かい部分もしっかり作りこんでいます。

Massive Blue

Wax Media

blue-black04
かなり見やすいですね。シンプルなページです。

Wax Media

irava.net

blue-black05
所謂「扉」があるサイト。与えるインパクトは高いですね。

irava.net

udnhz

blue-black06
こちらもシンプルなページ。Twitterとも合いますね。

udnhz

objetgraphik

blue-black07
マウスオーバーも配色には拘ります。

objetgraphik

Ommwriter

blue-black08
コンプレックス配色。こういうの大好きです。

Ommwriter

Tutorial9

blue-black09
有名なWebデザインサイトで日本のブログでもリスペクトされています。

Tutorial9

Unitas Worldwide Trade Management Ltd

blue-black10
コーポレートサイトの参考になりそうなデザイン。

Unitas Worldwide Trade Management Ltd

JEDA Records Music on Earth

blue-black11
インパクトが半端無いです。ぜひ見てみてください。

JEDA Records Music on Earth

CSS Town

blue-black12
cssを紹介するサイト。オーソドックスでいいですね。

CSS Town

ugmonk

blue-black13
ECサイト。青の印象がかなり強いです。

ugmonk

Eyenox Media

blue-black14
ロゴが右と言うのは最近では珍しいかも。

Eyenox Media

Gap Medics

blue-black15
色々凝ってます。黒以外はレトロ感も感じる配色。

Gap Medics

Radium

blue-black17
黒の使い方も素晴らしいです。ここの配色は真似したい。

Radium

Elemental media

blue-black18
写真を上手く使っています。これ、いいですね。

Elemental media

国内サイト

こうして比べるとデザインで強い印象を与えたい海外サイトに比べて日本は同じような配色でも可視性重視という感じがします。当然と思う僕もやはり日本人です。

HETEML

blue-black19
僕のサイトもお世話になっています。フッター部分に黒が上手く使われています。

HETEML

CCC カルチュア

blue-black21
国内サイトでかなりお勧めしたいデザインです。

CCC カルチュア

gerenuk.crazyphoto.org

blue-black22
ルモイさんのブログ。いろいろ素晴らしい。

gerenuk.crazyphoto.org

CSS Lecture

blue-black23
見やすいしcssも勉強になる良サイトです。ぜひRSS購読を。

CSS Lecture

CSS-EBLOG

blue-black43
こちらもcssの勉強になるサイト。テクスチャも使ったデザインでカッコいいです。

CSS-EBLOG

ITキヲスク

blue-black48
ロゴとサイト名がインパクトあります。Web制作情報も満載。

ITキヲスク

Lunascape

blue-black44
タブブラウザのサイトです。クールですね。

Lunascape

McIntosh

blue-black45
メーカーサイト。プロダクトとサイトデザインを統一。

McIntosh

m-flo

blue-black46
ミュージシャンサイト。雰囲気が合ってます。

m-flo

ノティオ

blue-black47
左側のFlashバナーが目を引きます。方眼紙にあわせて手書き風が多いのもいいですね。

ノティオ

ロゴ

そんなサイトを作りたいときにロゴも参考にしたいです。

Equalis

blue-black24
シンプルでインパクトもあります。

Equalis

Boxyroom

blue-black25
シルエットは定番ですね。

Boxyroom

Wavestage

blue-black26
爽やかな印象です。黒も漆黒ではなくややグレーより。

Wavestage

Art Mark

blue-black27
これは上手いですね。Markの中にARTの文字があります。フォントの形を利用したロゴデザイン。

Art Mark

Bird Dana

blue-black28
ワンポイントの青が印象的。

Bird Dana

Robarov v2

blue-black29
Rをうまく使ったロゴ。可視性も高い。

Robarov v2

OneWay

blue-black30
コンプレックス色を使ったモダンなロゴデザイン。

OneWay

8Stream

blue-black31
「8」がストリームに。

8Stream

Bird

blue-black32
「B」を鳥のように表現。

Bird

Weltfisch

blue-black33
スタイリッシュさにユニーク性を合わせた印象的ナロゴ。

Weltfisch

FindFred

blue-black34
カッコいいですね。Fを使ったロゴデザイン。参考にしたいです。

FindFred

WordPressテーマ

そのまま使わなくてもデザインを変えて使えそうなものがあれば其の方が楽ですね。因みにまだDLしていません。

Magazine theme

blue-black35
使いやすそうです。作りも凝ってる。

Magazine theme

Magazeen

blue-black36
シンプルでいいですね。個人的に好みです。

Magazeen

Gramophonica

blue-black37
アートなデザイン。最近はあまり見なくなりましたかね。。

Gramophonica

Ocean

blue-black38
グラデーションlが素敵なデザインです。海って感じがする。

Ocean

Blue Space

blue-black39
かなりコンテンツ部の可視性が高いです。ユーザーにも優しそうです。

Blue Space

WP Sleek

blue-black40
いい配色です。企業ブログに向いてそうですね。

WP Sleek

Coolio

blue-black41
シルエットが印象的ですが、こういったヘッダーは意外と使い道が無いんですよね。。。

Coolio

PC lovers

blue-black42
サイドバーの青の存在でコンテンツが見やすくなっています。

PC lovers

以上、青と黒のデザインのWebサイト作成時に参考に出来そうなサイトやロゴのご紹介でした。

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services