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

1.概要

学校の課題として、1年生の10月から11月の約1ヶ月間かけて、架空のレストラン「宿坊レストラン虎威殿」のサイトデザインを行いました。

1-1.レストランの詳細

・愛知県名古屋市名駅三丁目の歴史ある家屋をリノベーションし、誕生した「宿坊レストラン虎威殿」。江戸末期から現代まで名古屋駅の移ろいを見守ってきた建物。

・昼は旬の食材を使った膳や和菓子、日本茶・国産珈琲を、夜は行灯の灯りに包まれながら和会席や季節の料理を楽しめる。

1-2.制作要件

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

・都会の喧騒を離れた静けさと、和の伝統を大切にした空間づくりを通して、日本の食文化を体験できる場を目指している。

・近代的な高層ビル群の中にありながら、宿坊らしい落ち着きと品格を前面に打ち出したビジュアル表現を求めている。

・外国人観光客にも配慮し、「正しい日本文化を伝える」ことを重視する。メニューや内装はWebサイトを基に検討し、ブランドカラーは世界観に合わせて採用するが、ロゴの変更は不可とする。

-

2.作品紹介

2-1.調査

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

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

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

2-2.使用計画書の作成

2-3.ワイヤーフレーム

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

2-4.ポイント

メニューの表示の仕方

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

■余白の取り方

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

■写真の並べ方

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

■写真の色味

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

■バナー

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

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

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

■フッターの並べ方

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

-

3.感想

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

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