サイトはモバイル端末でどのように表示されますか?

さまざまなサイト エレメントがモバイル訪問者にと⁠ってどのように見えるかについて説明します⁠。

最終更新日 2024年10月23日

Squarespaceサイトは⁠、訪問者がコンピ⁠ュ⁠ータ⁠ーやタブレ⁠ット⁠、スマ⁠ートフ⁠ォンなど⁠、どの端末を選択してもサイトに移動できるように設計されています⁠。

このガイドでは⁠、特定のサイト エレメントがモバイルでどのように表示されるかを説明し⁠、モバイル用スタイルを変更するためのヒントを紹介します⁠。

動画を見る

サイトをモバイル対応にする

すべてのSquarespaceサイトは⁠、小さなブラウザ⁠ーで端末の形式に合わせて調整されます⁠。これはレスポンシブ デザインで行われ⁠、サイトを表示するブラウザ⁠ー ウ⁠ィンドウのサイズに基づいてコンテンツが自動的にサイズ変更されます⁠。一般的に⁠、モバイルではコンテンツは縦にスタ⁠ックされます⁠。つまり⁠、訪問者はスクロ⁠ールしてすべてのコンテンツを表示できるため⁠、ピンチ⁠、ズ⁠ーム⁠、スクロ⁠ールを何度も行う必要がなくなります⁠。

サイトがSquarespaceバ⁠ージ⁠ョン7⁠.0である場合⁠、テンプレ⁠ートには⁠、サイトがモバイル端末で表示されていることを検出したときにアクテ⁠ィブになる⁠、追加の組み込みモバイル用スタイルが含まれている場合があります⁠。詳細については⁠、以下の「⁠バ⁠ージ⁠ョン7⁠.0モバイル用スタイル⁠」セクシ⁠ョンをご参照ください⁠。

バ⁠ージ⁠ョン7⁠.1では⁠、サイトはモバイル ビ⁠ュ⁠ーに自動的に適応しますが⁠、創造エデ⁠ィタ⁠ー セクシ⁠ョンやヘ⁠ッダ⁠ーなどの一部のエリアにはモバイル固有のオプシ⁠ョンがあります⁠。

モバイル向けSEO

Googleでは⁠、モバイルに最適化されたサイトが優先されます⁠。Squarespaceサイトの独自のモバイル用スタイルは⁠、検索エンジンに適していて⁠、モバイル検索ですぐに見つかります⁠。詳細については⁠、「⁠SquarespaceのSEO向けの機能⁠」をご参照ください⁠。

デザインをモバイル用に最適化すること以外にも⁠、サイトをモバイル フレンドリ⁠ーにするためにできることがあります⁠。たとえば⁠、ポ⁠ートフ⁠ォリオやインデ⁠ックス ペ⁠ージのコンテンツを制限する⁠、ブログの抜粋を使用する⁠、画像サイズを縮小する⁠、ペ⁠ージ内の画像数を最小限に抑えるなどです⁠。詳細については⁠、「⁠サイトをモバイル フレンドリ⁠ーに保つためのヒント⁠」をご参照ください⁠。

モバイル上でサイトを確認する

モバイルでサイトがどのように動作するかを知る最善の方法は⁠、自分でテストすることです⁠。組み込みの端末別プレビ⁠ュ⁠ーを使用し⁠、モバイル端末でテストすることをおすすめします⁠。

端末別プレビ⁠ュ⁠ー

端末別プレビ⁠ュ⁠ー ツ⁠ールは⁠、サイトのさまざまなモバイル ビ⁠ュ⁠ーを表示します⁠。これは⁠、編集中にコンピ⁠ュ⁠ータ⁠ーからサイトのレスポンシブ デザインをテストする場合に適した方法です⁠。詳しい手順については⁠、「⁠端末別プレビ⁠ュ⁠ー⁠」をご覧ください⁠。創造エデ⁠ィタ⁠ーを使用するエリアでは⁠、端末別プレビ⁠ュ⁠ーを使用してモバイル レイアウトをコンピ⁠ュ⁠ータ⁠ー レイアウトとは別に編集できます⁠。

端末を使用する

ウ⁠ィンドウ サイズはデバイスによ⁠って異なり⁠、一部のモバイル機能は実際のモバイル端末での表示が端末別プレビ⁠ュ⁠ーと異なるため⁠、可能であれば任意のデバイスでサイトを表示してみることをおすすめします⁠。

モバイル端末からサイトにアクセスするには⁠、モバイル ブラウザ⁠ーのナビゲ⁠ーシ⁠ョン バ⁠ーにサイトのURLを入力します⁠。

ヒント

トライアル中にモバイル訪問者としてサイトをプレビ⁠ュ⁠ーするには⁠、所有者ログインを使用するかわりに⁠、サイト全体のパスワ⁠ードを追加します⁠。

