最近、白黒カラーベースのサイトを

作成したのですが、その際に色々と

参考にしたアイコンやバナーなど

のWeb素材やインスピレーション

向上の為のWebデザイン例に

なりそうなサイトをまとめておきます。



結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ＆シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。

アイコン

白黒やグレーのアイコンいろいろ。

40 greyscale icons

グレースケールアイコンパック。

twotiny



白黒のミニアイコンが沢山。

165 vector icons

165のうち、66が白黒のアイコン。

bwpx.icns

かなりの数の白抜きミニアイコンが揃っています。

Crystal B and W

光沢の有るアイコン。可視性高いですね。

The Webdesigner Sketchup Icons

可視性の高めなアイコンパック。

30 Free Vector Icons

凹みを表現したグレーアイコン。使いやすそうです。

Token

こちらも使いやすそうなアイコンパック。質感がいいですね。

Mate BW social icons

海外のソーシャルメディアが主になってしまいますが一応。

“ecqlipse 2” PNG

ブラウザアイコンなんかも入ってるアイコンパック。

Free Vector Icons Pack 03

白いアイコンいろいろ。

HoHoHo!

グレーのミニアイコンが山盛りです。

Kostenlose Icons

こちらもグレーのミニアイコン集。

Small eCommerce Icon Set (4 Free Icons)

ECサイト用のミニアイコン。

135 Free Vector Icons

ライトグレーのアイコンセット。135個パック。

Blossom Icons

華と球体で出来たアート風の白黒アイコン。

Stickers Icons

白い枠がかわいい丸みの有るアイコンセット。

Devine-Icons Part-2

クールなアイコンセット。

バナー・ボタン

バナーっぽい素材とかボタンとか。

72 Free Vector Glass Buttons and Bars

グラス風のグレーのバナーやボタン素材集。

77 Vector Buttons hot off the press.

OKボタンやキャンセルボタンなどがいくつか。

Collection of 90 free ‘Web 2.0′ Style Buttons

文字入れしやすい素材。黒以外も。

Labels

白と黒のタグがあります。

Elements by Design 3

光沢のある黒い紙。

Free Vector Glass Header Designs – Fancy

アートなグレーのバナーが2つ。

40 Vector Pack

やや装飾のあるバナー素材がいくつか。

ホームページ素材 > ボタン

綺麗目で使いやすそう。国産いいですねー。

【無料WEB素材】メニューボタン（白・タブ型）



良く使われるメニューと無地のタブもセット。

その他の素材

その他いろいろ、気になった素材。

120+ Free Hand-drawn Vector Arrows

手書きの矢印タイプの素材。

Vector Arrow Symbols & Icons

こちらも矢印のシンボルVector素材。

Folder Icon Template

PSDファイルのモノトーンなフォルダのテンプレート。

Simple Elegance

こちらも大きなフォルダのテンプレート。

30 Arrows

少し変わった形の矢印素材セット。

Free Vector Sign Pictograms

ピクトグラムは世界共通なんでしょうか？何かと使えるのでは。

All-Silhouettes.com

大量のシルエット素材があります。

Free Vector World Map

世界地図素材。陸部分が黒くなっています。きれい。

Coffee Cup

コーヒーカップです。それ以上でも以下でも有りません。

Sexy Silhouette

セクシーなお姉さんのシルエット。

ギャラリー

白黒ベースのWebサイト作成前に見ておきたいデザイン集。

FRKT

シンプルだけど存在感あります。可視性も高い。

The Invoice Machine

Appleを髣髴とさせるデザイン。お手本みたいなサイトですね。

Quommunication

白黒にグレーやグラデーションをうまく利用した例。素敵です。

Creative And Live

青をアクセントに白黒ベースで出来たブログデザイン。好み。

Logotronic.dk

青みを加えて爽やかな印象を与えています。アイコンの使い方も参考になります。

LOVE Blog

凄いインパクトです。BLOGという文字が印象的。

Wunderbloc

NYのファッションサイト。クールですねー！かっこいい。

rafael zundt

ポートフォリオサイト。写真も白黒で統一しています。画像をクリックするとLightbox風に出現する写真がすごく映えます。

NNUU.de

タグクラウドの工夫が参考になりました。真似しようかな。

Pete Lonsdale

ダークとライトにスイッチできます。シンプルでフォントも見やすい。

Subtraction

マウスオーバー時のオレンジが凄く印象的です。僕の理想かも。

資生堂



フルFlashなので載せるか迷ったのですが、凄くかっこいいので。テキストベースで作れないかな。。

nisshi.yugop



ご存知、ユニクロのWebサイトの作成者、中村氏のブログ。WPです。テキストオンリー。

Postmachina



カラーの強弱が凄く参考になるサイトです。

Iain Claridge Studio



シンプルですがツールチップなど使われていたり、いろいろと参考になります。

CFO Registry

区切り線やテキスト同士の間隔の開け方だけで見易さは凄く変わりそう。

Sveinn Davíðsson



凄く感動したサイトです。メニュー部分の透過やコンテンツのマウスオーバー時の工夫など。

ShiroKuro

扱う商品が白黒で、デザインも合わせてあります。WP使用。

以上、白黒ベースのサイトを作りたい時に役立ちそうな素材やWebデザイン例のまとめでした。長々と済みません。編集できるファイルもあるので白黒に限らず使えますが、ライセンスにはご注意下さい。