Design Journey

One soul One love One heart

エレガントでクールな白黒のwebサイト

151111

今回は白と黒で作られたモノクロのクールなサイトを紹介します。色が2色でこんなにもかっこよくできるのか。。と思うものを選んでみました。

白黒で作られたwebデザインの特徴

白と黒といえば正反対の色。
「白」は清純さや清潔さ明るさを表し、「黒」は男性的で重厚で伝統みがあるな色。
そんな白と黒で作られたデザインは、完璧なコントラストと、最低限に必要な要素だけにした究極にシンプルでエレガンスなイメージ。
少ない色で表現するのは、ごまかしのきかない、デザイナーの腕を問われるデザインだとも言えると思います。
今回は、そんな白黒のwebデザインをチェックしていきます!

実例!白黒のクールなwebサイト

Foto Frigerio – Wedding Photographer

151111_1
http://www.fotofrigerio.it/en/home
黒なのにどこか女性らしさを感じてしまう繊細なデザイン。
職業である写真の魅力を十分に引き出すために、色は少なくしてフォントで見せています。
書体の組み合わせや動きが参考になります。

SERGEY MAKHNO

151111_2
http://mahno.com.ua/en
※音が出ます

全体的に文字は小さめで写真とのメリハリを感じます。
スクロールに沿って表示されるラインアートも印象的です。

KUROKAWA WONDERLAND

151111_3
http://kurokawawonderland.jp
※音が出ます

トップの表示された後にキラっと光るボタンがかっこいいなと思いました。
アクションとして、「ここを押して」というのがわかりやすいです。
右側に表示されるコンテンツのエリアが極端に狭いのも斬新です。

Elite Model Management Paris

151111_4
http://elitemodel.fr/en/

モデルの紹介?大きな白黒写真が印象的なサイト。
無駄な要素や色は一切排除して、モデルの写真のみ!といったところがクール。

Michael Schmid – German Digital Designer & Developer

151111_5
http://workdiary.de
ドイツ人デザイナーのポートフォリオサイト。
斜体のレイアウトと、はみ出るほど大きなイメージが印象的。
キービジュアルの顔半分とクールなフォント使いがいいなと思いました。

Tokyo Mild Foundation inc.

151111_6
http://tokyomildfoundation.com
オンカーソルでカラーになるところが、わかりやすく、魅力が引き立っていて素敵だなと思いました。
ローディングが縦で表示されるのも印象的。
メンバーの変顔が遊び心があってよかったです^^

SIMONE.INC

151111_7
http://www.ilovesimone.com
テキストが基本で余計な要素がなくかっこいいなと思いました。
アパレルの会社らしくブランド感のあるサイト。
オリジナルのフォント?かサイト内の統一感があって素敵です。

MEFILAS.Inc

151111_8
http://mefilas.com
こちらもほぼテキストのみ。
テキストだけで統一感を見せるのってすごく難しいと思うので参考になります!
テキストにオンマウスで隠しアクションが出てくるのが楽しい!

Urban Influence

151111_9
http://urbaninfluence.com
白黒のシンプルな背景に細字のフォントが映えます!フォント使いが参考になりました。

 

今回いろいろなサイトを見てみて、黒が多いと男性的なイメージになりやすいですが、フォントの組み合わせや使い方などで女性らしさも見せられるんだなぁという勉強になりました。

また、シンプルだからこそ!ダサくならないデザインのこつを勉強していきたいと思います。

 

 

シェアする
コメントする

コメントを残す