フレームの利用
古いフレーム構造は避け、通常のHTML構造とレスポンシブ設計へ置き換えます。
本文
古いフレーム分割と埋め込みは分けて考える
昔のようにページ全体を複数のフレームへ分割する作りは、URLを共有した時に同じ内容へ戻れず、スマホの幅にも合わせにくいため、現在のショップ本体には向きません。
一方、地図や動画、外部の予約画面を一部分に埋め込むiframeは今も使われます。埋め込み先が使えない時の案内と、内容を説明するタイトルを用意することが重要です。
埋め込みを使う前の確認
- 目的動画、地図、予約など、埋め込みが必要な理由を明確にする。
- 代替表示できない時も元ページへ行けるリンクを置く。
- 説明iframeのtitleで中身を具体的に示す。
- スマホ高さ、幅、内側スクロール、操作部の見切れを確認する。
店舗地図を埋め込む場合
実店舗との連携で地図を埋め込むなら、住所、営業時間、連絡先を地図の外にも文字で書きます。地図が読み込めない時に住所が分からなくなる構成は避けます。地図には「○○店の地図」のようなtitleを付け、地図サービスで開くリンクも置きます。
予約フォームを外部から埋め込む場合は、Cookie制限や通信障害で表示されない時の連絡方法と、個人情報の扱いも確認します。
公開前・改善時に確認すること
| 確認項目 | 実務で見るポイント |
|---|---|
| 古い構造 | フレーム前提のページは通常のHTML構造へ整理する。 |
| URL | 各ページに直接アクセスでき、共有しやすいURLにする。 |
| SEO | タイトル、本文、パンくず、内部リンクをページ単位で持たせる。 |
ショップ本体のページは独立したURLにする
商品、カテゴリ、送料、返品は、それぞれ直接開けるURLを持たせます。外部の地図や動画を埋め込むためにiframeを使っても、ショップ全体のナビゲーションをフレーム内に閉じ込めない方が、共有や検索、戻る操作に対応しやすくなります。
古いフレーム分割を使っているサイトなら、画面単位のURLと見出しを保ちながら通常のページへ移行するのが現実的です。
埋め込みの公開前テスト
外部サービスの画面は自社サイトと別に変わるため、定期的な確認も必要です。
| 見る場所 | 確認すること |
|---|---|
| 幅 | スマホで外側と内側の二重スクロールに迷わない。 |
| 代替 | 埋め込みが空白でも住所や問い合わせ先が分かる。 |
| 移動 | 元のサービスで開くリンクが動き、戻る操作もできる。 |