PowerPointから変換してアップロードした画像内の複数の写真を、SharePoint チームサイト上で“写真だけをクリックして拡大表示”させたいというご要望をお持ちの方に向けて、モダン SharePoint ページでの実現方法を分かりやすく解説します。
なぜ単純に画像をアップしただけでは「写真クリックで拡大」が実現しにくいのか？
PowerPoint のスライドを画像化しそのまま SharePoint にアップロードした場合、1枚の「スライド画像」＝1つの Web パーツとして扱われます。
そのため、画像の中に複数の写真が入っていても、SharePoint は「画像全体を一つのアイテム」と判断し、内部の個々の写真を識別してクリック‑拡大を行う既定の仕組みは提供されていません。
モダン ページで「画像クリックで拡大」機能を使う選択肢
モダン SharePoint では、例えばShortPointなどのサードパーティ製 Web パーツや、カスタムスクリプトを用いて「サムネイルをクリックで大きく表示」するギャラリー化が可能です。([参照](https://support.shortpoint.com/support/solutions/articles/1000321885-how-to-display-images-on-your-sharepoint-page-using-sharepoint-web-parts)) ([turn0search4])
また、標準機能でも「画像ギャラリー（Image Gallery） Web パーツ」や、ドキュメントライブラリに写真を個別にアップして「タイル表示＋クリックで表示」構成にすると、望ましい挙動に近づきます。
手順：PowerPoint画像 → 写真1枚ずつ分割／アップロード →拡大表示可能にする流れ
以下の手順で実装できます。
- PowerPoint スライドを「写真を含む画像1枚」ではなく、「写真1枚ずつ別画像化」またはスライド内で写真を個別に切り出してください。
- その写真を SharePoint ドキュメントライブラリにアップロードします。
- ページに「画像ギャラリー（Image Gallery） Web パーツ」または「ドキュメントライブラリ Web パーツ：タイル表示＋リンク先：画像」に設定します。([参照](https://support.microsoft.com/en-us/office/use-the-image-web-part-a63b335b-0a63b335-b0a-4954-a65d-33c6af68beb2)) ([turn0search7])
- 各画像をクリックした際に“拡大表示”されるよう、Web パーツの「クリック時に大きな表示」設定（リンク先に「元の画像」選択）を行います。
- 必要に応じて、モーダル（ポップアップ）表示用のカスタムスクリプトを挿入することで、「画像をクリック→ページ上でオーバーレイ表示」というUXも可能です。([参照](https://williamvanstrien.blogspot.com/2017/10/tip-code-snippet-to-enlarge-image-in.html)) ([turn0search3])
実例：チームサイト「製品紹介」ページで、スライドから切り出した10枚の写真をタイル形式で表示し、クリックすると元ファイルが1000×750ピクセルでオーバーレイ表示されるように設定し、ユーザーの閲覧体験を向上させた社内事例があります。
よくある課題とその解決策
よく遭遇する問題点とその対策を整理します。
- 問題：1枚スライド内に複数の写真を含んだままアップしたため「どれ」がクリックされたか分からない。
→ 解決：写真を個別のファイルとして分割・アップロードしてください。 - 問題：クリックしても拡大せず、別ページへ遷移してしまう。
→ 解決：Web パーツの設定で「リンク先：元の画像」または「モーダル表示」などを選択してください。 - 問題：スマホ表示で画像が小さい／切れてしまう。
→ 解決：画像を事前に適切なアスペクト比・解像度（例：16:9／4:3）で用意し、Web パーツにてレスポンシブ設定を確認してください。([参照](https://support.microsoft.com/en-us/office/image-sizing-and-scaling-in-sharepoint-modern-pages-dc510065-b5a5-4654-bc94-e3ecbbb57d)) ([turn0search0])
まとめ
PowerPoint 画像をそのままアップロードするだけでは、個々の写真を“クリックで拡大”表示させることは難しいですが、写真を個別に切り出して SharePoint にアップし、「画像ギャラリー／ドキュメントライブラリ＋タイル表示」そして「クリックで大きな画像リンク」などを使えば、目的の挙動を実現できます。
さらにカスタムスクリプトを加えることで、より洗練されたモーダル表示も可能です。ユーザー視点で“写真をクリックして拡大”というシンプルで分かりやすい体験を提供できるよう、環境に応じて設定を進めてみましょう。
コメント