SharePoint の Web パーツとは？ Web パーツ一覧と活用方法について解説

SharePoint は部署やチームの情報共有を容易にするコラボレーションツールですが、サイト構成やページ作成に手間がかかりすぎると、かえって効率が悪くなります。

SharePoint には、 HTML や CSS などの専門知識がなくても容易にサイトを作成できる機能があり、その中核となるのがノーコードでコンテンツを追加できる Web パーツです。

Web パーツを活用することで、レイアウトやデザインを保ちながら、必要な情報や機能を素早くページに組み込むことが可能です。

この記事では、 SharePoint でサイトを作成する際に Web パーツを使って何ができるのか、どのように使えばよいのかについてお伝えします。部署やチーム内での情報共有効率化を目指している担当者の方は、ぜひ参考にしてください。

SharePoint の Web パーツとは？

SharePoint の Web パーツとは、 SharePoint でサイトを作成する際に使えるコンテンツの一つです。

Web パーツは、テキストやニュース、データ分析といった、さまざまなコンテンツをページに配置する「サイトの部品」として機能します。さらに、業務アプリをページに埋め込める Power Apps Web パーツを利用すれば、標準の Web パーツとは異なる高度な業務アプリを表示することも可能です。

現在の SharePoint にはモダン UI とクラシック UI の2種類がありますが、新しいサイトや Web パーツはモダン UI を前提に設計されています。Microsoft は新規サイトではモダンUIの使用を推奨しており、クラシック UI は既存サイトのために残されていますが、カスタムスクリプトの利用制限なども設けられています。

Web パーツを追加するには、サイトを作成するのと同様に HTML や CSS などの専門知識は必要ありません。そのため、専門知識を持った担当者がいない企業であっても、容易に部署、チーム間で情報共有が可能なサイトを作成できます。

Web パーツを利用するメリット

Web パーツを活用すれば、コーディングの知識がなくても SharePoint サイトをノーコードで柔軟に設計できます。

また、ドラッグ＆ドロップで簡単にコンテンツを差し替えられる取り回しの良さも Web パーツの魅力です。担当者の更新作業にかかる負担を大幅に減らすことで、継続的な発信につながりやすいでしょう。

テンプレートを選んで配置するだけで、複数のコンテンツを一画面に集約でき、必要な情報に素早くアクセス可能なサイトが構築できるため、閲覧者にとっての利便性も高くなります。

Web パーツを追加する方法

サイトに Web パーツを追加する方法は、コンテンツウィンドウがある場合とない場合で異なります。コンテンツウィンドウがある場合の追加方法は次のとおりです。

SharePoint のサイト作成で Web パーツを追加するページに移動する
ページ右上にある「編集」をクリックして編集モードに移行する
ページ右側に表示されるツールボックスの上部に Web パーツ一覧が表示される
一覧から追加したい Web パーツをキャンバス上に選択（もしくはクリック & ドラッグ）する（すぐ見つからない場合は検索や「すべての Web パーツを表示」機能を使うと便利）

次にコンテンツウィンドウがない場合の Web パーツ追加方法を紹介します。

SharePoint のサイト作成で Web パーツを追加するページに移動する
ページ右上にある「編集」をクリックして編集モードに移行する
既存の Web パーツの上下どちらかにポインターを持っていくと丸で囲まれた「+」と直線が出るので「+」をクリックするとすべての Web パーツが表示される
表示された Web パーツから必要な Web パーツをキャンバス上に選択（もしくはクリック & ドラッグ）する（Webパーツは「検索」も可能）。

なお、どちらの場合も目的のサイトページが表示されない場合は、サイドリンクバーにある「サイトコンテンツ」からコンテンツの一覧で「サイトページ」をクリックしてください。

Web パーツを移動・削除する方法

追加した Web パーツをページ内の別の場所へ移動もしくは削除する際の方法は次のとおりです。

ページ右上にある「編集」をクリックして編集モードに移行する
移動もしくは削除したい Web パーツを選択する
選択された Web パーツの左側に小さなツールバーが表示される
Web パーツの移動は、「 Web パーツの移動」ボタンを選択した上で、ページ上の移動させたい場所までドラッグする
Web パーツの削除は、「 Web パーツの削除」ボタンを選択もしくはキーボードの「DEL」を選択する

【種類別】 Web パーツ一覧