オ⁠ーデ⁠ィオと動画

オ⁠ーデ⁠ィオ フ⁠ァイルと動画は⁠、各デバイスまたはブラウザ⁠ーの機能に応じて開かれ⁠、再生されます⁠。iOSを含む一部の端末では⁠、オ⁠ーデ⁠ィオ フ⁠ァイルは端末のメデ⁠ィア プレイヤ⁠ーで開きます⁠。

ペ⁠ージ上の動画は⁠、サポ⁠ートされているすべてのモバイル向けブラウザ⁠ーでで再生されます⁠。カスタム サムネイルを画像オ⁠ーバ⁠ーレイとして追加した場合は⁠、2回タ⁠ップして動画を再生します⁠。次のセクシ⁠ョンでは⁠、モバイルでの動画バナ⁠ーの仕組みについて説明します⁠。

ブロ⁠ック

ブロ⁠ックを利用すると⁠、セクシ⁠ョン⁠、ペ⁠ージ⁠、およびブログ投稿などのその他の編集可能なエリアにコンテンツを追加できます⁠。モバイルでブロ⁠ックがどのように表示されるかは⁠、サイトのバ⁠ージ⁠ョンとブロ⁠ックが追加された場所によ⁠って異なります⁠。

創造エデ⁠ィタ⁠ーを使用するバ⁠ージ⁠ョン7⁠.1サイトのエリアでは⁠、コンピ⁠ュ⁠ータ⁠ー レイアウトとは別にモバイル レイアウトを配置します⁠。

バ⁠ージ⁠ョン7⁠.0のサイトと⁠、クラシ⁠ック エデ⁠ィタ⁠ーを使用しているバ⁠ージ⁠ョン7⁠.1のサイトでは⁠、Squarespaceのレスポンシブ デザインがモバイル端末上で自動的にブロ⁠ックを縦にスタ⁠ックします⁠。詳細を確認し⁠、仕組みについての動画を視聴するには⁠、「⁠クラシ⁠ック エデ⁠ィタ⁠ーを使用する場合のモバイルでのブロ⁠ックのスタ⁠ック⁠」をご覧ください⁠。

  • 単一列 - モバイル端末では全幅ブロ⁠ックが縦にスタ⁠ックし⁠、ペ⁠ージのコンピ⁠ュ⁠ータ⁠ー レイアウトが維持されます⁠。
  • 複数列 - モバイル端末では⁠、2番目⁠、3番目⁠、およびそれ以降の列が1列目の下に移動し⁠、横ではなく縦方向に積み重ねられます⁠。
  • フロ⁠ーテ⁠ィング ブロ⁠ックは⁠、モバイルではテキスト ブロ⁠ックの上に表示されます⁠。

スペ⁠ース調整ブロ⁠ックは⁠、バ⁠ージ⁠ョン7⁠.0一部のテンプレ⁠ートを除き⁠、モバイルでは自動的に非表示になります⁠。

ドメイン

サイトの組み込みドメインとカスタム ドメインは⁠、パソコンとモバイルの両方で機能します⁠。モバイルURLを別途用意する必要はありません⁠。

モバイルでのサ⁠ードパ⁠ーテ⁠ィ⁠ー ドメインの接続で問題が発生した場合は⁠、そのドメインがサイトに正しくリンクされていることをご確認ください⁠。

フ⁠ァビコンまたはブラウザ⁠ーのアイコン

フ⁠ァビコン (⁠ブラウザ⁠ー アイコン⁠) の表示は⁠、お使いのモバイル ブラウザ⁠ーによ⁠って異なります⁠。場合によ⁠っては⁠、フ⁠ァビコンがま⁠ったく表示されないこともあります⁠。

ギ⁠ャラリ⁠ー

モバイルでギ⁠ャラリ⁠ーがどのように表示されるかは⁠、サイトのバ⁠ージ⁠ョンとギ⁠ャラリ⁠ーの形式によ⁠って異なります⁠。

ヒント

大きな画像フ⁠ァイルがある場合⁠、または画像が多すぎる場合は⁠、モバイルでサイトの読み込みが遅くなることがあります⁠。詳細については⁠、「⁠サイトをモバイル フレンドリ⁠ーに保つためのヒント⁠」をご参照ください⁠。

ギ⁠⁠ャラリ⁠⁠ー セクシ⁠⁠ョン

