Picovert

Squarespace画像サイズガイド2026：全セクション完全解説

Picovert チーム著2026-03-305分で読了

SquarespaceはImgix CDN配信、WebP変換、レスポンシブリサイズなど、多くの画像最適化を自動的に 処理します。しかし、正しいサイズで画像をアップロードする必要があります。小さすぎるとRetinaディスプレイで ヒーロー画像がぼやけて見え、大きすぎるとページ読み込みが遅くなります。このガイドでは、2026年の Squarespaceウェブサイトのすべてのセクションに対する正確な画像サイズを説明します。

Squarespace画像サイズ — クイックリファレンス

  • バナー / 全画面ヒーロー: 2500×1406 px（16:9）、最小幅 1500 px
  • セクション背景画像: 理想的には 2500×1406 px
  • ギャラリー画像: 最長辺 1500 px
  • ブログアイキャッチ画像: 1500×844 px（16:9）
  • 記事内画像: 幅 1500〜1600 px（Retina表示幅 約800 px）
  • 商品画像（Commerce）: 1500×1500 px（1:1 正方形）
  • ロゴ: 透明背景のPNG、最大高さ 250 px
  • ファビコン: 100×100 px または 300×300 px PNG
  • 最大アップロードサイズ: 画像あたり 20 MB
  • 対応フォーマット: JPG、PNG、GIF、SVG、TIFF、WebP

Squarespaceの画像処理方法

Squarespaceが自動的に処理することを理解することで、より良いアップロードの判断ができます:

  • Imgix CDN: アップロードされたすべての画像は、プロフェッショナルな画像CDNである Imgixを通じて配信されます。Squarespaceは各デバイスと画面サイズに合わせて画像を自動的にリサイズ および圧縮します — 訪問者はフル解像度のアップロードではなく、最適化されたバージョンを受け取ります。
  • 自動WebP変換: Squarespace 7.1は、対応ブラウザのためにアップロードされた 画像を自動的にWebPに変換します。アップロード前にWebPに変換する必要はありません。
  • 最大サイズでアップロード: Squarespaceが各デバイスに合わせて画像を縮小 するため、常に持っている最高品質の最大バージョンをアップロードしてください。CDNが適切な サイズを配信します — 大きすぎてもまったく問題ありませんが、小さすぎるとRetinaや4K画面で ぼやけて見えます。
  • ファイルサイズも重要: CDN最適化にもかかわらず、圧縮が不十分な元ファイルは まだ速度を低下させる可能性があります。アップロード前に元ファイルを適切に圧縮してください。

バナー / 全画面ヘッダー画像

バナーまたはヒーロー画像は、ページ上部の大きな画像で、多くの場合ブラウザの全幅に渡ります。 2026年のSquarespace向け:

  • 推奨: 2500×1406 px（16:9）— アップスケールなしで4Kモニターも埋められる
  • 最小: 幅 1500 px — これより狭いとRetina画面でぼやけて見える
  • ファイルサイズ目標: 1 MB未満（アップロード前に幅1920 pxにリサイズ、JPEG q80）

モバイルでは、Squarespaceはバナー画像を中央からトリミングします。顔、商品、主要テキストなど、 フォーカルコンテンツを画像幅の中央60%以内に収めてください。Squarespaceエディタにはフォーカル ポイントツールがあります。これを使用して、小さな画面でトリミングされたときにどのエリアが 表示されるかを正確にコントロールしてください。

写真には品質85のJPEGまたはWebPを使用してください。大型ヒーロー写真にはPNGを避けてください — 写真コンテンツでは品質の向上なく、不必要に大きなファイルサイズになります。

セクション背景画像

セクション背景はバナー画像と同じルールに従います。Squarespaceはセクションのテキストコンテンツの 後ろに画像を表示します:

  • 理想的なサイズ: 2500×1406 px
  • 表示高さ: セクションのパディングとコンテンツによって通常600〜900 px

すべてのセクション背景にフォーカルポイントツールを使用してください — 画面サイズによってセクション 高さが変わる際に、画像のどの部分を中央に保つかをSquarespaceに伝えます。背景画像はテキストの コントラストのためにオーバーレイとともに表示されることが多いので、これを念頭に置いてデザインしてください。

ギャラリー画像

Squarespaceのギャラリーブロックは、グリッドとスライドショーで画像を表示します。 最も鮮明な結果のために:

  • 推奨: 最長辺 1500 px
  • 一致したアスペクト比: ギャラリー内のすべての画像に同じアスペクト比を 使用してください — すべて4:3またはすべて1:1。比率を混在させるとグリッドレイアウトで 不均一なトリミングが発生します
  • フォーマット: 写真には品質90 JPEG; 鋭いエッジのあるデザインや イラストにはPNG
  • ファイルサイズ: 画像あたり300 KB未満 — ギャラリーは一度に複数の画像を 読み込みます

