デザインのご確認と公開手順

この納品物は営業提案用デモです。内容確認のためのデモサイトとして公開しています。正式な会社サイトではありません。検索・お問い合わせは送信しません。

今回の仕上がり

ご提供の左右比較スクリーンショットを基準に、A案は深緑・ゴールド・マンション外観、B案は白・明るい緑・家族写真の構成で制作しています。写真は近い構図で再生成したイメージで、元写真そのものではありません。元画像のスマートフォンの枠や編集ボタンは再現対象から外し、実際にスマートフォンで使える画面にしています。

見る方法

1. フォルダ内の index.html をChromeやSafariで開きます。インストールは不要です。
2. 「A」「B」「並べて比較」で切り替えます。並列表示はパソコン画面を縮小して左右比較できます。
3. 「表示幅」でスマートフォン幅を選び、縦並びやメニューの動作を確認できます。
4. A案・B案は単独でも開けます。

B案の動画デモ

B案の背景は約8秒のAI生成動画です。通常は音なしで再生し、「動きを止める」で一時停止、「音を聴く」で音を有効にできます。動きを抑える設定の端末では写真を表示し、「動きを見る」で再生できます。動画が読み込めない場合も写真を表示します。人物・鳥・音声は生成されたイメージです。

公開前に確認すること

• 正式な会社名表記・ロゴ・理念の文言
• 賃貸仲介を含む実際の事業内容・対応地域・オーナー様向け窓口の有無
• 会社所在地・営業時間・問い合わせ先・免許番号等、必要な掲載情報
• 写真の採用可否と、実際の会社・物件写真への差し替え
• 問い合わせ先・個人情報の取り扱い・送信後の対応フロー

未確認事項は空欄を架空情報で埋めず、デモ表示と確認事項として記載しています。会社実績や募集中の物件情報は掲載していません。

確認用デモを公開する手順

1. 採用案と掲載内容をご確認ください。提案用として共有する間は、デモ表記を残します。
2. 利用する静的サイト対応のサーバーへ、このフォルダ内のHTMLファイルとassetsフォルダを、同じ階層関係のままアップロードします。
3. 公開URLのindex.htmlを開き、画像、A/B切り替え、スマートフォン表示を確認します。限定共有なら公開先でパスワードなどの閲覧制限を設定します。

正式サイトにする場合

採用案をトップページに配置し、比較ページや提案用説明を整理します。確認済みの会社情報・正規ロゴ・写真を反映し、問い合わせや検索の実機能を別途実装・検証します。現状のファイルだけでは送信や物件検索は動きません。公開承認後に検索エンジン向け設定も変更してください。

現在は全ページに検索エンジンへ掲載しない指定（noindex）を入れています。ただし閲覧制限ではありません。

同梱ファイル