Shopifyでストアのデザインを変更する際、「公開」ボタンを押すのに勇気がいる、と感じたことはありませんか？特にスマホでの見え方が崩れていないか、公開前にしっかり確認したいものです。Shopifyには、こうした不安を解消する強力な「プレビュー機能」が備わっています。この記事では、プレビュー機能の基本的な使い方から、デバイスごとの表示を簡単に切り替える方法までを分かりやすく解説します。
Shopifyのプレビュー機能とは
プレビュー機能は、編集中のデザインや設定変更を、実際にストアに反映させる（公開する）前に確認できる機能です。これを活用することで、安心してサイト編集を行えます。
公開前に変更を確認できる
プレビュー機能を使えば、変更内容が顧客に表示されることはありません。新しいバナーの追加や配色の変更、アプリの表示設定などを、自分だけの環境でじっくり確認できます。これにより、意図しない表示崩れや設定ミスを防ぎ、ストアの品質を保つことができます。
プレビュー機能の起動方法
プレビュー機能は、テーマカスタマイザーから簡単に起動できます。
- Shopify管理画面から「オンラインストア」＞「テーマ」へ進みます。
- 「カスタマイズ」ボタンを押し、テーマエディタを開きます。
- 画面右上の「…」メニューをクリックし、「表示する」を選択すると、別タブでプレビュー画面が開きます。
共有可能なリンクの取得
プレビュー画面は、自分以外の人にも共有できます。画面下部に表示されるバーの「共有」ボタンをクリックすると、プレビュー専用のURLが生成されます。外部のデザイナーやパートナーに変更内容を確認してもらう際に非常に便利です。
デバイス切り替えでの表示確認
現代のECサイトは、スマートフォンからのアクセスが大半を占めます。パソコンとスマホ、両方の表示を確実に確認する習慣をつけましょう。
パソコン表示の確認方法
テーマカスタマイザーの画面右上には、表示を切り替えるアイコンがあります。パソコンの形をした「デスクトップ」アイコンをクリックすると、パソコンでストアを見た際の表示を確認できます。これが基本的な編集画面となります。
スマホ表示の確認方法
パソコンアイコンの隣にある、スマートフォンの形をした「モバイル」アイコンをクリックするだけです。瞬時にスマホでの表示に切り替わり、テキストの改行位置や画像の大きさ、ボタンの押しやすさなどを確認できます。
全画面表示での最終確認
各デバイス表示に切り替えた後、アイコンのさらに右側にある矢印のアイコン「フルスクリーンで表示」をクリックすると、管理メニューが非表示になり、より実際の表示に近い状態で全体像を確認できます。最終チェックに最適な機能です。
プレビュー時の便利な小技
Shopifyのプレビュー機能には、基本的な表示確認以外にも便利な活用法があります。知っておくと、ストア運営がさらにスムーズになります。
別のテーマをプレビュー
現在公開しているテーマとは別に、新しくインストールしたテーマをカスタマイズし、プレビューで確認できます。「テーマライブラリ」にある未公開テーマの「…」メニューから「プレビュー」を選択。大幅なリニューアルを、顧客に影響なく水面下で進めることが可能です。
特定ページのプレビュー
トップページだけでなく、商品ページやブログ記事など、特定のページを直接プレビューで確認することもできます。テーマカスタマイザー上部のプルダウンメニューから、確認したいページの種類や特定のページを選択するだけで、そのページのプレビューに移動します。
実際のデバイスでの確認
PC上のスマホ表示（エミュレータ）は便利ですが、最終的にはご自身のスマートフォンで確認することをおすすめします。プレビュー画面下部のQRコードをスマホのカメラで読み取れば、実機でプレビュー表示が可能です。実際の操作感や文字の見やすさを体感できます。
まとめ
Shopifyのプレビュー機能とデバイス切り替えは、ストアの品質を維持し、顧客からの信頼を得るために不可欠なツールです。サイトに少しでも変更を加えた際は、必ず「デスクトップ」と「モバイル」の両方でプレビュー確認する習慣をつけましょう。この一手間が、表示崩れによる機会損失を防ぎ、安心してストアを運営するための鍵となります。
コメント