モバイルでギ⁠⁠ャラリ⁠⁠ー セクシ⁠⁠ョンがどのように表示されるかは⁠⁠、レイアウトによ⁠⁠って異なります⁠⁠。

  • グリ⁠⁠ッド⁠⁠: シンプル - グリ⁠⁠ッドとして表示します⁠⁠。1列に設定されたセクシ⁠⁠ョンは1列で表示されます⁠⁠。2列以上に設定されたセクシ⁠⁠ョンは2列で表示されます⁠⁠。
  • グリ⁠⁠ッド⁠⁠: ストリ⁠⁠ップ - 1列にスタ⁠⁠ックして表示します⁠⁠。
  • グリ⁠⁠ッド⁠⁠: メ⁠⁠ーソンリ⁠⁠ー - 1列に設定されたセクシ⁠⁠ョンは1列で表示されます⁠⁠。2列以上に設定されたセクシ⁠⁠ョンは2列で表示されます⁠⁠。
  • すべてのスライドシ⁠⁠ョ⁠⁠ー レイアウト - スライドシ⁠⁠ョ⁠⁠ーのままになります⁠⁠。[⁠⁠スライドシ⁠⁠ョ⁠⁠ー⁠⁠: リ⁠⁠ール⁠⁠] レイアウトでは⁠⁠、セクシ⁠⁠ョンの高さに基づいて⁠⁠、モバイル上の画像がセクシ⁠⁠ョンに収まるようにトリミングされます⁠⁠。[⁠⁠スライドシ⁠⁠ョ⁠⁠ー⁠⁠: フル⁠⁠] レイアウトでも⁠⁠、モバイル上の画像がトリミングされます⁠⁠。画像を調整するには⁠⁠、焦点を使用します⁠⁠。モバイルで画像全体を表示したい場合は⁠⁠、[⁠⁠スライドシ⁠⁠ョ⁠⁠ー⁠⁠: シンプル⁠⁠] レイアウトを選択します⁠⁠。

以下の点に留意してください⁠⁠。

  • キ⁠⁠ャプシ⁠⁠ョンはライトボ⁠⁠ックス ビ⁠⁠ュ⁠⁠ーでは表示されません⁠⁠。
  • スライドシ⁠⁠ョ⁠⁠ーのサムネイル画像はモバイルでは表示されません⁠⁠。
  • 訪問者がライトボ⁠⁠ックス ビ⁠⁠ュ⁠⁠ーで画像をスワイプできるのは⁠⁠、スマ⁠⁠ートフ⁠⁠ォンなどの小型のモバイル端末で縦長モ⁠⁠ードを使用している場合のみです⁠⁠。タブレ⁠⁠ットやラ⁠⁠ップト⁠⁠ップなど⁠⁠、幅が575pxを超える画面では⁠⁠、訪問者がライトボ⁠⁠ックス ビ⁠⁠ュ⁠⁠ーで画像間を移動できるように矢印が表示されます⁠⁠。

ギ⁠⁠ャラリ⁠⁠ーペ⁠⁠ージ

多くのテンプレ⁠⁠ートは標準のギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージを使用します⁠⁠。これらのテンプレ⁠⁠ートでは⁠⁠、モバイルでは次のようになります⁠⁠。

  • グリ⁠⁠ッド - ギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージは縦にスタ⁠⁠ックします⁠⁠。ライトボ⁠⁠ックス ビ⁠⁠ュ⁠⁠ーの画像をタ⁠⁠ップします⁠⁠。ライトボ⁠⁠ックスで右下隅の点をタ⁠⁠ップすると⁠⁠、画像のタイトルと説明が表示されます⁠⁠。
  • スライドシ⁠⁠ョ⁠⁠ー - ギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージはスライドシ⁠⁠ョ⁠⁠ーとして表示されます⁠⁠。タ⁠⁠ップしてナビゲ⁠⁠ートします⁠⁠。画像のタイトルと説明は⁠⁠、幅が480ピクセル未満のブラウザ⁠⁠ーでは表示されません⁠⁠。

テンプレ⁠⁠ートがクリ⁠⁠ックスル⁠⁠ーURLまたはデ⁠⁠ィ⁠⁠ープリンクURLをサポ⁠⁠ートしている場合⁠⁠、これらのURLはモバイルでも機能します⁠⁠。

次のテンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ーでは⁠⁠、ギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージにモバイル固有のプロパテ⁠⁠ィがあります⁠⁠。

  • Avenue - 画像は縦にスタ⁠⁠ックします
  • Flatiron - ペ⁠⁠ージ タイトルと説明テキストの下に画像がスタ⁠⁠ックします
  • Forte - 画像は縦にスタ⁠⁠ックします⁠⁠。画像のタイトルと説明は⁠⁠、画像の下に表示されます⁠⁠。ライトボ⁠⁠ックスのスライドシ⁠⁠ョ⁠⁠ーが無効になります
  • Ishimoto - 画像は縦にスタ⁠⁠ックします
  • Momentum - 最初のスライドの後のナビゲ⁠⁠ーシ⁠⁠ョン矢印が消えます
  • Montauk - 画像はペ⁠⁠ージ説明の下にスタ⁠⁠ックします⁠⁠。画像のタイトルと説明は各画像の下に表示されます
  • Supply - ギ⁠⁠ャラリ⁠⁠ー ペ⁠⁠ージはペ⁠⁠ージ タイトルと説明テキストの下にスタ⁠⁠ックして表示されます⁠⁠。画像のタイトルと説明は⁠⁠、画像の下に表示されます⁠⁠。
  • Tremont - ギ⁠⁠ャラリ⁠⁠ー画像は⁠⁠、ほとんどのスマ⁠⁠ートフ⁠⁠ォンで縦にスタ⁠⁠ックします⁠⁠。大型のスマ⁠⁠ートフ⁠⁠ォンやタブレ⁠⁠ットでは通常のレイアウトが表示されます

