My Vector Space

  人生は寄り道してなんぼ

気になったWEBデザインのサイト [ 1 ]~落ち着く 安らぐ雰囲気のあるサイトについて~

f:id:ooigawa-bitter-sweet:20150406234209j:plain
落ち着く 安らぐ雰囲気のデザインにする際に押さえておきたいこと
彩度 明度 コントラストの低い色使い

同系色で彩度の低い色使いをベースに配色することで、落ち着きを演出でき
る。ベージュや茶系の配色や、夜を連想させる明度の低い青などがマッチ。

コントラストのつけ過ぎでサイト全体の印象がきつくならないように。
彩度を下げてコントラストも低くすることで、やさしいトーンとなり落ち着
いた雰囲気に。

余白を多めにとる

メインビジュアルなどに用いるイラストや写真は、余白を多くとるようにす
ると静けさを感じさせることができる。
被写体を複数 画面いっぱいに配置するようなことは避けたほうがいい。
見出しやメニュー 各要素間の余白を多めにすることで、窮屈さがなくなり
落ち着いた印象に。

フォントは細め

フォントは、細めのウェイトを用いると 画面のコントラストが弱まり、
ソフトな印象に。

イラストを使う

見出しにイラストを入れる場合は柔らかな印象を与える手書きのものやシン
プルなものがマッチ。

 

 

   落ち着く 安らぐ雰囲気でデザインされたサイト事例 

 

「 多田屋 」のサイトについて
f:id:ooigawa-bitter-sweet:20141224194717j:plain

● タイトル グローバルナビ 概要の部分などに縦書きを多く使っている和風テイストなデ
ザインや、JQueryの画像遷移やUI/UXにゆったりとした動き、レイアウトで設計されてい
るのが印象的。

● 全体的に、彩度の低い色使いや、メニュー 各要素間の余白を広めにとることで、静けさ
落ち着きのある洗練された雰囲気 効果を演出している。

栗田工業 」のサイトについて
f:id:ooigawa-bitter-sweet:20141224202532j:plain

 

● 水処理専門企業のサイト。
彩度が低めの落ち着いた水色と緩やかに上下する波形のメイングラフィックにより、
「水」「人間」といった深いテーマを柔らかく表現している。

● 水泡のアニメーションが、静けさと清潔感を演出している。

関連記事気になったWEBデザインのサイト

 

 

 

 

PAGE TOP