ヒーロー Web パーツを使用する

ヒーロー Web パーツを使用して、ページや動画にフォーカスと視覚的な興味をもたらします。 ヒーロー Web パーツには最大 5 つのアイテムを表示し、説得力のある画像、文字列、およびリンクを使用して、それぞれに注意を引きつけることができます。 コミュニケーション サイトには既定でヒーロー Web パーツが含まれていますが、ヒーロー Web パーツを他のページに追加することもできます。 

ビデオがヒーロー Web パーツで設定されている場合、新しいウィンドウに移動する代わりに、同じページを閲覧できる間、ビデオはインラインで再生されます。 

一部の機能は、対象指定リリース プログラム に参加している組織に段階的に導入されます。 つまり、この機能はまだ表示されない場合があります。または、このヘルプ記事で説明されている機能とは異なって見える場合があります。

目次

• コミュニケーション サイトのヒーロー Web パーツ:トピックとショーケース
• ヒーロー Web パーツのレイアウトを変更する
• 各タイルまたはレイヤーの画像、テキスト、およびリンクを変更する
• 画像の焦点を変更する
• タイルやレイヤーを並べ替える
• 1 つの列にヒーロー Web パーツを配置する
• ページに空のヒーロー Web パーツを追加する
• ヒーロー Web パーツでの画像のスケーリング

コミュニケーション サイトのヒーロー Web パーツ:トピックとショーケース

コミュニケーション サイトを作成するときは、空のサイトから始めることも、他のサイト テンプレートのいずれかを選択することもできます。それぞれに既定の Web パーツのセットが付属しています。 これらのコミュニケーション サイト テンプレートには、次のようなヒーロー Web パーツが付属しているものもあります。

• Standard 通信: ニュース、イベント、その他のコンテンツなどの情報を共有します。
• ショーケース: 写真や画像を使用して、製品、チーム、またはイベントを紹介します。

これらのテンプレートでは、ヒーロー Web パーツが既定でページに含まれています。 既定の画像、テキスト、およびリンクが事前に設定されており、変更して独自の画像、テキスト、ページ、リンク、またはドキュメントを表示します。

Standard コミュニケーション テンプレートを選択すると、デフォルトのヒーローは 5 つのタイル (1 から 5 まで変更可能) のタイル レイアウトです。

ショーケース テンプレートを選択した場合、既定のヒーローは 3 つのレイヤーを持つ垂直レイアウトです (1 から 5 つのレイヤーに変更できます)。

ヒーロー Web パーツのレイアウトをグリッドから垂直レイヤーまたはカルーセルに変更するには、ボタン (1) プロパティの編集 ( ) を使用し、ボタン (2) を使用して、各タイルまたはレイヤーの各タイルまたはレイヤーの詳細を 編集 します ( )。

。 [Web パーツの編集] ボタン

2. [詳細の編集] ボタン

ヒーロー Web パーツのレイアウトを変更する

ページでまだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。

1. ヒーロー Web パーツで使用できる 3 つのレイアウト (カルーセル、タイル、レイヤー) のいずれかを選択できます。 レイアウトを選択するには、Web パーツの左上にある プロパティの編集 ( ) を選択し、レイアウトのドロップダウン メニューからレイアウトを選択します。

   

   または、Web パーツの プロパティ ウィンドウで目的のレイアウトの種類を選択することもできます。

   

2. Web パーツ のプロパティ ウィンドウで、次を選択します。

   • カルーセル レイアウト用のスライドを追加する
      

     ヒント

     • カルーセル レイアウトの場合、自動スライドの切り替え効果を有効または無効にするには、自動 再生の切り替えをオンまたはオフにします。
     • 

   • タイル レイアウト用のタイルを追加する

   • レイヤーレイアウトにレイヤーを追加する
     

• 注

  カルーセルでは、最大 5 つのタイル (Standard コミュニケーション サイトなど)、または最大 5 つのレイヤー (ショーケース サイトなど)、または最大 5 つの画像を選択できます。 

各タイルまたはレイヤーの画像、テキスト、およびリンクを変更する

ページでまだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。

1. 変更するタイルまたはレイヤーの右下にある [ 詳細の編集 ] ( ) を選択します。

