SharePoint モダン ページでのイメージのサイズ設定とスケーリング
Applies ToMicrosoft 365 の SharePoint

最新のページと Web パーツは、デバイス間で完全に応答性が高いように設計されています。つまり、Web パーツで使用される画像は、表示場所、使用されているレイアウト、および表示されているデバイスによって異なるスケーリングが行われます。 たとえば、最新のページはモバイル デバイスで見栄えが良いよう設計されており、自動画像スケーリングは魅力的なエクスペリエンスを生み出すのに役立ちます。

デバイス間のページの例

最適な画像サイズは何ですか?

応答性の高いページデザインのため、イメージがデバイスやレイアウト間で特定の形状を維持することを保証する特定の高さまたは幅 (ピクセル単位) はありません。 画像のサイズが自動的に変更され、トリミングされ、さまざまなデバイスやレイアウトで最適な結果が表示されます。 ただし、画像がページで見栄えよく見えるように役立つガイドラインがいくつかあります。

ページに最適な画像サイズを見つけるには、次の要因によって異なります。

  • 縦横比: 画像の高さと幅の関係

  • 列レイアウト: ページ上の列の種類と数

  • Web パーツ レイアウト: イメージが使用されている Web パーツ用に選択したレイアウト

縦横比

縦横比は、画像の幅と高さの関係です。 通常、3:2、4:3、16:9 などの 2 つの数値で表されます。 幅は常に最初の数値です。 たとえば、16:9 の比率は、幅が 1600 ピクセル、高さが 900 ピクセルの場合があります。 または、1920 x 1080、1280 x 720、またはその他の幅と高さの組み合わせを 16:9 に等しく計算できます。 縦横比計算ツールは、オンラインと一部の写真編集ツールで見つけることができ、画像の縦横比を決定するのに役立ちます。 

16:9 と 4:3 の縦横比の例。

ほとんどの場合、最新の Web パーツの画像は、レイアウトに応じて 16:9 または 4:3 のいずれかの縦横比を持つレイアウトとデバイス間で最適に動作します。

列レイアウト

ページは、全幅列、1 列、2 列、3 列、3 列、3 番目の左列、3 番目の右列など、さまざまな列の種類とレイアウトを含むセクションでレイアウトできます。 列の幅を埋めるイメージの一般的な規則は、列が配置されている列と同じ幅以上であるということです。 たとえば、1 つの列のイメージ Web パーツ内の画像は、幅が 1204 ピクセル以上である必要があります。

各列レイアウトの幅のガイドラインを次に示します。

レイアウト

ピクセル単位の幅

全角列

1920

1 つの列

1204

2 つの列

列あたり 586

3 つの列

列あたり 380

3 分の 1 の左側の列

左列の場合は 380。右側の列の場合は 792

右側の列の 3 分の 1

左列の場合は 792。右側の列の場合は 380

ページの応答性が高いため、全幅列の画像は常に画面の全幅に表示され、画面サイズに基づいて高さが自動的に表示されます。

他の列レイアウト内に配置される画像の高さは、縦横比によって異なります。 16:9 と 4:3 の縦横比 (最も近いピクセルに切り上げ/切り下げ) の高さ/幅のガイドラインを次に示します。 これは、モバイル デバイスに適したスケーリングを行う幅と高さで画像を維持するのに役立ちます。たとえば、次に示します。

縦横比

レイアウト

16 x 9

幅 x 高さ (ピクセル単位)

4 x 3

幅 x 高さ (ピクセル単位)

1 つの列

1204 x 677

1204 x 903

2 つの列

586 x 330

586 x 439

3 つの列

380 x 214

380 x 285

3 分の 1 の左側の列

左列の場合は 380 x 446。右側の列の場合は 792 x 446

左列の場合は 380 x 594。右の列の場合は 792 x 594

右側の列の 3 分の 1

左列の場合は 792 x 446。右の列の場合は 380 x 446

左列の場合は 792 x 594。右の列の場合は 380 x 594

Web パーツレイアウト

使用する Web パーツのレイアウトは、イメージのスケーリングにも影響します。 次の例では、さまざまな Web パーツと、使用できるオプションと縦横比の一部を示します。

ヒーロー Web パーツ

タイルレイアウトとレイヤーレイアウトの縦横比は次のとおりです。

  • タイル: Web パーツの高さは縦横比 8:3 に従ってスケーリングされ、Web パーツ内の画像は縦横比 4:3 にスケーリングされます。

  • レイヤー: 個々のレイヤーは縦横比 8:3 にスケーリングされ、各レイヤー内の画像は 16:9 付近の縦横比にスケーリングされます。

  • モバイル デバイスでは、カルーセル レイアウトが 16:9 に使用されます。

[レイヤー] レイアウト (上部) と [タイル] レイアウト (下部) に表示される画像の例を次に示します。

レイヤーとタイルレイアウトのヒーロー Web パーツ イメージの例

強調表示されたコンテンツ Web パーツ

