あらゆる画面サイズで鮮明に表示されるように画像をスタイリングするためのヒントをご紹介します。

Squarespaceを使用することで、Web表示用に画像をフォーマットする際に、どのようなサイズで作ればよいのか分からないまま作業する必要がなくなります。アップロードした画像には7 種類のバリエーションが作成されるため、どの画面サイズでも完璧に表示できます。

このガイドでは、Web上で画像がどう表示されるかを説明し、Squarespaceの画像要件と画像の書式設定のヒントを紹介します。また、画像フォーマットに関するトラブルシューティングの手順も用意しています。

ヒント: 高品質の画像を上手く配置して、サイトを目立たせましょう。詳しくは、魅力的な画像の選び方に関するガイドをご覧ください。

動画を見る

Web上で画像がどのように表示されるか

Webサイト上で画像がどのように表示されるかには、いくつかの要因が影響します。

• 画像ファイルの仕様 -Squarespaceの画像要件を確認して、サイトに画像をアップロードできることを確認してください。
• 画像の幅 - 幅の狭い画像は、モバイル端末ではきれいに見えますが、コンピューターではぼやけます。これは、コンピューターの画面がモバイル端末よりも広いためです。
• 画像の形状 - 縦横比とも呼ばれ、画像の高さと幅の関係を表します。画像の形状は、サイト上での画像の表示に影響します。詳細については、「縦横比について」を参照してください。一般的な縦横比の例もご用意しています。
• 画像コンテナーとトリミング - サイト上のすべての画像は、ページ上の他のコンテンツとの関係で画像がどのように表示されるかを制御する非表示のボックスであるコンテナー内にあります。たとえば、バナーには長方形のコンテナーがあります。トリミングを最小限に抑えるには、画像の形状がコンテナーの形状と一致していることを確認してください。画像がトリミングされて表示される場合は、「トリミングに関する問題のトラブルシューティング」を参照してください。
• レスポンシブ デザイン - すべてのSquarespaceサイトにはレスポンシブ デザインが採用されており、訪問者のデバイスに応じて画像のサイズが自動的に変更されます。

画像の要件とベスト プラクティス

画像をサイトにアップロードする前に、画像が要件に従っていることを確認してください。アップロード後に画像ファイル自体を変更することはできません。できるのは、組み込みの画像エディターを使用して外観を変更することだけです。

画像の属性	仕様	備考
ファイル タイプ	.jpg、.gif、または.pngのみ	.pdf、.psd、.doc ファイルには互換性がありません。
ファイル サイズ	最大20 MB	サイトの読み込みを速くするには、500 KB 以下の画像を使用してください。 サイトに表示される画像の最大サイズと同じか、それ以上の高画質の画像をアップロードすることをおすすめします。これにより、サイズ変更されたバージョンの画像が最高の品質で表示されます。 Acuityの画像制限は1.5 MBです。
ファイル名	アルファベット、数字、アンダースコア、ハイフンのみを使用してください。	アクセント記号付きの文字、疑問符、パーセント記号、アンパサンドは、ファイルがアップロードできなかったり、予期しない問題を引き起こしたりすることがあります。
画像の幅	ほとんどの場合、幅は2500 ピクセルが理想的です。	画像の幅が2500 ピクセルより大きく、その他の仕様を満たしている場合は、画像のサイズを変更する必要はありません。ただし、Squarespaceにアップロードするためだけに画像をエクスポートする場合は、幅が2500 ピクセルになるようにしてください。これにより、アップロード時間を抑えながら、当社のシステムが作成するサイズ変更された画像のすべてにアクセスできるようになります。 2500 ピクセルより小さい画像をアップロードして、サイトに表示される画像の最大解像度を制限できます。これは、サイトの訪問者が一部のデバイスでその画像をダウンロードする際の速度を上げたり、訪問者がダウンロードできる画像の品質を制限したりするのに役立ちます。 幅が1500 ピクセル未満の画像はぼやけて見える場合があります。 サイト ロゴ、ブラウザーのアイコン、メール キャンペーン、アニメーションの.gifには、異なる幅をおすすめします。
解像度	120 MP (メガピクセル) の制限	画像の解像度を求めるには、この計算ツールを使うか、縦横のサイズを掛けて100万で割ってください。たとえば、1500 ピクセル x 1650 ピクセルの画像は2.47 メガピクセルです。
カラー モード	RGB (赤、緑、青)	CMYK カラー モードは印刷物専用であり、ほとんどのブラウザーでは正しく表示されません。Macでは、この属性はカラー プロファイルまたはカラー スペースと呼ばれます。
カラー プロファイル	sRGB	画像がモバイル 端末で正しく表示されない場合は、sRGB カラー プロファイルがサポートされていない可能性があります。
DPIとPPI	該当なし	DPIとPPIは、Web表示ではなく、画像の印刷品質にのみ影響するため、気にする必要はありません。

元の画像のサイズによっては、サイトから元の画像ファイルをダウンロードできない場合があることに留意してください。元のファイルを失うリスクを減らすには、すべての画像ファイルをサイトにアップロードした後、コンピューター上に保存してください。

