Microsoft 365 に関するお役立ち情報

SharePoint Webパーツ完全一覧!効果的な活用法と実践デザインガイド

作成者: まぁさん|2023/06/29

SharePointを活用して社内ポータルサイトや情報共有基盤を構築する際、Webパーツは欠かせない存在となります。これらは、ページを構成する部品のようなもので、プログラミング知識がなくても直感的にサイトをカスタマイズできる強力なツールです。

 

本記事では、SharePointで利用可能な主要なWebパーツを紹介し、効果的な活用方法から実践的なデザインテクニックまで徹底解説します。

 

●この記事の目次

  1. Webパーツとは?SharePointで大事な理由もチェック
  2. 主なSharePointのWebパーツ一覧!
    2-1.①テキスト・メディア表示系
    2-1-1. テキスト:見出し・本文・表作成
    2-1-2. 画像/画像ギャラリー:単画像・スライドショー・カルーセル
    2-1-3. ファイルビューア:PDF/Word/動画の埋め込みプレビュー
    2-1-4. ボタン/コールトゥアクション:リンク誘導
    2-1-5. 分割バー/スペーサー:レイアウト区切り・余白調整
    2-2.②ドキュメント・リスト表示系
    2-2-1. ドキュメントライブラリ:ファイル一覧・共同編集リンク
    2-2-2. リスト:カスタムリスト
    2-2-3. クイックリンク:アイコン付きメニュー
    2-2-4. サイトページ:他のページ埋め込み
    2-3.③情報集約・ニュース系
    2-3-1. ニュース:記事一覧・自動フィード
    2-3-2. イベント:カレンダー表示
    2-3-3. ユーザー:組織図・社員プロファイル
    2-3-4. ヒーロー:注目情報バナー
    2-4.④分析・視覚化系
    2-4-1. Power BI:ダッシュボード埋め込み
    2-4-2. Microsoft Forms:アンケート・投票リアルタイム集計
    2-4-3. グループカレンダー:チーム予定共有
    2-5.⑤外部連携・動的コンテンツ系
    2-5-1. 埋め込み:YouTube・外部サイトiframe
    2-5-2. 動的ページ:フィルター対応リスト
    2-5-3. ページ閲覧数:アクセス解析カウンター
  3. SharePointのWeb パーツを効果的に使う5つのポイント!
    3-1.①シンプルを意識して詰め込みすぎない
    3-2.②目的とターゲットを明確にして設計する
    3-3.③ビジュアルで分かりやすいデザインにする
    3-4.④モバイルフレンドリーを心がける
    3-5.⑤定期的に見直す
  4. SharePointの実際の活用例を図付きで解説!
    4-1.サイトテンプレートを適用する方法
    4-2.外観の変更をする方法
    4-2-1. テーマ
    4-2-2. ヘッダー
    4-2-3. ナビゲーション
    4-2-4. フッター
  5. SharePoint に関するご相談はSGプラスまで

 

 

Webパーツとは?SharePointで大事な理由もチェック

Webパーツとは、SharePointのページに配置できる小さな機能ブロックのことを指します。これらのパーツをドラッグ&ドロップで配置・設定を変更するだけで、専門的な知識がなくても柔軟にページのレイアウトや表示内容を調整できるのが大きな特徴です。

 

WebパーツがSharePointにおいて重要視される理由は、主に4つあります。

  • プログラミングスキルを持たない方でも直感的な操作でサイトをカスタマイズできる点
  • 複数のWebパーツを組み合わせることで関連情報を一箇所に集約できる点
  • 業務フローの効率化が実現できる点
  • 快適な操作環境を提供できる点

 

SharePointの基本機能や活用方法について、さらに詳しく知りたい方はこちらの記事も参考にしてみてください。

 

◼︎ SharePointでできること9つとできないこと3つを徹底解説!活用するポイントや導入の流れも紹介!

主なSharePointのWebパーツ一覧!

