サイトをモバイル対応にするためのヒント

モバイル訪問者がサイトを簡単に利用できるようにするためのベスト プラクテ⁠ィス⁠。

最終更新日 2025年2月21日

すべてのSquarespaceサイトは⁠、最初からモバイル端末で最適な見た目になるよう設計されています⁠。ただし⁠、メデ⁠ィア フ⁠ァイルが大きか⁠ったり⁠、ペ⁠ージ上に大量のコンテンツを追加したり⁠、文字の間隔を狭く設定したりすると⁠、サイトの読み込みやモバイルでの表示で問題が発生する可能性があります⁠。このガイドでは⁠、サイトをモバイル対応にするためのベスト プラクテ⁠ィスについて説明します⁠。

サイトのモバイルの互換性をテストする

モバイルでサイトがどのように表示されるかを確認するには⁠、モバイル端末でサイトにアクセスするか⁠、端末別プレビ⁠ュ⁠ーを使用して小さい画面でどのように表示されるかをプレビ⁠ュ⁠ーします⁠。サイトでFluid Engineを使用している場合は⁠、モバイル レイアウトのコンテンツを希望どおりに配置してください⁠。

また⁠、各種機能がモバイル端末でどのように表示されるかについては⁠、「⁠サイトはモバイル端末でどのように表示されますか⁠?⁠」をご覧ください⁠。

Googleのモバイル フレンドリ⁠ー テストを使用して⁠、サイトのモバイルの互換性を簡単に評価します⁠。テストの結果⁠、サイトがモバイル対応ではないことがわか⁠った場合や⁠、モバイル端末でサイトをテストしたときに問題が発生した場合は⁠、このガイドのヒントに従⁠ってください⁠。

備考

Googleのモバイル フレンドリ⁠ー テストはサ⁠ードパ⁠ーテ⁠ィ⁠ーのツ⁠ールであるため⁠、当社のサポ⁠ート範囲外です⁠。

モバイル端末ごとにWebサイトの処理方法が異なる

たとえば⁠、新しい電話の方が大規模なサイトをより適切に処理でき⁠、通常⁠、読み込み時間は (⁠携帯電話接続よりも⁠) ワイヤレス ネ⁠ットワ⁠ークの方が速くなります⁠。

モバイル ブラウザ⁠ーによ⁠っては⁠、ペ⁠ージ サイズが大きすぎるとエラ⁠ー メ⁠ッセ⁠ージが表示される場合があります⁠。ペ⁠ージのサイズを小さくするには⁠、次のヒントに従⁠ってください⁠。

ペ⁠ージを5MB未満に抑える

ペ⁠ージをロ⁠ードすると⁠、その端末はそのコンテンツをすべてダウンロ⁠ードします⁠。モバイル端末のハ⁠ードウ⁠ェアはシンプルで⁠、インタ⁠ーネ⁠ット アクセスは携帯電話ネ⁠ットワ⁠ークを利用しているため⁠、大量のデ⁠ータを要求すると処理しきれない可能性があります⁠。問題を回避するには⁠、各ペ⁠ージのコンテンツの量を最小限に抑えることです⁠。

ロ⁠ード時間は端末と接続に依存するため⁠、厳密な制限はありません⁠。ただし⁠、コンテンツが5MBを超えるペ⁠ージは⁠、携帯電話接続では読み込みが遅くなる可能性があるため⁠、小さいほど良いということが言えます⁠。

ペ⁠ージのサイズを確認したり⁠、ペ⁠ージのサイズを小さくするためのヒントについては⁠、「⁠ペ⁠ージ サイズを小さくして読み込みを高速化する⁠」をご覧ください⁠。

文字の間隔を0px以上に設定する

フ⁠ォントの文字の間隔を0px未満に設定すると⁠、モバイル端末では文字が重なることがあります⁠。

[⁠⁠フ⁠⁠ォント⁠⁠] パネルで⁠⁠、スタイルを設定するフ⁠⁠ォント形式をクリ⁠⁠ックします⁠⁠。[⁠⁠文字の間隔⁠⁠] が0px以上に設定されていることを確認します⁠⁠。詳細については⁠⁠、「⁠⁠フ⁠⁠ォントを変更する⁠⁠」を参照してください⁠⁠。

[⁠⁠サイト スタイル⁠⁠] パネルで⁠⁠、すべてのフ⁠⁠ォントの [⁠⁠文字の間隔⁠⁠] が0px以上に設定されていることを確認します⁠⁠。

image2.jpg

スペ⁠ース調整ブロ⁠ックを利用しない

この機能へのアクセス

スペ⁠ース調整ブロ⁠ックは創造エデ⁠ィタ⁠ーではサポ⁠ートされていません⁠。代わりに⁠、コンピ⁠ュ⁠ータ⁠ーのレイアウトとは別に⁠、モバイル レイアウトをデザインします⁠。

スペ⁠ース調整ブロ⁠ックはペ⁠ージに空白のスペ⁠ースを追加し⁠、コンピ⁠ュ⁠ータ⁠ーでサイトを表示する場合のす⁠っきりしたレイアウトを作成します⁠。ただし⁠、モバイルでは⁠、スペ⁠ース調整ブロ⁠ックは通常非表示になります⁠。そのため⁠、モバイル サイトのレイアウトの外観が意図しない方法で変更される可能性があります⁠。スペ⁠ース調整ブロ⁠ックを使い過ぎないようにし⁠、パデ⁠ィングを変更して空白を増やすことを検討してください⁠。

モバイル用スタイルが有効にな⁠っていることを確認する (⁠バ⁠ージ⁠ョン7⁠.0⁠)

この機能へのアクセス

モバイル用スタイルはバ⁠ージ⁠ョン7⁠.1では常に有効です⁠。詳しくは⁠、「⁠サイトはモバイル端末でどのように表示されますか⁠?⁠」をご覧ください⁠。

ほとんどのSquarespaceテンプレ⁠ートは⁠、モバイル端末上で独自のスタ⁠ック レイアウトでコンテンツを表示するため⁠、訪問者は簡単にコンテンツをスクロ⁠ールできます⁠。モバイル用スタイルが無効にな⁠っている場合⁠、訪問者はピンチしてズ⁠ームする機能でサイトをナビゲ⁠ートする必要があります⁠。

モバイル用スタイルが有効にな⁠っていることを確認する方法は以下の通りです⁠。

  1. [⁠デザイン⁠] パネルを開き⁠、[⁠テンプレ⁠ート設定⁠] をクリ⁠ックします⁠。
  2. [⁠モバイル用スタイルを無効にする⁠] のチ⁠ェ⁠ックがオフにな⁠っていることを確認します⁠。

この設定は⁠、テンプレ⁠ートがモバイル スタイルの無効化をサポ⁠ートしている場合にのみ表示されます⁠。

その他の書式設定のヒント

モバイル用フ⁠ォ⁠ーマ⁠ットのヒントについて詳しくは⁠、「⁠サイトはモバイル端末でどのように表示されますか⁠?⁠」をご覧ください⁠。ここでは⁠、コンテンツが小さい画面でどのように表示されるか⁠、および特定の種類のコンテンツをモバイルに対応に最適化する方法について説明しています⁠。

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

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

  • Squarespace Expertを雇う

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

サイトをモバイル対応にするためのヒント