最新のページと Web パーツは、デバイス間で完全に応答するように設計されています。つまり、Web パーツで使用される画像は、表示される場所、使用されるレイアウト、表示するデバイスによって、画像のスケーリングが異なります。 たとえば、最新のページはモバイル デバイスで見栄えがするように設計されており、自動画像スケーリングはその魅力的なエクスペリエンスを作成するのに役立ちます。
どの画像サイズが最適ですか?
レスポンシブ ページ設計のため、デバイスやレイアウト間で画像が特定の形状を維持するために、特定の高さや幅がピクセル単位で設定されることはありません。 画像は、さまざまなデバイスやレイアウトで可能な限り最適な結果を表示するために、自動的にサイズ変更およびトリミングされます。 ただし、画像をページ上できれいに表示するのに役立つガイドラインがいくつかあります。
ページに最適な画像サイズを見つける方法は、次の要因によって異なります:
- 縦横比: 画像の高さと幅の関係
- 列のレイアウト: ページ上の列の種類と数
- Web パーツのレイアウト: 画像が使用されている Web パーツ用に選択したレイアウト
縦横比
縦横比とは、画像の幅と高さの関係です。 通常、3:2、4:3、16:9 などの 2 つの数値として表されます。 幅は常に最初の数値です。 たとえば、比率 16:9 は、幅 1600 ピクセル、高さ 900 ピクセルです。 または、1920 x 1080、1280 x 720、または 16:9 に等しいと計算できるその他の幅と高さの組み合わせである可能性があります。 オンラインやいくつかの写真編集ツールで、画像のアスペクト比を決定するのに役立つアスペクト比計算機を見つけることができます。
ほとんどの場合、最新の Web パーツの画像は、レイアウトに応じてアスペクト比が 16:9 または 4:3 の場合、レイアウトやデバイス間で最適に機能します。
列のレイアウト
ページは、全角列、1 列、2 列、3 列、3 列、左 3 分の 1 列、右 3 分の 1 列など、さまざまな列の種類とレイアウトを含むセクションでレイアウトできます。 列の幅を埋めることが期待される画像の一般的なルールは、少なくとも配置された列と同じ幅であるということです。 たとえば、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 パーツ | タイル レイアウトとレイヤー レイアウトの次の縦横比は次のとおりです。
|
| 強調表示されたコンテンツ Web パーツ | 16:9 は、カルーセル、フィルムストリップ、グリッド レイアウトの縦横比です。 こちらは 16:9 の縦横比の例です。 最初の画像はフィルムストリップ レイアウトを示し、2 番目の画像はグリッド レイアウトを示しています。 
|
| 画像 Web パーツ | 画像は、Web パーツを含むセクションの幅まで展開されます。 次に示すのは、16:9 の縦横比を使用した画像 Web パーツの画像の例です。 
また、画像編集ツールを使用して縦横比やフリーハンド トリミングを変更したり、サイズ変更ハンドルを使用して画像を拡大または縮小したりすることもできます。 
|
| イメージ ギャラリー Web パーツ | 次の縦横比は、さまざまなレイアウトで使用できます。
|
| ニュース Web パーツ | レイアウトに応じて、ニュース Web パーツの画像は 4:3、16:9、または 21:9 にすることができます。 トップ ストーリーとカルーセル レイアウトの画像の例を次に示します。 
|
| ページ タイトル領域 | 画像は、横長または縦横比が 16:9 以上で、サイズが 1 MB 以上の場合に最適に表示されます。 また、特にサムネイル、ニュース レイアウト、検索結果で画像を使用する場合は、画像の最も重要な部分を表示するように焦点を設定してください。 例 (元の画像 16:9)、スピーカーにフォーカル ポイントを設定した場合: 
|
| ページのサムネイル | ページのサムネイルは、検索結果、強調表示されたコンテンツの結果、ニュース投稿などの場所に表示されます。 既定では、サムネイルはページ タイトル領域またはページ上の最初の順序にある Web パーツ (ページ レイアウトの左上など) から取得されます。 既定値をオーバーライドして、ページのサムネイルを変更できます。 その際は、縦横比が 16:9 の画像を使用するのが最善です。 例 (元の画像 16:9): 
|
| クイック リンク Web パーツ | クイック リンク Web パーツには、6 種類のレイアウトがあります。 プリセット アスペクト比を次に示します。
|
ヒント
ページ タイトル領域またはヒーロー Web パーツに画像を追加する場合は、常に表示する画像の領域に焦点を設定することもお勧めします。 これら 2 つのシナリオの焦点の設定の詳細については、「 ヒーロー Web パーツの使用 」および「 SharePoint サイトで最新のページを作成して使用する」を参照してください。
サイト ヘッダー画像の推奨事項
拡張レイアウトでは、ページに加えてカスタム ロゴまたは画像を追加できます。 これらの要素の推奨サイズを次に示します。
| 要素 | 説明 | 推奨事項 幅 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 |