やっぱり和が好き!和風デザインを研究してみて気付いた和み感を演出するための手法いくつか

Viewts-世界絶景-

みなさん、和風デザイン好きですか?僕は大好きです。和のテイストは僕の永遠のテーマですので自分のアイデア力向上がてらまとめました。さらに、これから和風デザインをしようと思ってる方、和風デザインにいつもうっとりしてしまう方の参考になればと思います。海外デザインもいいけど、やっぱ和だ、和、和。

ってことで和の暮らしを楽しむブログ-瑠璃色Tradition-さんのブログの下記エントリーをリスペクトさせていただいて、僕も和テイストのサイトをまとめてみたいと思います。



その前に、和風デザインとは

そもそも和風デザインとは何でしょう?何が和風だと感じさせるのでしょう?結論から言ってしまうと、和風デザインにみられる特徴としては、大きく分けて以下の4点にまとめられるかと思われます。

・エレガントに魅せる明朝体
・自然(山や花や葉など)や家紋などのシンボル(あとユラユラ)
・巧妙な縦使い(メニューやタイトルなど)
・日本独自の色彩(原色をほとんど使わない、濁色系)


これらを巧妙に取り入れているのがキレイな和風デザインの特徴とも言えます。だけど、それだけじゃない。この4つ以外にも隠された和み手法があるだろう…!ってことで僕の好きな、シンプルでかつほっこりさせられたサイトを一覧にして研究し、和みポイントをまとめてみました。

ちなみに日本の色彩を知るには下記サイトが便利です。

日本の伝統色 和色大辞典

http://www.colordic.org/w/

ってことで、以下のモダンな和風デザインを僕の気づいた視点でべた褒めしてみたいと思います。


美しい和風デザイン一覧

和倉の夕日に染まる宿「多田屋」

2007年度にグッドデザイン賞を受賞したことで一躍脚光を浴びた石川県にある温泉旅館「多田屋」のサイト。当時はFlashで豪快な躍動感が特徴でしたが、リニューアル後もやっぱりキレイですね。瑠璃色Tranditionさんでも紹介されてましたが改めてこちらでも。
http://tadaya.net/
和みポイント
・トップの夕日に染まる宿のキレイな写真
・ビビットな赤色がアクセントになっている花がら家紋
・スクロールすると見られるふにゃまる
・ボックスの角丸を使用
・よく見ると直線ではなく微妙にブレているライン
・あまりアイキャッチするアイコンは使わずに絶妙なマージンレイアウト


はなみち舎

岡山市のレトロモダンな雑貨・和風ファッションのお店のサイト。こちらもキレイな和風デザインで有名ですね。

和みポイント
・TOPのロゴの背景にある数本のユラユラ曲線
・追跡してくるメニューの鳥?やページトップボタンの可愛い蝶々
・メニューに触ると風鈴の音がなり揺れるような動きをする細部へのこだわり
・テキスト情報はセンターにまとめ、コンパクトかつシンプルに
・周りを味のあるイラストを螺旋状に配置しスクロールする楽しさを演出


源流の宿「帆山亭」

