Squarespaceで、さまざまなデバイスに合わせてどのようにサイトのコンテンツが移動するかについて説明します。

Squarespaceで用意されているレスポンシブ デザインでは、さまざまなデバイスや画面幅に合わせてコンテンツや画像のサイズが変更されます。レスポンシブ デザインを使用すると、訪問者はさまざまな方法で自動的にサイトを表示できるため、利用される可能性のあるデバイスやブラウザー、ディスプレイ幅ごとに個別のサイトを作成して管理する必要がなくなります。

「モバイルでバナーがトリミングされるのはなぜか？」や「背景画像がゆがんでいます。修正するにはどうすればよいか？」といった疑問に対する答えは、レスポンシブ デザインを理解し、さまざまなブラウザーやデバイスの形状に適応できる画像を選択することにあります。

ヒント: 特定のサイト エレメントがモバイル端末でどのように表示されるかについて詳しくは、「サイトはモバイル端末でどのように表示されますか？」をご覧ください。

画像のベスト プラクティス

細長い部屋の床にぴったり敷かれている幅の狭いラグを想像してみてください。ラグをもっと狭い部屋に移動したり、横向きにしたりすると、ぴったりフィットしません。

画像、特にバナー画像と背景画像も同じように機能します。レスポンシブ デザインにより、「ラグ」のサイズや形状を変更できます。最良の効果を得るには、できるだけ多くの「部屋」で見栄えが良くなるように、各画像を選択して設定してください。

画像をアップロードする際は、次の点に留意してください。

画像サイズ

• 画像ファイルのサイズと幅に関する推奨事項については、画像のベスト プラクティスに従ってください。
• バナー画像のベスト プラクティスについては、「バナー画像を追加する」を参照してください。
• 表示されるコンテナーとほぼ同じ形状の画像を選択します。たとえば、バナーには幅の広い画像を使用するようにします。切り抜きの仕組みについては、「トリミングに関する問題のトラブルシューティング」を参照してください。

画像コンテンツ

• 抽象的なパターンや、テキストや境界線のない画像が最適です。
• 背景画像の場合、繰り返しのパターンを用いることで最大限柔軟に対応できます。
• 焦点を変更して、画像の中心を設定します。
• 画像の特定の領域 (人物やオブジェクトなど) がトリミングされないようにすることを重視している場合は、端の周りに「ブリード」領域を追加するとトリミングが目立たなくなります。

テキストのベスト プラクティス

テキストのサイズは、画面に合わせて自動的に変更されます。

ヒント:

• テキストを含む画像を使用するのではなく、テキストをキャプションやオーバーレイで、またはページ上に直接追加します。これにより、フォントがブラウザーの幅に合わせて拡大縮小されるので、トリミングの問題が軽減されます。またこうすることで、検索エンジンのインデックスに登録される可能性があります。
• 一部のバージョン7.0テンプレートでは、モバイル端末上でテキストのサイズを変更する方法を微調整して制御できます。

モバイル用にコンテンツを再配置する

創造エディターでは、コンピューター レイアウトとは別に、モバイル レイアウトに合わせてコンテンツを再配置できます。

クラシック エディターでは、コンテンツはモバイル端末内で垂直に積み重ねられます。これにより、サイトのナビゲーションが容易になり、小さく幅の狭いブラウザーでも画像やテキストを表示したままにできます。

詳細については、以下を参照してください。

• モバイル端末でのサイトの表示についての原則を確認してください。
• クラシック エディターでモバイルのページとブロックのレイアウトの変化を確認してください。

注: サイトがバージョン7.0で、モバイル スタイルを無効にしている場合、サイトのコンテンツはモバイル用に再配置されたりスタックされたりすることはありません。

Retina画面でコンテンツの反応が異なる

RetinaおよびHD画面でのサイトの表示は、サイトにアップロードした画像の元のサイズによって異なります。

アップロードした画像に対し、それぞれ幅の異なる最大7つのバージョンが保存されます。内蔵のレスポンシブ デザインは、訪問者の画面を自動的に検出し、それに最適な画像サイズを選択します。Retina画面では、必要に応じてサイズの2倍の画像が表示されます。

注: バージョン7.0のサイト スタイルを通じて読み込まれる背景画像などの画像は、このルールの例外です。これらの画像では、常に元の画像をフル サイズで表示します。

その他、以下の種類の画像を考慮してください。

• ロゴ: ロゴ用の大きな画像ファイル (必要なサイズの2倍) をアップロードすると、HDおよびRetina画面での見た目を改善できます。ただし、他の画面や一部のブラウザーではぼやける場合があります。サイトの閲覧者を考慮し、一番多い訪問者の画面に適したロゴ サイズを使用してください。ほとんどのテンプレートでロゴの高さを変更できます。
• アイコン: メニュー アイコンやソーシャル アイコンなど、テンプレート内のほとんどのアイコンはWebフォントまたはSVGベースのため、画質を損なうことなく拡大縮小できます。一部の古いテンプレートまたは廃止されたテンプレートには、Retinaディスプレイで拡大縮小されない画像ベースのアイコンが含まれています。
• テキスト: サイトに追加されたテキストは、品質を損なうことなくRetina画面に合わせて拡大縮小されます。

画像の最適化に関するその他のヒントについては、「Webで表示する画像の書式設定を行う」を参照してください。

異なるデバイスで比較する

サイトが異なるブラウザーの形状に適応できているかを確認する良い方法は、サイトをモバイルとパソコンで比較することです。サイトに大きな変更を加えるときは、スマートフォンのブラウザーでサイトを開いたまま、近くに置いておくことをおすすめします。パソコンで大きな変更を保存したら、スマートフォンのブラウザーを更新して効果を確認してください。

モバイル端末で変更をテストすることで、どのように表示されるかが最も正確にわかります。また、この方法は縦向きと横向きを調べられる唯一の方法です。パソコンで編集しているときにすばやくプレビューしたい場合は、デバイス ビューを使用してください。

ブラウザーのウィンドウ サイズがサイト コンテンツの書式設定にどのような影響を与えるかについて詳しくは、「サポートされているブラウザー」を参照してください。