デザインの作り方と参考になるWebサイト15選2015年6月25日Web制作チュートリアルデザインデザインTweet皆もすなるまとめといふものを、我もしてみむとてするなり。こんにちは、デザイナーのフジコです。Webサイトを制作する際、さまざまなWebデザインのまとめサイトにお世話になっているのですが、つねづね自分でもまとめというものをしてみたいと思っていました。そごう美術館など、ここ最近は日本画の展覧会ばかり観ていました。自分の中で和が来てる!ということで、今回は「和風のWebデザイン」という切り口で、参考になる美しいWebサイトとともに、効果的に和風のデザインを作る方法をご紹介したいと思います。※掲載されている情報は、2015年6月現在のものです。URL等、変更となる場合がありますのでご了承ください。縦書きにする明朝体や筆文字のフォントを使って縦書きにすると、ぐっと和風になります。Webサイトですべて縦書きにするのは難しいため、見出しやメニューだけでも効果的です。一部分だけ縦書きにすることで、レイアウトにアクセントを加えることもできますね。辻利http://www.giontsujiri.co.jp/gion/サイト全体に縦書きを取り入れ、ページ毎に変化に富んだレイアウトで作られています。写真や背景のフチや罫線を筆のかすれのような表現にしたり、細かいところまで和の工夫が凝らされた美しいサイトです。個人的に好みなのは、店舗情報ページの縦書きのタブ。小さく添えられた京都の寺社やスカイツリーの絵も素敵です。ぎおん徳屋http://www.united-arrows.jp/harajuku/womens/tokuya/index.html1ページのみでコンテンツを読ませる形なので、ページ全体が縦書きになっているのが効果的なサイトです。上部に固定される横書きのメニューと、美味しそうな商品のイラストが、縦の流れの中でよいアクセントとなっています。和風の装飾やイラストを取り入れるメニューを縦書きにすると構成にも大きく関わりますが、見出しなどにちょこっと装飾を付け加えて、文字を明朝体にするだけでも、かなり和風のデザインになります。京のおつかいもん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サイト全体に使われた和紙のような背景は言うまでもなく、こちらのサイトもバナーや見出し一つ一つにも工夫を凝らしてあるので、参考になる部分が多いのではないでしょうか。カラフルなのですが、少し彩度を抑えた柔らかい色合いでまとまっているので、暖かさや親しみを感じるデザインになっています。参考になるデザインだったもので......。こちらは着物か千代紙のような様々な模様が背景に入っています。店舗のご案内ページの背景が凝っていて可愛らしいです(なぜここだけ背景が違うのかしら?)各ページのタイトル部分も千鳥や笹などのイラストが添えられていて、繊細にまとめられていますね。和風の色を使う和風の色の中には鮮やかなものもありますが、黄色や緑などの明るい色でも少し彩度を抑えるだけで、ぐっと和風になります。以下のサイトが参考になります。日本語の色の名前も興味深いですね。Japan亀屋万年堂http://www.navona.co.jp/トップページのダイナミックな写真を縦断するように置かれた縦書きのメニューも素敵ですが、特筆すべきはその色づかい。メニューの部分に、絵の具で描いたような和風の色が点々と並んでいます。色数を多く使っていますが、少ない面積でポイントを絞って使っているので、上品にまとまっていますね。裏具http://www.uragu.comこちらのサイトは白地に黒色のみ、ごく一部に赤色を使っています。他の和風のWebサイトでも、同様の色づかいがよく見られました。白い和紙に墨で書いて落款を押したようなイメージなのかもしれませんね。モノクロで抑えたデザインの中で商品ページの写真が映えているので、ぜひご覧ください。良いデザインというのは、色をたくさん使わなくても美しく、内容が正しく伝わるものです。実店舗も素敵こちらは町屋の中の入り組んだところにある、一筆箋などを扱う紙小物のお店です。何年か前に伺った際、整然とした店内に美しい文具が並んでいて、お店とWebサイトのイメージが一貫している点が素晴らしいなと感じました。濱文様http://www.hamamonyo.jp/こちらは手ぬぐいを扱うお店ということで、染め物をイメージした藍色で統一。トップページのお知らせは、やさしい和色のアイコンで分類されています。ヘッダーとフッター周りにチラリと見えるドットは、手ぬぐいの定番である豆絞りのイメージですね。和風の写真を使う敢えて和風の写真を使うというよりは、扱っているものが和風であれば自然とそういった写真を載せることになるかと思います。その中で、上手い写真の使い方をしているな、と感じたサイトをご紹介します。喜田家http://rokuninshu.jp/きれいな和菓子が、TOPページのメイン画像やサブページのヘッダー部分に均等に配置されています。寄りではなく引きの写真を使うことで、色とりどりで可愛らしいお菓子の魅力がよく伝わり、画面が華やかになっています。見栄えのする商品の場合、いかに画面の中で活かせるかがポイントです。有田焼のすべてhttp://aritayaki.jp/もう有田焼そのものが美しいから...!という話なのですが、その美しさを全面に押し出すように、コンテンツの枠に対して少しはみ出る形で焼き物が置かれているのがポイントです。床面に反射していることで、焼き物の質感や量感が感じられるのも良いですね。番外編・いっそ和風じゃなくてもいい今回和風のサイトを探してみて、意外とド定番なデザインのサイトは少なく感じました。扱う商品が和風のものでも、ターゲット層によっては敢えてサイトデザインを和風にしないというのもひとつの手ですね。MAISONhttp://www.doublemaison.com「着物と洋服の垣根を越えたコーディネートを提案する」というコンセプトのサイト。比較的若い女性がターゲットかと思われるこのサイトは、着物姿の女性たちのイラストが魅力的です。筆ではなく色鉛筆のタッチというのも、敢えて和風にしないコンセプトの一貫かもしれません。黒船http://www.quolofune.com/「黒船」という店名の示すとおり黒がベースカラー。サイトのデザイン自体はほとんど和風ではないのですが、モノクロで徹底され、大胆に空間を使ったサイトは書のような雰囲気すらあります。和洋菓子のお店にもかかわらず一切甘さのないデザインが、”攻めているなあ”という印象です(だって英語表記が「QUOLOFUNE」ですよ)パッケージも攻めてますさらにオンラインショップを見ていただくとわかりますが、こちらはパッケージデザインにも、その一貫したコンセプトが感じられます。力強い筆文字と繊細なアルファベットが組み合わされたモノクロのデザインは、デパ地下の中でも目を惹きます。和風のサイトを探す方法この記事を書くにあたって、たくさんのサイトを検索しました。)......などなど。寺社・仏閣や観光協会や旅行会社のキャンペーンサイトは数が多いので、玉石混淆ではありますが、手のかかった美しいサイトも数多くあるので、大変参考になります。検索するとよいかと思います。アナログなものにも触れよう何年も前、印刷系で国内旅行関係の仕事をしていた時に、和風のデザインを求められることがよくありました。その時は・駅に置いてある旅行パンフレットや、日本画・骨董などの展覧会のチラシを片っ端から集める・伝統芸能の雑誌や仏像のムックなどを買う・きれいな和紙を画材屋さんで探してスキャンして使うなど、手と足を使って情報や素材を集めたのを覚えています。当時はとにかく数をこなすような仕事だったので、自分の中の「和風のデザイン」のストックが尽きて途方に暮れたとこもありました。自分の手で探したり、工夫したものは必ず身になります。仕事は大抵スピードを求められるので、ネットで素材や参考になるものを素早く見つけて利用する能力も重要ですが、時にはアナログなものに触れて、デザインのイマジネーションやインスピレーションを高めるのも大事だと思います。紙媒体の文字組など、かなり参考になりますよ。次の記事へ株式会社ライズウィル人に、企業に、社会に貢献するサービスを提供するITソリューション企業の株式会社ライズウィルです。ライズウィルブログでは、システム開発、Web制作、デザインなどのITに関するためになる情報や、社内のイベント、お知らせなどを掲載していきます。求める人材Web系、もしくはオープン系の開発実務1年以上の経験をお持ちの方。