SharePointには、標準で数多くのWebパーツが用意されています。ここでは、特に利用頻度が高く、実務で役立つパーツをカテゴリ別に詳しくご紹介していくので参考にしてください。

①テキスト・メディア表示系

情報伝達や視覚的な魅力を高めるために活用されるWebパーツ群です。これらは、サイトの基本となる要素を構成します。テキスト、画像、ファイル表示といった基礎的な機能から、ボタンやレイアウト調整まで、幅広い用途に対応できるパーツが揃っています。

 

利用者にとって分かりやすく、見やすいページを作成するために欠かせない存在といえるでしょう。

テキスト:見出し・本文・表作成

テキストWebパーツは、リッチテキスト形式で文章を自由に表示できる基本的なパーツです。見出し、段落、箇条書き、画像、リンクなどを挿入できます。

 

ニュースやお知らせの掲載、ページの概要説明、FAQの作成、会議の議事録表示など、幅広い用途で活躍します。表形式でのデータ整理にも対応しており、視認性の高い情報提示が実現できる点が特徴です。

画像/画像ギャラリー:単画像・スライドショー・カルーセル

画像Webパーツを使用すると、ページに視覚的要素を追加できます。単一の画像表示だけでなく、画像ギャラリー機能を使えば、複数の画像をスライドショーやカルーセル形式で表示することも可能です。

 

会社のロゴやブランドイメージ、イベント告知バナー、製品紹介画像などの掲載に適しています。

ファイルビューア:PDF/Word/動画の埋め込みプレビュー

ファイルビューアWebパーツは、MicrosoftOfficeファイルやPDFファイルなどを、Webページ上で直接プレビュー表示できる便利な機能です。ユーザーはファイルをダウンロードすることなく、ブラウザ内で内容を確認できます。

 

会議資料の事前共有、社内規定やマニュアルの閲覧、プレゼンテーション資料の共有などに活用でき、情報へのアクセス性が大幅に向上します。

ボタン/コールトゥアクション:リンク誘導

ボタンWebパーツは、ユーザーを特定のページやアクションへ誘導するための視覚的な要素です。コールトゥアクション機能を備えており、クリックを促す効果的なデザインが可能となります。

 

申請フォームへのリンク、重要資料のダウンロードボタン、関連ページへのナビゲーション、外部システムへのアクセスポイントなど、ユーザー行動を明確に誘導したい場面で重宝されます。

分割バー/スペーサー:レイアウト区切り・余白調整

分割バーとスペーサーは、ページのレイアウトを整理するための補助的なWebパーツです。分割バーはセクション間に視覚的な区切りを設け、スペーサーは要素間の余白を調整します。

 

適切に配置することで、情報の階層構造が明確になり、ユーザーにとって読みやすく理解しやすいページデザインを実現できます。デザインの質を高めるために重要な役割を果たすでしょう。

②ドキュメント・リスト表示系

SharePointの中核機能であるドキュメント管理とリスト機能を、ページ上で効果的に表示するためのWebパーツ群です。これらのパーツは、ファイル共有やタスク管理、情報の構造化といった業務の基盤を支える重要な役割を担います。

 

データの可視化と効率的なアクセスの実現・チーム全体の生産性向上につながります。

ドキュメントライブラリ:ファイル一覧・共同編集リンク

ドキュメントライブラリWebパーツは、SharePointのドキュメントライブラリに保存されているファイルをページ上に表示する機能です。ファイルのアップロード、ダウンロード、プレビュー、編集などが直接行えます。

プロジェクト関連の共有ドキュメント管理、部署ごとのファイルスペース、テンプレートファイルの共有などに活用できます。

リスト:カスタムリスト

リストWebパーツは、SharePointリストに登録されている項目を表示する機能です。カスタムリスト、連絡先リスト、タスクリストなど、さまざまな種類のリストに対応しており、リスト項目の直接編集も可能です。

 

