クールな印象のホームページを作るモノトーン素材の参考事例＋素材サイト9選

白、黒、グレーで構成されいるモノトーンは画面を引き締めるだけでなく、加筆などの加工がしやすいのが特徴です。
「シックな印象のホームページにしたい」などの要望を受けた際、デザインの一つとしてモノトーンを利用するのもいいでしょう。
今回はモノトーンの素材を多く扱っているホームページと実際の利用事例をご紹介します。
クライアントに提案する際のホームページのデザインのストックはどれだけ持っていても困りません。ぜひ、モノトーン素材を使いこなして、デザインの幅を広げましょう。

1.モノトーンを生かしたホームページ事例

白と黒をメインカラーにしたホームページの事例をご紹介します。
シンプルな色合いでもデザイン性の高いホームページにするために、それぞれのページが行っている工夫を見ていきましょう。

1-1.櫻井焙茶研究所

http://www.sakurai-tea.jp/

南青山で茶葉を販売している櫻井焙茶研究所の公式ホームページは、黒のバナーに白いページを合わせたシックなデザインです。

店までのアクセスを示したGoogleマップもモノトーンに変換しており、デザインに統一感を持たせています。

1-2.黒木本店

http://www.kurokihonten.co.jp/

明治18年設立の造り酒屋である株式会社黒木本店のホームページです。
原材料である水や麹のモノクロ写真を中心に、工法の説明を行っています。
商品の写真はカラーですが、無地の白で背景を統一させて落ち着いた雰囲気を守っています。

1-3.多摩美術大学　総合デザイン学科

http://www.tamabi.ac.jp/integrated/

多摩美術大学総合デザイン学科の学科紹介ホームページで、カリキュラムや教員の紹介を行っています。

図や写真に至るまでモノトーンで揃えられ、アイコンにマウスのカーソルをあてると色が付きます。
周囲がモノクロだからこそ、一部の色を目立たせることができるのもモノトーンのホームページの特徴といえるでしょう。

1-4.プラン・ドゥ・シー　採用サイト

http://recruit.plandosee.co.jp/

ホテル・レストランの運営などの事業展開をしている株式会社Plan・Do・Seeの新卒採用向けのホームページです。

手書きのような街のイラストととともに、アニメーションが動き、ページの最後まで思わず読みたくなる構成になっています。

ご紹介したように白黒のシンプルな色合いのホームページを作成する際は、全てをモノトーンにするのではなく、一部に色をつけると印象的なデザインとなります。
色がつくことで、ボタンの場所がわかりやすくなるなどのアクセシビリティの視点でも優れた見せ方をできるでしょう。

2.モノトーン素材サイト９選

「素敵なホームページなのはわかったけど、実際白黒で目を引くデザインなんて作れないよ」と言う方もいるかもしれません。
一から全てを作成しなくても、ホームページに利用出来る写真やイラストなどを提供しているサイトの素材を使うことで魅力的なデザインに仕上げることができます。
今回は、無料のモノトーンの素材を特に多く扱っている9つのホームページをご紹介します。

2-1.ICOONMONO

http://icooon-mono.com/

モノクロのアイコンを6000パターン以上提供しているホームページです。
ジャンルごとにまとめられていて、キーワードで検索することもできます。

ファイル形式はPNG、JPEG、SVG（データを拡大縮小しても劣化しないベクター形式の画像）から選べるので、用途に合わせて使いやすいでしょう。

2-2.silhouette AC

http://www.silhouette-ac.com/

人物や乗り物などのシルエットに特化した素材を提供しているホームページです。
アイコンやホームページのワンポイントにも活用しやすいでしょう。

ダウンロード形式はJPEG、PNG、EPS（印刷情報が含まれたファイル形式）から選ぶことができます。

2-3.PATTERN

http://www.pattern-sozai.website/data/

色ごとにカテゴリ分けした、パターン素材を提供しているホームページです。
パターンはマス目上に並べて利用し、ホームページやチラシなどの背景を作成することができる素材です。
PhotoshopやIllustratorに取り込めば、デザインを新たに作成する際にも役に立つでしょう。

2-4.シルエットデザイン

http://kage-design.com/
シルエットに特化したホームページで、童話の登場人物や地図のシルエットなど豊富な素材が提供されています。

ダウンロード形式は基本的にAiのみなので、PhotoshopやIllustratorを利用する人向きです。

白黒イラスト素材

http://www.sozai.rdy.jp/shirokuro/

モノクロで作成されたイラストを提供しているホームページです。
行事や季節のイラストが多く、可愛いデザインなので幼稚園や病院でも使いやすいです。

ダウンロード形式はGIFまたはJPEGに限ります。

2-5.VERANDAHER

http://verandaher.blog.fc2.com/

モノトーンに限った素材を提供していて、シンプルで使いやすいデザインが特徴です。
カレンダーやポストカードなど、印刷するだけで使えるデザインも豊富です。
ダウンロード形式は基本的にJPEGのみなので、気をつけましょう。

2-6.photo library

https://www.photolibrary.jp/

写真を中心としてイラストなどの素材も提供しています。
より使用用途が幅広く、サイズも選べる有料の素材もあります。

まとめ

使用している色は白、黒、グレーと少ないですが、モノトーンでもデザインによって表現の幅を持たせることができます。
モノトーンはシンプルな分、燕尾服やスーツのようなフォーマルな印象を与えるデザインに仕上げられるでしょう。

今回、ご紹介したホームページでは無料で商用可能の素材を配布しています。
このような素材はモノトーンのシンプルな色合いのホームページを作成する際だけでなく、ボタンや画像のワンポイントとしても役に立ちます。
このような素材をうまく使いながら、デザインの幅を広げていきましょう。

デザインの引き出しを多く持っていれば、クライアントから白黒での指定を受けた際に「たった二色しか使えないなんて」と慌てることもないはずです。