• かちびと.net

    白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例をまとめます。最近作成した白黒ベースのサイトを作ったときにみたり、参考にしたりした素材やサイを備忘録的にメモ。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ

スポンサーリンク

最近、白黒カラーベースのサイトを
作成したのですが、その際に色々と
参考にしたアイコンやバナーなど
のWeb素材やインスピレーション
向上の為のWebデザイン例に
なりそうなサイトをまとめておきます。

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

アイコン

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

40 greyscale icons

black-and-white-design01

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

40 greyscale icons

twotiny

black-and-white-design02
白黒のミニアイコンが沢山。

twotiny

165 vector icons

black-and-white-design03

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

165 vector icons

bwpx.icns

black-and-white-design04

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

bwpx.icns

Crystal B and W

black-and-white-design05

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

Crystal B and W

The Webdesigner Sketchup Icons

black-and-white-design06

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

The Webdesigner Sketchup Icons

30 Free Vector Icons

black-and-white-design07

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

30 Free Vector Icons

Token

black-and-white-design08

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

Token

Mate BW social icons

black-and-white-design09

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

Mate BW social icons

“ecqlipse 2″ PNG

black-and-white-design10

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

“ecqlipse 2″ PNG

Free Vector Icons Pack 03

black-and-white-design11

白いアイコンいろいろ。

Free Vector Icons Pack 03

HoHoHo!

black-and-white-design12

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

HoHoHo!

Kostenlose Icons

black-and-white-design13

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

Kostenlose Icons

Small eCommerce Icon Set (4 Free Icons)

black-and-white-design14

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

Small eCommerce Icon Set (4 Free Icons)

135 Free Vector Icons

black-and-white-design15

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

135 Free Vector Icons

Blossom Icons

black-and-white-design16

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

Blossom Icons

Stickers Icons

black-and-white-design17

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

Stickers Icons

Devine-Icons Part-2

black-and-white-design18

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

Devine-Icons Part-2

バナー・ボタン

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

72 Free Vector Glass Buttons and Bars

black-and-white-design19

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

72 Free Vector Glass Buttons and Bars

77 Vector Buttons hot off the press.

black-and-white-design20

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

77 Vector Buttons hot off the press.

Collection of 90 free ‘Web 2.0′ Style Buttons

black-and-white-design21

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

Collection of 90 free ‘Web 2.0′ Style Buttons

Labels

black-and-white-design22

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

Labels

Elements by Design 3

black-and-white-design23

光沢のある黒い紙。

Elements by Design 3

Free Vector Glass Header Designs – Fancy

black-and-white-design24

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

Free Vector Glass Header Designs – Fancy

40 Vector Pack

black-and-white-design25

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

40 Vector Pack

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

black-and-white-design48

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

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

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

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

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

その他の素材

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

120+ Free Hand-drawn Vector Arrows

black-and-white-design26

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

120+ Free Hand-drawn Vector Arrows

Vector Arrow Symbols & Icons

black-and-white-design27

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

Vector Arrow Symbols & Icons

Folder Icon Template

black-and-white-design28

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

Folder Icon Template

Simple Elegance

black-and-white-design29

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

Simple Elegance

30 Arrows

black-and-white-design30

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

30 Arrows

Free Vector Sign Pictograms

black-and-white-design31

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

Free Vector Sign Pictograms

All-Silhouettes.com

black-and-white-design32

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

All-Silhouettes.com

Free Vector World Map

black-and-white-design33

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

Free Vector World Map

Coffee Cup

black-and-white-design34

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

Coffee Cup

Sexy Silhouette

black-and-white-design35

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

Sexy Silhouette

ギャラリー

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

FRKT

black-and-white-design36

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

FRKT

The Invoice Machine

black-and-white-design37

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

The Invoice Machine

Quommunication

black-and-white-design38

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

Quommunication

Creative And Live

black-and-white-design39

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

Creative And Live

Logotronic.dk

black-and-white-design40

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

Logotronic.dk

LOVE Blog

black-and-white-design41

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

LOVE Blog

Wunderbloc

black-and-white-design42

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

Wunderbloc

rafael zundt

black-and-white-design43

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

rafael zundt

NNUU.de

black-and-white-design44

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

NNUU.de

Pete Lonsdale

black-and-white-design45

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

Pete Lonsdale

Subtraction

black-and-white-design46

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

Subtraction

資生堂

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

資生堂

nisshi.yugop

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

nisshi.yugop

Postmachina

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

Postmachina

Iain Claridge Studio

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

Iain Claridge Studio

CFO Registry

black-and-white-design53

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

CFO Registry

Sveinn Davíðsson

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

Sveinn Davíðsson

ShiroKuro

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

白黒(モノトーン)雑貨、インテリアなどの専門サイト-ShiroKuro

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

URL :
TRB :

Comments & Trackbacks (11)

  1. 通りすがり

    画像が見えなくなっているので対応してほしいです!

    • シロ

      申し訳ありません、サーバー移転でアップロードに抜けがあったようで・・・
      ご報告が無ければ忘れるところでした。感謝ですー!

      早急に対応させていただきます!

    • シロ

      復旧しましたー!ご迷惑お掛けしました!

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services