PAGE TOP

公開日:2016.05.17

更新日:

シンプルだけどかっこいい!白と黒でまとめられたWEBサイト

Tags
Webデザイン
モノクロ
モノトーン
白黒

この記事の目次(クリックで項目へジャンプします)

最近花粉が飛んでいるので調子が悪い、どうも僕です。北海道はスギ花粉じゃなくシラカバ花粉が凄いんですよ!

前回「華やかなピンクが目を引く!効果的な色使いのWEBサイト」としてピンク色を効果的に取り入れているWEBサイトをご紹介しましたが、今回は白と黒ですっきりまとめたモノトーン調のWEBサイトをご紹介したいと思います。

 

Tokyo Mild Foundation inc.

Tokyo Mild Foundation
URL: http://tokyomildfoundation.com/

まず最初にご紹介したいのが、東京で映像制作・映像プロモーションを行う会社「Tokyo Mile Foundation株式会社」のwebサイトです。全体をスッキリとモノクロで統一し、マウスホバーのエフェクトとしてカラー表示させています。カラー表示させることによってフォーカスしているエリアが分かりやすく興味を引けるので、この構成は是非参考にしたいところです。

 

 

株式会社 細尾

株式会社 細尾
URL: http://www.hosoo.co.jp/

こちらは着物などの企画・製造・販売をする京都の「株式会社 細尾」さんのサイト。ほとんど白に近い背景色をベースに、文字を縦書きにすることで「和」を表現しています。よけいな色はあまり使わず、日本の侘び寂びを上手く表現されているサイトですね。ページ遷移することなくページ内で伝えたいことを完結しているので、訪問者の方にしっかりと想いを伝えられていることもポイントではないでしょうか。

 

 

Bhav Mistry

Bhav Mistry
URL: http://bhavmistry.net/

続いては海外デザイナーのWEBサイトです。ロンドンのデザイナーBhav Mistryさんのポートフォリオサイトなんですが、モノクロのデザインは余白を使うことでコンテンツに視線が集まるので、自分の作品に注目してもらいたいポートフォリオにはぴったりですね。更にこのサイト、メニューの項目をクリックした時の動きがとても面白いです。どんな動きをするのかって?それは皆さんサイトを訪問して試してみて下さい。

 

 

jitto

jitto
URL: http://jitto.jp/

最後にご紹介したいのがこちら、「株式会社十十(ジット)」のWEBサイトです。東京都麻布十番にあるCG・映像の制作会社ですが、サイトのトップページをスクロールすることで様々な制作実績をみることができます。クリックした後の動きなど効果的な見せ方は、さすがCG・映像をやっている会社だなぁと感心してしまいます。

 

 

どうでしたか?前回の記事とは打って変わって白と黒のモノトーン調のサイトをご紹介しましたが、色鮮やかな色を使わずスッキリとエレガントに見せることができるんですね。想いを上手く伝えるためには、視覚に訴えかけることのできる「色」というのは重要な要素だと思うので、それぞれの色の持つ意味・効果をしっかりと把握しておきたいと再確認しました。みなさんも「色」について深く掘り下げてみて下さいね!

 

したっけ!

monomodeリクルートサイト
AD JOURNAL