レスポンシブ デザイン

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

最終更新日 2024年12月16日

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

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

ヒント

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

sizes.gif

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

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

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

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

画像サイズ

画像コンテンツ

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

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

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

ヒント⁠:

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

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

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

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

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

備考

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

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

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

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

備考

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

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

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

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

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

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

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

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

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

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

  • Squarespace Expertを雇う

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