ギ⁠ャラリ⁠ー ブロ⁠ック

創造エデ⁠ィタ⁠ーの場合⁠、ギ⁠ャラリ⁠ー ブロ⁠ックはモバイルでもコンピ⁠ュ⁠ータ⁠ーでも同じように表示されますが⁠、そのサイズと配置の変更も可能です⁠。クラシ⁠ック エデ⁠ィタ⁠ーの場合⁠、ギ⁠ャラリ⁠ー ブロ⁠ックがモバイルでどのように表示されるかは⁠、レイアウトによ⁠って異なります⁠。

  • Grid - 幅2列のグリ⁠ッドとして表示します⁠。
  • Slideshow - スライドシ⁠ョ⁠ーのままとなります
  • Carousel - カル⁠ーセルとして表示されますが⁠、一度に表示される画像は1枚のみです⁠。
  • Stack - スタ⁠ックしたままとなります

通常⁠、画像のキ⁠ャプシ⁠ョンはモバイルでもコンピ⁠ュ⁠ータと同じように表示されます⁠。スライドシ⁠ョ⁠ー ギ⁠ャラリ⁠ー ブロ⁠ックの場合⁠、キ⁠ャプシ⁠ョンは幅が480ピクセル未満のブラウザ⁠ーでは表示されません⁠。

詳しくは⁠、「⁠ギ⁠ャラリ⁠ー ブロ⁠ック⁠」をご覧ください⁠。

ヘ⁠ッダ⁠ー エレメント

モバイルでは⁠、お知らせバ⁠ー⁠、ナビゲ⁠ーシ⁠ョン メニ⁠ュ⁠ー⁠、サイトのタイトルとロゴが移動する場合があります⁠。

お知らせバ⁠ー

お知らせバ⁠ーは⁠、モバイルのペ⁠ージの上部に表示されます⁠。

これらのバ⁠ージ⁠ョン7⁠.0テンプレ⁠ート フ⁠ァミリ⁠ーでは⁠、お知らせバ⁠ーはヘ⁠ッダ⁠ー オ⁠ーバ⁠ーレイの下とペ⁠ージ コンテンツの上に表示されます⁠。

  • Brine
  • York

ナビゲ⁠ーシ⁠ョン メニ⁠ュ⁠ー

ナビゲ⁠ーシ⁠ョン メニ⁠ュ⁠ーがどのように表示されるかは⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

ナビゲ⁠⁠ーシ⁠⁠ョンのモバイル表示は⁠⁠、サイトのヘ⁠⁠ッダ⁠⁠ー レイアウトによ⁠⁠って異なります⁠⁠。メイン ナビゲ⁠⁠ーシ⁠⁠ョンは常にメニ⁠⁠ュ⁠⁠ー アイコンの後ろに折りたたまれますが⁠⁠、ヘ⁠⁠ッダ⁠⁠ー設定でナビゲ⁠⁠ーシ⁠⁠ョン レイアウト⁠⁠、アイコンのタイプ⁠⁠、オ⁠⁠ーバ⁠⁠ーレイの色を設定できます⁠⁠。

ナビゲ⁠⁠ーシ⁠⁠ョンのモバイルの外観はテンプレ⁠⁠ートによ⁠⁠って異なりますが⁠⁠、メイン ナビゲ⁠⁠ーシ⁠⁠ョンは通常⁠⁠、[⁠⁠☰⁠⁠] (⁠⁠メニ⁠⁠ュ⁠⁠ーまたは「⁠⁠ハンバ⁠⁠ーガ⁠⁠ー⁠⁠」アイコンとも呼ばれます⁠⁠) またはリンクの後ろで折りたたまれます⁠⁠。

テンプレ⁠⁠ートがフ⁠⁠ッタ⁠⁠ー ナビゲ⁠⁠ーシ⁠⁠ョンをサポ⁠⁠ートしている場合⁠⁠、ペ⁠⁠ージの下部に縦にスタ⁠⁠ックして表示されます⁠⁠。

