宿泊施設 / 客室・食と滞在・宿泊案内 / お知らせ一覧・記事
旅館のサンプルサイト
宿の雰囲気まで伝える。
PORTFOLIO
架空の店舗・事務所を題材にしたデザイン・実装の見本です。
実在するお客様の制作実績ではありません。
業種に合わせた情報の順序と、画面の使い方をご覧ください。
宿泊施設 / 客室・食と滞在・宿泊案内 / お知らせ一覧・記事
宿の雰囲気まで伝える。
旅館の作例 / 設計の解説
「里居」は、森のそばで静かに過ごす小さな宿を想定した架空の作例です。写真は生成素材を使用しています。ここでは、画面を組み立てた理由を紹介します。
01 / 架空の課題設定
写真で宿に興味を持った人が、次に部屋や食事、宿泊の条件を確かめる場面を想定しました。「ここで過ごしたい」と感じた人が、具体的な確認事項へ進めることをこの作例の課題にしています。
02 / 情報の順序
最初に庭と山並みの写真で宿の雰囲気を伝え、客室、食と滞在、お知らせ、宿泊案内の順に案内します。詳しい説明は別ページに分け、トップでは滞在のイメージをつかめるようにしています。
03 / スマートフォンでの判断
パソコンでは写真と文章を横に配置し、スマートフォンでは一列に並べています。長い説明を小さく縮めず、写真、見出し、本文の順に読めるようにしています。目的が決まっている人は、上部の「目次」から客室や宿泊案内へ直接進めます。
04 / 制作時の検証
2026年10月、ブラウザーで画面幅1440px・390pxを再現して確認しました。横にはみ出す箇所や表示されない画像はなく、390pxの目次から客室と宿泊案内へ移動できました。
実機スマートフォンでの検証や、利用者による評価は未確認です。この作例では宿泊予約を受け付けておらず、予約数・売上の効果は測定していません。
蕎麦店 / 1ページ構成 / 品書き・店舗案内
一皿の魅力を伝え、来店のきっかけをつくる。
事務所・法人向け / 1ページ構成 / 業務案内・事務所概要
専門性を順序立てて伝える。
美容室 / トップページ / スタイル写真・メニュー・予約案内
髪型から選ぶ次の自分
ネイルサロン / トップページ /
デザイン絞り込み・施術詳細・予約案内
色と質感からお気に入りを見つける。
税理士事務所 / トップページ / 業務案内・相談の流れ
専門的な相談を始めやすくする。
生活雑貨店 / トップページ /
商品絞り込み・季節の特集・店舗案内
季節の特集から好きな道具を探す。
操作の見本
予約日時の選択や地図の表示、写真の切り替えを
サイトの画面でお試しいただけます。

日時と人数を選び、内容を確認できます。
受付までの流れを試せます。
お好きな日時を選んでみてください。
ここまでが操作の見本です。
予約は送信されていません。
実際の予約・個人情報の入力は行いません。
初めての方が安心して訪れられるよう、
地図や入口の場所、駐車場の案内を載せます。

空間や料理、仕事の仕上がりを写真で紹介します。
見たい写真を自分のペースで選べます。
説明も一緒に切り替わります。
架空の宿「里居」の制作素材を使っています。
予約や地図、日々のお知らせなど、
必要な機能を事業に合わせて選びます。
TRY AN UPDATE
文章と写真を変えて「見本に反映する」を押すと、掲載時の見え方が変わります。
この体験は画面内だけで動きます。入力は保存・公開・送信されず、再読み込みで元に戻ります。個人情報は入力せず、見本の文章でお試しください。
季節のたより

庭を抜ける風が
少しずつ涼しくなってきました。
縁側でゆっくりと
朝の時間をお過ごしください。
文章と写真を用意したら、
見本に反映してみてください。
実際のお知らせ機能では、ログインして下書き・公開・更新・非公開を操作します。制作済みの機能を分離した環境で動作確認しています。続いて、その実画面をご覧ください。
AFTER LAUNCH / お知らせの更新
季節のご案内や臨時休業、新しいメニューを、
公開後もご自身で伝えられます。
パソコンでもスマートフォンでも、文章と写真を更新できます。実際に制作したお知らせ機能で、その流れをご覧ください。
架空の宿を使った操作画面の見本です。「お知らせを書く」からタイトルと本文を入力し、写真を選びます。
途中の原稿は下書きとして保存します。
新しい記事は公開するまで、サイトの閲覧者には表示されません。
画面は、架空の宿「里居」の公開済み記事を開いた編集例です。新規作成でも同じ入力欄を使い、スマートフォンでは
本文の下に保存・公開の操作が並びます。

操作部分を抜粋しています。画面内を上下にスクロールでき、拡大リンクでは画面全体をご覧いただけます。
プレビューで文章の改行や写真を確認します。準備ができたら編集画面の「公開」を選びます。お知らせ一覧と記事ページにサイトのデザインに合わせて反映されます。
写真の大きさや文字の配置はあらかじめ整えてあるので、毎回ページを組み立てる必要はありません。下の画像は、同じ文章と写真を
公開した表示例です。

操作部分を抜粋しています。画面内を上下にスクロールでき、拡大リンクでは画面全体をご覧いただけます。
お知らせ一覧から対象の記事を開き、文章や写真を直して「更新」を選びます。
掲載を終えるときは、編集画面のステータスを「下書き」に戻して保存します。記事を消さずに、再編集できる状態で残せます。
下書きに戻した記事は、お知らせ一覧と記事ページから見えなくなります。
アップロードした写真自体を非公開で保管する機能ではないため、
写真には公開してよいものを使います。

操作部分を抜粋しています。画面内を上下にスクロールでき、拡大リンクでは画面全体をご覧いただけます。
お客様の更新画面は、お知らせの投稿に必要な操作を中心に用意します。営業時間や料金表などの固定情報、ページ構成やデザインの変更は、制作時に更新範囲を決めます。
納品時には操作をご説明し、技術的な保守には制作側の別の管理アカウントを使います。
お知らせを更新するたびに、サイト全体の設定を触る必要はありません。
必要なページ数や写真の準備、営業時間などの編集範囲は、事業の運営に合わせてご案内します。予約サービスへの案内と、独自の予約システムの開発は内容が異なります。そのため、必要な仕組みを確認して制作範囲を決めます。
制作について相談する