和風カフェ 虎威殿　Webサイト トップページ デザイン

01. 基本情報

制作期間：7日
担当範囲：すべて
使用ソフト・技術：
XD / Illustrator / Photoshop

02. コンセプト

愛知県名古屋市名駅三丁目の古くから佇む古民家をリノベーションし、令和四年にオープン予定の「和風カフェ 虎威殿」。

和風カフェ 虎威殿の上品かつ少し高級感・特別感のある店の雰囲気を表現しました。

03. 概要

愛知県名古屋市名駅三丁目の古くから佇む古民家をリノベーションし、令和四年にオープン予定の「和風カフェ 虎威殿」。
江戸末期から明治・大正・昭和・平成・令和と五時代の名古屋駅を見守ってきた家屋からは、ゆったりとした時間の流れと古き良き日本の伝統を感じることができます。
リニア駅の開発も進む、高層ビルと民家が立ち並ぶ名古屋の中心地に、ひときわ異彩を放つ日本伝統家屋の外観は、まさに時代を遡ってタイムスリップしたかのよう。
収集家でもあるオーナー所蔵の水墨画や陶器など、日本芸術の逸品が飾られた店内に入ると、脈々と受け継がれてきた伝統を肌で感じられます。
昼間のカフェメニューでは日本茶や和菓子を堪能でき、珈琲は国産豆を使用。もちろん軽い食事もいただけます。夕方になると18時からは、完全予約の夜のディナー、懐石コース料理を提供し、特別な夜を演出します。

04. 要望

「名古屋駅タイムスリップ」というコンセプトのもと、開発が進む名古屋駅東に昔からある古民家を、軽食やお茶が楽しめるカフェに改装しました。
ビジュアルは、移り変わる都会の街並みに、品のある和風テイストを前面に演出していただきたいです。
外国人も立ち寄りやすい場所にあるため、“正しい日本文化を伝えたい”と考えています。
メニューや内装などはWebサイトをベースに検討しますので、ご提案ください。
ブランドカラーとして採用したいと考えています。
ただし、ロゴの変更は不可です。

05. 制作過程

05-1. 使用する色・フォントを決める

メインカラーのは、日本で江戸時代から続いている藍染をイメージして藍色に決定し、古き良き日本の伝統を肌で感じ ることができる、「名古屋駅タイムスリップ」というコンセプトに沿うようにしました。アクセントカラーは、上品かつ少し高級感・特別感のある店の雰囲気を表現するために、辛子色を使用しました。主にこの 2 色を使用し、その他はこの 2 色を際立たせる為に目立たない色を使っています。

フォントは、読みやすく上品な游教科書体を使用しています。

05-2. クロッキー帳にアイデア出し、ワイヤーフレーム作成

思いついた案などをクロッキー帳に書き出し、全体の構成を決めました。

また、Illustratorでトレースするために、使用したいイラストも描きました。

05-3. イラスト作成提灯や富士山、和傘や桜など、和を意識したイラストをIllustratorで作成しました。
マップもIllustratorで制作しました。

05-4. XDでデザイン制作

XDで全体のトップページ全体のデザインを制作しました。

06. 工夫した点

画像は全体的に落ち着いた雰囲気のものを使用し、伝統的な趣を感じとれるよう工夫しました。
固い印象 にならないように、所々に曲線を使用して、柔らかく上品な和の雰囲気を表現しました。
ファーストビュー では、画像を暗くし、文字やロゴを白色にして配置しました。グローバルナビゲーションは、縦書きにし、 横に配置している縦線は、書道をイメージして作成しました。
外国人の方も立ち寄るお店とのことだった ので、言語切替を左下に配置して、日本語と英語を切り替えられるようにしました。
主張の激しくない和 紙を背景に使用したり、数種類の和柄を配置したりと、より日本を感じられるように制作しました。
昼と 夜の差別化をするために、提灯のイラストを用いて、提灯をクリックすることで、昼と夜それぞれの店内 の画像を切り替えられるようにしました。
使用するイラストも、幼い印象にならないように工夫しました。
 メニューで使用されている画像は、切り抜いて配置することで、より料理を目立たせるようにしました。

07. 完成作品

08. まとめ

架空のお店のWebサイトのデザイン制作は初めての試みでした。
名古屋の中心地にある、古き良き日本の伝統を肌で感じられる古民家のカフェということで、和の雰囲気に少し今っぽさも加えたデザインを意識して制作しました。
お店のコンセプトやご要望を意識しながらデザインすることが、難しくもあり制作していてとても楽しかったです。