当社が規定している要件は、画像がサイトで適切に表示されるようにするために推奨される最小要件です。ページ サイズを5 MB 未満に抑えて、サイトの読み込みを高速化します。サイトの読み込みが遅い場合は、「ページ サイズを小さくして読み込みを速くする」をご覧ください。

ヒント: TinyIMGの拡張機能を接続すると、画像サイズを最適化できます。TinyIMGは、サイズの大きい画像を圧縮バージョンに置き換え、画像の品質を維持しながらページの読み込みを高速化します。当社ではサードパーティーのサービスと連携してSquarespace Extensionsが適切に動作するよう努めていますが、拡張機能は当社のサポート範囲外です。拡張機能の接続や接続解除に関してのサポートには対応いたしますが、その他の質問については、拡張機能のプロバイダーまで直接お問い合わせください。

画像ファイルを調べる

画像が要件を満たしているかどうかを判断するには、画像ファイルの情報を調べる必要があります。

Mac

画像の情報を調べるには次の手順を実行します。

1. コンピューター上の画像ファイルを選択します。
2. Command + Iを押します。
3. 開いたウィンドウで、 [詳細情報] をクリックします。

Windows

画像の情報を調べるには次の手順を実行します。

1. コンピューター上の画像ファイルを選択します。
2. Alt + Enterを押します。
3. 開いたウィンドウで、 [詳細] をクリックします。

モバイル端末

画像情報を表示する手順は、アプリ、デバイス、OSによって異なります。モバイル端末で写真を表示または編集するために使用するアプリケーションのドキュメントを確認してください。

注: iOS11以降のiPhoneおよびiPadは、.heic ファイルを生成する高効率フォーマット (HEIF) で画像をキャプチャーします。これらは、Squarespaceアプリを含む多くの場所でインポートまたは共有されるときに自動的に.jpgに変換されますが、既定で画像を.jpgとしてキャプチャーするように携帯電話の設定を調整することもできます。詳しくは、Appleのドキュメントを参照してください。

画像の書式設定

画像を追加する方法と場所は、ページ上での画像の表示方法に影響します。サイトには、ブロック、セクション、ページを使って画像を追加できます。

以下の点に留意してください。

• 画像をアップロードする前に、画像の向きが正しいことを確認してください。画像が上下逆さまで保存されている場合は、サイトに読み込む前に画像編集ソフトウェアを使用して画像を回転させてください。すでに画像をサイトに追加している場合は、組み込みの画像エディターを使用して画像を回転させます。
• ギャラリーに追加された画像は、すべての画像が同様の形状をしている場合に最も綺麗に表示されます。たとえば、横長の画像 (縦より横幅が広い) または縦長の画像 (横幅より縦が長い) をすべてに使用し、両方を混在させないようにします。
• モバイル端末でサイトがどのように表示されるかをプレビューするには、端末別プレビューを使用します。

透明な背景

背景色のない画像を作成するには、画像が背景透過の.png ファイルであることを確認してください。サードパーティーのソフトウェアを使用してこれを行うこともできますし、ロゴが必要な場合は、Squarespace Logoを使用して透明な背景を持つロゴを自動的に作成することもできます。

組み込みの画像エディターで画像を編集した場合、.jpgとして保存され、すべての透明度が削除されます。.png 形式を維持するには代わりにサードパーティーのソフトウェアを使用してください。

デバイスごとに画像のサイズを変更するにはどうすればよいですか？

画像をアップロードすると、Squarespaceはその画像の幅が異なるバージョンを最大7つ作成します。高さは、画像の形状を維持するために幅に対して相対的に変化します。Squarespaceに組み込まれたレスポンシブ デザインは、訪問者の画面に基づいて適切な画像サイズを自動的に選択します。作成する幅は次のとおりです。

• 100 ピクセル
• 300 ピクセル
• 500 ピクセル
• 750 ピクセル
• 1000 ピクセル
• 1500 ピクセル
• 2500 ピクセル

画像の寸法は正確である必要がありますか？

いいえ。当社のシステムは、さまざまなデバイスの幅に合わせて画像のサイズを自動的に拡大または縮小するため、画像を750px × 500pxなどの正確なサイズにフォーマットする必要はありません。たとえば、画像ブロックには特定の画像の高さと幅の要件はありませんが、ギャラリー セクションの画像には別の要件があります。画像がぼやけないように、画像幅に関するヒントに従ってください。

画像が希望どおりに表示されない場合は、以下を実行してください。

• 当社の画像要件に従っていることを確認する
• 画像のスタイルを編集する
• 画像の書式設定に関する問題のトラブルシューティングを行う

画像を追加してスタイルを設定する

サイト スタイル、デザイン パネル、ブロックまたはページ セクションの設定を使用して、 スタイルを変更したり、画像の表示方法をカスタマイズしたりできます。画像を追加してスタイルを設定する方法は、サイトのバージョンによって異なります。サイトに画像を追加してスタイルを設定する方法については、次の表を参照してください。

画像のファイル名とテキスト

画像ファイル名と代替テキスト