タスク管理や進捗状況の可視化、FAQやナレッジベースの構築、備品管理リスト、顧客情報や問い合わせ履歴の管理など、構造化されたデータを扱う場面で活躍します。

クイックリンク:アイコン付きメニュー

クイックリンクWebパーツは、重要なリンクをアイコン付きで視覚的に分かりやすく表示できる優れたナビゲーションツールです。

 

よくアクセスする社内システムへのリンク集、関連部署のSharePointサイトへのリンク、社外の有用な情報サイトへのリンク、承認フローや申請フォームへのショートカットなど、ユーザーの利便性を高める目的で広く活用できるでしょう。

サイトページ:他のページ埋め込み

サイトページWebパーツを使用すると、他のSharePointページの内容を現在のページに埋め込んで表示できます。これにより、情報の再利用性が高まり、複数のページで同じ情報を更新する手間が省けます。

 

全社共通のお知らせを各部署のページに表示、よくある質問ページの埋め込み、関連プロジェクトのステータスページの参照など、情報の一元管理と共有の効率化を実現します。

③情報集約・ニュース系

組織内の最新情報やイベント、人事情報などを効果的に集約・表示するためのWebパーツで、社内コミュニケーションを活性化し、重要な情報の周知徹底を支援する機能です。

 

タイムリーな情報発信により、組織全体の一体感が生まれ、意思決定のスピードアップにもつながるでしょう。

ニュース:記事一覧・自動フィード

ニュースWebパーツは、SharePointサイト内のニュース投稿を表示し、ニュース記事の作成、公開、管理を容易に行える機能です。社内のお知らせや更新情報の共有、部署からの連絡事項、経営層からのメッセージ、イベント告知や社員紹介など、組織内コミュニケーションの中心的な役割を担います。

 

自動フィード機能により、最新情報が常に表示され、情報の鮮度が保たれる点が特徴です。

イベント:カレンダー表示

イベントWebパーツは、ユーザーが簡単にイベントを作成・管理できる機能です。日付順での表示や特定期間のイベントのみの表示など、柔軟なビュー設定が可能です。

 

社内イベントやセミナーの告知、会議の予定表示、部署内の懇親会や歓迎会の案内、プロジェクトのマイルストーン表示など、スケジュール共有の場面で重宝され、チームの予定管理を効率化します。

ユーザー:組織図・社員プロファイル

ユーザーWebパーツは、特定のユーザーやグループの情報を表示する機能です。写真、役職、連絡先情報などが表示され、直接メール送信やチャット開始も可能となります。

 

プロジェクトメンバーの紹介、部署の担当者一覧、新しいメンバーの紹介、社内ヘルプデスクの連絡先表示など、組織内の人的リソースへのアクセスを容易にし、コミュニケーションの活性化を促進します。

ヒーロー:注目情報バナー

ヒーローWebパーツは、画像、テキスト、リンクを組み合わせた大きなバナー形式のコンポーネントです。デザイン性と視覚性が高く、注目を集めたいページやトピックへのリンク設定に最適とされています。

 

重要なキャンペーンやプロジェクトの告知、経営方針や戦略の発表、新サービスや製品のプロモーションなど、視覚的インパクトを重視する場面で活躍します。ヒーローに関しては、こちらの記事も参考にしてください。

 

◼︎ 【SharePoint】注目を集めたいリンクはWebパーツの「ヒーロー」を配置!

④分析・視覚化系

データの分析結果や、進捗状況を視覚的に分かりやすく表示するためのWebパーツ群です。数値データを効果的に可視化し、意思決定を支援する重要な役割を担います。

PowerBI:ダッシュボード埋め込み

PowerBIWebパーツを使用すると、MicrosoftPowerBIで作成されたレポートやダッシュボードをSharePointページに直接埋め込んで表示できます。

 