16:9 は、カルーセル、フィルムストリップ、グリッド レイアウトの縦横比です。

16:9 縦横比の例を次に示します。 最初の画像はフィルムストリップ レイアウトを示し、2 番目の画像は Grid レイアウトを示しています。

Filmstrip レイアウトを使用して強調表示されたコンテンツ Web パーツ。

拡大された写真が表示された強調表示されたコンテンツグリッドレイアウト。

イメージ Web パーツ

画像は、Web パーツを含むセクションの幅に拡張されます。 

16:9 縦横比を使用する Image Web パーツの画像の例を次に示します。

カルーセル 16:9 の比率を使用する Image Web パーツ内の画像。

また、画像編集ツールを使用して縦横比やフリーハンドトリミングを変更するか、サイズ変更ハンドルを使用して画像を大きくまたは小さくすることもできます。

SharePoint 編集ツールで写真が開きます。

イメージ ギャラリー Web パーツ

次の縦横比は、さまざまなレイアウトで使用できます。

  • ブリックとカルーセルのレイアウトでは、16:9、1:1、4:3 など、すべての画像の縦横比が考慮されます。 

  • グリッド レイアウトでは、1:1 四角形、16:9 幅、4:3 標準の 3 つの縦横比を使用できます。

最初の画像はImage ギャラリー Web パーツのブリック レイアウトを示しています (縦横比は 16:9 と 1:1)。 2 番目の画像は、グリッド レイアウト (縦横比 1:1 を使用) を示しています。

ブリック レイアウト オプションを使用したイメージ ギャラリー Web パーツ。

グリッド レイアウト オプションを使用したイメージ ギャラリー Web パーツ。

ニュース Web パーツ

レイアウトに応じて、ニュース Web パーツの画像は 4:3、16:9、または 21:9 にすることができます。

トップ ストーリーとカルーセル レイアウトの画像の例を次に示します。

ニュース レイアウトの画像の例

ページ タイトル領域

画像は、横向きまたは縦横比が 16:9 以上で、サイズが 1 MB 以上の場合に最適に見えます。 また、特に画像がサムネイル、ニュースレイアウト、検索結果で使用されている場合は、画像の最も重要な部分を表示したままに焦点を設定してください。

スピーカーに焦点を設定した例 (元の画像 16:9):

ページ タイトル領域の 16:9 画像の例。

ページサムネイル

ページサムネイルは、検索結果、強調表示されたコンテンツの結果、ニュース投稿などの場所に表示されます。 既定では、サムネイルはページ タイトル領域またはページ上の最初の順序 (ページ レイアウトの左上など) にある Web パーツから取得されます。 既定をオーバーライドし、ページサムネイルを変更できます。 これを行う場合は、縦横比が 16:9 の画像を使用することをお勧めします。

例 (元の画像 16:9):

強調表示されたコンテンツ Web パーツのページサムネイル画像の例

クイック リンク Web パーツ

クイック リンク Web パーツには、6 つの異なるレイアウトがあります。 事前設定された縦横比を次に示します。

  • コンパクト、リスト、タイル: 1:1、4:3

  • フィルムストリップ、グリッド、ボタン: 16:9

最初の図は、web パーツのコンパクト レイアウトクイック リンクを示しています。 2 番目の画像は、Filmstrip レイアウトを使用した同じクイック リンク Web パーツを示しています。

リンクのサムネイル 画像を示すクイック リンク Web パーツ。

画像の 16:9 の比率を示すクイック リンク Web パーツ。

ヒント: 

サイト ヘッダー イメージの推奨事項

ページに加えて、カスタム ロゴやイメージを拡張レイアウトに追加することもできます。 これらの要素のサイズに関する推奨事項を次に示します。

要素

説明

推奨事項

幅 x 高さ (ピクセル単位)

サイト ロゴ

アップロードされたデザインに応じて、正方形以外で透明になる可能性がある大きなロゴ。

192 x 64 

形式: PNG、JPEG、SVG (グループに接続されたサイトでは SVG は許可されません)

サイト ロゴのサムネイル

サイトロゴがアップロードされていない場合、または正方形の形式が必要な場所で使用される正方形のロゴサムネイル。

この要素は必須です。

64 x 64 

形式: PNG、JPEG、SVG (グループに接続されたサイトでは SVG は許可されません)

拡張レイアウト サイトのロゴ

拡張ヘッダー レイアウトには、サイト ロゴ幅が拡張されています。

300 x 64

形式: JPEG、PNG、SVG

拡張レイアウトの背景画像

拡張ヘッダーで使用できる新しい背景画像。

2560 x 164

形式: JPEG、PNG

ヘルプを表示

その他のオプションが必要ですか?

サブスクリプションの特典の参照、トレーニング コースの閲覧、デバイスのセキュリティ保護方法などについて説明します。

コミュニティは、質問をしたり質問の答えを得たり、フィードバックを提供したり、豊富な知識を持つ専門家の意見を聞いたりするのに役立ちます。