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

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

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

1-1.櫻井焙茶研究所

櫻井焙茶研究所.png
http://www.sakurai-tea.jp/

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

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

1-2.黒木本店

黒木本店_公式ウェブサイト.png
http://www.kurokihonten.co.jp/

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

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

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

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

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

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

株式会社Plan・Do・See【プラン_ドゥ_シー】_｜_採用.png
http://recruit.plandosee.co.jp/

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

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

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