和風カフェ 虎威殿

OVERVIEW

『和風カフェ 虎威殿』の架空Webサイトデザイン

01  コンセプト

古くから佇む古民家をリノベーションし、令和4年にリニューアルオープン予定のカフェ虎威殿。色使いや余白で上品さを演出しつつも、あくまでも『和風』カフェなので、古臭くならないように、所々ポップさを取り入れたデザインにしました。

02  要望

「名古屋駅タイムスリップ」というコンセプトのもと、開発が進む名古屋駅東に

昔からある古民家を、軽食やお茶が楽しめるカフェに改装しました。ビジュアル

は、移り変わる都会の街並みに、品のある和風テイストを前面に演出していただ

きたいです。外国人も立ち寄りやすい場所にあるため、“正しい日本文化を伝えた

い”と考えています。メニューや内装などはWebサイトをベースに検討しますの

で、ご提案ください。ブランドカラーとして採用したいと考えています。ただし、

ロゴの変更は不可です。


03  仕様

  • バナーやマップは自作すること
  • 画像やロゴは準備されたものを使用すること

04  使用ツール

XD・Illustrator

05  制作期間

1ヶ月半

06  工夫した点

このサイトをデザインする上で工夫した点は、まず余白を意識することです。古くからある浮世絵や襖絵などの日本の作品を見てみると、どれも少し多めに余白を取っていることがわかります。なのでサイト内の余白は少し多めに取り、デザインを綺麗に見せるように心がけました。他にも、デザインが古臭くならないようにページ内の画像のいくつかを丸く切り取って配置したり、ページ下部のバナーも曲線や丸を使ったデザインにしたり、和柄を入れるにしてもあえて明るめの水色で表現したりすることで、ポップさを演出し、このサイトを訪れた方に少しでも気軽にお店に入ってもらえるように考えてデザインしました。

07  制作過程

こちらはXDに取り掛かる前に描いたラフ画になります。
XDに入ってから変更した点は、

  • ファーストビュー内に和雲、見出しの背景に筆のイラストを取り入れ、より和っぽさを表現した。
  • 見出しの最初の文字を大きく、一部色も変えることでちょっとしたアクセントを足し、目立つようにした。
  • Instagramのスライドショー写真は、ただ流すだけではなく有効活用して、お店のメニュー紹介も兼ねたものにした。
  • フッター内にSNSボタンを配置しようと思っていたが、いざXDで実装してみると背景とマッチせず違和感が生まれたので、あえてフッターから外し、スクロールとともについてくるSNSボタンに変更した。

です。

08  最終デザイン案