営業成績のダッシュボード表示、プロジェクトの進捗状況レポート、ウェブサイトのアクセス解析データ、生産ラインの稼働状況モニタリングなど、リアルタイムのデータ可視化が実現し、意思決定の迅速化に直結するでしょう。

MicrosoftForms:アンケート・投票リアルタイム集計

MicrosoftFormsWebパーツは、MicrosoftFormsで作成したアンケートやクイズをページに埋め込み、回答を収集できる機能です。

 

社内アンケートの実施、意見募集やフィードバックの収集、簡易的なテストやクイズ、イベント参加申し込みフォームなど、双方向のコミュニケーションツールとして活用されます。リアルタイム集計機能により、即座に結果を確認できる点も魅力です。

グループカレンダー:チーム予定共有

グループカレンダーWebパーツは、Microsoft365グループやTeamsのカレンダーを表示し、チームメンバー間で予定を共有する機能です。

 

チームミーティングのスケジュール管理、プロジェクトの重要な日程の可視化、休暇や不在情報の共有、部署全体のイベント予定一覧など、スケジュール調整とコラボレーションの効率化に寄与し、チームワークを向上させます。

⑤外部連携・動的コンテンツ系

外部サービスとの連携や、動的なコンテンツ表示を可能にするWebパーツ群です。SharePointの機能を拡張し、より柔軟で高度な活用を実現します。

埋め込み:YouTube・外部サイトiframe

埋め込みWebパーツは、任意のHTMLコードやスクリプトを挿入し、外部サービスのコンテンツをページに表示できる強力な機能です。

 

YouTubeにアップロードされた研修動画の埋め込み、Googleマップでの会社所在地表示、Twitterの公式アカウントフィード表示、予約システムやアンケートフォームの埋め込みなど、SharePointの機能を大きく拡張し、外部ツールとのシームレスな連携を可能にします。

動的ページ:フィルター対応リスト

動的ページWebパーツを活用すると、ユーザーの操作や条件に応じて表示内容が変化するインタラクティブなページを構築できます。フィルター機能を備えたリスト表示により、大量のデータから必要な情報を素早く抽出できるようになります。

 

製品カタログの検索、顧客リストの絞り込み、プロジェクトステータスの条件別表示など、データベース的な活用が可能です。

ページ閲覧数:アクセス解析カウンター

ページ閲覧数Webパーツは、現在のページがどれだけ閲覧されているかをカウントし、表示する機能です。

 

コンテンツの人気度測定、情報の到達率確認、ページ改善の判断材料、ユーザーの関心度の可視化など、サイト運営の効果測定に役立つデータを提供します。シンプルながら、コンテンツ戦略の立案に有用な情報源となり、サイト改善のヒントを得られます。

SharePointのWebパーツを効果的に使う5つのポイント!

Webパーツを単に配置するだけでは、使いにくいサイトになってしまう可能性があります。ここでは、効果的な活用のためのポイントをご紹介します。

①シンプルを意識して詰め込みすぎない

一度に多くの情報を詰め込みすぎると、ユーザーは混乱してしまいます。本当に必要なWebパーツのみを配置し、シンプルで分かりやすいレイアウトを心がけてください。トップページには主要な情報へのリンクや最新ニュースなど、最低限かつ重要な情報のみを表示しましょう。

 

詳細情報は各サブページで確認できるように誘導する設計が効果的です。情報の優先順位を明確にし、段階的に情報を提供する構造を意識することで、ユーザーエクスペリエンスが向上します。余白を適切に活用し、視覚的な圧迫感を軽減することも大切なポイントとなります。

②目的とターゲットを明確にして設計する

ページを作成する前に、そのページの目的やターゲットユーザーを明確にしましょう。誰が、何を、どのように利用するページなのかを考えることで、必要なWebパーツが自然と見えてきます。

 

