Facebook 【Webサイト】宿坊レストラン 虎威殿
Logo

【Webサイト】宿坊レストラン 虎威殿

クレジット
Avatar
WEBデザイナー
【Webサイト】宿坊レストラン 虎威殿-1
シェア
制作ノート
制作について

概要

愛知県名古屋市名駅三丁目の歴史ある家屋をリノベーションし、

和六年に誕生した「宿坊レストラン虎威殿」。

江戸末期から明治・大正・昭和・平成・和へと、六つの時代を超えて名古屋駅の移ろいを見守ってきたこの建物は、都会の真ん中にありながら、静謐な時間と日本の伝統を今に伝えています。

リニア開業に向けて開発が進む高層ビル群の中で、宿坊を思わせる和の佇まいはひときわ異彩を放ち、訪れる人を非日常の世界へと誘います。

店内には、収集家でもあるオーナーが所蔵する水墨画や陶器などの美術品が飾られ、和の空間に深みを添えています。

昼は、旬の食材を用いた膳や和菓子、日本茶・国産珈琲などを味わえるランチタイム。

夜は、行灯の灯りに包まれた宿坊の空間で、和会席や季節の料理をゆったりと愉しむことができます。

尾張名古屋の真ん中で、時を越える宿坊の趣とともに、心を満たすひとときをお届けします。

要望

「尾張名古屋の真ん中で、宿坊の膳を愉しむ」というコンセプトのもと、名古屋駅三丁目に残る歴史ある家屋を、宿坊の趣を感じられるレストランへと改装しました。

都会の喧騒を離れたかのような静けさと、和の伝統を大切にした空間で、日本の食文化を体験いただける場を目指しています。

ビジュアル面では、近代的な高層ビルが立ち並ぶ都市の中にありながら、宿坊らしい落ち着きと品格を前面に演出してください。

また、外国人観光客にも訪れていただきやすい立地のため、“正しい日本文化を伝える”という想いを大切にしています。

メニューや内装の方向性はWebサイトをベースに検討いたしますので、ご提案をお願いします。

ブランドカラーはサイト全体の世界観に合わせて採用したいと考えていますが、ロゴの変更は不可とします

作品紹介

1.調査

制作を始める前に、まず調査を行いました。

いて調査を行いました。先生が用意してくださった複数のWebサイトのメインビジュアルを閲覧し、和風度を5段階で評価しながら、その理由を話し合い、分析しました。

約100枚分の検証を重ねる中で、「縦書き」「色使い」「明朝体」が和風らしさを印象づける要素であることに気づきました。そこで、これらの要素をデザインに取り入れ、和風らしさが表現できるよう意識しています。

また、コンテンツの配置や余白の使い方を学ぶため、和風の旅館サイトも参考にしました。

2.使用計画書の作成

image

3.ワイヤーフレーム

image

複数のサイトを参考にしながらワイヤーフレームを作成しました。サイト全体の雰囲気が伝わるよう、コンテンツの並び順や情報の見せ方を意識して構成しています。

4.ポイント

・メニューの表示の仕方

ヘッダーを縦書きのまま固定すると、他のコンテンツが見づらくなると考え、メインビジュアル部分のみ縦書きで表示されるようにしました。また、文字のみでは視認性が下がると感じたため、背景に薄い黒を入れ、読みやすさを確保しています。

・余白の取り方

宿坊レストランらしい品格や落ち着き、都会の喧騒から離れた静けさを表現するため、全体にゆとりのある余白を設けました。

・写真の並べ方

メインビジュアルの下からお店の雰囲気が自然に伝わるよう、食事や外観など複数の写真を組み合わせて構成しています。タイトルがなくても内容が伝わるよう、写真の種類ごとに配置に変化をつけました。

・写真の色味

彩度は大きく変えず、落ち着いた印象になるよう全体のあたたかみをやや抑えています。

・バナー

それぞれのバナーが同じ印象にならないよう、Pinterestで多くの参考資料を調べながら制作しました。

image

「紅葉の膳」では、タイトルに合わせて紅葉の写真を2枚並べて配置しています。中央に和風らしい花形の背景を入れ、日付部分には帯をあしらうことで、タイトルとは異なる形にし、日付にも視線が向くよう工夫しました。

image

右のバナー「陶と茶の集い」でも、タイトルに合った写真を選び配置しています。写真が落ち着いた印象だったため、それに合わせて文字背景を紺色に設定しました。また、和風らしさを演出するために雲の形をIllustratorで制作し、装飾として取り入れています。

・フッターの並べ方

メインビジュアルのヘッダーと統一感を持たせるため、メニュー部分は縦に並べました。サイト全体の雰囲気を損なわないよう、コピーライトは控えめにし、濃いグレーで記載しています。

感想

初めてFigmaを使用してWebデザインを制作したため、操作に慣れながらの作業となりました。制作には時間がかかりましたが、余白の取り方やレイヤーの整理などを意識し、自分以外の人が見ても扱いやすいデザインを目指すことができたのは良い経験になりました。

また、作品発表の際に「せっかく作ったバナーが小さい」というご指摘をいただきました。今後はバナーのサイズ感や見せ方についてもさらに研究し、より伝わりやすいデザインを制作していきたいです。

シェア
mikoの他の作品
画像
作品を見る
名刺制作