SharePoint の Web パーツはテキストメディアコンテンツ、フィード、データ分析なども含め 7 種類です。ここではそれぞれの概要について解説します。

テキストメディアコンテンツ

テキストメディアコンテンツで利用できる Web パーツは次のとおりです。

クイックリンク：主に複数のリンクを表示
コールトゥアクション：次のアクションを促すため、ページ上部もしくは下部に設置するリンク
スペーサー：ページの視認性を高めるための空白の挿入
ボタン：リンクボタンの表示
画像：画像の説明（キャプション）の表示
画像ギャラリー：複数の画像を表示
分割バー：ページの視認性を高めるため、 Web パーツを分割させるための線を表示
テキスト：文字の表示
ヒーロー：リンクボタンの視認性を高めるため、ボタンに背景画像を設定
リンク：リンクの表示
YouTube ： YouTube の動画を埋め込む
Stream ： Microsoft Stream の動画を埋め込む

ドキュメントリストライブラリ

ドキュメントリストライブラリで利用できる Web パーツは次のとおりです。

サイト： SharePoint サイトをリストで表示
ファイルビューアー： OneDrive と連携してリンクされたファイルを表示
ドキュメントライブラリ： OneDrive と連携して指定したフォルダ内を表示
後のために保存：後で閲覧するためのコンテンツを表示
リスト：サイトに保存してあるリストの表示
ページプロパティ：サイトのページ詳細を表示。ページライブラリ内に設定した項目の表示も可能
最近使ったドキュメント：最近利用したドキュメントを表示

フィード

フィードで利用できる Web パーツは次のとおりです。

ハイライト： Microsoft Yammer で注目の会話、新着の会話などを表示
会話：あらかじめ Microsoft Yammer で指定した会話を表示
Viva コネクションのフィード：Microsoft Viva でのユーザー連携、スケジュールなどを使い、ユーザーに更新プログラムを表示
X ( 旧 Twitter ) ： X のタイムラインを表示

ニュース・人・イベント

ニュース・人・イベントで利用できる Web パーツは次のとおりです。

イベント： SharePoint で設定したイベントの追加・編集・表示
カウントダウンタイマー：設定したイベントや期限をカウントダウン形式で表示
ニュース：部署、チーム内で周知させたいニュースを表示
グループ予定表： Microsoft Outlook グループ予定表との連携によるスケジュールの表示
ユーザー： Microsoft365 のユーザー情報を表示
Planner ： Microsoft Planner との連携によるタスクを表示
組織図： Microsoft365 のユーザー情報を使った組織図の作成

データ分析

データ分析で利用できる Web パーツは次のとおりです。

クイックグラフ： SharePoint リストや Excel ファイルとの連携によりグラフの作成・表示
サイトアクティビティ：サイトの更新情報を表示
Power BI ： Microsoft Power BI との連携によるレポートの表示
Microsoft Forms ： Microsoft Forms との連携によるアンケートの表示

地域情報

地域情報で利用できる Web パーツは次のとおりです。

天気：指定した地域の天気を表示
世界の時計：世界各地の時間を表示
Bing 地図： Microsoft Bing との連携による地図表示

詳細設定

詳細設定で利用できる Web パーツは次のとおりです。

コードスニペット：プログラミング言語の表示
マークダウン： # ヘッダー、 ** 太字 ** など簡単な記述で HTML 文書に変換可能なマークアップ言語をサイトのページ内に埋め込む
埋め込み： iframe タグの埋め込みのみを表示

サイト Web パーツの活用方法

Web パーツの種類を把握したところで、実際にサイト内で Web パーツを活用する際の方法について解説します。

表示するサイトを選択する

任意の Web パーツを表示するサイトを選択する方法は次のとおりです。

Web パーツ左上にある「プロパティの編集」をクリックし、「サイトのプロパティ」ウィンドウを開く
AもしくはBいずれかの操作を行う
1. 「サイトの選択」をクリックし、追加するサイトを検索する。もしくはこのハブ、頻繁なサイト、最近使用したサイトなどに関連づけられたサイトから1つ以上を選択し、次に表示されるサイトのチェックボックスをオンにする。この操作により、表示する特定のサイト選択が可能になる
2. ハブサイトを使用している場合は、ハブ内にあるすべてのサイトをクリックする。もしくは現在のユーザー「頻繁なサイト（ユーザーの SharePoint ホームページと同じサイト）」をクリックすることで、サイトを自動的に表示させる

レイアウトを変更する