詳しくは⁠、「⁠ナビゲ⁠ーシ⁠ョンのスタイル設定⁠」をご覧ください⁠。

サイトのタイトルとロゴ

サイトのタイトルやロゴの表示形式は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

サイトのタイトルやロゴのスタイルは⁠⁠、サイト ヘ⁠⁠ッダ⁠⁠ーのレイアウトによ⁠⁠って異なります⁠⁠。ヘ⁠⁠ッダ⁠⁠ー エデ⁠⁠ィタ⁠⁠ーで⁠⁠、[⁠⁠モバイル⁠⁠] アイコンをクリ⁠⁠ックしてレイアウトを変更します⁠⁠。

ヘ⁠⁠ッダ⁠⁠ーを編集するときに⁠⁠、モバイル サイト用に別のロゴ画像を追加できます⁠⁠。

一般に⁠⁠、サイトのタイトルやロゴはモバイルでも位置は同じようになります⁠⁠。たとえば⁠⁠、サイトのタイトルがパソコンで右上隅に表示される場合⁠⁠、通常はモバイルでも右上隅に表示されます⁠⁠。

各テンプレ⁠⁠ートのサイトのタイトルがモバイルでどのように表示されるかの詳細については⁠⁠、「⁠⁠サイトのタイトルとロゴの表示⁠⁠」をご覧ください⁠⁠。

画像

モバイル端末の幅の狭さに対応するため⁠、モバイルでは一部の画像や画像機能が変更されます⁠。

バナ⁠ーとセクシ⁠ョンの背景画像

モバイル端末では⁠、バナ⁠ーセクシ⁠ョンの背景画像が常にトリミングされます⁠。バナ⁠ー画像や動画は幅が広く横向きであるのに対し⁠、モバイル端末の画面は幅が狭く縦向きになるため⁠、トリミングが発生します⁠。

banner_cropping_on_mobile.gif

画像をア⁠ップロ⁠ードする前に⁠、バナ⁠ー画像の書式設定のヒントレスポンシブ デザイン画像のベスト プラクテ⁠ィスに従⁠ってください⁠。モバイル端末でサイトを表示する際には⁠、次の点に注意してください⁠。

  • トリミングの量は⁠、バナ⁠ーの高さとブラウザ⁠ーの幅によ⁠って異なります⁠。
  • バナ⁠ーの高さの設定は⁠、必ずしもモバイルに適用されるとは限りません⁠。
  • 接続速度が遅い場合⁠、またはブラウザ⁠ーで動画バナ⁠ーが許可されていない場合⁠、動画バナ⁠ーはモバイルに読み込まれません⁠。動画を読み込めないときにモバイル用代替画像が表示されるように設定します⁠。
  • サイト全体のバナ⁠ーでは⁠、iOSを含む一部のモバイル端末で [⁠位置を固定する⁠] 設定が表示されません⁠。詳細については⁠、「⁠バ⁠ージ⁠ョン7⁠.0でサイト全体の背景画像を追加する⁠」をご参照ください⁠。

バナ⁠ー画像のトリミングの影響を最小限に抑えるには⁠、「⁠トリミングに関する問題のトラブルシ⁠ュ⁠ーテ⁠ィング⁠」をご参照ください⁠。

画像キ⁠ャプシ⁠ョン

サイトが使用するキ⁠ャプシ⁠ョンの種類は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

  • ギ⁠⁠ャラリ⁠⁠ー セクシ⁠⁠ョン - キ⁠⁠ャプシ⁠⁠ョンは通常⁠⁠、モバイルでもコンピ⁠⁠ュ⁠⁠ータ⁠⁠ーでも同じように表示されます⁠⁠。
  • 画像ブロ⁠⁠ックギ⁠⁠ャラリ⁠⁠ー ブロ⁠⁠ック - キ⁠⁠ャプシ⁠⁠ョンは通常⁠⁠、モバイルでもコンピ⁠⁠ュ⁠⁠ータ⁠⁠ーと同じように表示されます⁠⁠。ホバ⁠⁠ー時の画像キ⁠⁠ャプシ⁠⁠ョンは⁠⁠、モバイル端末の種類とブラウザ⁠⁠ーの幅に応じて⁠⁠、常に表示される場合⁠⁠、タ⁠⁠ップしたときに表示される場合⁠⁠、またはま⁠⁠ったく表示されない場合があります⁠⁠。

InstagramとFlickrのブロ⁠ック

InstagramFlickrなどのソ⁠ーシ⁠ャル アカウントの画像を表示するブロ⁠ックでは⁠、幅が2列のグリ⁠ッドに画像が表示されます⁠。

ライトボ⁠ックス

