SharePoint モダンページでの画像のサイズ変更とスケーリング

SharePoint モダンページでの画像のサイズ変更とスケーリング

最新のページと web パーツは、さまざまなデバイス間での完全な応答性を備えて設計されています。つまり、web パーツで使用される画像は、表示されている場所、使用されているレイアウト、表示されているデバイスによって異なるサイズに変更されます。 たとえば、モダンページはモバイルデバイスで適切に表示されるように設計されています。また、画像の自動スケーリングは、快適なエクスペリエンスを実現するのに役立ちます。

デバイス間でのページの例

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

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

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

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

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

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

縦横比

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

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

ほとんどの場合、最新の web パーツの画像は、レイアウトに応じて、16:9 または4:3 の縦横比がある場合に、レイアウトやデバイス間で最適に機能します。

列レイアウト

ページは、列の幅やレイアウトなど、さまざまな種類のセクションで構成されています。たとえば、列全体、列1つ、2列、3列、左3列、右3列で構成されています。 列の幅を埋めることが期待される画像の一般的な規則は、それらが配置されている列と少なくとも幅が同じであることです。 たとえば、1つの列のイメージ web パーツ内の画像は、少なくとも1204ピクセルの幅である必要があります。 各列レイアウトの幅のガイドラインを次に示します。

レイアウト

幅 (ピクセル単位)

全角列

1920

1 つの列

1204

2列

1列あたり586

3つの列

1列あたり380

1 ~ 3 の左列

左側の列の380右の列の792

1つ目の右の列

左側の列の792右の列の380

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

他の列レイアウト内に配置された画像の高さは、縦横比によって異なります。 ここでは、16:9 と4:3 縦横比の高さ/幅のガイドラインについて説明します (最も近いピクセルに切り上げまたは切り上げ)。 これは、モバイルデバイスで適切にスケーリングされる幅と高さの画像を保持する場合に便利です。

縦横比

16 x 9

4 x 3

1 つの列

1204 x 677

1204 x 903

2列

586 x 330

586 x 439

3つの列

380 x 214

380 x 285

1 ~ 3 の左列

380 x 446 (左側の列)792 x 446 (右列)

380 x 594 (左側の列)792 x 594 (右列)

1つ目の右の列

792 x 446 (左側の列)380 x 446 (右列)

792 x 594 (左側の列)380 x 594 (右列)

Web パーツのレイアウト

使用する web パーツのレイアウトは、画像のサイズ変更にも影響します。 次の例では、さまざまな web パーツとそのレイアウトを1つの列に表示し、それぞれで使用されている縦横比を示しています。

この画像は、16:9 の元の縦横比を持つことを検討してください。

16 x 9 の画像の例

次に、1つの列のページレイアウトに表示される、さまざまな web パーツとレイアウトの画像の例を示します。

ヒーロー web パーツ

次に、タイルとレイヤーレイアウトの縦横比を示します。

  • タイル: web パーツの高さは、8:3 の縦横比に合わせて拡大縮小され、web パーツ内の画像は4:3 の縦横比に合わせて拡大縮小されます。

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

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

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

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

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

16:9 は、カルーセル、写真、カードのレイアウトの縦横比です。

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

強調表示されたコンテンツの web パーツの画像の例

イメージ web パーツ

画像は、web パーツを含むセクションの幅に拡大されます。 [イメージ] ツールバーを使用して縦横比または空のトリミングを変更したり、サイズ変更ハンドルを使って画像を拡大または縮小したりすることができます。

次に示すのは、4:3 での画像の裁ちトンボ (青色の線) の例です。

4:3 の裁ちトンボを示す画像

画像ギャラリー web パーツ

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

  • ブリックレイアウトは、16:9、1:1、4:3 など、表示されているすべての画像の縦横比を考慮します。 

  • タイル、カード: 4:3

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

画像ギャラリー 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種類のレイアウトがあります。 推奨される縦横比を次に示します。

  • 写真、グリッド、ボタン: 16:9

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

コンパクトなレイアウト (上) と [写真] レイアウト (下) に表示される画像の例を次に示します。

クイックリンクレイアウトの画像の例

ヒント: 

注:  このページは、自動翻訳によって翻訳されているため、文章校正のエラーや不正確な情報が含まれている可能性があります。 私たちの目的は、このコンテンツがお客様の役に立つようにすることです。 情報が役に立ったかどうか、ご意見をお寄せください。 参考までに、こちらから英語の記事をお読みいただけます。

コラボレーションを促進する Microsoft 365

ヘルプを表示

Office のスキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×