他に代替テキストがない場合は、画像のファイル名が代替テキストとして機能します。また、代替テキストは検索エンジンに画像の内容を伝えるため、画像検索でサイトが表示される可能性が高くなります。画像ブロックでは、代替テキストを1つだけ設定できます。

画像を作成するときは、代替テキストのベスト プラクティスに留意してください。

ヒント: 通常、画像のファイル名を変更するには、新しい名前で画像を再アップロードします。

画像テキスト

画像にテキストを追加するには、画像にテキストを埋め込むのではなく、オーバーレイとして追加することをおすすめします。これにより、テキストが検索可能になり、小型デバイスで画像がトリミングされる場合でもテキストが見えるようになります。画像ブロック、バナー、ギャラリー ページ、ギャラリー ブロックにオーバーレイ テキストを追加するヒントをご覧ください。

画像にテキストが含まれている場合は、.png ファイルとして保存します。.jpg ファイルの場合、画像を圧縮するとテキストがぼやけることがあります。.png ファイルは通常、特に画像がオリジナル サイズで表示されている場合、鮮明さを維持します。

画像の書式設定に関する問題のトラブルシューティング

画像がトリミングされたり、歪んで表示されたりする場合は、次のことを行います。

• 画像を追加したブロック、セクション、またはページのスタイルを変更します。
• 「トリミングの問題のトラブルシューティング」の手順に従います。
• 焦点を使用して画像を中央に配置します。
• 組み込みの画像エディターを使用して、トリミングや縦横比の変更などを行います。
• デバイス上で元の画像をサイズ変更、トリミング、または編集を行ってから、再度アップロードします。

画像がぼやけるのはなぜですか？

画像がぼやけたりノイズが発生したりする場合は、画像の幅が狭すぎてWeb上で適切に表示できないことが原因と考えられます。Squarespaceのほとんどのエリアでは、幅1500ピクセル以上の画像を使用することをお勧めします。ただし、次のような一部のコンテンツ エリアには異なる要件があります。

• バージョン7.0のサイトのロゴ
• ブラウザー アイコン (ファビコン)
• メール キャンペーンの画像

画像をアップロードするとエラー メッセージが表示されるのはなぜですか？

まず、画像要件を確認します。正しいファイル形式を使用していて、画像が20 MB 以下の場合は、画像の解像度の問題である可能性があります。画像の解像度はメガピクセル単位で測定され、上限は120 メガピクセルです。

画像の色が歪むのはなぜですか？

画像のカラー モードまたはカラー プロファイルが正しくフォーマットされていない可能性があります。画像要件を参照し、正しい設定を使用していることを確認してください。

モバイル端末でバナー画像がトリミングされるのはなぜですか？

バナーの幅は広く、モバイル端末の幅は狭いため、通常、モバイル端末ではバナー画像がトリミングされます。モバイル端末でバナー画像がトリミングされる原因はいくつかあります。モバイル端末でトリミングに気付いた場合は次のことを行います。

• バナーとセクションの背景画像がモバイル端末でどのように表示されるかを確認する
• バナーをカスタマイズする方法を確認する

異なるサイズで表示すると、画像の解像度が変わってしまうのはなぜですか？

サイト上の画像のサイズを変更すると、同じピクセル サイズを維持して画像のサイズを変更するのではなく、画像プロセッサーが画像を再サンプリングします。つまり、画像コンテナーのサイズが変化すると、ピクセルがブレンドされ、画像の鮮明さが失われる可能性があります。要件とベスト プラクティスに従って画像をアップロードすると、画像はどのサイズでも許容できる鮮明さを維持してレンダリングされますが、わずかな不一致が生じる可能性があります。

Acuity Schedulingの画像

Acuityに画像をアップロードする際も、サイトの他の部分で使用されているのと同じ画像ファイル形式を使用することができます。ただし、Acuity画像をフォーマットするときは、次の違いに留意してください。

• ファイル サイズの制限は、Webサイトの画像の制限より小さくなっています。
• Acuityは、600 ピクセル x 120 ピクセルを超える画像をビジネス ロゴ フィールドにアップロードするときに、画像サイズを自動的に変更します。
• Acuityは、600 ピクセル x 600 ピクセルを超える画像がカレンダーまたは予定タイプの画像としてアップロードされると、自動的に画像サイズを変更します。
• 最適な視覚的結果を得るには、正方形または縦横比1:1の画像を使用することをおすすめします。

その他のヘルプ

Squarespaceに画像を追加する方法については、次のガイドをご覧ください。

• 動画シリーズ: 画像に関するすべて
• 画像の追加とサイズ変更
• サイト ロゴを追加する
• サイト上の画像を編集する（
• 音声、画像、動画にアクセスしやすくする
• ストック画像を検索して追加する
• ストック画像のベストプラクティス
• 画像メタデータをインポートする

上記のガイドの他に、画像のフォーマットに役立つ他のリソースも提供しています。

• Squarespace Forumのコミュニティでアドバイスをもらいましょう。
• Squarespace Expertを雇い、サポートしてもらいましょう。