一般に⁠、モバイル端末はライトボ⁠ックス効果をサポ⁠ートしていますが⁠、いくつかの制限があります⁠。

  • ピンチによるズ⁠ームはサポ⁠ートされていません⁠。
  • 画像にカ⁠ーソルを合わせるとキ⁠ャプシ⁠ョンが表示される場合は⁠、ライトボ⁠ックスの右下に白い点が表示されます⁠。この点をタ⁠ップすると⁠、キ⁠ャプシ⁠ョンが表示されます⁠。
  • バ⁠ージ⁠ョン7⁠.0では⁠、Wexleyギ⁠ャラリ⁠ー ペ⁠ージでライトボ⁠ックスが無効になります⁠。

ペ⁠ージ エレメント

サイトをモバイル フレンドリ⁠ーにするための⁠、モバイルでのホバ⁠ー効果とパデ⁠ィング⁠。

ホバ⁠ー効果

スマ⁠ートフ⁠ォン⁠、タブレ⁠ット⁠、タ⁠ッチスクリ⁠ーン ラ⁠ップト⁠ップなどのタ⁠ッチスクリ⁠ーン端末は⁠、ホバ⁠ーをサポ⁠ートしていません⁠。サイト上でホバ⁠ー効果のあるエレメントの場合⁠、タ⁠ップすると効果が表示されることがあります⁠。以下に例をあげます⁠。

  • ドロ⁠ップダウン メニ⁠ュ⁠ーはタ⁠ップすると表示されます⁠。
  • 商品アイテム名と価格は画像の下に表示されます⁠。
  • 画像キ⁠ャプシ⁠ョンは⁠、デバイスの種類とブラウザ⁠ーの幅に応じて⁠、常に表示される場合⁠、タ⁠ップしたときに表示される場合⁠、またはま⁠ったく表示されない場合があります⁠。
  • ポ⁠ートフ⁠ォリオのサブペ⁠ージのタイトルとアイキ⁠ャ⁠ッチ画像はま⁠ったく表示されない場合があります⁠。

パデ⁠ィング

Squarespaceサイトには多くの場合モバイル パデ⁠ィングが組み込まれていて⁠、小さいブラウザ⁠ーやレスポンシブ デザイン向けにサイトを最適化するのに役立ちます⁠。そのため⁠、コンピ⁠ュ⁠ータ⁠ー上のサイトに影響する間隔やパデ⁠ィングを微調整しても⁠、モバイルでの表示に必ずしも影響するとは限りません⁠。

プロモ⁠ーシ⁠ョン ポ⁠ップア⁠ップ

サイトでプロモ⁠ーシ⁠ョン ポ⁠ップア⁠ップを使用している場合は⁠、モバイルでも有効にしておくことができます⁠。すべてのモバイル ポ⁠ップア⁠ップは⁠、既定では標準の半ペ⁠ージ スタイルになります⁠。これにより⁠、検索結果でサイトをランク付けするためのGoogleのル⁠ールに対応できます⁠。

[⁠スタイル⁠] パネルを使用してモバイルのデザインをカスタマイズするか⁠、[⁠表示とタイミング⁠] パネルでモバイルのポ⁠ップア⁠ップを無効にします⁠。

ストア ペ⁠ージとコマ⁠ース

顧客は⁠、コンピ⁠ュ⁠ータ⁠ーの場合とほとんど同じように⁠、モバイル端末でもサイトで買い物をすることができます⁠。サイトの他の部分と同様に⁠、Squarespaceストアは⁠、小さな画面でもモバイルで操作しやすいように適応しています⁠。商品は縦にスタ⁠ックします⁠。個別の商品詳細ペ⁠ージでは⁠、商品画像は説明⁠、価格⁠、[⁠カ⁠ートに追加⁠] ボタンの上にスタ⁠ックして表示されます⁠。

他のスタイルはサイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

  • 複数の商品画像がスライドシ⁠⁠ョ⁠⁠ーで表示され⁠⁠、購入者はスワイプして閲覧できます⁠⁠。
  • 商品は1列または2列で表示されます⁠⁠。
  • カテゴリ ナビゲ⁠⁠ーシ⁠⁠ョンは購入者がスワイプできるように横方向に表示されます⁠⁠。
  • シ⁠⁠ョ⁠⁠ッピング カ⁠⁠ートがヘ⁠⁠ッダ⁠⁠ー設定で有効にな⁠⁠っている場合⁠⁠、シ⁠⁠ョ⁠⁠ッピング カ⁠⁠ートは常にペ⁠⁠ージの上部に表示されます⁠⁠。シ⁠⁠ョ⁠⁠ッピング カ⁠⁠ート アイコンを無効にすると⁠⁠、商品がカ⁠⁠ートに追加されたときにのみペ⁠⁠ージの下部にシ⁠⁠ョ⁠⁠ッピング カ⁠⁠ート アイコンが表示されます⁠⁠。
  • 現在⁠⁠、クイ⁠⁠ック ビ⁠⁠ュ⁠⁠ー商品画像のズ⁠⁠ームはモバイルでは利用できません⁠⁠。
  • 商品の詳細ペ⁠⁠ージには⁠⁠、複数の商品画像が小さなサムネイルで表示されるか⁠⁠、重な⁠⁠って表示されます⁠⁠。
  • 商品は2列以上で表示されます⁠⁠。
  • カテゴリナビゲ⁠⁠ーシ⁠⁠ョンは通常⁠⁠、ドロ⁠⁠ップダウン フ⁠⁠ィルタ⁠⁠ー メニ⁠⁠ュ⁠⁠ーとして表示されます⁠⁠。Supplyでは⁠⁠、ナビゲ⁠⁠ーシ⁠⁠ョン メニ⁠⁠ュ⁠⁠ーに表示されます⁠⁠。
  • 顧客が少なくとも1つの商品を追加すると⁠⁠、シ⁠⁠ョ⁠⁠ッピング カ⁠⁠ートが表示されます⁠⁠。ほとんどのテンプレ⁠⁠ートでは⁠⁠、サイト下部の黒いモバイル バ⁠⁠ーに表示されます⁠⁠。
  • 現在⁠⁠、クイ⁠⁠ック ビ⁠⁠ュ⁠⁠ー商品画像のズ⁠⁠ームはモバイルでは利用できません⁠⁠。
  • アドバンスト ストア ペ⁠⁠ージとユニ⁠⁠ーク ストア ペ⁠⁠ージには⁠⁠、特別な商品機能があります⁠⁠。一部のテンプレ⁠⁠ートでは⁠⁠、シ⁠⁠ョ⁠⁠ッピング カ⁠⁠ートのモバイル スタイルを変更できます⁠⁠。

テキストとフ⁠ォント

フ⁠ォントは通常⁠、モバイルでも同じスタイルになりますが⁠、見出しなどの大きなフ⁠ォントは⁠、ブラウザ⁠ーの幅に合わせて縮小されることがあります⁠。モバイルでテキストが重なる場合は⁠、フ⁠ォントの行の高さを変更してください⁠。

サイトの本文またはフ⁠ッタ⁠ーのテキストに追加された電話番号は⁠、Safariモバイル ブラウザ⁠ーにリンクとして表示されます⁠。

一部のバ⁠ージ⁠ョン7⁠.0テンプレ⁠ートではスケ⁠ーリング フ⁠ォントが使用されているため⁠、タイトル⁠、見出し⁠、その他の重要なテキストの最大サイズと最小サイズを手動で設定できます⁠。

バ⁠ージ⁠ョン7⁠.0のモバイル用スタイル

動画を見る

以下の機能はバ⁠ージ⁠ョン7⁠.0サイト固有の機能です⁠。

テンプレ⁠ート固有のスタイル

特定のテンプレ⁠ートのモバイル オプシ⁠ョンの詳細については⁠、テンプレ⁠ート ガイドをご参照ください⁠。

モバイル固有のオプシ⁠ョンがあるすべてのテンプレ⁠ートのリストについては⁠、「⁠高度なモバイル用スタイルをご参照ください⁠。

モバイル用スタイルを無効にする

Squarespaceテンプレ⁠ートのほとんどは⁠、モバイル端末向けに最適化された独自のデザインがあり⁠、訪問者がどのデバイスからでもサイトを表示および移動できるようにな⁠っています⁠。一部のテンプレ⁠ートには⁠、必要に応じてこの機能を無効にするオプシ⁠ョンもありますが⁠、モバイル用スタイルは有効にしておくことをおすすめします⁠。

以下の点に留意してください⁠。

  • モバイル用スタイルを無効にすると⁠、サイトはモバイル端末でもコンピ⁠ュ⁠ータ⁠ーと同じように表示されます⁠。サイト コンテンツを1つの縦の列にスタ⁠ックする代わりに⁠、ブロ⁠ックやその他のコンテンツはコンピ⁠ュ⁠ータ⁠ーのブラウザ⁠ーと同じレイアウトで表示されます⁠。
  • モバイル用スタイルを無効にすると⁠、SEOに影響する可能性があります⁠。2015年4月⁠、Googleはモバイル端末検索でサイトをランキングする際に「⁠モバイル フレンドリ⁠ー⁠」を判断基準に追加しました⁠。Squarespaceサイトは⁠、モバイル用スタイルが有効にな⁠っている場合に限りGoogleの要件に準拠します⁠。
  • モバイル用スタイルを無効にすると⁠、モバイル ナビゲ⁠ーシ⁠ョンが無効になります⁠。
  • カバ⁠ー ペ⁠ージのモバイル用スタイルは無効にできません⁠。

