Design Journey

One soul One love One heart

木のぬくもりを感じるwebデザインの参考

151020

だいぶ肌寒くなってきましたね。朝起きるのがつらくなってきました。。。
今回はぬくもりを感じる「木」をイメージを取り入れたwebデザインの特徴について考えてみました。

材質でサイトイメージが変わる

Q:木に対するイメージってなあに???
A:えーっと。。。あたたかい、親しみ、自然、優しい、アットホーム、懐かしい、落ち着く、素朴などなど

 

「木」とただ言われると一般的にはこのようなイメージが浮かび上がりました。
しかしwebサイトには制作するサイトのタイプと見ているターゲットを考える必要があるので、もう少し細かく見てみましょう。

1、「色が濃い」イメージ

151020_1
バーエスカ

 

151020_2
refocus

 

重厚、伝統的、ビンテージ、バー、夜、(色の濃さの具合によるけど男性的)
ターゲット:大人向け

2、「ナチュラルな茶色」イメージ

151020_3
Sony×映画「おと・な・り」

 

親しみがある、落ち着く、あたたかい、子ども向けサイトにいけそう
ターゲット:子供〜大人(中性的)

3、「白い」イメージ

151020_4
ガーデニング・エクステリア・外構|インナチュラル

 
あたたかい、若々しい、女性的、カフェ感
ターゲット:子供〜大人(女性より)

 

 

大きく分けてみただけでも木には3パターンの色があるなとわかりました。
(イメージに関しては私なりに考えてものをあげてみたので、少しずれてるかもしれませんが。。)

木のイメージをどこに使う?

次は木のイメージをどのように使うかという点を考えてみたいと思います。

1、写真で使う

151020_5
住たくeco工房

木へのこだわりが強い商材を取り扱うサイトでは、写真を大きく使ってそのものの魅力を十分に伝える。
写真を引き立てるために、背景などは逆に抑える。

2、背景などのテクスチャに使う

151020_6
入試ナビ|大阪経済法科大学

全体的に親しみやすい雰囲気を伝えたい時など。
背景にテクスチャを使う場合、コンテンツエリアの色合いに注意する必要がある。
背景で遊んだりすることができそう。

3、パーツで使う

151020_7
七彩空間
ロゴエリア、ヘッダー、ナビゲーション、など。パーツで使うことで温かみのある雰囲気をだしつつ、全体の締まりの役目もできる。

まとめ

ひとえに「木のイメージのwebデザイン」といっても、木の材質によってでこんなにもイメージが変わるものなんですね。取り入れる際には、ターゲットの設定とズレないように気をつけたいです。
また木のイメージの使い方も、むやみに入れるのではなく、きちんと設計して取り入れたいと思いました。

シェアする
コメントする

コメントを残す