熊本にある黒川温泉旅館のサイト。緑の統一感がキレイですねーちなみに苔色(#69821b)は僕の大好物です。

和みポイント
・和風デザイン王道のユラユラ曲線
・トップのFlashに少し被るロゴの位置
・緑背景に薄いザラザラなテクスチャ
・写真を重ねたメニューと緑のグラデーション
・霞んだライン


浪速製餡株式会社

こだわりのあん作りに一筋、浪速製餡株式会社のサイト。ってかプチ抹茶餡食べたい。
http://www.naniwaseian.jp/
和みポイント
・トップページ背景に並ぶ思わず癒されてしまう各種あんこ
・JSのfadeInを使って次々にコンテンツを表示させるふんわり演出
・両サイドにイメージ写真を配置、テキスト情報はセンターのみの構造


人吉旅館

こちらも熊本県人吉市の老舗旅館サイト。天然温泉だそうで。このグレースケールの使い方は超絶すばらしいですね。

和みポイント
・トップページの写真表示がイカす
・メニューバーの動きがかっこいい(お料理や小京都)
・縦メニューをあえて右側に配置してるあたりもグッド
・スクロールしていくだけで次のページに進める工夫
 ┗メニューもハイライト表示
・全体的に写真きれい、ざらざらなラインもイケてる
・グレイ配色のバランスと各所にある薄いドロップシャドウが絶妙


株式会社中川政七商店

奈良県に本社を構える雑貨・インテリアだけでなくカフェ事業などを展開する企業サイトと、その店舗。
http://www.yu-nakagawa.co.jp/
和みポイント
・縦に分割することで和デザインを表現
・マウスオーバーしたときの写真がスライドで流れてキレイ
・優しいペールトーンで統一されたブランドイメージ造り


一菓素心・高山堂

兵庫や大阪に事業展開する和菓子店のサイト。大胆かつシンプルに、トップは写真のみ!Coolです。うまそう。
http://www.takayamado.com/
和みポイント
超シンプル!トップにうまそうな和菓子の写真(ランダム)
・メニューを左右に配置、トップではが写真がすべてを語る
・左右のメニュー固定、真ん中スクロール
・他ページもスゴくシンプルでアクセントに赤を少し使うだけ
・小ぶりのフォント


株式会社おびなた

そば粉製粉やそば(乾麺・生麺)製造および販売をしている企業のサイト。
http://www.obinata.co.jp/
和みポイント
・おなじみのユラユラ曲線
・右側の写真の使い方がうまい
・全体を囲うような枠がないので窮屈なイメージがない
・立体感を出すために薄っすらドロップシャドウ
・ライン+ドロップシャドウ





株式会社福井

三重県桑名市にある海苔を中心としたシーフードメーカー。
http://www.nori-fukui.co.jp/index.php
和みポイント
・背景ユラユラ曲線ですねわかります
・トップメニューの商品写真カラーが映えてアイキャッチする
・フッターの船と海の男感が和風で渋い


合掌レストラン 大蔵

名古屋市近郊の築300年の合掌造りを改築したモダン古民家レストラン。あぁ、よだれが…。

和みポイント
・インパクトのあるトップの波
・ヘッダー、フッター、ロゴの墨感
・なにげに追跡メニュー
・写真とテキスト量の絶妙なバランス


祇園辻利

京都宇治の老舗、説明いらずの行列の絶えない人気店ですね。I LOVE 辻利なのでございます。
http://www.giontsujiri.co.jp/gion/
和みポイント
・こちらも霞んだラインを採用
・縦書き多し、いい具合のバランスで配置された縦
・うるさくない縦の固定メニュー
・ダル系、ダーク系トーンのカラフルメニューが和む
っていうか辻利の抹茶アイス食べたい


松栄寿司 東口店

長野市のお寿司屋さん、一人で思わず「うまい(レイアウトが)」と口に出して言ってしまった。
http://www.h-matsue.com/
和みポイント
・この斜めと縦と写真とマージンの使い方は絶妙すぎる
・ロゴを真ん中、左右にメニュー、かっこいい
・見出しは明朝体、テキストはゴシックのバランス
・黒の塗りつぶし縦見出しが高級な和モダン感を醸し出している


美ささ苑

八王子にある日本料理屋さん。
http://www.misasaen.com/index.html
和みポイント
・ユラユラ曲線
・この優しいペールトーン配色大好き
・庭園が、素晴らしい


茶舗木蔭

兵庫県の伊丹高台に位置する日本茶の専門店。これは、和風テイスト!?和風レトロ?新しい和風テイスト。
http://chaho-kokage.com/
和みポイント
・ぎこちないアニメーションがとっても可愛い
・タイムスリップしたような気分にもなるけどレトロポップな色使い
・フッターも凝っている
・右上の掛け軸メニュー
・茶房ページ見ると抹茶飲みたい症候群にかかる


てのひら盆栽教室 櫻苑

福岡市にあるミニ盆栽教室のサイト。ミニ盆栽、日本を離れてから盆栽触れてないなぁ…僕のヤマモミジと長寿梅は元気だろうか…恋しい。
http://bonsaiouen.com/
和みポイント
・右メニュー
・ページ内の見出しが縦
・トップページが3カラムレイアウト、縦分割を意識


すみません後半バテました

ってことでどうでしたか?今回、紹介したサイトはどれも無難なレイアウトを避けつつ、斬新で、でも見やすさに配慮してるように思えました。たとえば明朝体だと文字が読みにくくなるイメージですが、見出しタイトルや写真を使って段落で情報をコンパクトにまとめることで回避していたり、見出しだけ明朝体にして他はゴシック体にするなどと工夫がみられましたね。あと、最初に上げた4つのポイント以外にも霞んだラインも多く使われていることもなるほどーと思いました。自分でまとめてみて、フォントの使い方・マージンの取り方・色使いなど改めて和風デザインをする上での勉強になりました。僕は学生時代に色彩検定2級を取得しましたが、改めて勉強しなおしたいなー。

ちなみに、実際にPhotoshopなどを使って作成する場合は、YATさんのブログの和や京都っぽさを演出するのに使えるPhotoshopのパターンとブラシ 全321個 + ブラシファイルの中身が見れるアプリケーションの記事が参考になると思います。

その他、こういうところもポイントなんじゃね?っていうのもあればコメントかTwitter(@yuuy0424)で教えて下さい。ではでは。
和最高。

この記事を友だちに共有する

ゆっくり茶でも飲みながら関連記事をどうぞ

いいねして、Facebookで最新情報をチェックしよう

このブログの最新記事情報はもちろん、Web・海外・旅行・留学・英語・デザインなど様々な情報を配信しています。応援よろしくお願いします。