サービス：Studioサイト制作代行
納期：2026年7月1日〜2026年10月20日（約4ヶ月）
課題
- 全21室・10タイプの客室を、宿泊を検討する方が比較しやすい形で見せる必要があった
- エステ、サーフィン、水族館チケット、ディナーなど、プランやオプションの選択肢が多く、整理が必要だった
- 送迎サービスなどの情報を、ホテル側で随時更新できる仕組みが求められていた
- スマートフォンからの閲覧を前提に、予約・問い合わせへの導線を分かりやすくする必要があった
実施内容
- トップページから客室・お食事・プラン・お知らせへ進める全体構成の設計
- 人数・広さ・ベッドを揃えて掲載した客室一覧ページの制作
- 朝食・夕食・提携レストランの情報をまとめたお食事ページの制作
- 宿泊プランの詳細ページと、インルームエステ・サーフィン体験レッスンのオプションページの制作
- ケーキ・花束・ディナー・サーフィンの申込みをまとめた専用フォームの設計
- 電話・LINE・フォームの3つの窓口を備えたお問い合わせページとFAQの制作
- 日本語・英語の切り替えと、ホテル側で更新できるお知らせ機能の構築
成果
- 客室を同じ項目で比べられ、各客室の特徴を確認しながら選べる構成を実現
- プランの詳細確認から宿泊予約、オプションの申込みまでを一続きで案内し、スマートフォンでは予約ボタンを常に表示する導線を整備
- 電話・LINE・フォームから、利用者が連絡しやすい方法を選べる窓口を用意
- お知らせ機能により、送迎サービスなどの情報をホテル側で更新できる体制を構築
担当者コメント
BREATH HOTEL様のサイトでは、ホテルが持つ落ち着いた空気感を保ちながら、予約や問い合わせまで迷わず進める構成にすることを重視しました。
客室は10タイプあり、プランやエステ、サーフィンなど選択肢も多いため、情報をどう整理するかが最初の大きなテーマでした。客室は人数・広さ・ベッドを同じ並びで比較できる一覧にし、オプションの申込みは用途ごとにタブで切り替えられるフォームへまとめています。
デザインはベージュを基調に、明朝体の文字組みと余白で静けさを表現し、江ノ島を望む海の写真を印象的に配置しました。宿泊を検討する方が、滞在のイメージを持ったまま予約へ進めるサイトになったと感じています。
プロジェクトの背景
BREATH HOTEL様は、神奈川県藤沢市鵠沼海岸にある全21室のリゾートホテルです。
癒しとくつろぎをコンセプトに、江ノ島を望むオーシャンビューの客室や、マイクロナノバブル・ミストサウナなどの設備、インルームエステやインルームダイニングを提供しています。16歳以上の方を対象とし、大人が静かに過ごせる滞在を大切にされているホテルです。
今回は公式サイトの全面リニューアルとして、複数の制作会社を比較検討されたうえで弊社にご依頼いただきました。初回の打ち合わせでページ構成やスケジュールのイメージを共有し、制作を進めました。
抱えていた課題・情報整理
ヒアリングでは、客室・お食事・プラン・アクセス・お問い合わせなど、掲載したい情報を一つずつ確認しました。
BREATH HOTEL様は客室タイプが多く、プランやオプションも複数あるため、すべてを同じ重みで並べると、利用者が何を選べばよいか分かりにくくなります。
そこで、情報を「泊まる（客室）」「食べる（お食事）」「過ごし方を選ぶ（プラン・オプション）」「確認する（アクセス・FAQ・お客様へのお願い）」に分けて整理しました。プランについては、詳細ページで内容を確認してから予約へ進む流れとし、エステとサーフィンは宿泊とは別に申し込めるオプションとして独立させています。
送迎サービスのように内容が変わる可能性のある情報は、ホテル側で更新できるお知らせ機能に掲載する方針としました。
戦略・要件定義
- スマートフォンでの閲覧を前提にしたレスポンシブデザインとする
- 客室は全タイプを同じ項目で比較できる一覧形式とする
- プランは詳細ページを経由して予約へ誘導する
- お問い合わせは電話・LINE・フォームの3経路とし、電話番号を大きく表示する
- 既存サイトの写真素材を活かしつつ、不足分は弊社で手配する
- 送迎情報などをホテル側で編集できるよう、CMSを活用する
主要な施策ポイント
①客室を比べやすい一覧ページ
客室は全21室・10タイプと選択肢が多いため、各客室を同じレイアウトで並べ、写真・人数・広さ・ベッドの情報を揃えて掲載しました。上位の客室は大きな写真と説明文で特徴を伝え、スタンダードな客室はコンパクトにまとめています。予算や過ごし方に合わせて、客室同士を比べやすい構成です。
②プランから予約・オプション申込までの導線
宿泊プランは、詳細ページで内容を確認してから予約へ進む流れにしています。スマートフォンでは予約ボタンを画面上に常に表示し、どのページを見ていても予約できるようにしました。ケーキや花束、ディナー、サーフィンの申込みは宿泊予約後に使う専用フォームに集約し、受付期限と連絡までの目安をフォームの冒頭に明記しています。
③3つの問い合わせ窓口とFAQ
お問い合わせページでは電話番号を大きく表示し、LINEとフォームを並べて、連絡しやすい方法を選べるようにしています。フォームには、宿泊日が決まっていない方も送信できるよう「未定」の選択肢を用意しました。あわせてFAQを20項目の開閉式で整理し、問い合わせの前に疑問を解消できる構成としています。
完成デザイン
配色は、ベージュの背景にブラウンとゴールド系の色を合わせ、ホテルの落ち着いた雰囲気に揃えています。見出しや本文には明朝体を使い、文字間と余白を広めにとることで、情報量の多いページでも静かな印象を保てるようにしました。
ファーストビューは、ホテル外観と江ノ島の風景が切り替わるスライドショーにしています。サイトを開いた直後に、ホテルの立地と滞在の雰囲気が伝わるようにするためです。そのほかの写真も、客室や海の風景を中心に構成しました。
各ページの最後には、江ノ島を望む海の写真に「暮らすように、癒される。」のコピーと宿泊予約ボタンを重ね、どのページからも予約へ進めるようにしています。
細かな工夫ポイント
- ヘッダーに電話番号とLINEを常に表示し、どのページからも連絡できるようにした
- インルームエステのメニューをカテゴリ別のタブで切り替えられるようにし、時間と料金を並べて表示
- エステページに施術前の準備・流れ・注意事項をまとめ、事前に確認できるようにした
- お食事ページで朝食・夕食・提携レストランを分けて案内し、ホテル内にレストランがないことも明記
- FAQから「お客様へのお願い」へ移動でき、年齢制限やキャンセル規定を確認しやすくした
- プラン詳細ページにパンくずリストを設置し、現在地が分かるようにした
制作の中での気づきと課題
打ち合わせを重ねる中で、客室・プラン・オプション・FAQなど、宿泊を検討する方が知りたい情報を一つずつ形にしていきました。情報が増えるほど、ページ同士のつながりと、どこから予約へ進むかを明確にすることが重要になると改めて感じています。
今後は、実際の閲覧状況や予約・問い合わせの傾向を見ながら、プランの見せ方やオプションへの導線を見直していく余地があると考えています。
いただいたお声・所感
BREATH HOTELを運営する内宮商事株式会社様からは、完成したサイトをご確認いただいたあとに、次のようなお声をいただきました。
「ファーストビューの表示を、私とBREATH HOTELの担当者にて、それぞれ確認をいたしました。
とても良い仕上がりで満足しております。」
今回の制作では、ホテルが大切にしている静かな滞在の雰囲気をサイト全体で伝えることと、宿泊を検討する方が客室やプランを比べながら予約まで進めることの両立を目指しました。公開後の反応を確認しながら、サイトがホテルの集客と予約に役立つよう、引き続き改善を提案していきたいと考えています。
BREATH HOTEL
