作ったもの・デザインしたもの

宿坊レストラン虎威殿|サイトデザイン

概要

「和風らしさ」をテーマに架空の宿坊レストラン「虎威殿」のサイトデザインを行いました。

制作期間

15時間

制作範囲

デザイン

使用ツール

Figma・Illustrator・Photoshop

こだわったところ

サイトデザイン

配色

全体の色味は、日本らしい落ち着きと上品さを感じられる伝統色で統一しました。料理や店舗写真を引き立てるため、 主張が強すぎないベースカラーを採用し、アクセントとして深みのある紅色を使用することにしました。

  • MAIN COLOR

    #1c1c1c

  • ACCENT COLOR

    #b42141

  • TEXT COLOR

    #1c1c1c

  • BASE COLOR

    #FFFFFB

デザイン

サイト全体で和風の雰囲気が伝わるよう、写真の配置や選定にこだわりました。背景には和紙をイメージした装飾を取り入れ、デザイン全体のイメージを統一しています。 配色は使いすぎないように意識し、シンプルにまとめることで写真を引き立たせました。また、過度な装飾は避け、余白や色使いによって静けさと高級感を表現しています。 和風の要素を強調しすぎるとデザインが騒がしくなってしまうため、全体として落ち着いた雰囲気になるようバランスを意識して制作しました。

バナー

陶と茶の集い

抹茶や茶道具の写真を使用し、落ち着いた和の雰囲気を表現しました。 背景には和柄を取り入れ、 装飾には和風の雲のモチーフを使用することで、日本らしい空気感を演出しています。

紅葉の膳

紅葉をイメージした赤色をアクセントとして使用し、 背景には落ち着いた紺色を採用することで、和の高級感を表現しました。

地図

来店者が迷わず店舗へ訪れることができるように、 シンプルで分かりやすい案内地図を制作しました。 和風サイトの雰囲気に合わせ、 筆で描いたような手書き風の線を使用し、温かみのあるデザインにしています。 また、駅や目印となる建物を配置することで、 初めて訪れる人でも位置関係が理解しやすいよう工夫しました。

ハンバーガーメニュー

左側に写真を配置することで、サイト全体の和風の雰囲気を崩さない構成にしました。 また、主要ページへの導線や予約ボタンを分かりやすく配置し、操作のしやすさにも配慮しています。 デザインの雰囲気を保ちながら、ユーザーが目的のページにアクセスしやすいよう、使いやすさとの両立を意識して制作しました。

感想

大変だったこと

今回の制作では、初めて Figma を使用してデザインを行ったため、操作や機能に慣れるまでに時間がかかりました。 また、「和風」というテーマを具体的なデザインに落とし込むことにも苦労しました。和風らしさを表現しながらも、装飾が多くなりすぎないようバランスを調整し、全体として落ち着いた雰囲気になるよう意識して制作しました。