営業チーム向けのダッシュボードページであれば、最新の売上データ(PowerBI)、顧客リスト(リスト)、営業資料(ドキュメントライブラリ)、関連ニュース(ニュース)などが中心となるでしょう。部署や役割によって必要な情報は異なるため、ターゲットに合わせたカスタマイズを行うのがポイントです。

③ビジュアルで分かりやすいデザインにする

見出しや区切り線、画像の配置などを工夫して、情報の優先順位や関連性を視覚的に表現しましょう。重要な情報は大きく、目立つように配置することで、ユーザーは効率的に情報を把握できます。

 

ページの冒頭には重要な告知をテキストWebパーツで大きく表示し、その下にクイックリンクWebパーツでよく使うリソースへのリンクをまとめるといった配置が効果的です。色やフォントサイズの統一、アイコンの活用により、視認性と美しさを両立させることができます。視覚的な階層構造を意識したデザインは、ユーザーの認知負荷を軽減し、快適な閲覧体験を提供します。

④モバイルフレンドリーを心がける

スマートフォンやタブレットからSharePointにアクセスすることを想定し、モバイルでの表示も確認しながら調整を行ってください。Webパーツは基本的にレスポンシブデザインに対応していますが、配置によってはモバイルでの見栄えが悪くなるケースもあります。

 

横に広いレイアウトよりも、縦に伸びるレイアウトの方がモバイルに適しています。また、テキストサイズやボタンの大きさもタッチ操作を考慮した設計が求められます。モバイルファーストの視点を持つことが、近年のサイト設計において不可欠です。

⑤定期的に見直す

時間の経過とともに、ビジネスの要件やユーザーのニーズは変化します。定期的にSharePointサイトやページの利用状況を確認し、不要なWebパーツの削除や、新しいWebパーツの追加などを検討しましょう。特定のWebパーツのアクセス数が低い場合、その必要性を再検討したり、より使いやすい代替案を模索したりする必要があります。

 

見直しの際は、アクセス解析データを活用し、実際のユーザー行動を把握することで、改善の方向性が明確になります。四半期ごとや半年ごとなど、定期的なレビュー会議を設け、チーム全体で改善点を話し合う体制を整えることをおすすめします。継続的な改善サイクルを回すことで、常に最適な状態を維持でき、ユーザー満足度の高いサイト運営がしやすくなるでしょう。

SharePointの実際の活用例を図付きで解説!

SharePointで社内ポータルサイトを作成するときに、サイトテンプレートを使用し簡単にサイトを作成することが可能です。SharePointは、デザイン面において出来ることに制約がありますが、そういったこともテンプレートを使用すれば、気になることもありません。また、サイトのテーマカラーの変更やヘッダー部分の変更など、外観の設定をすることでデザインを整えることができます。

ここでは、サイトテンプレートの使用方法と外観の設定の変更方法について図解付きでご説明していきます。SharePointのサイトコンテンツについて詳しく知りたい方は、こちらの記事でも紹介しているので、参考にしてください。

SharePointの実際の活用例を図付きで解説!

サイトテンプレートを適用する方法についてご説明します。
サイトテンプレートは、マイクロソフトや所属している組織が提供するテンプレートを利用することで、簡単にサイトの構成やデザインを設定することができます。

サイトテンプレートを適用するときは、右上の「設定」と吹き出しが出るアイコンをクリックします。表示されるメニューから「サイトテンプレートを適用」をクリックします。

表示される画面の上部に「Microsoft から」と「所属している組織から」の2つのタブが表示されます。

「Microsoft から」を選択すると、Microsoft から提供される、危機管理、人事等、10種類を超えるサイトテンプレートが表示されます。それぞれ、サイトの目的により必要な Web パーツやコンテンツのサンプルが提供されており、デザイン性も高いテンプレートになっています。

「所属している組織から」を選択すると、組織からテンプレートが提供されている場合は表示されますが、提供されているケースは稀です。