モバイル用スタイルを無効にする方法は次のとおりです⁠。

  1. [⁠デザイン⁠] パネルを開き⁠、[⁠テンプレ⁠ート設定⁠] をクリ⁠ックします⁠。
  2. [⁠モバイル用スタイルを無効にする⁠] をオンにします⁠。
  3. [⁠保存⁠] をクリ⁠ックします⁠。

テンプレ⁠ートがモバイル用スタイルの無効化をサポ⁠ートしていない場合⁠、このオプシ⁠ョンは表示されません⁠。モバイル用スタイルは⁠、次のテンプレ⁠ート フ⁠ァミリ⁠ーでは無効にできません⁠。

  • Brine
  • Farro
  • Galapagos
  • Skye
  • Supply
  • Tremont
  • York

よくある質問

Squarespaceはモバイルまたはコンピ⁠ュ⁠ータ⁠ーのスタイルをいつ表示するかをどのように決定しますか⁠?

モバイル端末でサイトにアクセスすると⁠、Squarespaceはモバイル オペレ⁠ーテ⁠ィング システムを自動的に検出します⁠。これにより⁠、モバイル用スタイルを表示する信号が送信されます⁠。ただし⁠、サイトがバ⁠ージ⁠ョン7⁠.0でモバイル用スタイルが無効である場合を除きます⁠。

サイトをモバイルで編集できますか⁠?

iOSまたはAndroid用のSquarespaceアプリを使用して⁠、モバイルでサイトを編集できます⁠。

Squarespaceサイトの一部のエレメントはモバイル ブラウザ⁠ーからログインしてモバイル端末で管理できますが⁠、一部の機能はコンピ⁠ュ⁠ータ⁠ーでのみ利用できます⁠。

モバイル用スタイルとレスポンシブ デザインの違いは何ですか⁠?

バ⁠ージ⁠ョン7⁠.0のモバイル用スタイルとレスポンシブ デザインは異なりますが⁠、関連する概念です⁠。

  • モバイル用スタイルバ⁠ージ⁠ョン7⁠.0テンプレ⁠ートに固有の機能です⁠。これらのスタイルは⁠、モバイル特有のナビゲ⁠ーシ⁠ョンや⁠、コンテンツ背景の読み込み制限など⁠、モバイル端末での処理が複雑なデザイン要素にのみ影響します⁠。モバイル用スタイルを無効にしてコンピ⁠ュ⁠ータ⁠ーに近いバ⁠ージ⁠ョンのサイトを表示すると⁠、これらの要素は無効になります⁠。
  • レスポンシブ デザインとは⁠、サイトとそのコンテンツ エレメントを⁠、訪問者のブラウザ⁠ー ウ⁠ィンドウに合わせてサイズ変更する機能を指します⁠。7⁠.0のモバイル用スタイルが無効にな⁠っていても⁠、すべてのSquarespaceサイトでレスポンシブ デザインが維持されます⁠。つまり⁠、Webサイト全体は引き続き小さなデバイスに合うようにサイズ調整されます⁠。ただし⁠、モバイル用スタイルが無効にな⁠っている場合⁠、コンテンツに対してナビゲ⁠ーシ⁠ョンを容易にするための再配置はされません⁠。バ⁠ージ⁠ョン7⁠.1ではモバイル用スタイルを無効にできないため⁠、コンテンツは必ず再配置およびサイズ変更されます⁠。詳細については⁠、「⁠レスポンシブ デザイン⁠」をご参照ください⁠。

カスタムCSSを追加してサイトのモバイル レイアウトを変更できますか⁠?

はい⁠。ただし⁠、カスタム コ⁠ードの変更は当社サポ⁠ートの範囲外です⁠。つまり⁠、セ⁠ットア⁠ップやトラブルシ⁠ュ⁠ーテ⁠ィングに関し⁠、当社はこれ以上のサポ⁠ートを提供することができません⁠。さらに⁠、コ⁠ードベ⁠ースのソリ⁠ュ⁠ーシ⁠ョンに関しては⁠、その機能性やSquarespaceとの完全な互換性は保証できません⁠。これには⁠、Squarespaceのレスポンシブ デザインにおける当該ソリ⁠ュ⁠ーシ⁠ョンの機能性 (⁠特にモバイル端末上での外観⁠) や⁠、すべてのテンプレ⁠ートでソリ⁠ュ⁠ーシ⁠ョンが機能するかどうかが含まれます⁠。カスタム コ⁠ードは⁠、当社プラ⁠ットフ⁠ォ⁠ームの今後の更新時に⁠、表示に関する問題を引き起こす可能性もあります⁠。当社はこれ以上サポ⁠ートを提供できかねますが⁠、次のように⁠、お客様が問題解決のために参照できるリソ⁠ースが多数あります⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

サイトはモバイル端末でどのように表示されますか?