WORKS
作品
温泉旅館月影荘
概要
自主制作として、箱根湯本にある架空の温泉旅館のホームページを制作しました。
OTA（オンライントラベルエージェンシー）を使うと、手数料などの費用がかかる上に旅館の魅力を十分に伝えきれないため、ホームページを制作する運びになりました。
ターゲット
関東在住で、特別な日の旅行として温泉旅行を検討している50代の男性。
目的
新規のお客様に旅館の雰囲気を伝え、宿泊の予約をしていただくこと。
情報設計
ターゲットが温泉旅行を検討している方のため、メインビジュアルには箱根の山が一望できる温泉の画像を配置し、目を引きます。
新規のお客様の獲得を目的としているため、メインビジュアル下から施設の雰囲気を伝えるセクションに入ります。
箱根湯本周辺の競合となる旅館を分析した結果、温泉・客室・料理の3つのセクションは必ず含まれており、館内の雰囲気を掴んでいただくには必要な情報であると考え、トップページに配置しました。
ご予約の前にメンテナンスや休館日等の情報を把握していただきたいため、コンバージョンエリアの前にニュースセクションを配置しました。
リピートのお客様がサイトを訪れることも想定し、PCではコンバージョンボタンを画面右上に追従させます。SPではスクロールすると画面下部にトップページに飛ぶボタン、アクセスページに飛ぶボタン、お知らせページに飛ぶボタン、メニューボタン、コンバージョンボタンの4つを固定で表示させ、すぐに求めているページに飛べるよう設計しました。
デザイン
「落ち着いてリラックスできる和風旅館」をテーマに制作しました。
旅館が歴史ある木造建築であるため、ベースカラーを茶色に。画像で館内の雰囲気を掴んでいただく目的もあるため、ベースカラーの茶色の明度を下げ、画像に視線がいくよう工夫しました。各セクションの見出し、装飾にはベースカラーの類似色を使用して統一感を持たせ、落ち着きが出るよう意識しました。
フォントからも伝統的な日本らしさが伝わるよう、Noto Serif JPを使用しています。ターゲットが50代で、老眼になる方も出てくることを考慮し、行間を広め且つコンテンツエリアのフォントサイズをPCでは18px以上、SPでは16px以上と大きめに設定しました。また、文字を認識しやすいよう、テキストに白色を使い、背景色とのコントラストをつけました。
和風な印象になるよう、メインビジュアル、各セクションの装飾、コンバージョンエリアに縦書き文字を入れています。
宿泊の予約をしていただくことが目的のため、コンバージョンエリアの背景色に変化をつけ、ユーザーの目に留まるよう工夫しました。
制作範囲・期間
ワイヤーフレーム：4日
デザイン：5日
コーディング：5日
使用ツール
ワイヤーフレーム：Figma
デザイン：Figma
コーディング：VSCode