アップロード前に画像リサイズツールを使用して、ギャラリー画像を 一致したサイズと比率に統一してください。

ブログ投稿画像

Squarespaceのブログ画像には2つの異なる役割があります:

  • アイキャッチ画像（サムネイル）: 1500×844 px（16:9）— この画像は ブログ一覧ページ、ソーシャル共有プレビュー、投稿ヘッダーに表示されます。16:9比率により、 すべてのコンテキストで正しくレンダリングされます。
  • 記事内画像: Squarespaceブログエディタはほとんどのテンプレートで最大 約800 px幅で画像を表示しますが、Retina画面でシャープに表示されるように1500〜1600 pxで アップロードしてください。高速なページ読み込みのために、記事内画像は300 KB未満を 目標にしてください。

画像リサイズツールを使用してアイキャッチ画像を正確に 1500×844 pxに設定し、アップロード前に圧縮して 300 KB未満にしてください。

商品画像（Commerce）

Squarespace Commerceの商品画像は、正方形でストア全体で統一されているとき最も効果的です:

  • 推奨: 1500×1500 px（1:1 正方形）
  • 背景: メイン商品撮影には白または中立的な背景 — クリーンでプロフェッショナルな ストアフロントを作成
  • サムネイルのトリミング: Squarespaceはオリジナルの比率に関係なく、 サムネイルビューで商品画像を正方形にトリミングします。正方形の画像をアップロードすると、 予期しないトリミングを防ぐことができます
  • 追加商品画像: 視覚的な統一のために、商品ギャラリーのすべての画像に 同じ1:1比率を使用してください
  • ファイルサイズ目標: 商品画像あたり500 KB未満

リサイズツールを使用してすべての商品画像を1500×1500 pxに 統一してください。元の写真のアスペクト比が様々な場合は、アップロード前にリサイズして 正方形にトリミングしてください。

ロゴ

SquarespaceのロゴはサイトヘッダーKに表示され、テンプレートによってサイズが調整されます。 ベストプラクティス:

  • フォーマット: 透明背景のPNG — どのヘッダー背景色や画像でもロゴが 正しく表示されます
  • 高さ制限: Squarespaceは一部のテンプレートで250 pxより高いロゴを クリップします。予期しないクリッピングを避けるためにロゴの高さを250 px未満に 保ってください
  • 幅: テンプレートによって異なります — 200〜500 pxの範囲でテストして 適切なものを選択してください
  • SVG: SquarespaceはロゴにSVGをサポートしています。SVGはピクセル化 なしにあらゆる解像度で完璧にスケールするため、細かいディテールやテキストのある ロゴに最適です
  • ファイルサイズ: 100 KB未満

ロゴをJPEGとしてアップロードしないでください — JPEGは透明度をサポートしていないため、 白以外のヘッダーではロゴの後ろに白または色付きの四角形が現れます。

ファビコン

  • 推奨: 100×100 px または 300×300 px PNG — Squarespaceがブラウザタブ用に 16 および 32 px に自動リサイズ
  • ICOフォーマットもサポートされています
  • デザインをシンプルに保ちましょう — ファビコンは非常に小さく表示され、16 pxでは細かい ディテールが消えます。フォーマット変換が必要な場合は変換ツールを使用してください。

ファイルサイズ目標まとめ

  • ヒーロー / 背景: 1 MB未満（幅1920 pxにリサイズ、JPEG q80）
  • ブログアイキャッチ画像: 300 KB未満
  • 商品画像: 500 KB未満
  • ギャラリー画像: 各300 KB未満
  • ロゴ: 100 KB未満

ステップバイステップ: Squarespace用画像の準備

  1. 画像タイプ（ヒーロー、商品、ブログ、ギャラリーなど）を確認し、上記のクイックリファレンスで 推奨サイズを確認してください。
  2. 画像リサイズツールを使用して正確なサイズを設定してください。 ヒーロー画像は2500×1406 pxに、商品画像は1500×1500 pxにリサイズしてください。
  3. 圧縮ツールを使用してファイルサイズを削減してください。 ヒーロー画像は1 MB未満、ブログおよびギャラリー画像は300 KB未満を目標にしてください。
  4. ロゴの場合は、ファイルが透明背景のPNGであることを確認してください。写真の場合は、85%品質の JPEGとして保存するか、変換ツールでフォーマットを変更してください。
  5. Squarespaceにアップロードし、すべてのヒーローおよびセクション背景画像にフォーカルポイント ツールを使用してモバイルトリミングをコントロールしてください。