Web パーツのレイアウトを変更する方法は次のとおりです。

ページ右上にある「編集」をクリックして編集モードに移行する
「プロパティの編集」から「サイトのプロパティ」ウィンドウを開く
「レイアウト」で「フィルムストリップ」「カード」もしくは「コンパクト」を選択する。

サイトを並び替える

サイトを並び替える場合の方法は次のとおりです。

ページ右上にある「編集」をクリックして編集モードに移行する
「プロパティの編集」から「サイトのプロパティ」ウィンドウを開く
「レイアウト」で「カード」を選択する
ページ上の Web パーツで、並び替えたいサイトを目的の順序に沿ってドラッグ & ドロップする

なお、サイトの並び替えができるのは、「カード」のみです。「フィルムストリップ」や「コンパクト」では並び替えはできません。

重複、グループ化する

Web パーツを複製したり、グループ化したりする方法は次のとおりです。

ページ右上にある「編集」をクリックして編集モードに移行する
複製・グループ化したい Web パーツがあるセクションで、1つめの Web パーツをクリックして選択する（Ctrl キーを押しながらクリックすることで、複数の Web パーツをまとめて選択できる）
選択した状態で、上部に表示される共有ツールバーから「複製」や「グループ化」をクリックして、同じ構成のブロックをすぐ下に複製したり、Web パーツを1つのグループとして移動したりするといった操作を行う

必要に応じて「アイテムの配置」メニューを使うと、重なり順や位置合わせもまとめて調整できます。ページ全体のデザインをなるべく崩さないように編集したい場合に便利です。

SharePoint の Web パーツを活用しよう

SharePoint は、 HTML や CSS などの専門知識がなくとも直感的な操作でサイト作成が可能です。Outlook や Yammer など他の Microsoft が提供するツールとの連携、業務に必要なニュースの共有など、 Web パーツの活用でサイトの利便性はより高まります。

ここでは、サイトの構成や更新頻度、利用者環境を意識して、SharePoint の Web パーツをより効果的に活用する方法を解説します。

目的が明確でシンプルな構成にする

SharePoint のページは、開いた瞬間に「何のためのページか」「誰がどの情報を見ればよいか」が分かるようにすることが重要です。

まず、ページの目的と主な閲覧者を決め、その目的に直接関係する Web パーツだけを配置します。ニュースやドキュメント、予定表などを欲張って詰め込みすぎると、情報が散らばり閲覧者が必要な内容を見つけにくくなります。重要なコンテンツはページ上部にまとめ、補足情報は下部や別ページに分けるなど、構造をシンプルに保つことで、情報アーキテクチャ全体の分かりやすさも向上します。

特に運用開始の初期段階では、SharePoint に用意されているテンプレートをベースにページ構成を決め、追加するコンテンツや Web パーツは必要最小限にしましょう。

情報共有を迅速できるよう定期的に更新する

ニュースやお知らせの共有を目的としたページは、「最新情報が確認できる場所」として定期的にチェックされることを意識する必要があります。情報更新が遅い、もしくは古いコンテンツが放置されている状態では、サイトを訪れる価値が失われ、ページそのものが見られなくなってしまいます。

閲覧者が必要な情報にアクセスしやすいかどうか、まめにページ構成を見直すことも大切です。ニュース Web パーツや強調表示されたコンテンツ Web パーツを活用し、最新の更新日時順に表示したり、掲載期間を設定したりして、常に新しい情報が上位に並ぶように工夫しましょう。週次・月次などで担当者を決めておくと負担が分散し、継続的な更新につながります。

スマートフォンを意識した配置をする

SharePoint サイトは、端末の画面サイズに応じてレイアウトが自動調整される「レスポンシブデザイン」に対応しており、専用のモバイルアプリも提供されています。したがって、スマートフォンから閲覧されることも意識して Web パーツを配置する必要があります。

モバイルでは縦長レイアウトで表示されるため、重要な情報やリンクはページの上部にまとめるのが基本です。また、ファイルサイズの大きい画像を多数配置したり、ヒーローWebパーツを複数使用したりすると、モバイル回線では読み込みに時間がかかる場合があります。画像は適切に圧縮し、必要最小限の配置を心がけましょう。

実際にスマートフォンなどで表示を確認し、モバイルフレンドリーであるかどうか（操作しづらいボタンや読みにくいテキストがないか）を定期的にチェックしましょう。