木とWEBデザインの関係に関する考察と、関連31サイトの紹介

日本の文化において木はなくてはならない物です。その為か木目を取り入れたデザインを見ているとどことなく心地良い印象を受けます。
そもそも印刷業界では紙は木から作られたもので、切っても切れない関係がありました。しかしデジタルと言われるいわばWEBのデザインになりその意識は薄れつつ有る感じがします。
とは言え、デザインに木を取り込むことはデジタルでも出来る事で実に多くのサイトが存在しています。

木の持つイメージ

一口に木と言っても姿は様々で、大木を見れば力強さ、苗木を見れば愛おしさ、葉っぱを見れば自然の優しさ、木材を見れば木のぬくもり。という風にどの姿を見たかで受けるイメージは大きく変わります。
また同じ姿でも木は種類によって色が様々なので、受けるイメージは多種多様になり、デザインの打ち合わせで木のイメージという一言では、その人がどういう意味の木をイメージしているか捉えづらいものがあります。
ですので相手に伝えるときはデザインのコンセプトを伝えると共に、それに適したものをイメージ出来るように伝えることが重要ではないか？と考えます。

木のパターンは様々

WEBデザインにおける木材の扱い

色々見て思いましたが背景に木材を使うケースが多いですね。背景はそのサイトの印象づけるのに一番役目を担っていると行っても過言ではないほど重要な部分になります。サイトに初めて訪問したユーザーがそのサイトに対し、どういう印象を持つかはファーストインプレッションが重要と言われますが、ページの多くを占める背景部分はそういう意味でユーザーの興味を視覚的にひきつけます。その部分に馴染みある木材を並べて配置することはユーザーの目を引くのに非常に効果的ですね。
また、同じ木材でも明るめの木材をチョイスすればサイト自体が明るく、清潔感のあるイメージに。暗めの木材をチョイスすることでテキストの視認性や、写真の視認性があがり見やすいサイトに仕上がったりと、目的に応じてチョイスする事は非常に重要です。

背景に木材を利用したサイト 17サイト

[browsershot url=”http://free.stocker.jp/” width=”426″ target=”_blank”]
フリー写真素材 :: Free.Stocker

[browsershot url=”http://mono-stock.com/” width=”426″ target=”_blank”]
mono-stock｜モノストック

[browsershot url=”http://shochu-hiball.jp/” width=”426″ target=”_blank”]
焼酎ハイボールブランドサイト「焼酎ハイボール倶楽部」 | 宝酒造株式会社

[browsershot url=”http://www.raymon.co.jp/index.php” width=”426″ target=”_blank”]
函館カール・レイモン～おいしい本格派ハム・ソーセージ。

[browsershot url=”http://www.o-mori.co.jp/” width=”426″ target=”_blank”]
おつまみ・珍味の大森産業株式会社

Spike Productions

[browsershot url=”http://www.plazastyle.com/cuddlesome/” width=”426″ target=”_blank”]
Cuddlesome

[browsershot url=”http://henryjones.us/” width=”426″ target=”_blank”]
Henry Jones

BISLEY PERFECT ORDER Online Store

[browsershot url=”http://www.respiromedia.com/” width=”426″ target=”_blank”]
Respiro Media website

nisgia.com | interactive design ※音が出ます

[browsershot url=”http://www.refocus.jp/” width=”426″ target=”_blank”]
暮らしと、写真と。refocus[+]

[browsershot url=”http://mazzamoveis.com/” width=”426″ target=”_blank”]
mazza moveis

[browsershot url=”http://www.share48.pl/” width=”426″ target=”_blank”]
WspoBwBasno

matergymnasium ※音が出ます

[browsershot url=”http://storybranding.jp/” width=”426″ target=”_blank”]
ストーリーブランディング

[browsershot url=”http://www.dzinecafe.com/” width=”426″ target=”_blank”]
Web Design Dubai

建築物や木の家具を用いたデザイン

上記はサイト自体への木の取り込みですが、建築物を大きく利用し、サイト全体のデザインに調和させたものも非常にインパクトがあります。ただし建築物等の場合クオリティの高い写真を活用しないと貧相なイメージを与える可能性が高いので、写真の選択は慎重に行う必要があります。
他にも同様のもので木製の家具も同じことがいえますが、この場合は白に近い背景に木製の家具を配置することで清潔感のある印象を与え、買い手にクリーンなイメージを与えているケースが多く感じます。