2. プロパティ ウィンドウで [変更] を選択し、リンクの取得元の場所を選択します。

   • [最近使用したファイル]: 最近開いた画像、ページ、またはドキュメントがある場合は、この一覧に表示されます。

   • ストック画像 ストック画像は Microsoft によって提供されています。 高品質で用途にちょうどいいサイズです。 SharePoint 管理者である場合は、画像取得のパフォーマンスを向上させるために、 コンテンツ配信ネットワーク (CDN) を有効にすることをお勧めします。

   • [Web 検索]: Bing からクリエイティブ コモンズ ライセンスを利用する画像を検索できます。 ページに画像を挿入する前に、ライセンスを確認する責任があります。 Microsoft 365 の SharePoint のみ。

   • Your organization: your organization が承認済みアセットのセットを指定している場合は、ここでそのセットから選択できます。  SharePoint 管理で、organization のアセット ライブラリを作成する方法を学習する場合は、「organization アセット ライブラリの作成」を参照してください。

   • [OneDrive]: OneDrive に保存したドキュメントまたは画像のリンクを取得できます。 Microsoft 365 の SharePoint のみ。

   • [サイト]: 指定したサイトから、ドキュメント、画像、またはページのリンクを取得できます。

   • [アップロード]: 個人のデバイスからドキュメントや画像をアップロードできます。

   • リンクから: Microsoft 365 の OneDrive または SharePoint のページ、ドキュメント、または画像へのリンクを入力します。

     注

     サイトの外部へのリンクは、米国政府機関の GCC High と DoD、および 21Vianet が運用する Office 365 では画像プレビューを表示しません。

3. 画像、ページ、またはドキュメントを選択し、[ 開く] を選択します。

4. プロパティ ウィンドウの [背景画像] で、[カスタム画像] または [色のみ] を選択します (色のみはタイル レイアウトでのみ使用でき、色はサイトのテーマの色に対応します)。
   [自動選択済み] オプションを使用すると、リンク先のページまたはドキュメントから画像が自動的に選択されます (画像が使用可能な場合)。

5. 画像の ヘッダー を入力します。

   • トグルを [はい] に切り替えると、[行動喚起] リンクを表示できます。 そして、[アクションのテキストの呼び出し] を追加します (たとえば、「詳細」)。 [アクション リンクの呼び出し] は、階層のレイアウトでは各レイヤーに使用できますが、タイルのレイアウトでは最大のタイルにのみ使用可能です。

     注

     カルーセル レイアウトに 3 つの新しいスタイルが追加されました。 スライドごとに異なる スタイル (画像のオーバーレイ、テキスト ブロック、対角線分割) を設定して、コンテンツの表示を変えることができます。

     

画像の焦点を変更する

Microsoft 365 の SharePoint では、ヒーロー Web パーツ内で選択した画像の焦点を変更して、画像の最も重要な部分をフレームに表示できます。

1. ページでまだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。

2. 変更するヒーロー 画像の下部にあるツール バーの [焦点の設定] を選択します。

3. 画像内の目的の焦点をドラッグします。

   

カルーセル画像、タイル、またはレイヤーを並べ替える

カルーセル画像、タイル、レイヤーを目的の場所に移動することで、順序を変更できます。

1. ページでまだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。
2. プロパティ ウィンドウで、画像、タイル、またはレイヤーの横にある 3 つの点の省略記号を選択し、[上へ移動] または [下へ移動] を選択して並べ替えます。 タイルとレイヤーの場合は、画像を選択し、タイルまたはレイヤーを押したまま目的の場所にドラッグすることもできます。

2 つまたは 3 つの列のいずれかにヒーロー Web パーツを配置します

ヒーロー Web パーツは、ページの幅に合わせて設計されています。 ヒーロー Web パーツが全幅を占めないようにするには、セクションのレイアウトを変更します。

1. まだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。
2. ヒーロー Web パーツのすぐ上にマウス ポインターを置き、Web パーツの左側にある丸付きの + を選択します
3. [ セクション レイアウト] で [ 2 つの列] または [ 3 つの列] を選択します。
4. これで、ヒーロー Web パーツはセクションの 2 つまたは 3 つの列の左側の列にあります。 
5. ヒーロー Web パーツを移動するには、画像を選び、それを押したまま目的の列にドラッグします。

ページに空のヒーロー Web パーツを追加する

チーム サイトまたはコミュニケーション サイトのページにヒーロー Web パーツを追加できます。 目的

1. ページでまだ編集モードになっていない場合は、ページの右上にある [編集 ] を選択します。 右側で ツールボックス ( ) を見つけます。

