メインコンテンツにスキップ

モバイルプレビューとデスクトッププレビューの切り替え

モバイル表示とデスクトップ表示を切り替えて、デバイスごとの結婚式ウェブサイトの見え方をご確認いただけます。

対応者:Brian
今日アップデートされました

モバイルプレビューとデスクトッププレビューの切り替え

モバイル表示とデスクトップ表示を切り替えて、デバイスごとの結婚式ウェブサイトの見え方をご確認いただけます。

結婚式ウェブサイトは、さまざまな画面サイズに自動的に対応します。ビルダーのプレビューでデスクトップ表示とモバイル表示を切り替えることで、スマートフォン、タブレット、パソコンでの見え方を正確に確認できます。

プレビューの切り替え方法

  1. ウェブサイトビルダーで、プレビューエリアの右下をご確認ください

  2. デバイスアイコンボタン(複数のデバイスが表示されています)をクリックします

  3. プレビューがモバイル表示に切り替わります

ページタブにモバイルをプレビュー中と表示され、モバイルモードであることが示されます。

デスクトップ表示に戻す

デバイスアイコンを再度クリックすると、デスクトッププレビューに戻ります。モバイルをプレビュー中の表示が消えます。

モバイル表示での変化

モバイルプレビューに切り替えると、以下のような変化をご確認いただけます。

  • 幅の狭いレイアウト - コンテンツが縦に並び、スマートフォンの画面に合わせて表示されます

  • ナビゲーションの調整 - メニューがハンバーガーアイコンにまとまる場合があります

  • レスポンシブ画像 - 画像が小さな画面に合わせて縮小されます

  • 最適化されたテキスト - モバイルで読みやすいようにフォントサイズが調整されます

両方の表示を確認する理由

結婚式のゲストのほとんどは、スマートフォンからサイトを訪問します。表示を切り替えることで、以下の点を確認できます。

  • すべてのデバイスでコンテンツが良く見えるか

  • 小さな画面でテキストが読みやすいか

  • モバイルで画像が正しく表示されるか

  • ボタンやリンクをタップしやすいか

  • ナビゲーションメニューがどのように表示されるか

モバイル向けのデザインのヒント

サイトを作成する際、モバイルプレビューに切り替えて以下の点を確認します。

  • 画像のサイズ - 大きな画像が縮小されても見栄えが良いか

  • テキストの長さ - 長い段落はスマートフォンで読みにくくなります

  • ボタンの配置 - 親指でタップしやすい位置にあるか

  • セクションの余白 - モバイルでは余白の見え方が異なる場合があります

全画面モードとの併用

モバイルプレビューと全画面モードを組み合わせて使用できます。

  1. デバイスアイコンをクリックしてモバイル表示に切り替えます

  2. 全画面をクリックしてモバイルプレビューを最大化します

  3. モバイルサイトをより詳細に確認します

ヒント

すべてのページでモバイル表示を確認しましょう。 ホームページだけでなく、すべてのページタブをモバイルモードでクリックして確認します。

多くのゲストはモバイルを優先します。 デスクトップで主にデザインする場合でも、変更を公開する前に必ずモバイルを確認します。

ナビゲーションを丁寧にテストしましょう。 ゲストがモバイルで簡単にすべてのページを見つけてアクセスできるか確認します。

関連記事

こちらの回答で解決しましたか?