こんにちは、デザイナーのフジコです。
Webサイトを制作する際、さまざまなWebデザインのまとめサイトにお世話になっているのですが、つねづね自分でもまとめというものをしてみたいと思っていました。
そこで、どんな切り口にしようかと考えたところ、
片岡球子展 東京国立近代美術館
若冲と蕪村展 サントリー美術館
那波多目 功一展 そごう美術館
など、ここ最近は日本画の展覧会ばかり観ていました。
自分の中で和が来てる！ということで、今回は「和風のWebデザイン」という切り口で、参考になる美しいWebサイトとともに、効果的に和風のデザインを作る方法をご紹介したいと思います。
※掲載されている情報は、2015年6月現在のものです。URL等、変更となる場合がありますのでご了承ください。
縦書きにする
明朝体や筆文字のフォントを使って縦書きにすると、ぐっと和風になります。ただ、Webサイトですべて縦書きにするのは難しいため、見出しやメニューだけでも効果的です。
一部分だけ縦書きにすることで、レイアウトにアクセントを加えることもできますね。
辻利 http://www.giontsujiri.co.jp/gion/
サイト全体に縦書きを取り入れ、ページ毎に変化に富んだレイアウトで作られています。
写真や背景のフチや罫線を筆のかすれのような表現にしたり、細かいところまで和の工夫が凝らされた美しいサイトです。
個人的に好みなのは、店舗情報ページの縦書きのタブ。
小さく添えられた京都の寺社やスカイツリーの絵も素敵です。
ぎおん徳屋 http://www.united-arrows.jp/harajuku/womens/tokuya/index.html
1ページのみでコンテンツを読ませる形なので、ページ全体が縦書きになっているのが効果的なサイトです。
上部に固定される横書きのメニューと、美味しそうな商品のイラストが、縦の流れの中でよいアクセントとなっています。
和風の装飾やイラストを取り入れる
メニューを縦書きにすると構成にも大きく関わりますが、見出しなどにちょこっと装飾を付け加えて、文字を明朝体にするだけでも、かなり和風のデザインになります。
京のおつかいもん http://www.kyonootsukaimon.net
メニュー部分の竹のような文様や、サイドメニューの大文字焼きなど、ところどころに和や京都をイメージさせるものがあしらわれています。
また、「京」の文字を祇園祭の山鉾に見立てたロゴも、サイトの和風らしさに一役買っていますね。
ECサイトなので、商品が魅力的に見えるということが大事。
見やすく使いやすく、装飾しすぎないところもポイントです。
金沢・ヤマト醤油味噌 http://www.yamato-soysauce-miso.co.jp/
サイトを開いてまず目を惹くのが、メニュー部分の文様のようなアイコン。
それと、フッターの上のイラストも、木版画のようで凝っています。
その他にもサイトの落ち着いた色使いや背景、罫線の工夫など、参考になる部分がたくさんあります。
歌舞伎美人（かぶきびと） http://www.kabuki-bito.jp/
情報量の多いサイトですが、頭文字を平仮名で強調した、かるたのような見出しになっていたり、松や鳳凰の文様が入っていたりと工夫されています。
黒● 橙色● 緑色●のザ・歌舞伎な色合いを使うと、ぐっと和風な感じになりますね。
和風の背景を使う
和紙や着物の柄を背景にするのも一つの手です。端をちぎったような質感にしたり、筆文字にしたりすると、より効果的です。
巡る奈良 http://www3.pref.nara.jp/miryoku/megurunara/
“和風の背景を使う”カテゴリとしていますが、こちらのサイトのデザインはあらゆる点で参考になるかと思います。
和紙や文様の入った背景、筆で引いたような罫線、それぞれの見出しやバナー、アイキャッチにも和風のあしらい……などなど、挙げればキリがありません。
また、内容によってページ毎のレイアウトやデザインがかなり違っていて、まるで雑誌のよう。
同じようなコンテンツの場合は基本的な構成を揃えたり、共通のアイコンを使っているので、雰囲気をがらっと変えながらもバラバラに見えません。
嵐電 http://randen.keifuku.co.jp
サイト全体に使われた和紙のような背景は言うまでもなく、こちらのサイトもバナーや見出し一つ一つにも工夫を凝らしてあるので、参考になる部分が多いのではないでしょうか。
かなりカラフルなのですが、少し彩度を抑えた柔らかい色合いでまとまっているので、暖かさや親しみを感じるデザインになっています。
嵐山駅 はんなり・ほっこりスクエア http://www.kyotoarashiyama.jp
また嵐電関係を紹介してすみません！ 参考になるデザインだったもので……。
こちらは着物か千代紙のような様々な模様が背景に入っています。
特に店舗のご案内ページの背景が凝っていて可愛らしいです（なぜここだけ背景が違うのかしら？）
各ページのタイトル部分も千鳥や笹などのイラストが添えられていて、繊細にまとめられていますね。
和風の色を使う
和風の色の中には鮮やかなものもありますが、黄色や緑などの明るい色でも少し彩度を抑えるだけで、ぐっと和風になります。以下のサイトが参考になります。日本語の色の名前も興味深いですね。
日本の伝統色 和色大辞典 – Traditional colors of Japan
亀屋万年堂 http://www.navona.co.jp/
トップページのダイナミックな写真を縦断するように置かれた縦書きのメニューも素敵ですが、特筆すべきはその色づかい。
メニューの部分に、絵の具で描いたような和風の色が点々と並んでいます。
色数を多く使っていますが、少ない面積でポイントを絞って使っているので、上品にまとまっていますね。
裏具 http://www.uragu.com
こちらのサイトは白地に黒色のみ、ごく一部に赤色を使っています。
他の和風のWebサイトでも、同様の色づかいがよく見られました。
白い和紙に墨で書いて落款を押したようなイメージなのかもしれませんね。
モノクロで抑えたデザインの中で商品ページの写真が映えているので、ぜひご覧ください。
良いデザインというのは、色をたくさん使わなくても美しく、内容が正しく伝わるものです。
実店舗も素敵
こちらは町屋の中の入り組んだところにある、一筆箋などを扱う紙小物のお店です。
何年か前に伺った際、整然とした店内に美しい文具が並んでいて、お店とWebサイトのイメージが一貫している点が素晴らしいなと感じました。
何年か前に伺った際、整然とした店内に美しい文具が並んでいて、お店とWebサイトのイメージが一貫している点が素晴らしいなと感じました。
濱文様 http://www.hamamonyo.jp/
こちらは手ぬぐいを扱うお店ということで、染め物をイメージした藍色で統一。
トップページのお知らせは、やさしい和色のアイコンで分類されています。
ヘッダーとフッター周りにチラリと見えるドットは、手ぬぐいの定番である豆絞りのイメージですね。
和風の写真を使う
敢えて和風の写真を使うというよりは、扱っているものが和風であれば自然とそういった写真を載せることになるかと思います。その中で、上手い写真の使い方をしているな、と感じたサイトをご紹介します。
手わざの光る美味しい菓子・六人衆（ROKUNIN-SHU）by 喜田家 http://rokuninshu.jp/
きれいな和菓子が、TOPページのメイン画像やサブページのヘッダー部分に均等に配置されています。
寄りではなく引きの写真を使うことで、色とりどりで可愛らしいお菓子の魅力がよく伝わり、画面が華やかになっています。
特に見栄えのする商品の場合、いかに画面の中で活かせるかがポイントです。
有田焼のすべて http://aritayaki.jp/
もう有田焼そのものが美しいから…！という話なのですが、その美しさを全面に押し出すように、コンテンツの枠に対して少しはみ出る形で焼き物が置かれているのがポイントです。
床面に反射していることで、焼き物の質感や量感が感じられるのも良いですね。
番外編・いっそ和風じゃなくてもいい
今回和風のサイトを探してみて、意外とド定番なデザインのサイトは少なく感じました。扱う商品が和風のものでも、ターゲット層によっては敢えてサイトデザインを和風にしないというのもひとつの手ですね。
DOUBLE MAISON http://www.doublemaison.com
「着物と洋服の垣根を越えたコーディネートを提案する」というコンセプトのサイト。
比較的若い女性がターゲットかと思われるこのサイトは、着物姿の女性たちのイラストが魅力的です。
筆ではなく色鉛筆のタッチというのも、敢えて和風にしないコンセプトの一貫かもしれません。
黒船 http://www.quolofune.com/
「黒船」という店名の示すとおり黒がベースカラー。
サイトのデザイン自体はほとんど和風ではないのですが、モノクロで徹底され、大胆に空間を使ったサイトは書のような雰囲気すらあります。
和洋菓子のお店にもかかわらず一切甘さのないデザインが、”攻めているなあ”という印象です（だって英語表記が「QUOLOFUNE」ですよ）
パッケージも攻めてます
さらにオンラインショップを見ていただくとわかりますが、こちらはパッケージデザインにも、その一貫したコンセプトが感じられます。
力強い筆文字と繊細なアルファベットが組み合わされたモノクロのデザインは、デパ地下の中でも目を惹きます。
力強い筆文字と繊細なアルファベットが組み合わされたモノクロのデザインは、デパ地下の中でも目を惹きます。
和風のサイトを探す方法
この記事を書くにあたって、たくさんのサイトを検索しました。今回、私が実際に検索した切り口やキーワードをご紹介します。
- 寺社・仏閣
- 観光協会や旅行会社のキャンペーン
- 和菓子（女性らしいものを探すのであれば『和カフェ』『和コスメ』なども）
- 着物
- 酒（キーワードとしては『日本酒』『焼酎』『酒蔵』など）
特に寺社・仏閣や観光協会や旅行会社のキャンペーンサイトは数が多いので、玉石混淆ではありますが、手のかかった美しいサイトも数多くあるので、大変参考になります。
キーワードとしては『京都』『奈良』『金沢（今熱い！）』+『寺』『神社』『観光』などで検索するとよいかと思います。
アナログなものにも触れよう
何年も前、印刷系で国内旅行関係の仕事をしていた時に、和風のデザインを求められることがよくありました。その時は
・駅に置いてある旅行パンフレットや、日本画・骨董などの展覧会のチラシを片っ端から集める
・伝統芸能の雑誌や仏像のムックなどを買う
・きれいな和紙を画材屋さんで探してスキャンして使う
など、手と足を使って情報や素材を集めたのを覚えています。
当時はとにかく数をこなすような仕事だったので、自分の中の「和風のデザイン」のストックが尽きて途方に暮れたとこもありました。
しかし、自分の手で探したり、工夫したものは必ず身になります。
仕事は大抵スピードを求められるので、ネットで素材や参考になるものを素早く見つけて利用する能力も重要ですが、時にはアナログなものに触れて、デザインのイマジネーションやインスピレーションを高めるのも大事だと思います。
紙媒体の文字組など、かなり参考になりますよ。
