「落ち着き」「安らぐ雰囲気」のデザインにする際のポイント

WEBサイトを制作するにあたり、特にビジュアル面で気をつけておくべきポイントや共通要素などをデザインテイスト別に分けて考察していこうと思います。

この記事では、「落ち着き」「安らぐ雰囲気」のデザインにする際に押さえておくことをまとめておきます。

1.  「 落ち着き 」「 安らぐ雰囲気 」のデザインにする際のポイン ト

彩度　明度　コントラストの低い色使いにする

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

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

余白を多めにとる

メインに用いるイラストや写真は、余白を多くとるようにすると静けさを感じさせることができる。 被写体を複数並べたり、画面いっぱいに配置するようなことは避けた方がいい。

見出しやメニュー　各要素間の余白を多めにすることで、窮屈さがなくなり落ち着いた印象になる。

フォントは細めにする

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

イラストを使う

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

2.  「 落ち着き 」「 安らぐ雰囲気 」でデザインされたサイトを考察してみる

「 落ち着き 」「 安らぐ雰囲気 」でデザインされたサイト事例として、6サイトを挙げてみました。

この中から「 多田屋 」と「栗田工業株式会社」のサイトについてを以下でみていきます。

「 多田屋 」のサイトについて

●  タイトル　グローバルナビ　概要の部分などに縦書きを多く使っている和風テイストなデザ
イ ンであったり、メニュー　各要素間の余白を広めにとることで、ゆったりとくつろげる洗
練され た雰囲気　効果を演出しようとしているのがわかる。

● 全体的に、彩度の低い色使いでまとめていて、自然の景色と調和した静けさ　落ち着きのある
空間作りをJQueryのゆったりとした画像遷移の中でうまく伝えている。

「 栗田工業 」のサイトについて

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

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

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