SharePointのヒーローについてお探しですね。

広告

SharePointのヒーローWebパーツでスライドショーを作ろう！画像サイズの最適解も解説

社内ポータルサイトをSharePointで作るとき、トップページを華やかにして大事な情報を社員に届けたいですよね。

そんなときに便利なのが「ヒーローWebパーツ」です。

でも、いざ設定しようとすると「使い方がよく分からない」「画像が大きすぎて変な見た目になっちゃう」「スライドショーがうまく動かない」なんて悩みを抱える担当者さんも多いんです。

この記事では、SharePointのヒーローWebパーツの基本から、スライドショーの具体的な設定方法、そして多くの人がつまずく「画像サイズの正解」まで、分かりやすく解説していきます。

これから社内ポータルを立ち上げる方も、今あるサイトをもっと見やすくしたい方も、ぜひ参考にしてみてください。

SharePointの「ヒーローWebパーツ」って何？

SharePointのヒーローWebパーツは、ページで一番アピールしたい大事な情報を、目立つように表示するための機能です。

社内ポータルのトップページの一番上に置くことで、社長メッセージや重要なイベント、新入社員の紹介、新しい社内ルールのお知らせなんかを、全社員にしっかり伝えることができます。

以前のヒーローWebパーツは、複数の画像をタイル状に並べるだけの固定表示が基本でした。

でも最近のアップデートで、待望の「カルーセル（スライドショー）」機能が追加されたんです。

これで、一定時間ごとに画像が自動で切り替わる、動きのある魅力的なスライドショーを、標準機能だけで簡単に作れるようになりました。

似た機能に「画像ギャラリーWebパーツ」もあって、こちらも画像をスライドさせることができます。

でも、ヒーローWebパーツの一番の強みは「画像をクリックしたときに、好きなリンク先に飛ばせる」という点なんです。

画像ギャラリーは写真を見せるための機能ですが、ヒーローWebパーツならお知らせのバナー画像を表示して、クリックすると詳細ページや外部サイトに飛ぶ、といった社内ポータルに必須の導線がスムーズに作れます。

ユーザーの目を引いて、目的のページにちゃんと誘導する――それがヒーローWebパーツの真骨頂なんです。

ヒーローWebパーツでスライドショーを設定する方法

ヒーローWebパーツを使って、リンク付きのスライドショー（カルーセル）を設定する手順は、実はとってもシンプルです。

HTMLやCSSといった専門的な知識がなくても、マウス操作だけで直感的に作れちゃいます。

具体的な設定の流れは、こんな感じです。

・ページの編集画面を開いて、Webパーツの追加メニュー（＋ボタン）から「ヒーロー」を選んで配置する
・配置したヒーローWebパーツの編集アイコン（鉛筆マーク）をクリックして、レイアウトを「カルーセル」に変更する
・各スライドに、タイトル、背景画像、クリックしたときのリンク先URLを入力する
・画像の自動切り替え設定や、表示オプションを調整する
・すべての設定が終わったら、ページを「発行」または「再公開」して変更を反映させる

基本の設定ができたら、表示したい画像とリンク先を一つずつ設定していきます。

カルーセルの各スライドに、あらかじめ用意したバナー画像をアップロードして、社内ニュースや共有ドキュメントなどのリンクURLを紐づけましょう。

一定時間ごとに自動で画像が切り替わる「自動再生」の設定や、左右の矢印ボタン（＜・＞）での手動切り替え設定も、右側のプロパティ画面から簡単にできます。

また、テキスト情報を画像の上にどう表示させるかも選べるので、バナー画像のデザインに合わせて、一番文字が読みやすい見せ方をプレビュー機能で確認しながら調整してみてください。

【重要】ヒーローWebパーツの画像サイズ、これが正解！

ヒーローWebパーツを使うとき、多くの担当者さんが一番悩むのが「画像サイズの調整」です。

SharePointの標準Webパーツは、見る人のディスプレイサイズに合わせて自動で表示が調整されるレスポンシブデザインになっています。

だから、適当なサイズの画像をそのままアップロードすると、意図しないところで見切れちゃったり、スマホで見たときに縦幅が大きすぎて画面を占領しちゃったりするんです。

きれいでプロっぽい見た目を保つには、最初から最適なサイズで画像を作っておくことが大事です。

ヒーローWebパーツで画像を表示するときの正解となる縦横比は「16:9」です。

具体的には、横1200ピクセル×縦675ピクセル、または横1920ピクセル×縦1080ピクセルくらいで画像を作ると、PCの大きなモニターからタブレット、スマホまで、どのデバイスで見てもバランスよくきれいに表示されます。

見切れを防ぐコツとして、画像の大事なテキストやロゴは端っこギリギリに置かず、中央寄りの安全エリアに収めるようにデザインするのが鉄則です。

この基本ルールを守るだけで、ポータルサイトのクオリティがグッと上がりますよ。

また、ヒーローWebパーツはカルーセルレイアウトを選んだ場合でも、標準では縦の表示領域がちょっと大きめに確保される傾向があります。

だから、16:9よりも極端に横長なバナー画像（例えば3:1とか）をアップロードしても、SharePoint側で自動的に16:9に近い枠に合わせて中央部分が拡大トリミングされちゃって、結果的に画質が粗くなる原因になります。

必ず最初から16:9の比率で画像を作って、高画質でありながら読み込み速度に影響しないファイルサイズ（数百KB程度）に圧縮してから設定するのがおすすめです。

画像内に文字を詰め込みすぎず、SharePoint側のタイトル入力機能とうまく使い分けることで、より洗練されたポータルデザインが実現できます。

ヒーローWebパーツのメリット・デメリットと注意点

標準機能で手軽にリッチなコンテンツが作れるヒーローWebパーツですが、実際に運用するときはメリットとデメリットをちゃんと理解しておく必要があります。

これから作る社内ポータルの運用に合うかどうか、事前に確認しておくことが長期的な運用成功のカギになります。

最大のメリットは、追加の開発コストを一切かけずに、誰でも直感的にスライドショーが作れて、しかもそれぞれの画像に個別のリンクを付けられることです。

新しいツールを導入する稟議を通す必要もなく、今すぐ手軽に見栄えの良い導線が作れるのは、標準機能ならではの魅力ですね。

一方で、運用上のデメリットとしては、システムの仕様上、設定できるスライドの最大数が「5枚まで」と制限されている点があります。

また、画像やリンクの内容を変えるたびに、SharePointリストのアイテム追加ではなく「ページ自体の編集と再公開」という作業が必要になります。

もし社内にページ更新の厳しい承認フローがある場合、中身のバナーを変えるだけで都度承認を回す手間が発生するので、毎日たくさんのニュースが更新されるような高頻度の運用には向いていない面もあります。

もし、5枚以上の画像をスライドさせたい場合や、ページを直接編集せずにSharePointリストのデータ更新だけでスライド内容を自動反映させたい場合は、残念ながら標準機能の限界を超えています。

そういう要件がどうしても必要なら、SharePoint Framework（SPFx）を使った独自Webパーツのカスタム開発や、サードパーティ製のデザイン拡張ツールの導入を検討する必要があります。

まずはヒーローWebパーツの標準機能で小さくスタートして、運用上の課題が見えてきた段階で次のステップを考える――そうすることで、無駄なコストを抑えた失敗の少ないポータル構築ができますよ。

広告