作成する目的や好きなデザインでテンプレートを選択すると、サイトの機能や画面イメージが表示されるので、確認後に「テンプレートを使用」と書かれたボタンをクリックします。テンプレートの適用には少し時間がかかりますが、選択したテンプレートの適用されたサイトが表示されます。



外観の変更をする方法

色やヘッダーといったデザインに影響を与える要素を変更する方法についてご説明します。

外観を変更するときは、右上にある「設定」と吹き出しが出るアイコンをクリックします。表示されるナビゲーションから「外観の変更」をクリックします。



テーマ

外観の変更画面から「テーマ」をクリックします。

テーマは、ボタンの色や背景の色、文字の色、リンクの色等の組み合わせです。選択されているテーマが一番上に表示されます。「カスタマイズ​​​」と書かれたリンクをクリックするとメインの色とアクセントカラーをカスタマイズすることができます。

会社でオリジナルのテーマが提供されている場合は、会社のテーマの下に表示されます。

SharePoint テーマの下に10種類のテーマが表示されるので、好きな色の組み合わせを選択します。設定が完了したら保存ボタンをクリックします。他の外観の設定を行う場合は、テーマの左にある矢印をクリックします。



ヘッダー

外観の変更画面から「ヘッダー」をクリックします。

「レイアウト」の下で「ミニマル」「コンパクト」「標準」「拡張」の中から好きなレイアウトを選択します。「拡張」を選択するとヘッダー画像を設定することができます。

「アップロード」と書かれたリンクをクリックすると、画像をアップロードできます。事前に 1920px × 100px の画像を準備しておくときれいに表示されます。

「背景」の下で4種類中から背景の色を選択します。「表示」の下でサイトのタイトルの表示/非表示を切り替えることができます。

またサイトのロゴを指定することができます。
「変更」と書かれたリンクをクリックすると、画像をアップロードできます。設定が完了したら保存ボタンをクリックします。​​​​​​​他の外観の設定を行う場合は、ヘッダーの左にある矢印をクリックします。



ナビゲーション

外観の変更画面から「ナビゲーション」をクリックします。

メニューのスタイルは、「メガメニュー」と「カスケード」の2種類から選択できます。

メガメニューは2階層目以降が大きな吹き出しで表示されるスタイルです。3階層目も含めて一気に見ることができます。

カスケードは、2階層目にマウスカーソルを合わせると3階層目が表示されるスタイルです。

また、「サイトナビゲーションの可視化」の下にあるトグルボタンを「オフ」にすると、ナビゲーションを消すことができます。設定が完了したら保存ボタンをクリックします。他の外観の設定を行う場合は、ナビゲーションの左にある矢印をクリックします。



フッター

外観の変更画面から「フッター」をクリックします。

「有効にする」の下でフッターのオン/オフを切り替えることができます。

「レイアウト」の下で「シンプル」「拡張」の中から好きなレイアウトを選択します。

「ロゴ」の下でサイトのロゴを指定することができます。「変更」と書かれたリンクをクリックすると、画像をアップロードできます。

「表示名」の下で記入したサイト名やメッセージを表示することができます。背景の下で4種類中から背景の色を選択します。設定が完了したら保存ボタンをクリックします。


SharePoint に関するご相談はSGプラスまで

今回は、SharePoint のサイトページのデザインの変更方法についてご説明しました。
SharePoint で作成したポータルサイトは、あらゆる社内情報を一元管理でき、ドキュメントを含む情報共有も行えるサイトになります。
「情報を展開できること」、「簡単に情報が探せること」を考え、サイトページ作成を行うことが大切になります。

ポータルサイトを作成したが、見やすくレイアウトやデザインを変更したいなど、お困りのことがありましたら、ぜひ弊社へご相談ください。
Microsft365を知り尽くした弊社のコンサルタントが丁寧にご説明させていただきます。

SharePoint の関連ブログ一覧は こちら
関連サービス:
Microsoft 365 導入支援サービス