2. [すべての Web パーツを表示] を選択し、Web パーツのリストから ヒーローを 選択またはドラッグ アンド ドロップします。

3. [ プロパティの編集 ] ( ) を選択し、目的のレイアウトの種類を選択します。1 から 5 タイルのグリッド、または 1 から 5 の垂直レイヤーを使用できます。

4. 変更する各タイルの [リンクの選択 ] を選択します。

5. 各タイルに対して、ツールボックスで [選択] を選択し、リンクを取得する場所を選択します。
   ツールボックスで [変更] を選択し、リンクの取得先を選択します。

   • [最近使用したファイル]: 最近開いた画像、ページ、またはドキュメントがある場合は、この一覧に表示されます。
   • [Web 検索]: Bing からクリエイティブ コモンズ ライセンスを利用する画像を検索できます。 ページに画像を挿入する前に、ライセンスを確認する責任があります。 Microsoft 365 の SharePoint のみ。
   • Your organization: your organization が承認済みアセットのセットを指定している場合は、ここでそのセットから選択できます。  SharePoint 管理で、organization のアセット ライブラリを作成する方法を学習する場合は、「organization アセット ライブラリの作成」を参照してください。
   • [OneDrive]: OneDrive に保存したドキュメントまたは画像のリンクを取得できます。 Microsoft 365 の SharePoint のみ。
   • [サイト]: 指定したサイトから、ドキュメント、画像、またはページのリンクを取得できます。
   • [アップロード]: 個人のデバイスからドキュメントや画像をアップロードできます。
   • リンクから: Microsoft 365 の SharePoint 用 OneDrive のページ、ドキュメント、または画像へのリンクを入力します。

6. 画像、ページ、またはドキュメントを選択し、[開く] をクリックします。

7. ツールボックスの [画像] で、[ カスタム画像] または [色のみ] を選択します。 [自動選択済み] オプションを使用すると、リンク先のページまたはドキュメントから画像が自動的に選択されます (画像が使用可能な場合)。 色のみは タイル レイアウトでのみ使用でき、色はサイトのテーマの色に対応します。

8. 画像の 代替テキスト を入力します。

9. トグルを [はい] に切り替えると、[行動喚起] リンクを表示できます。 そして、[アクションのテキストの呼び出し] を追加します (たとえば、「詳細」)。 [行動を促すフレーズ] リンクは、レイヤード レイアウトの各レイヤーで使用できますが、タイル レイアウトの最大のタイルでのみ使用できます

ヒーロー Web パーツでの画像のスケーリング

ヒーロー Web パーツに適したサイズの画像を選択するには、次の点を考慮してください。

• Web パーツは、フル裁ち落としレイアウトの画面の幅に合わせるように設計されています。
• タイル レイアウトでは、Web パーツの高さは 8:3 の縦横比に従うように拡大縮小され、Web パーツ内の画像は 4:3 の縦横比に拡大縮小されます。
• レイヤー レイアウトでは、個々のレイヤーは 8:3 の縦横比に拡大縮小され、各レイヤー内の画像は 9:16 に近い縦横比に拡大縮小されます。

カルーセル レイアウトはいつ使用可能になりますか?

一般提供 (ワールドワイド、GCC、GCC High、DoD): ロールアウトは 2025 年 1 月中旬に開始され、月末までに完了する予定です。

カルーセル レイアウトが追加された後、既存のレイアウトはどうなりますか?

ヒーロー Web パーツの更新の一環として、次の変更が行われました。

• Item Management Updates
  ヒーロー Web パーツでアイテムを管理する方法が変更されました。 アイテムの数 (1 から 5) を設定する代わりに、新しい直感的な スライド インターフェイスを使用してアイテムを直接追加または削除できるようになりました。 これにより、特定のニーズに合わせてヒーロー Web パーツをカスタマイズするプロセスが簡略化されます。
• プロパティ ウィンドウの調整
  タイルとレイヤーのレイアウトのプロパティ ペインの UI は最新のエクスペリエンスのために更新されましたが、これらのレイアウトの機能は変更されません。
•   既存のレイアウトに影響を与えない
  現在 タイル または レイヤー レイアウトを使用している場合は、そのままなのでご安心ください。 新しいカルーセル レイアウトへの自動変換は行われないため、既存のページは引き続き期待どおりの外観と機能が保証されます。