モノクロの配色でクラシックな印象のWebサイトまとめ

モノクロの配色でクラシックな印象のWebサイトまとめ

この記事の目次

はじめに

モノクロはモノクローム(monochrome)の略で、基本としては白黒から構成されるものを意味します。Webデザインの中でも白や黒(もしくは灰色)で構成されたシックでクラシックな雰囲気のサイトを良く見かけます。少ない色で表現するのは色のばらつきを抑えてすっきり見せる利点がありますが、なかなか少ない色で表現するというのも難しいところです。というわけで個人的に気に入ったモノクロで構成されたサイト(写真の色味などは除外)をいくつかご紹介したいと思います。では、どうぞー!

【二番工房】 http://www.niban.co.jp/
二番工房

各メニューのコンテンツが1ページにおさまったデザインになっていますが、モノクロ(背景写真は少し青みがあるかも?)を基調とした落ち着きのあるデザインになっています。スタッフ一覧のところがモノクロの写真が並んでいて、マウスホバーでカラーになるというのはありそうでないなぁと思いました。

【passiv design】 http://www.okuta.com/passiv/#top
【passiv-design】自然派パッシブデザインリフォーム・リノベーション|-リフォーム・マンションリフォームならLOHAS-studio(ロハススタジオ)-presented-by-OKUTA(オクタ)

パララックスを取り入れた動きのあるサイトでスクロールすると詳細コンテンツを見ることができます。トップページはダークグレイで人工的な雰囲気で配色されていて、大きく中央に配置されたpassiv designの文字が自然と目に入るようになっています。

【株式会社 細尾】 http://www.hosoo.co.jp/
株式会社-細尾
ほとんど白に近い背景色にシンプルに文字の配置のデザイン。着物などの織物を企画製造している会社のため、和風らしさを感じる縦書きのメニューになっています。なんとなく料亭にあるような「おしながき」を連想させる雰囲気ですね。1ページにまとめられていて流れを感じるサイトだと思いました。

【PROPO DESIGN】 http://www.propodesign.com/
PROPO-DESIGN---プロポデザイン
メガネのデザインを手がけているPROPO DESIGNのWebサイト。白の背景に黒のテキストというかっこよさを追求した雰囲気です。Glasses are Proposedという文字そのものと、下にある大きなメガネの写真がデザインの一部として際立っています。

【東北大学大学院理学研究科・理学部】 http://www.sci.tohoku.ac.jp/
東北大学大学院理学研究科・理学部
東北大学大学院のサイト。情報誌のようなコンテンツの多いサイトになっていて、縦横に綺麗に配置されたレイアウトと白&黒のシンプルな色使いが規律のある雰囲気になっています。太い線と細い線の使い分けをすることで見やすさがアップしているように思いました。

【DESIGN SELECT】 http://www.design-select.net/
デザインノベルティグッズのセレクトショップ---DESIGN-SELECT---エコバッグ作成・オリジナルタンブラーなどおしゃれな高級名入れギフトをセレクト
ノベルティグッズのセレクトショップのWebサイト。洗練された雰囲気を感じるようにモノクロでまとめてありますね。色味がない分、写真がすごく引き立って見えるように感じました。ヘッダー上部に黒いラインがあるので、ぐっと画面が引き締まった印象を受けます。

【Refsign Magazine Kyoto】 http://blog.refsign.net/
Refsign-Magazine-Kyoto|プラントとポットの物語-京都展-小田康平-×-アダム・シルヴァーマン

京都発のデザインマガジンのWebサイトということでコンテンツの多いサイトです。最近よく見かけるようになったブロック型のレイアウトになっています。背景を薄いグレーにして、各コンテンツやメニューを白にすることで、目立つようになっています。タイトルやメニューの文字を大きく太くしているので見やすいですね。

【ÉDITO 365】 http://www.edito365.com/
ÉDITO-365--エディト・トロワ・シス・サンク-

ステーショナリーを中心としてセレクトショップのWebサイト。トップページに写真をタイルのように配置していますが、全体がモノクロになっているのでごちゃごちゃした感じがないですね。マウスホバーするとじわーっとカラーになるのも面白いです。

おわりに

モノクロをメインとしたサイトは、シンプルで見やすくすることを目的としたサイトが多いように感じました。使う色が少ない分、大きな文字でデザイン性を出したり、写真が引き立つ分使う写真にこだわったりと色々な工夫がありますね。モノクロの配色を通してヒントになるものがあればと思います。それではー!!

関連記事を読む

モノクロの配色でクラシックな印象のWebサイトまとめ

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]