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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ブログ ページに対してAMPを有効にする

Squarespaceをブログに使用している場合は、Accelerated Mobile Pages (AMP) を有効にして読み込み速度を向上させます。

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

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

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

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

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

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

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

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