実習ノート全38レッスン

SharePoint サイト構築 実習ノート

ユースフル「SharePoint サイト構築コース」(講師:ユースフル 大原)の動画の内容を、読み物として整理しました。総務部の社内ポータル「総務ポータル」を、動画と同じ順番で自分の SharePoint に作れるようにしてあります。

使い方:手順の番号の下にあるチェックボックスで、できたところに印を付けられます(このブラウザに保存)。この形の文字はクリックするとコピーできます。画像はクリックで拡大できます。

※画面は収録時点のものです。SharePoint の画面やメニュー名は更新で変わることがあります。サイトの作成・ハブサイト・権限の設定には、組織の設定や管理者権限が必要な場合があります。「使用ファイル」はコースフォルダ内の「配布資料」(総務ロゴ.png/総務Q&Aリスト.xlsx/社内既定ドキュメント)です。

作るサイトと学ぶこと一覧

このコースで作る「総務ポータル」のページ構成です。まず中のページ(ハブ → 詳細)を作り、最後に入口となるトップページを仕上げます。

ページ階層役割作るレッスン
ホーム(総務ポータル)トップ3つの入口・よく使う申請・ニュース・最近更新された規定#6-03#6-05
各種申請・手続きハブ申請をカテゴリ別に案内し、詳細ページへつなぐ#3-03#3-04
制度・ルール案内ハブ規定をカテゴリ別に案内し、ドキュメントライブラリを表示#3-05#3-06
勤怠・休暇の申請詳細申請ボタン・注意事項・関連する規定(フィルタビュー)#4-03#4-04
総務Q&AハブFAQリスト+カテゴリカードで絞り込み、問い合わせ先#4-05#4-07
#レッスンポイント
1-03よくある悩み入口・導線、ページの「型」、ニュースと情報発信の3つの壁
1-04学習の進め方中のページ → トップの順、ホーム/ハブ/詳細の3階層
2-02サイトの種類チームサイト(共同作業)とコミュニケーションサイト(情報発信)
2-03サイト作成コミュニケーションサイト、テーマ、ヘッダー、ロゴ
2-04基本用語サイト・ページ・セクション・Webパーツ
3-03各種申請・手続きページ空白ページ、タイトル領域、パンくずリスト、ボタン、セクション背景
3-04問い合わせ窓口・公開テキスト・区切り線、ユーザープロファイルは使わない、公開とページ一覧
3-05制度・ルール案内ページページのコピー、カテゴリ別の制度説明と誘導文
3-06ドキュメントライブラリ配置ライブラリ作成、カテゴリ列、グループ化ビュー、Webパーツで表示
4-03勤怠・休暇の申請ページストック画像、クイックリンク(ボタン)、注意事項の強調
4-04フィルタビューカテゴリでフィルターしたビューを詳細ページに表示
4-05FAQリストExcel(テーブル形式)からリスト作成、グループ化ビュー
4-06カテゴリカードカテゴリ用リスト、ギャラリービュー、動的フィルター
4-07問い合わせ・関連ページクイックリンクで関連ページ、画像の差し替え
4-08関連ページリンク各ページ末尾に関連ページ、ページURLのコピー
5-02ニュースの仕組みページとの違い、ニュースは「流れる情報」
5-03ニュース作成・公開ニュースの投稿、タイトル領域、ボタンで申込先へ、メール送信
5-04ニュースのカテゴリサイトのページに列を追加、ドキュメントへのリンク、ビュー
5-05公開・更新・スケジュール・承認再公開、スケジュール(地域設定)、承認フロー
6-033つの入口・申請リンク絵文字アイコン、クイックリンクのボタン
6-04ニュース・強調表示ニュースWebパーツ、強調表示されたコンテンツ、ニュースダイジェスト
6-05導線チェックホーム → ハブ → 詳細の流れを確認
7-02サイトナビゲーションラベル・サブリンク、メガメニュー
7-03権限と共有フルコントロール/編集/読み取り、サイトのアクセス許可
7-04ハブサイト連携ハブサイトとして登録・関連付け、検索はアクセス権のある情報のみ
7-05サイト使用状況閲覧数・人気コンテンツ、増やす・減らす・変える

用語メモ

用語意味
サイトページやライブラリ・リストをまとめた「入れ物」。このコースでは「総務ポータル」
ページサイトの中の1枚1枚の画面(ホーム、各種申請・手続き など)
セクションページを横に区切る段。段ごとに列数(レイアウト)と背景を決める
Webパーツセクションに置く部品(テキスト、画像、ボタン、クイックリンク、ニュース など)
ハブ/詳細ページハブ=カテゴリ別の案内ページ、詳細=個別の手続きなどを説明するページ
パンくずリスト「総務ポータル > 各種申請・手続き」のように、今いる場所を示すリンクのテキスト
クイックリンク複数のリンクをボタンやタイルでまとめて並べる Webパーツ
ドキュメントライブラリ/ビューファイルを保管する場所。ビュー=並べ方・絞り込み方を保存した表示
SharePointリスト表形式のデータ(FAQ など)。Excel から作成できる
動的フィルターあるリストで選んだ値(カテゴリ)で、別のリストの表示を絞り込む仕組み
ニュース/ニュースダイジェストお知らせ用のページ。ダイジェスト=複数のニュースをメールでまとめて送る機能
強調表示されたコンテンツ条件(ライブラリ・並び順など)に合うファイルやページを自動で一覧表示する Webパーツ
ナビゲーション/ラベル/サブリンクサイト上部のメニュー。ラベル=リンクなしの見出し、サブリンク=その下の項目
ハブサイト複数のサイトを束ね、共通のナビゲーションと横断検索を持たせる仕組み
権限フルコントロール(管理者)/編集(サイトメンバー)/読み取り(サイト閲覧者)
セクション1 オープニング

#1-01はじめに

社内の情報を一か所にまとめた社内ポータルサイトを SharePoint で作る講座です(講師:ユースフル 大原)。サイトを作ること自体はそれほど難しくありません。大切なのは「使われるサイト」にすることです。

  • よくある話:せっかく作ったのに誰も見てくれない/どこに何があるかわからないと言われる/結局 Teams やメールで毎回 URL を送っている。
  • 原因の多くは、情報の入口をどこに作るか、どんなページが必要か、利用者がどう動くかという設計ができていないこと。
  • 本講座では操作方法だけでなく、使われるポータルにするための設計の考え方まで学ぶ。
  • 題材は総務部門のポータルサイト。休暇申請、社内規定の確認、よくある質問への対応など、総務の情報を一か所に集めたサイトを手を動かして作る。

本講座で学ぶ4つのこと

  1. サイトの構造設計
  2. 申請・制度・Q&A といった各種ページの具体的な作り方
  3. ニュース機能を使った社内への情報発信
  4. 作ったサイトを使い続けてもらうための運用設定
#1-01 画面 11

受講後には、自分の職場でもすぐに再現できるポータルが作れる状態を目指します。

#1-02講座の概要とサイトの完成イメージ

架空の会社の総務ポータルを作ります。考え方やサイト構成の作り方は総務に限らず、どんな部門にも応用できます。

#1-02 画面 2
完成イメージ(総務ポータル)

用語:サイトとページ

  • サイト:総務ポータルという大きな箱。
  • ページ:サイトの中にある、情報が記載された1つ1つの画面。

サイトを構成するページ

ページ役割
ホームサイト全体の入口。ここを見れば目的の情報にすぐたどり着ける、全体の案内役
各種申請・手続き休暇申請や経費精算など社内の様々な申請をカテゴリ別に整理。どの申請をどこからやればいいか一目でわかる
制度・ルール案内社内規定や各種制度の内容を確認できる。下の方で各種社内規定のドキュメントも確認できる
総務 Q&Aわからないことが出てきたときのよくある質問と回答。担当者に聞かなくても自分で調べて解決できる場所
#1-02 画面 8
#1-02 画面 12
#1-02 画面 13
本講座のゴール単にサイトを1つ作れるようになることではなく、使われるサイトを作ること。目的の情報にすぐたどり着ける動線の作り方や、担当者に聞かなくても自己解決できる情報の届け方まで学ぶ。

#1-03よくある悩みとSharePointサイトで解決できること

ポータルサイトを整備する担当者がよく抱える3つの壁と、本講座での解決策です。

#1-03 画面 2
悩み原因本講座での解決策
① どこに何があるかわからない
情報やファイルが散らばり、毎回問い合わせを受ける
情報の入口が整っていないホームのページの設計と各ページへの動線を整え、ここを見れば迷わず目的にたどり着けるホームを作る
② 何から始めていいかわからない
どんなページを用意し、どんな情報をどう表示すればいいか
申請・制度・Q&A といった定番ページの型を学ぶ。どの部門のポータルにも応用できる
③ 作っても見られない情報を置くだけで、届ける仕組みがないニュース機能を使った周知の仕組み、トップページへの情報集約で、自然と情報が届く動線を作る

#1-04学習の進め方とサイト構成の全体像

全体像を把握しておくと、各動画の位置づけが明確になって理解しやすくなります。

4つのステップ

#1-04 画面 3
  1. サイト環境を用意する
  2. 中身のページを作る
  3. ホームのページを完成させる
  4. 仕上げと運用設定
ポイント:ステップ2と3の順番 一般的にはホームから作り始めるイメージがあるが、この講座では逆。先に中身のページを作り込んでから、最後にホームで全体を統合する。中身がない状態でホームを作っても動線の設計がうまくいかないため。

作る中身のページは大きく3種類:ハブページ詳細ページニュースページ

サイトの3層構造

#1-04 画面 6
ページ役割
第1層ホームポータル全体の入口。たどり着きたい情報ごとの動線を示す
第2層ハブページ(各種申請・手続き、制度・ルール案内 など)第3層の詳細ページに案内する
第3層詳細ページ(勤怠・休暇の申請 など)アクセスした人が実際に行動を起こす(申請するなど)場所

実際の動線

  1. ホームの [申請・届出をする] から各種申請・手続きページへ移動。
    #1-04 画面 7
  2. 勤怠・休暇[詳細] をクリック → 勤怠・休暇の各種申請の詳細ページへ。ここのリンクから申請する。
    #1-04 画面 9
  3. タイトルの上に、たどってきた3つのページの流れ(ホーム → ハブ → 詳細)が表示されている。
本講座では色付けされた合計5つのページを作成する。「中のページを先に作って最後にホームで統合する流れ」と「ホーム・ハブ・詳細の3層構造」の2点を押さえておこう。
セクション2 サイト環境を用意する

#2-01このセクションで学ぶこと(サイト環境を用意する)

ポータルサイトを作り始める前に必要な、サイト環境の準備を行います。土台がしっかり整うと、この後の作業がぐっとやりやすくなります。

  1. チームサイトとコミュニケーションサイトの違い:SharePoint のサイトは2種類。どちらを選ぶべきか理解してから作り始める。
  2. サイトの作成と初期設定:サイトを作り、テーマやロゴなどの見た目を整える。
  3. SharePoint の基本用語と画面構成:講座で何度も出てくる用語や画面の見方を押さえる。

#2-02チームサイトとコミュニケーションサイトの違い

最初の選択がこの後のサイト設計に影響します。2つの種類をしっかり押さえましょう。

  1. SharePoint のスタートページを開き、画面左上の [+ サイトの作成] をクリック → サイトの種類を選ぶ画面が出る。
    #2-02 画面 4
チームサイトコミュニケーションサイト
用途部署やプロジェクト単位でメンバーがファイルを編集し合ったり共有したりする場所いわゆる社内ポータルサイトを作るための機能
イメージ横方向の情報共有(特定メンバーで共同編集)社内の掲示板。経営層のメッセージや社内ニュースの告知など、特定の発信者から多くの社員へ縦方向の情報伝達
M365 グループ連動する(Teams のチームや Outlook のグループメールアドレスと自動的につながる)連動しない。多くの人に情報を届けることに特化
#2-02 画面 8
メンバー間で情報やファイルを共有し合う環境ならチームサイト、社内の多くの人に見てもらうポータルや掲示板ならコミュニケーションサイト。どちらが正解ではなく目的に合わせて使い分ける。今回の総務ポータルは社内の多くの人に使ってもらう情報発信の場なので、コミュニケーションサイトを使う。

#2-03コミュニケーションサイトをつくる

コミュニケーションサイトを作成し、テーマやロゴなどの初期設定を整えます。

使用ファイル:総務ロゴ.png(配布資料)

サイトを作成する

  1. [サイトの作成]で [コミュニケーション サイト] を選ぶ。Microsoft が用意したテンプレートの選択画面が出るが、今回は一番下の 空白 から作成する。
    #2-03 画面 4
  2. サイト名は必ず英語表記で付ける。サイト名がそのままサイトアドレスに使われ、アドレスに日本語は使えないため。後から見て何のサイトか一目でわかる名前に。入力するとサイトアドレス欄も自動で反映される。
    #2-03 画面 6
    サイト名は後から日本語に変更できます。サイトの説明は空欄でもよいが、後で見返したときにわかりやすいよう入れておく。
  3. [次へ] → 言語を選んで [サイトの作成]。「次のステップ」の表示は一度閉じる。
    #2-03 画面 8

サイト名を日本語にする

  1. 画面右上の 歯車アイコン → [サイト情報]
    #2-03 画面 9
  2. サイト名をわかりやすい日本語(例:総務ポータル)にして [保存]
    #2-03 画面 10
  3. 表示が日本語の「総務ポータル」になる。タイトルをクリックしてアドレスを見ると、URL は英語のまま、表示名だけ日本語に変わっている。
    #2-03 画面 12

テーマカラーとヘッダー

  1. 歯車アイコン → [外観の変更][テーマ]。今回は紫のテーマを選ぶ。左の戻る矢印で戻る。
    #2-03 画面 13
  2. [ヘッダー]:レイアウトはミニマル/コンパクト/標準/拡張から選べる。今回は コンパクト[デザイン]タブでテーマの色を一つ右の紫にすると、ヘッダーの色が変わる。ページ全体のテーマカラーと色を統一するのがポイント。
    #2-03 画面 15

ロゴを設定する

  1. ヘッダー設定を下にスクロールすると サイトのロゴ(サイト名の左に表示されるロゴ)を設定できる。[変更] → [アップロード] で用意したロゴ画像を選んで [開く][画像の追加]
    #2-03 画面 18
  2. ロゴが変わる。同じように下の サイトのロゴのサムネイル も変更しておく。
    #2-03 画面 19
  3. [保存]。会社のロゴや部門のアイコンを設定しておくと、利用者が「これは総務のポータルだ」と一目でわかる。
    #2-03 画面 21
ロゴを作れない場合は、Copilot で画像を生成して活用することもできる(講座内の紹介)。
ポイント ① サイト名は英語表記で作成し、後から日本語に変更する ② テーマカラーとロゴは、サイトを作り込む前に設定しておく

#2-04基本用語と画面構成

SharePoint を使ううえで欠かせない基本用語と画面構成。完成状態のデモサイトで確認します。

サイトの構造は4層

#2-04 画面 25
用語意味
サイト一番大きな単位。総務ポータル全体(インターネットの Web サイトと同じイメージ)
ページサイトの中の各画面。例:アクセス時に最初に表示されるホーム、各種申請・手続き、総務 Q&A
セクションページを構成する横一列の区画。役割ごとに分かれ、積み重なってページができる
Web パーツセクションの中に入れる1つ1つのパーツ(テキスト、クイックリンク、ドキュメントライブラリ など)

また、画面上部に並ぶ各ページへのリンクのタブをナビゲーションと言います(詳しくは #7-02)。

#2-04 画面 8

ページの内部を見る

  1. 右上の [編集] で編集モードにすると、ページが横一列の区画(セクション)の積み重ねでできているのがわかる。
    #2-04 画面 10
  2. セクションをクリックして [プロパティを編集] を選ぶと、右側に設定ウィンドウが出る。レイアウトを1段組・2段組・3段組などに自由に設定できる(情報を横一列に並べたいときは1段組、2列に並べたいときは2段組)。
    #2-04 画面 14
  3. セクション内の [+](新しい Web パーツを追加) をクリックすると、追加できる Web パーツの一覧が表示される。テキスト、クイックリンク、ドキュメントライブラリなど多くの種類がある。
    #2-04 画面 19
ページは、セクションという区画を作り、その中に Web パーツを1つずつ配置して作り上げるもの。Web パーツはたくさんあるが、本当によく使うものは限られるので、講座のおすすめを中心に押さえればよい。
セクション3 ハブとなるページをつくる

#3-01このセクションで学ぶこと(ハブとなるページをつくる)

「どこに何があるかわからない」と言われる、ページの URL を毎回チャットやメールで聞かれる…。情報の場所はあるのにたどり着けないことが、ポータルが使われない一番の原因です。このセクションではサイトの中に2つのページを作ります。

  1. ハブとなるページの設計の考え方:利用者が迷子にならないためのリンク設計・動線設計。
  2. 各種申請・手続きページの作り方:申請カテゴリを整理し、情報の分岐点となるページを作る。
  3. 制度・ルール案内ページの作り方:ページ内でドキュメントライブラリを活用し、資料の一覧ページとして機能させる。

#3-02このセクションで作るページの完成イメージ

作り始める前に完成イメージを確認しておくと、各手順の意味がつかみやすくなります。

① 各種申請・手続きページ

#3-02 画面 2
  • 上部:社内で最もよく使われる申請のショートカットボタン
  • その下:申請カテゴリが4つ。各カテゴリは見出し・説明文・詳細リンクへのボタンの3点セット
  • 関連ページ:関係が深いページへのリンク。
  • 最後:問い合わせ窓口の連絡先。

② 制度・ルール案内ページ

#3-02 画面 9
  • 制度ごとに4つのカテゴリ。各カテゴリに制度の概要(箇条書き)と、末尾に下の資料一覧への誘導テキスト。
  • その下にドキュメントライブラリを配置し、各資料にすぐアクセスできる(このページの一番の肝)。
    #3-02 画面 12
  • その下に関連ページのリンクと問い合わせ窓口。

#3-03各種申請・手続きページをつくる

各種申請・手続きページのメインコンテンツ(タイトル、パンくずリスト、ショートカットボタン、申請カテゴリ)を作ります。

ページを作成して白紙にする

  1. 左上の [+ 新規] → [ページ]。テンプレートが出るが、今回は 空白 から作る。
    #3-03 画面 2
  2. 左上でページのタイトルを 各種申請・手続き に変更。
  3. ポイント:最初からあるタイトルバナーの Web パーツは使わずに削除する。セクションをクリック → [Web パーツの削除]。白い部分をクリック → [セクションの削除]。もともとあった下のセクションも削除して、まっさらにする。
    #3-03 画面 4
    既定のタイトルバナーでは、パンくずリストやボタンの Web パーツを柔軟に配置できないため。新しいセクションから作れば自由に設計できる。

タイトルとパンくずリスト

  1. [+] で新しいセクションを追加し、[1/3 右](3分の1が右側)を選ぶ。
    #3-03 画面 7
  2. 灰色の [+]テキスト Web パーツ。スタイルを 見出し 2 にしてページタイトルを入力、改行して説明文(例:「申請・手続きの種類をカテゴリから選んでください」)。
    #3-03 画面 9
  3. パンくずリストを追加する:今どこにいるかが一目でわかるリンクのテキスト。ページが増えると利用者は迷子になりがちなので必ず入れる(名前の由来は「ヘンゼルとグレーテル」でパンくずを帰り道の目印にした場面)。
    #3-03 画面 10
  4. タイトルの上にテキスト Web パーツを追加 → ハイパーリンクアイコン → 最新ページ一覧から ホーム を選び、表示テキストを 総務ポータル にして [保存]
    #3-03 画面 14
  5. 続けて > 各種申請・手続き(半角スペース・大なり・半角スペース+現在地のページ名)と入力。

よく使う申請のショートカットボタン

通常は「勤怠・休暇の詳細ページ → 申請フォーム」とたどる手順を、よく使う申請だけスキップできるようにします。ボタンが多すぎると逆に迷わせるので、数は絞る

#3-03 画面 16
  1. 右側の列で新しい Web パーツ → 検索で ボタンボタン Web パーツ。選択して [プロパティを編集]
    #3-03 画面 18
  2. ラベル:休暇を申請する、リンク:押したときの飛び先(デモなのでスキップ)、[アイコンの追加]note と検索して「Edit note」を選ぶ。
    #3-03 画面 20
  3. 2つ目は作ったボタンを活用:選択して [Web パーツの複製] → ラベルを 勤怠を修正する に、必要に応じてリンクも変更。
    #3-03 画面 21
  4. ボタンが上に寄っているので、セクションの [プロパティを編集]配置 に。
    #3-03 画面 23

背景のデザイン

  1. セクションの [プロパティを編集] → [デザイン]タブ → 一番下の [背景の追加]
    #3-03 画面 29
  2. ストック画像で例えば PC と検索して画像を選ぶ。[フォーカル ポイントの編集]でフォーカスを当てる位置を調整して保存。
    #3-03 画面 32
  3. オーバーレイをブラックトーンに変更。
    #3-03 画面 34

申請カテゴリのセクション

  1. タイトルの下に新しいセクション(2段組)→ テキスト Web パーツで申請カテゴリ名(例:勤怠・休暇)を 見出し 3 で入力し、説明文を入れる。全選択 → […] → 配置 → 中央揃え
    #3-03 画面 39
  2. その下に ボタン Web パーツ:ラベル 詳細はこちら、リンクを設定、アイコンは double で検索して「Double chevron right 8」。配置は中央揃え。
    #3-03 画面 45
  3. テキストとボタンをそれぞれ […] → [複製] し、左上の [Web パーツの移動]アイコンをつかんで右の列へドラッグ。テキストを 経費・備品 などに修正し、リンクは必ず修正する。
    #3-03 画面 48
  4. 残り2カテゴリは [セクションの複製]でセクションごと複製し、テキストとリンクを修正(人事情報、証明書 など)。
    #3-03 画面 54
  5. 左上の [保存して閉じる]
ボタンの文言は「詳細はこちら」で統一 「申請する」「依頼する」などバラバラの表現が並ぶとごちゃごちゃして見栄えが悪く、複製するたびにラベルも変える必要がある。統一感のあるテキストにする。
このレッスンのポイント
  • カテゴリは見出し・説明文・ボタンの3点セットで作る。ボタンだけ並べず説明を添えると、利用者が迷わず目的のページへ進める。
  • 上部のパンくずリストで現在地を示す、最もよく使う申請のショートカットボタンを置く。
  • Web パーツ・セクションの複製で効率よく作る。

#3-04問い合わせ窓口を追加してページを公開する

各種申請・手続きページに問い合わせ窓口を追加して仕上げます(関連ページのセクションは、載せるページが完成してから #4-08 で作る)。

  1. 保存したページで [編集] をクリックして編集モードにする。
    #3-04 画面 2
  2. 新しいセクション(1段組)→ テキスト Web パーツで 見出し 2「問い合わせ窓口」。
    #3-04 画面 10
  3. 新しいセクション(2段組)→ テキスト Web パーツで「申請全般・手続きに関するお問い合わせ」の見出し、改行して部門名・内線番号・メールアドレスを入力。
    #3-04 画面 13
  4. 右側も同様に:Web パーツを […] → [複製][Web パーツの移動]で右へ → テキストを修正。
    #3-04 画面 19
  5. ページ一番下の コメント(アクセスした人が自由にコメントを残せる機能)は今回 オフ
    #3-04 画面 20
連絡先は「ユーザー」Web パーツではなくテキストで、組織単位で載せる 「ユーザー」Web パーツは Microsoft アカウントからプロファイルを表示できるが、あえて使わない。理由は① 特定の個人に問い合わせが集中するリスクを抑える、② 担当者が変わっても更新が楽。ポータルは長く使われてこそ価値が出るので、メンテナンスのしやすさを最初から意識する。
#3-04 画面 14

プレビューで確認して区切り線を入れる

  1. 上の [プレビュー] で、PC でどう表示されるか確認。[モバイル]タブでスマートフォンでの表示も確認できる。
    #3-04 画面 22
    #3-04 画面 25
  2. 申請カテゴリと問い合わせ窓口のセクションが近すぎて境界があいまい → [戻る]で編集画面に戻り、問い合わせ窓口の上に新しい Web パーツで [分割バー]を追加。区切り線で視認性が上がる(よく使う Web パーツ)。
    #3-04 画面 29
    #3-04 画面 30
  3. [保存して閉じる]。本来は [発行] でページを公開するが、関連ページのセクションを追加してから発行する。
    #3-04 画面 34

作ったページの一覧を開く

  • ページが増えて「さっき作ったページはどこ?」となったら、[ページ]タブでサイトのページ一覧を開ける。
    #3-04 画面 37
  • [ページ]タブが見当たらないときは、設定アイコン → [サイト コンテンツ] → [サイトのページ]
    #3-04 画面 39

#3-05制度・ルール案内ページをつくる

2ページ目は新規作成ではなくページの複製で作ります。タイトルセクションのデザインやパンくずリストがそのまま引き継がれ、デザインが確実にそろうため、2ページ目からは複製が実務の基本です。

  1. 各種申請・手続きページの左上から [ページのコピー]。ページが丸ごと複製される。
    #3-05 画面 4
    #3-05 画面 5
  2. ページのタイトルを 制度・ルール案内 に。パンくずリストの表記、タイトルのテキストも修正。
    #3-05 画面 9
  3. 右側のショートカットボタンは使わないので、Web パーツを選んでゴミ箱アイコンで削除。
    制度のページは基本的に「調べる」ことが目的なので、タイトルにボタンを置かない設計にしている。
  4. タイトルセクションの [プロパティを編集] でレイアウトを 1段組 に。[デザイン]で背景画像をストック画像の desk などに変更し、オーバーレイを黒、透明度を60程度に。
    #3-05 画面 12
    #3-05 画面 16
  5. 下のカテゴリのセクションは一度削除する。

制度カテゴリのセクション

#3-05 画面 21
  1. 新しいセクション(2段組)→ テキスト Web パーツで 見出し 2「全社規定に関する制度」。
  2. 改行して […] → 箇条書き で内容の例を記載(例:就業規則・賃金規定などの基本ルール、情報資産の取扱いやセキュリティの基本方針)。
    #3-05 画面 26
  3. Enter を2回押して誘導の一文を追加:関連する規定は「全社規定」カテゴリを参照ください。カテゴリ名を選んで太字[…] → フォントの色を青に。
  4. Web パーツを複製して右へ移動し、「勤怠・休暇に関する制度」に修正。
    #3-05 画面 30
  5. [セクションの複製]で残り2カテゴリ(経費・手当、福利厚生)も作る。[保存して閉じる]
    #3-05 画面 32
ポイント
  • 完成済みページを複製して作るとデザインが統一される。セクション・Web パーツだけでなく、ページ自体も複製できる。
  • カテゴリ末尾のページ内の誘導テキストで、この下のライブラリへ自然に誘導する。フォントの書式を変えて目立たせるとわかりやすい。

#3-06ページ内にドキュメントライブラリを配置する

制度・ルール案内ページにドキュメントライブラリを配置して、ページを完成させます。

使用ファイル:配布資料\社内既定ドキュメント 内の各規程 PDF(全社規定・勤怠・休暇・経費・手当・福利厚生)

ドキュメントライブラリとは

SharePoint 上でファイルを保存・管理する箱。一番わかりやすく言えば非常に賢くなった共有フォルダーです。3つの強みがあります。

強み内容
① 列を追加できるカテゴリや規定の概要などの属性情報をファイルごとに持たせられる(Excel の表に似ている)。開かなくても内容が一目でわかる
② ビューで見せ方を変えられる同じファイル群でもカテゴリ別にグループ化するなど、探しやすくできる
③ ページに埋め込める単独で開くのではなく、ページの一部として表示できる。利用者はページをスクロールするだけで資料を確認できる
#3-06 画面 5
#3-06 画面 7
詳しい作り方や運用方法は、ユースフルの SharePoint 講座「データ管理編」で解説。

ライブラリを作る

  1. ホームに戻り、左上の [+ 新規] → [ドキュメント ライブラリ] → [空のライブラリ]
    #3-06 画面 17
  2. 名前はサイト名と同じく英語で(例:Regulation)。[サイト ナビゲーションに表示]は一旦オフ → [作成]。URL にライブラリ名が英語で付く。
    #3-06 画面 18
  3. 日本語表記にするには 設定アイコン → [ライブラリの設定] で名前を 社内規定 に変更。
    #3-06 画面 21
  4. [作成またはアップロード] → [ファイルのアップロード]で規程ファイルを複数選択して [開く]
    #3-06 画面 23

列とビューを作る

  1. [+ 列の追加] → [選択肢]。名前 カテゴリ、選択肢に4つの制度カテゴリ名を入力して [保存]
    #3-06 画面 25
  2. [グリッド ビューで編集] → セルをダブルクリックしてドロップダウンからカテゴリを入力 → [グリッド ビューの終了]
    #3-06 画面 27
  3. [ビューの追加] → ビュー名 カテゴリ別ビュー[作成]
    #3-06 画面 29
  4. カテゴリ列 → [カテゴリでグループ化]。グループ化したので右側のカテゴリ列は、列の設定 → [この列を表示しない]。不要な列は非表示にするとページに入れたときすっきりする。
    #3-06 画面 31
  5. ビュー名 → [ビューを保存する]
  6. 既定でグループが開いた状態なので、折りたたむ:設定 → [ライブラリの設定] → [その他のライブラリ設定] → 下のビュー一覧から「カテゴリ別ビュー」 → [グループ化] → 既定のグループの表示方法を [折りたたみ][OK]
    #3-06 画面 35
    #3-06 画面 37

ページに配置する

  1. 制度・ルール案内ページで [編集]。制度カテゴリのセクションの下に新しいセクション(1段組)。
    #3-06 画面 40
  2. テキスト Web パーツで 見出し 2「社内規定集」と説明文を1文。
  3. 新しい Web パーツ → [ドキュメント ライブラリ] → 一覧から「社内規定」を選ぶ。
    #3-06 画面 44
  4. [プロパティを編集]表示するビューを「カテゴリ別ビュー」、サイズは自動サイズ調整のまま、[コマンド バーを非表示にする]をオン(閲覧専門の人には管理側のボタンは不要)→ [適用]。[すべて表示]ボタンからはライブラリ画面に移動できる(そのまま)。
    #3-06 画面 45
    #3-06 画面 48
  5. ライブラリのタイトル「社内規定」は上のテキストと重複するので削除。
  6. 目立たせるため、セクションの [デザイン] でテーマの色を変更。
    #3-06 画面 51
  7. 下の問い合わせ窓口は、書き方を踏襲して内容だけ修正(全社規定に関するお問い合わせ、休暇・福利厚生に関するお問い合わせ など)。[保存して閉じる]
    #3-06 画面 54
このレッスンのポイント
  • 各制度の情報 → ガイドの一文 → 下の社内規定集、と概要確認から資料参照までが1ページで完結
  • ライブラリをカテゴリ別ビューで表示し、不要なコマンドバーは非表示にしてすっきり。
  • 問い合わせ窓口は他ページと共通のデザインに。どのページでも同じ形で窓口があると利用者に安心感を与える。
#3-06 画面 57
セクション4 ライブラリ・リストを活用したページ

#4-01このセクションで学ぶこと(ライブラリ・リストを活用したページ)

「申請したいのにどこから手続きすればいいかわからない」「よくある質問を調べたいが情報が散らばっている」——よく聞く悩みを解消するため、勤怠・休暇の申請ページ総務 Q&A ページを作ります。

  1. ドキュメントライブラリを使った申請ページ:1つのライブラリを複数のページで使い分ける、SharePoint らしい実務テクニック。
  2. SharePoint リストを活用した FAQ ページ:よくある質問と回答をリストで管理して見やすく表示する仕組み。
  3. 更新が1か所で完結する仕組み:情報を一元管理しながら複数ページに届けられる SharePoint の強み。

#4-02このセクションで作るページの完成イメージ

① 勤怠・休暇の申請ページ(第3層の詳細ページ)

#4-02 画面 3
  • 上部:パンくずリスト(総務ポータル > 各種申請・手続き > 勤怠・休暇の申請)とタイトル。
  • その下:申請リンクが4つ。ページを開いてすぐ視界に入る位置なので、申請したい人は迷わず進める。
  • さらに下:勤怠・休暇に関連する社内規定やガイドブックのドキュメントライブラリ。制度の詳細もすぐ調べられる。
  • 申請と制度の確認が1ページで完結するのがポイント。

② 総務 Q&A ページ

#4-02 画面 11
  • タイトルの下によく見られている質問が折りたたみ形式で格納。開くとよくある質問と回答が一目でわかる。
  • その下に勤怠・休暇、経費精算など7つの質問カテゴリのカード。カードをクリックすると下の FAQ リストが絞り込まれる。まずカテゴリを選んで探す、という自己解決の流れが一気通貫でできる。
    #4-02 画面 12
  • その下に関連リンクと担当者への問い合わせエリア。

#4-03勤怠・休暇の申請ページをつくる

申請リンクの配置と注意事項エリアを作ります。

ページを複製してタイトルを整える

  1. ページ一覧から各種申請・手続きページを開き、左上の [+ 新規] → [このページのコピー]。ページのタイトルを 勤怠・休暇の申請 に。
    #4-03 画面 4
  2. タイトルセクション以外の不要なセクションは削除。コメントは忘れないうちにオフ。
  3. パンくずリストに > 勤怠・休暇の申請 を追加し、「各種申請・手続き」を選択して ハイパーリンク で各種申請・手続きページを設定 → [保存]第3層のページになる。
    #4-03 画面 9
  4. タイトルと説明文を変更。右側のボタンは削除。セクションのレイアウトを 1段組 に、背景画像はストック画像の 休暇 で。フォーカルポイントやオーバーレイの透明度も調整。
    #4-03 画面 14

申請リンク(クイックリンク)

  1. 新しいセクション(1段組)→ [クイック リンク] Web パーツ(様々なリンクへのボタンを複数簡単に置ける便利な Web パーツ)。タイトルは 申請する
    #4-03 画面 20
  2. [プロパティを編集]:レイアウトはコンパクト/フィルムストリップ/グリッド/ボタン/リスト/タイルから選べる。今回は ボタン。外観で塗りつぶしの色を選ぶとボタンが目立つ。
    #4-03 画面 24
    #4-03 画面 26
  3. [+ リンクの追加]:OneDrive のファイルや SharePoint サイトのリンクを設定できる(今回は仮でサイトのページからホームを選択。SharePoint のリンクは自動で SharePoint アイコンが付く)。新しいタブで開かせたい場合は設定をオン(今回はオフ)。タイトルを 勤怠を修正する に、アイコンも自由に変更。
    #4-03 画面 28
  4. 同じ方法でリンクを追加し、4つのボタンを配置。ボタンにカーソルを合わせると手のアイコンが出るので、つかんでドラッグすると並べ替えられる。
    #4-03 画面 31
クイックリンクの設計意図
  1. よく使う申請リンクはページの最上部に置く。申請ボタンが下にあると毎回スクロールが必要で面倒。開いたらすぐ申請に進めるだけで使い勝手がぐっと変わる。
  2. ボタンのテキストは体言止め(「休暇の申請」)ではなく、動詞で締める(「休暇を申請する」「勤怠を修正する」)。クリックしたらどうなるかをイメージしやすくなる。

申請時の注意事項

  1. クイックリンクの下に テキスト Web パーツ。見出し 3「申請時の注意事項」、改行して箇条書きで具体的なルール(例:有給申請は3営業日前までに行ってください)。強調したい部分(例:「当日朝9時までに」)は太字
    #4-03 画面 46
  2. 全選択してフォントの色をに。[保存して閉じる]
    #4-03 画面 48
申請ボタンとセットで注意事項を置くと、ページを開いたときに真っ先に目に入る。後から「知りませんでした」というトラブルを防げる。

#4-04ドキュメントライブラリのフィルタビューを設定する

勤怠・休暇の申請ページに「関連する規定を確認する」としてドキュメントライブラリを配置します。新しいライブラリは作らず、制度・ルール案内ページと同じ「社内規定」ライブラリを、勤怠・休暇のドキュメントだけ表示するビューで使います。

#4-04 画面 3

ライブラリにファイルを追加してビューを作る

  1. 右上の歯車 → [サイト コンテンツ] → 「社内規定」ライブラリ。
    #4-04 画面 9
  2. [作成またはアップロード] → [ファイルのアップロード]で勤怠・休暇のドキュメントを3つ追加。エクスプローラーからドラッグ&ドロップでもアップロードできる。
    #4-04 画面 12
  3. [グリッド ビューで編集]でカテゴリを「勤怠・休暇」に設定。CtrlCCtrlV でコピー&貼り付けもできる(Excel ライク)。[グリッド ビューの終了]。他のカテゴリのドキュメントも追加し、カテゴリで並べ替えて「すべてのドキュメント」ビューを保存。
    #4-04 画面 13
  4. [ビューの追加]でビュー名 勤怠・休暇[作成]
    #4-04 画面 17
  5. カテゴリ列 → [フィルター] →「勤怠・休暇」だけに絞る。カテゴリ列を2列目に移動して [ビューを保存する]
    #4-04 画面 19

ページに配置する

  1. 勤怠・休暇の申請ページで [編集] → 新しいセクション(1段組)→ テキスト Web パーツで見出し「関連する規定を確認する」。
    #4-04 画面 24
  2. その下に ドキュメント ライブラリ Web パーツ →「社内規定」。[プロパティを編集]表示 を「すべてのドキュメント」から「勤怠・休暇」に。コマンド バーは非表示、今回は [すべて表示]ボタンもオフ[適用]。ライブラリのタイトルは削除。
    #4-04 画面 26
  3. 勤怠・休暇の4件だけが表示される。セクションの [デザイン] で薄紫の色を付けて目立たせる(分割バーの代わりに色分けで境界を作る方法もある)。
    #4-04 画面 29
    #4-04 画面 31

問い合わせ窓口をコピーで転記する

  1. 新しいセクション(1段組)で見出し「問い合わせ窓口」、さらに2段組のセクションとテキスト Web パーツを追加。
    #4-04 画面 37
  2. ページをまたいだ Web パーツの複製はできない。各種申請・手続きページの問い合わせ窓口のテキストを選択して CtrlC → 勤怠・休暇の申請ページで CtrlV で転記。右側も同様に(勤怠・休暇に関するお問い合わせ)。[保存して閉じる]
    #4-04 画面 41
1つのライブラリをビューで使い分ける ライブラリが分かれるとファイルを二重管理しなくてはならない。同じライブラリでもビューを切り替えて各ページに合わせて表示すれば、1つのライブラリで一括管理できる。SharePoint を使いこなすうえで非常に重要な発想。
#4-04 画面 48
申請リンク・注意事項・関連規定・問い合わせ窓口で、申請も調べるも1ページで完結

#4-05総務Q&AページでFAQリストをつくる

困ったときにアクセスして自己解決できる総務 Q&A ページを作ります。ポイントは SharePoint リストで FAQ を管理することです。

使用ファイル:総務Q&Aリスト.xlsx(配布資料)

ページを複製して準備

  1. [ページ]タブから制度・ルール案内ページを開き、[+ 新規] → [このページのコピー]。タイトルを 総務Q&A に。
    #4-05 画面 8
  2. パンくずリストを「総務 Q&A」に(ホームから直接アクセスする第2層のページ)。タイトルも編集。
  3. 背景画像はストック画像の 質問 で、オーバーレイは黒・透明度60程度。
    #4-05 画面 16
  4. 下の不要なセクションは削除、コメントはオフ。[保存して閉じる]

Excel から SharePoint リストを作る

  1. ホームに戻り [+ 新規] → [リスト] → [Excel から] → 配布の「総務Q&Aリスト」を選ぶ。Excel には質問・回答・カテゴリ・よくある質問の列がある。
    #4-05 画面 23
    #4-05 画面 25
  2. 注意:Excel はテーブル形式にしておく必要がある(テーブルでないと読み込まれない。配布ファイルはテーブル化済み)。
    #4-05 画面 26
  3. ファイルをアップロード → 列の種類を設定:質問=タイトルのまま、回答=複数行テキスト、カテゴリ=選択肢、よくある質問=そのまま → [次へ]
    #4-05 画面 30
  4. リスト名は英語表記で(例:FAQ)、[サイト ナビゲーションに表示]のチェックは外して [作成]
    #4-05 画面 31
  5. 列幅を整える。「よくある質問」列 → [列の設定] → [編集] で種類を [はい/いいえ] に変更して保存 → 1と0がチェックマークになる。
    #4-05 画面 33
    #4-05 画面 34
なぜページに直接書かずリストで管理するのか テキストで書くと、質問が増えるたびにページを開いて編集・公開し直す手間が毎回発生する。リストならデータを追加するだけで自動的にページに反映され、更新がリストの1か所で完結する。(詳しくは SharePoint 講座「データ管理編」)

ビューを2つ作る

  1. [ビューの追加]カテゴリ別ビュー(パブリックのチェックはオフ)→ [作成]。カテゴリ列で [カテゴリでグループ化]、カテゴリ列は非表示、列幅を広げて保存。
    #4-05 画面 40
  2. 折りたたみを既定にする:ビュー名 → [現在のビューの編集][グループ化] の既定の表示方法を [折りたたみ][OK]
    #4-05 画面 41
  3. もう1つ [ビューの追加]よくある質問[作成]。「よくある質問」列 → [フィルター基準][はい] を選び、よくある質問だけ表示。回答の幅を調整してビューを保存。
    #4-05 画面 44

ページに「よく見られている質問」を入れる

  1. 総務 Q&A ページで [編集]。今回は見出しをテキスト Web パーツではなく、セクションの [プロパティを編集][このセクションを折りたたみ可能にする] をオンにし、セクションのタイトルに よく見られている質問 と入力。中の Web パーツを折りたためるようになる。
    #4-05 画面 48
  2. セクション内に リスト Web パーツ →「FAQ」を選ぶ。[プロパティを編集]:表示=よくある質問 ビュー、サイズ=自動調整、コマンド バー[すべて表示]は非表示 → [適用]
    #4-05 画面 52
    #4-05 画面 54
  3. 折りたたんでみると隠せる。[保存して閉じる]
    #4-05 画面 56
折りたたみは Web パーツではなくセクションの設定でオンにする。ページが縦に長くなるときにコンパクトにまとめられる。
わからないことがあった人に、まず問い合わせ頻度が高い質問を並べておけば、多くの悩みをここで解決できる。そのまま載せると縦に伸びるので折りたたみセクションを活用する。

#4-06カテゴリカードでFAQを絞り込む機能をつくる

カテゴリカード(例:勤怠・休暇)をクリックすると、下の FAQ リストがそのカテゴリの質問だけに絞り込まれる機能を作ります。Q&A の件数が多いときに利用者がぐっと使いやすくなります。

少し難易度が高く、JSON のコードを一部編集する場面があります。動画のとおりに操作すれば再現できます。
#4-06 画面 4

カテゴリカード用のリストを作る

  1. ホームで [+ 新規] → [リスト] → [空白のリスト]。名前 FAQカテゴリ、チェックは外して [作成]
    #4-06 画面 9
  2. [グリッド ビューで編集]で、#4-05 の FAQ リストのカテゴリと同じ名前で項目を入力。「タイトル」列の名前は [列の設定] → [名前の変更]カテゴリ に。
    #4-06 画面 11
  3. [ビューの追加]:ビュー名 フィルタービュー表示方法は[ギャラリー]、パブリックのチェックは外して [作成]。カード形式で表示される。
    #4-06 画面 14
    #4-06 画面 15

カードのクリック動作を消す(JSON 編集)

このままではカードをクリックするとアイテムの詳細が開いてしまうので、フィルター用のボタンとしてだけ機能するよう修正します。

  1. フィルタービュー → [現在のビューの書式設定] → レイアウト [ギャラリー][カード デザイナーの編集] → 左下の [詳細モード]
    #4-06 画面 18
  2. コードを下にスクロールし、children の中にある sp-card-defaultClickButton と書かれたブロック(カードをクリックしたらアイテムを開く動作の定義)を丸ごと削除する。範囲を選んで Backspace、残った行も削除して [保存]
    #4-06 画面 19
    #4-06 画面 20
  3. [ビューを保存する]。カードをクリックしても詳細が開かなくなる。

ページに配置して連動させる

  1. 総務 Q&A ページで [編集] → 新しいセクション(1段組)→ テキスト Web パーツで見出し 質問カテゴリから探す
    #4-06 画面 25
  2. リスト Web パーツ →「FAQカテゴリ」→ [プロパティを編集] で表示=フィルタービュー、コマンドバー・[すべて表示]は非表示。リストのタイトルはノイズなので削除。
    #4-06 画面 27
  3. その下に リスト Web パーツ →「FAQ」。表示=カテゴリ別ビュー、サイズ=自動調整、コマンドバー・[すべて表示]は非表示。
  4. [動的フィルター処理]をオンにして設定し [適用]
    項目設定値
    フィルターする FAQ の列カテゴリ
    フィルター値を含むリストFAQカテゴリ(上のリスト)
    フィルター値を含むプロパティカテゴリ
    #4-06 画面 31
    #4-06 画面 32
  5. 上の FAQカテゴリのカテゴリ名と、FAQ リストのカテゴリ名が一致したときに絞り込みが発動する。カードをクリックすると、そのカテゴリだけが表示される。
    #4-06 画面 35
  6. セクションの [デザイン] でテーマの色を紫にして保存。
    #4-06 画面 39
注意:カテゴリ名は完全一致 FAQカテゴリと FAQ リストのカテゴリ名が完全一致しないと動かない。うまくいかないときは両方の表記を見比べる。
ポイント 動的フィルターで2つのリストを連動させる。別リストをギャラリーレイアウトでカード表示し、カテゴリ名の完全一致をキーに連動させる考え方は他の場面でも応用できる。ビューの書式設定の JSON を修正するとクリック動作をなくせる。

#4-07Q&Aページに問い合わせエリアと関連ページを追加する

FAQ リストの下に関連ページのリンクと、「解決しないときは」の問い合わせ窓口を追加して、総務 Q&A ページを完成させます。

#4-07 画面 4

関連リンク(クイックリンク)

  1. [編集] → 新しいセクション(2段組)→ 左に クイック リンク Web パーツ。レイアウトは グリッド、タイトルは 関連リンク
    #4-07 画面 7
  2. [+ リンクの追加] → サイトのページから「各種申請・手続き」と「制度・ルール案内」を選ぶ。
    #4-07 画面 10
  3. 画像が真っ白なので設定する:リンクをダブルクリック → 下の一番左の 編集 アイコン → サムネイルを [ユーザー設定の画像] に → ストック画像で deskPC と検索して選ぶ。
    #4-07 画面 13
    #4-07 画面 17

各ページのサムネイルを設定しておく

次の #4-08 で使う リンク Web パーツは、クイックリンクと違ってページのサムネイル設定を参照します。今のうちに各ページのサムネイルを、タイトルセクションの背景と同じ画像にしておきます。

  1. 編集モードで [ページの詳細][サムネイルの変更] → ストック画像から選ぶ(総務 Q&A=質問)。
    #4-07 画面 21
  2. 各種申請・手続き(PC)、制度・ルール案内(desk)、勤怠・休暇の申請(休暇)も同様に設定して保存。
    #4-07 画面 25

問い合わせ窓口(ここではユーザーカード)

  1. 右側にテキスト Web パーツで「解決しないときは担当者へメールでお問い合わせください」。
    #4-07 画面 32
  2. その下に ユーザー Web パーツ。名前をメールアドレスで検索してアカウントを選び、ユーザープロフィールに組織名を入力。レイアウトオプションで大きさも変えられる(今回は小)。
    #4-07 画面 35
    これまでは問い合わせ先を組織単位で置いてきたが、今回に限ってユーザーカードを使う。Q&A ページまで来たのは「調べたけど解決できなかった人」。そういう人には組織の連絡先より「この人に聞けばいい」という顔の見える安心感の方が機能するケースがある。
  3. その下に ボタン Web パーツ:ラベル 問い合わせメールを送る、リンクに mailto: +メールアドレス、さらに ?subject= +件名を付けて件名まで仕込む。アイコンは mail
    mailto:メールアドレス?subject=件名
    #4-07 画面 39
  4. [保存して閉じる] → ボタンをクリックすると、宛先と件名が入った状態で Outlook のメールが自動作成される。
    #4-07 画面 44
件名入りの mailto リンク 問い合わせる人は件名を考える手間がなくなり、問い合わせのハードルがぐっと下がる。受け取る総務側も件名が統一されて受信トレイで整理しやすい。送る側・受け取る側の両方にやさしい工夫。
よく見られている質問 → カテゴリカード → FAQ リスト → 問い合わせ先で、調べる・探す・自己解決する・それでも解決しなければ問い合わせる流れが1ページで完結。

#4-08各ページの関連ページリンクを設定する

これまで作った4つのページの関連ページ動線をまとめて設定し、最後にページを公開(発行)します。

各種申請・手続きページ

  1. [編集] → 申請カテゴリの下に新しいセクション(1段組)→ テキスト Web パーツで見出し 関連ページ
    #4-08 画面 3
  2. その下に リンク Web パーツ。ページ一覧で制度・ルール案内ページの […] → [リンクのコピー] → Web パーツに CtrlV。ページが貼り付けられる。[プロパティを編集]リンクの表示はオフ。
    #4-08 画面 7
    #4-08 画面 9
  3. もう1つリンク Web パーツを追加し、総務 Q&A ページのリンクを貼り付けて、同様にリンクの表示をオフ。
    #4-08 画面 14
  4. 関連ページとカテゴリの境界に 分割バー[保存して閉じる]
  5. 右上の [発行] をクリック(設定ウィンドウは × で閉じる)。これでようやくユーザーに見える形になる。
    #4-08 画面 16
  6. ページ一覧で、未公開のページにはアイコンが表示されている。公開するとアイコンが消える。
    #4-08 画面 20

他のページ

  • 制度・ルール案内:問い合わせ窓口の上に関連ページ(各種申請・手続き、総務 Q&A)を追加 → 保存 → 発行。
    #4-08 画面 26
  • 勤怠・休暇の申請:同様に関連ページを2つ追加、問い合わせ窓口との間に分割バー → 保存 → 発行。
    #4-08 画面 33
  • 総務 Q&A:内容に問題がなければ発行。
「よく見られている質問」を既定で閉じた状態にしたい場合は、セクションのプロパティの一番下の[既定の表示]をオフ。公開後に再編集したら、右上の [再公開] を忘れずに押す。
#4-08 画面 39

4つのページの役割分担

ページ役割
各種申請・手続き/制度・ルール案内ハブ。ユーザーが何をしたいかで次の行き先を選ぶ分岐点。ここで申請・調べるというより、次にどこへ行けばいいかを示す
勤怠・休暇の申請ハブで絞り込まれた後に、実際に申請という行動をするページ
総務 Q&Aユーザー自身が調べて自己解決する場所。これがないと総務に大量の問い合わせが来るので、まずここでフィルターをかける
ポイント
  • 関連ページの動線はリンク先がすべてそろってから設定する。制作途中だと存在しないページへのリンクを貼ることになる。
  • 1つのページに情報を詰め込まず、ページごとに役割を明確に分けることが、ユーザーを迷わせないポータル設計のポイント。
セクション5 ニュースで情報を周知する

#5-01このセクションで学ぶこと(ニュースで情報を周知する)

SharePoint のニュース機能で記事を作成して届ける仕組みを作り、ポータルにアクセスした人に自然と最新情報が届く状態を作ります。

  1. ニュース機能とページの違い:作り方は同じだが役割がまったく違う。なぜニュースを使うのか、ポータル全体とどう連動するのかを整理してから記事を作る。
  2. ニュースの管理:記事が増えたとき「制度改定のお知らせだけ確認したい」に応えられるよう、ページライブラリにカテゴリ列を追加して分類する。
  3. 公開後の運用:記事の更新・非公開、指定日時に自動公開するスケジュール機能、承認機能。

#5-02ニュース機能の仕組みとページとの違い

ページ(これまで作ったもの)ニュース
役割ポータルの1つの場所。利用者が目的を持って訪れる目的地に、情報をわかりやすく置いておく情報の発信。時期に合わせた周知や連絡(例:定期健康診断の受診について)で、利用者に情報を届ける
#5-02 画面 4

メールで周知するのと何が違う?

  • メールは送った瞬間に届くが、受信ボックスに埋もれていき、後から探してもなかなか見つからない。
  • ニュースはポータルに蓄積されていくので、後から検索でも見つけられ、記事を途中でアップデートすることもできる。残り続ける情報として機能する。

トップページとの連動

  • ホームにニュースをまとめたニュース Web パーツを配置でき、記事のサムネイル画像・タイトル・公開日などが並んで、ポータルを開いた人の目に自然と入る。
    #5-02 画面 9
  • 「周知メールを送っても開封されない」という声は多いが、ポータルを開いた瞬間に最新記事が目に飛び込む状態を作れれば、情報が伝わる確率がぐっと上がる(トップページの作成は #6-04)。

このセクションで作るニュース

  1. 定期健康診断の受診について:対象者・受診期間・申し込み方法などを記載し、最後に「健康診断を予約する」ボタン。
    #5-02 画面 13
  2. 在宅勤務規定の一部改定について:社内規定の改定をニュースで周知するシーン。最後に最新版の在宅勤務規定への関連リンク。
    #5-02 画面 15
ニュースはこれまでのページと作り方自体は同じ。公開・周知のための機能が少し違う、と理解すれば大丈夫。

#5-03ニュースを作成して公開する

「定期健康診断の受診について」というお知らせ記事を作って公開します。

記事を作る

  1. ポータルのホームで左上の [+ 新規] → [ニュースの投稿]。テンプレートは 空白。今回はタイトルバナーをそのまま使う。
    #5-03 画面 2
  2. 左上でページ名を 健康診断の受診について に。
  3. タイトルバナーの [プロパティを編集] でレイアウトを [フェード] に。タイトルの上のテキストお知らせ。公開日は表示、作成者のアイコンは削除。
    #5-03 画面 8
    #5-03 画面 9
  4. 下にテキスト Web パーツを追加し、見出しと本文を入力:お知らせ/対象者(全社員)/受診期間/申し込み方法/注意事項/お問い合わせ先。
    #5-03 画面 15
  5. その下に ボタン Web パーツ:ラベル 健康診断を予約する、リンクは実際の予約サイトの URL(デモでは空欄)、アイコンを追加。
    #5-03 画面 19
  6. タイトルバナーを選択 → [画像を参照] → ストック画像で 病院 などと検索して背景画像を設定。
    #5-03 画面 23
    #5-03 画面 24
URL を本文に貼るよりボタン テキストリンクとボタンを並べると、ボタンの方が圧倒的にクリックされやすい。周知の目的は、読んで満足で終わらず申し込みまで行動してもらうこと。ボタンはその背中を一押ししてくれる。
サムネイル画像を必ず設定 ニュース Web パーツで記事が一覧表示されるとき、この背景画像がカードのサムネイルになる。画像ありとなしでは目の止まりやすさに差が出るので、情報を確実に届けたいなら画像設定を習慣に(社内の画像でもストック画像でもよい)。

投稿してメールでも届ける

  1. 右上の [投稿して送信]。「メールでも通知しますか」という画面が出ることがあり、ニュースの内容をメールとしても届けられる。
    #5-03 画面 28
  2. 表示を確かめたいときは [テスト メールを送信] → 自分宛てに届く。ページの中身がメールでもわかりやすく表示され、右下の [SharePoint で表示] でニュースのページに移動できる。
    #5-03 画面 32
  3. 問題なければ宛先にグループメールアドレスなどを入れて配信する。
    #5-03 画面 36
  4. 投稿されると右上に 「投稿済み」 と表示される。
    #5-03 画面 40
注意
  • メール配信では、ページに置いた予約ボタンは表示されない(ボタンはページ独自の機能なので、SharePoint 上でアクセスする必要がある)。
  • ニュースは必ず [ニュースの投稿] から作る。見た目が同じだからと [ページ] から作ると、メール配信などの周知機能が使えなくなる。

#5-04ニュースにカテゴリを付けて管理する

ページライブラリにカテゴリ列を追加し、2本目の記事を作って、ニュースだけを素早く確認できる管理ビューを作ります。

カテゴリ列は最初に仕込んでおく 記事が増えると「制度改定のお知らせだけ確認したい」「今月のイベント案内はどこ?」という場面が必ず出る。カテゴリがあれば一瞬で絞り込めるが、後から大量の記事に付け直すのはとても大変。
#5-04 画面 3

ニュースカテゴリ列を追加する

  1. ページライブラリ([ページ])を開き、[+ 列の追加] → [選択肢] → [次へ]。名前 ニュースカテゴリ、選択肢に お知らせイベント制度改定 などを入れて [保存]
    #5-04 画面 6
  2. [グリッド ビューで編集]で健康診断のニュースに「お知らせ」を設定 → [グリッド ビューの終了]
    #5-04 画面 8
  3. カテゴリを追加したので再発行が必要(アイコンが表示されているのがそのサイン)。ページを開いて右上の [ニュースの更新][ページの詳細]にもニュースカテゴリが表示される。
    #5-04 画面 9
    #5-04 画面 11

2本目の記事をコピーで作る

  1. 健康診断のニュースを開き、左上の [+ 新規] → [このニュースの投稿のコピー]。ページと同じく複製でき、レイアウトもそろう。
    #5-04 画面 12
  2. タイトルを 在宅勤務規定の一部改定について、タイトル上のテキストを 制度改定、背景画像を 在宅 で検索して変更(フォーカルポイントも調整)。
    #5-04 画面 19
  3. 本文を編集:改定のポイント、主な変更内容、社員へのお願い など。
    #5-04 画面 23
  4. ボタンは削除し、クイック リンク Web パーツ(タイトル 関連リンク、デザインは ボタン・塗りつぶし)。[リンクの追加] → サイトの「社内規定」ライブラリから在宅勤務規程を選ぶと、ドキュメントそのものへのリンクを埋め込める。必要に応じて関連ドキュメントや申請フォームのリンクも追加。
    #5-04 画面 29
    #5-04 画面 30
  5. [ページの詳細]でニュースカテゴリを「制度改定」に変更(コピー元の「お知らせ」が付いているため)。
    #5-04 画面 35
  6. 一旦 [保存して閉じる] でもよい。問題なければ [投稿して送信](メール配信はスキップも可)。
    #5-04 画面 38

ニュース一覧の管理ビュー

ページライブラリには通常のページとニュースが混在しているので、ニュースだけの専用ビューを作ります。

  1. [ビューの追加]:名前 ニュースカテゴリ、パブリックはオフ。
    #5-04 画面 41
  2. ニュースカテゴリ列の [フィルター基準]でニュースのカテゴリだけを表示。ニュースカテゴリ列を左側に移動して、[ビューを保存する]
    #5-04 画面 43
  3. ページ一覧でこのビューを選べば、カテゴリごとのニュースを素早く確認できる。記事が10本、20本と増えるほど価値が出る(サイト管理者は必ず押さえる)。
    #5-04 画面 44

#5-05ニュースの公開・更新・スケジュール・承認

公開後の4つの操作(更新・非公開・スケジュール・承認)を押さえると、ニュースの運用がぐっとスムーズになります。

① 記事の更新

  1. 投稿済みの記事で [編集] → 修正 → [ニュースの更新] で改めて公開される。
    #5-05 画面 4
  2. 編集中も、他の人には公開済みのバージョンが見えている。編集中のバージョンは[ニュースの更新]を押すまで見えない。
  3. 更新しても通知は飛ばない。改めてメールで知らせたいときは [共有] → [メールで送信]
    #5-05 画面 9

② 非公開にする

  1. 掲載期間が終わった記事や誤った内容の記事を取り下げたいとき:ページライブラリで対象の […] → [その他] → [非公開]
    #5-05 画面 11
  2. 記事自体は削除されないので、開いて [ニュースの更新] で再公開できる。

③ スケジュール(指定日時に自動公開)

「来週月曜の朝9時に全社通知を出したい」とき、前日に記事を準備して予約しておけます。朝早く出勤する必要もありません。

  1. 準備(1回だけ):ページ一覧の [スケジュール] アイコン → [スケジュールを有効にする] をオン(既定はオフなのでサイト所有者が有効化)。以後サイトのすべてのページ・ニュースで使える。
    #5-05 画面 15
  2. 記事を開いて [編集][…] → [ページの詳細]スケジュール をオンにし、日時(例:月曜の朝8時)を設定。
    #5-05 画面 19
  3. 右上の [スケジュール] → 「公開日がスケジュールされました」、上部に設定した日時が表示される。指定日時に自動で投稿される。
    #5-05 画面 21
  4. 注意:スケジュールはサイトのタイムゾーンで動く。設定 → [サイト情報] → [すべてのサイト設定を表示] → [地域の設定] でタイムゾーンが日本時間か確認。
    #5-05 画面 25

④ 承認(公開前に承認者の確認を挟む)

担当者が作った記事がそのまま公開され、後から「表現が不適切だった」「発表が早すぎた」と気づく——を防ぎます。全社向けの発表や経営層の意思決定を伴う重要な周知では、リリース前に上長の確認を挟めると安心です。

  1. ページライブラリで [統合] → [Power Automate] → [ページ承認フローを構成する]
    #5-05 画面 26
  2. [フローの作成]。各アプリへの接続がすべて有効か確認して [続行](未接続なら会社のアカウントでサインイン)。フロー名は自動入力のまま、承認者を設定(複数人も可)して [作成]
    #5-05 画面 27
  3. 記事を [編集] すると、右上のボタンが [承認のために送信] に変わる。クリック → [続行] → 承認者へのメッセージを添えて [送信]。記事は承認待ちになり、承認者に通知が飛ぶ。
    #5-05 画面 30
    #5-05 画面 31
  4. 承認者には Outlook のメール(ページへのリンクや要求者のメッセージ入り)と Teams の通知が届き、コメントを添えて承認できる。Teams から承認すると、要求者にも「承認されました」と通知が届く。
    #5-05 画面 33
    #5-05 画面 36
  5. SharePoint のページはすでに発行された状態になっている。
    #5-05 画面 37
承認フローは Power Automate のフローが自動で作られる仕組みで、難しい設定は不要。全社に展開する重要な記事は、作成者だけで投稿せず承認ステップでダブルチェックを。スケジュール機能もフル活用しよう。
セクション6 入口となるトップページを整える

#6-01このセクションで学ぶこと(入口となるトップページを整える)

サイト全体の入口となるトップページを作ります。これまで作ったすべてのページがつながって、総務ポータルが完成します。

  1. トップページの骨格:開いた瞬間に目的の情報にたどり着けるよう、動線を意識して組み立てる。
  2. ニュースとライブラリの最新情報を表示する仕組み:ニュースを投稿した瞬間、トップページにも最新記事が自動で表示される。
  3. 各ページの動線の確認:完成後、利用者目線でポータルを歩き、動線がつながっているか確認する。

#6-02トップページの完成イメージ

ホームは総務ポータルにアクセスしたとき最初に訪れるトップページ=サイト全体の入口。ここを通して各ページにアクセスします。全体は5つのセクションで構成します。

#6-02 画面 3
#セクション内容・ねらい
1タイトル「総務ポータル」
23つの入口「申請・届出をする」「規定・ルールを調べる」「よくある質問を確認する」の3列。それぞれに[詳細はこちら]ボタン。訪れた瞬間に「ここに行けばいい」と判断できる分岐点
3よく使う申請はこちら証明書を発行する/住所変更を届ける/経費を精算する/休暇を申請する の4リンク。3つの入口を使わず目的の申請にすぐたどり着きたい人の最短動線
4総務からのお知らせニュース Web パーツでニュース記事がサムネイル付きで自動表示。記事を追加するたびに自動更新
5最近更新された規定類「強調表示されたコンテンツ」Web パーツで、ライブラリ内の最近更新された資料が自動で一覧表示。「新しい規定が出たのに気づかなかった」を防ぐ
#6-02 画面 4
#6-02 画面 9
#6-02 画面 10
同じリンクが複数ページにあってもよい よく使う申請リンクは各種申請・手続きページや勤怠・休暇の申請ページにもあるが、どこからでも最短で目的地にたどり着けるよう、ユーザーが最もよく使うリンクはあえて複数の場所に置く

#6-033つの入口・よく使う申請リンクを配置する

トップページの上部3つのセクション(タイトル、3つの入口、よく使う申請)を作ります。

タイトルセクション

  1. [ホーム]をクリックして白紙のホームページを開き、[編集]
    #6-03 画面 4
  2. 1段組のセクションにテキスト Web パーツ:見出し 2「総務ポータル」、改行して簡単な説明文。
  3. セクションの [デザイン] → [背景の追加]でストック画像を選択、オーバーレイは黒・透明度60程度。
    #6-03 画面 9
  4. トップページは最初にアクセスするページなので、パンくずリストは不要

3つの入口

  1. 新しいセクション(3段組)→ テキスト Web パーツで 見出し 3「申請・届出をする」と説明文、全選択して […] → 配置 → 中央揃え
    #6-03 画面 10
  2. ポイント:絵文字アイコンを付ける。テキストだけだと味気なく、3つ並ぶと見分けがつきにくい。見出しの前にカーソルを置き Windows.(ピリオド)で絵文字パッドを開き、例えば「ドキュメント」で検索して📄を挿入。
    #6-03 画面 11
    #6-03 画面 12
  3. Web パーツを […] → [複製] で2つ複製して横に並べ、テキストを「規定・ルールを調べる」(💻)、「よくある質問を確認する」(❓「question」で検索)に修正。
    #6-03 画面 17
  4. 各列の下に ボタン Web パーツ:ラベル 詳細はこちら、アイコンは Double chevron right、配置は中央揃え。リンクは、ページ一覧で対象ページの […] → [リンクのコピー] して CtrlV
    #6-03 画面 22
    #6-03 画面 26
  5. ボタンを複製して横に並べ、リンクを必ず修正(制度・ルール案内、総務 Q&A)。
    #6-03 画面 33
なぜこの3つ? このポータルに来る人の目的を3つに定義している:申請・手続きをしたい人/社内規定や制度を調べたい人/総務関連のわからないことを解決したい人。最初からこの3方向に分岐させれば、どんな目的の人でも迷わず動き出せる。
また、ページのタイトル(「各種申請・手続き」)をそのまま並べるのではなく、「○○をする」とユーザーの行動で書くとわかりやすい。

よく使う申請リンク

  1. 新しいセクション(1段組)→ クイック リンク。タイトル よく使う申請はこちら、レイアウト ボタン、外観は 塗りつぶしの色
    #6-03 画面 40
  2. [+ リンクの追加] → サイトのページから対象ページを選ぶ(デモでは仮で各種申請・手続き)→ タイトルを「証明書を発行する」などに修正。実務では証明書発行などの実際のページのリンクを設定する。
    #6-03 画面 44
  3. 残り3つも追加して4つのリンクを並べる。[保存して閉じる]
    #6-03 画面 47
トップページの重要ポイントは3つの入口の設計。今日したいことに合わせて迷わず次へ進める分岐を最初に置く。よく使う申請リンクを上の方に置くのもユーザーにやさしい設計。

#6-04ニュース・強調表示されたコンテンツを配置する

トップページに「総務からのお知らせ」(ニュース一覧)と「最近更新された規定類」を表示させ、完成させます。

ニュース Web パーツ

  1. [編集] → 新しいセクション(1段組)→ ニュース Web パーツ。ニュースを投稿するたびに自動で更新される。見出しは 総務からのお知らせ
    #6-04 画面 6
  2. [プロパティを編集]
    設定内容今回
    ニュース ソース既定は「このサイト」。[サイトの選択]で他のサイトのニュースも抽出できる(全社のホームに各サイトのニュースを出す場合など)このサイト
    レイアウト主要ニュース/リスト/横並び/ハブのニュース/カルーセル/タイルリスト
    表示する投稿数多すぎると逆に見づらい2件
    コンパクト ビューオンにするとサムネイル画像なしオフ
    閲覧回数・作成者・最初の公開日表示する情報閲覧回数と作成者はオフ
    #6-04 画面 8
    #6-04 画面 12
  3. フィルター[ページのプロパティ] → プロパティ名で ニュースカテゴリ#5-04 で追加した列)→ 値にチェック。今回は お知らせ制度改定
    #6-04 画面 18
    #6-04 画面 20
ニュースカテゴリはここで大活躍 カテゴリを付けておくと、ページの目的に応じて表示するニュースを絞り込める。例:総務のトップにはお知らせと重要な制度改定、全社イベントのページにはイベントだけ。ニュース Web パーツはサイトの様々なページで使うことを想定し、カテゴリを付与しておく。

強調表示されたコンテンツ

  1. 新しいセクション(1段組)→ [強調表示されたコンテンツ] Web パーツ。サイト内のファイルが自動で表示される。見出しは 最近更新された規定類
    #6-04 画面 28
  2. [プロパティを編集]コンテンツソースでドキュメントライブラリ →「社内規定」を選ぶと、社内規定のドキュメントだけになる。ドキュメントの種類で形式を指定したり、列の項目でフィルターをかけたりもできる。
    #6-04 画面 30
    #6-04 画面 31
  3. レイアウト(グリッド/リスト/カルーセル/コンパクト/フィルムストリップ)は コンパクト、表示するアイテム数は 4
    #6-04 画面 32
  4. セクションの [デザイン] でテーマカラーの背景を設定し、[保存して閉じる]
    #6-04 画面 34

ニュースダイジェスト(複数の記事を1通のメールで)

ニュース公開をユーザーに伝える方法は2つ。① 記事投稿時の [メールで送信]#5-03)、② ニュースダイジェスト。記事のたびにメールを送ると「また来た」と思われがちなので、週1回「今週のお知らせをまとめました」のように届ける運用ができます。

  1. ニュース Web パーツの右上の [すべて表示]。出てこない場合は、編集モードで表示件数を1件にすると出る(サイトのニュースが表示数以上ある場合だけボタンが出る)。
    #6-04 画面 39
  2. ニュース一覧で [ニュース ダイジェストをメールで配信] → まとめて送る記事にチェック → [次へ]
    #6-04 画面 42
    #6-04 画面 43
  3. タイトル(例:ウィークリーニュース 4月第3週のお知らせ)、宛先、メッセージを入力して [ニュース ダイジェストを送信]
    #6-04 画面 44
  4. 各ニュースの概要入りのメールが届く。記事タイトルからニュースページへ、一番下の[サイトへ移動]からサイトへ移動できる。
    #6-04 画面 46
  5. トップページに戻り、問題なければ [再公開]
    #6-04 画面 50
ポイント
  • 表示させるニュースをフィルターで絞り込む(そのために各ニュースにカテゴリを付与していた)。どの記事をトップに出すかを細かくコントロールできる。
  • ニュースダイジェストでまとめて配信できる。
  • 強調表示されたコンテンツで、資料の更新情報を手動で管理せずに届けられる。
#6-04 画面 53

#6-05作成したページの導線をチェックする

作った側はどこに何があるかを全部知っていますが、初めて来たユーザーは何も知りません。「これで十分わかるはず」と思っていても伝わっていないことがあります(講師も「どこから申請すればいいかわからなかった」と言われた経験あり)。利用者目線でポータルを歩いて(ウォークスルー)確認します。

例:今日休暇を申請したい人

  1. ルート①(3つの入口から):トップの「申請・届出をする」の[詳細はこちら]→ 各種申請・手続きページ。タイトルの目立つところに[休暇を申請する]ボタンがあるのでそこからでも、勤怠・休暇の[詳細はこちら]→ 勤怠・休暇の申請ページ →[休暇を申請する]でもよい。3ステップ以内で目的地にたどり着ける。
    #6-05 画面 3
    #6-05 画面 4
  2. ルート②(最短):最初から休暇を申請したいとわかっている人は、トップの「よく使う申請はこちら」の[休暇を申請する]を直接クリック。1ステップ
    #6-05 画面 5
最もよくアクセスするページにはワンクリックで飛べるショートカットを置き、目的はあるがどこに行けばいいかわからない人には3つの入口を提供する。この2つのルートが共存しているのがトップページの設計ポイント。

5つのページの関係

#6-05 画面 6
ページ役割
第1層トップページ(ホーム)サイト全体の入口・ポータルの顔。利用者を目的に応じた方向に振り分ける
第2層各種申請・手続き/制度・ルール案内/総務 Q&A(ハブ)申請カテゴリや制度情報を整理して次のページへ導く。総務 Q&A は問い合わせの前にまず自分で解決するよう促し、管理者への膨大な問い合わせを減らす
第3層勤怠・休暇の申請(詳細)実際に申請したり関連規定を確認したりする、行動を起こす場所
ポータルが使われるためには、情報のボリュームよりも構造や動線設計が大切。サイト設計のときは、ページを作って情報を詰め込む前に、全体像をラフでも描いておくと、ページをつなげるときに迷わない。ページが一通りできたら、「今日申請したい人」「規定を調べたい人」などになりきって実際にクリックして動いてみると、設計の見直しに気づきやすい。

ここまでの振り返り

  • 各種申請・手続き:カテゴリごとに情報を整理し、目的に応じて利用者をガイドするハブ。
  • 制度・ルール案内:各種制度に応じて社内規定をドキュメントライブラリで整理。
  • 総務 Q&A:質問カテゴリに応じて具体的な Q&A をすぐ確認できる仕組みを SharePoint リストで実現。
  • 勤怠・休暇の申請:具体的なアクションを起こすクイックリンクと、関連規定のライブラリ。
  • トップページ:各ページをつなげ、ニュース Web パーツで主要なお知らせを表示。

これで総務ポータルの骨格が完成です。ここからさらに実務で使いやすいポータルに磨いていきます。

セクション7 仕上げと運用設定

#7-01このセクションで学ぶこと(仕上げと運用設定)

作ってきた総務ポータルを、実際に社内で運用できる状態に整えます。どれも「作って終わり」にしないための重要な知識です。

  1. サイトナビゲーションの編集:上部メニューを整え、目的の場所にたどり着きやすいリンクを設定。
  2. サイトの権限設定:誰がどこまで操作できるかを整理し、安心して公開できる状態に。
  3. ハブサイト連携:総務ポータルと全社ポータルなど複数のサイトを連携。サイトをまたいだ横断検索が使えるようになる。
  4. サイト利用状況の確認:ポータルの使われ方をデータで確認し、改善につなげる。

#7-02サイトナビゲーションを編集する

サイトナビゲーション=サイト上部に設置されているリンク。作成直後は ホーム・ドキュメント・ページ・サイト コンテンツ の4つが並んでいますが、これらは管理者がよく使うリンクで、一般ユーザーには「このリンクは何?」と混乱のもと。ユーザーにやさしいナビゲーションに変えます。

不要なリンクを削除する

  1. ナビゲーションの [編集] → 「ドキュメント」の […] → [削除]。「ページ」「サイト コンテンツ」も同様に削除して [保存]
    #7-02 画面 3
  2. 削除しても困らない:歯車 → [サイト コンテンツ]から、サイト内のドキュメントライブラリ・リスト・サイトのページなどの一覧にアクセスできる。コンテンツを探したいときはサイトコンテンツを活用する。
    #7-02 画面 7

ページをナビゲーションに追加する

  1. サイトコンテンツ → [サイトのページ] で各種申請・手続きページを開き、[レベル上げ] → [ナビゲーションにページを追加]
    #7-02 画面 12
    #7-02 画面 13
  2. 総務 Q&A、制度・ルール案内も同様に追加。ナビゲーションはどのページに移動しても同じレイアウトで表示されるので、すぐ主要ページにアクセスできる。
    #7-02 画面 15
  3. 勤怠・休暇の申請ページも追加すると、ナビゲーションの幅に収まらず […] の中に隠れてしまう。
    #7-02 画面 25

サブリンク(階層構造)とラベル

  1. ナビゲーションの編集で、「勤怠・休暇の申請」をつかんで「各種申請・手続き」の上にドラッグして離すと、その中に格納される(サブリンク)。保存すると「各種申請・手続き」に下矢印が付き、カーソルを合わせると表示される。
    #7-02 画面 26
    #7-02 画面 27
  2. 表示幅に収めるため、テキストはできるだけ短くする。そこで使えるのが ラベル:編集で [+][ラベル]([リンク]なら URL を貼り付けて Web リンクを設定)→ 表示名 申請[OK]
    #7-02 画面 33
  3. 「各種申請・手続き」を「申請」ラベルにドラッグしてサブリンクにする。
    #7-02 画面 34
  4. もう1つラベル 制度 を作る。階層を変えたいときは […] → [サブリンクのレベルを上げる]。制度・ルール案内を「制度」ラベルに格納。
    #7-02 画面 36
  5. 「総務 Q&A」も表示名をクリックして Q&A などに短くできる。[保存]
    #7-02 画面 39
実務では「申請」の中に経費精算・勤怠休暇・備品や消耗品の申請など各種申請リンク、「制度」の中に制度カテゴリごとのリンク、のように整理できる。

ナビゲーションの見た目(メガメニュー/カスケード)

設定 → [外観の変更] → [ナビゲーション] で選べます。

#7-02 画面 45
スタイル特徴向いているケース
メガメニュー横に広いパネルが開き、複数の列でリンクを見渡せるラベルの下に様々なリンクがあり、多くのリンクを一覧で見せたい
カスケードカーソルを合わせるとサブリンクがドロップダウンで出るシンプルなスタイルサブリンクが少ないシンプルな構造
ポイント ラベル名は中身が伝わる、短くわかりやすい言葉を選ぶ。ネーミング一つで、見ただけで行き先を判断できるかが変わる。ナビゲーションは完成後でも変えられるので、ユーザーの声を聞きながら少しずつ育てていこう。

#7-03ポータルの権限と共有設定

SharePoint サイトの権限の考え方と、実際のアクセス権限の設定です。

2種類の管理者

役割範囲できること
SharePoint 管理者会社の Microsoft 365 テナント全体(IT・情報システム部門が担当することが多い)ハブサイトの作成・登録など、テナントレベルの設定
サイト所有者テナント内の個々のサイト(サイトごとに設定。総務ポータルを作った人)ページの作成・公開、権限の設定など、サイト内の管理全般。本動画の権限設定はサイト所有者として行う

サイト内の3つの権限

  1. 右上の [サイトへのアクセス] をクリックすると、サイトに対する権限を設定できる。
    #7-03 画面 6
    役割追加時の権限できること
    サイトの所有者フル コントロールすべての設定を変更できる管理者。ページの編集・公開、アクセス権限の設定、サイト全体の構成変更
    サイトのメンバー編集コンテンツの編集まで(ページ編集、ライブラリへのファイル追加など)
    サイトの閲覧者読み取りコンテンツを読むだけ。ポータルでは多くの社員は閲覧者に設定する
  2. アクセスを追加するには、追加したい人のアカウントを入力し、フル コントロール/編集/読み取りから選ぶ。[メールを送信] にチェックが入った状態で [共有] すると通知が飛ぶ。個人だけでなくグループアドレスでまとめて追加もできる。
    #7-03 画面 7
    #7-03 画面 8
過剰な権限を与えていないかが非常に重要なポイント。

権限はどの単位で設定する?

  • サイト単位以外に、ライブラリ・リスト・ファイル・ページなど細かい単位でも設定できる。例:ライブラリ単位なら 設定 → [サイト コンテンツ] → 社内規定ライブラリの [設定][このドキュメント ライブラリに対する権限]。既定ではサイトの権限を継承しているので、固有の権限にしたいときは権限の継承を中止して個別に設定する。
    #7-03 画面 16
    #7-03 画面 17
  • ただし実務では、細かく設定するほど後から管理が大変になる(ファイルごとに変えると誰がどれにアクセスできるか把握できなくなり、担当者交代時の引き継ぎも困難)。
権限は基本的にサイト単位で管理する 「このサイトを見られる人は誰か」をサイトレベルで決めておけば、管理がシンプルで追いやすい。どうしても見られたくない機密性の高い情報は、サイトを分けるのが確実。ライブラリ・リスト・ファイル単位の設定は本当に必要な場面に限る。ポータルを公開する前に、必ず適切な権限設定になっているか確認しよう。

#7-04ハブサイト連携とリンク設計

ハブサイト=複数の SharePoint サイトをつなぐ仕組み。全社ポータルをハブサイトとして中心に置き、各領域のサイト(総務・経理・営業・人事など)を関連付けるのが基本形です。

#7-04 画面 2
注意 サイト同士の関連付けは SharePoint 管理者しかできない(サイト所有者レベルでは設定できない)。

ハブに関連付ける2つのメリット

  1. 共通のナビゲーション:全社ポータル・総務ポータル・経理ポータルなどへのリンクが、サイト間を移動しても同じレイアウトで表示され、行き来がスムーズになる。
    #7-04 画面 7
  2. サイトの横断検索:総務ポータルの検索バーで「在宅勤務」と検索すると関連ページやドキュメントが見つかる(ここまでは通常の仕様)。関連付けておくと、全社ポータルから検索しても総務ポータルの情報まで横断的に検索してくれる。どのポータルにあったか迷ったときも全社ポータルから探せる。
    #7-04 画面 13
    #7-04 画面 14
検索でヒットするのは自分のアカウントにアクセス権限がある情報だけ。機密性の高い資料があっても、権限がなければ結果に出ない。権限設定をしっかりしておけば、横断検索を広げても情報が漏れる心配はない。

設定手順(SharePoint 管理者)

  1. SharePoint 管理センター → 左の [サイト] → [アクティブなサイト]
    #7-04 画面 17
  2. ハブサイトにしたいサイトを検索してチェック → […] → [ハブ] → [ハブ サイトとして登録][保存]
    #7-04 画面 18
  3. 関連付けたいサイト(総務ポータル)を選んで […] → [ハブ] → [ハブに関連付ける] → 先ほどのハブサイトを選んで [保存]
    #7-04 画面 20
    #7-04 画面 21
  4. 総務ポータルの上にハブサイトへのナビゲーションが追加される。
    #7-04 画面 22
2つの注意点
  1. 表面上はできあがって見えても裏側では処理が動いており、完全に設定が完了するまで約1日かかることがある。横断検索ですぐにヒットしない場合は時間を置いて試す。
  2. 関連付けたサイトのテーマカラーがハブサイトのデザインに統一される(紫だった総務ポータルが白に)。変更したい場合はハブサイト側でテーマカラー・ヘッダーの色を変更する。
    #7-04 画面 28
    #7-04 画面 31
必ずしもサイト同士をつなげる必要はない ハブ化が特に有効なのは、社内に複数のポータルやサイトが増え、横断検索したい・共通のデザインやナビゲーションで統一したいという必要が出てきたとき。ハブへの関連付けは後からでもできるので、まずは総務ポータル単体で運用を始め、組織の状況に合わせて検討するのが現実的。実行前に社内の関係者としっかりすり合わせよう。

#7-05サイト使用状況を確認する

「ポータルを公開したけど本当に使われている?」を、感覚ではなく数字で把握し、改善に活かします。

レポートの見方

  1. 設定アイコン → [サイトの使用状況]
    #7-05 画面 2
  2. 上部に3つの数字:重複しない閲覧者数サイトの訪問数ユーザー1人当たりの平均時間。右上のタブで7日間/30日間/90日間に切り替えられる。
    #7-05 画面 3
  3. 人気のあるコンテンツ:サイトページ・ニュース投稿・ドキュメントが、ユニークな閲覧者数の多い順にランキング(費やした時間でも見られる)。どのページがよく見られ、どのニュースが読まれているか一目でわかる。ここは過去7日間のデータのみ(30日・90日に切り替えられない)なので、定点観測したいなら数字をチェックする習慣を。
    #7-05 画面 6
  4. 使用状況の分析:デバイスごとのアクセス比率、曜日と時間帯のアクセスパターン(ヒートマップ)。例:水曜の午前中にアクセスが多い傾向なら、重要なお知らせはその直前に公開する。SharePoint が最もアクセスが多い日時をインサイトとして表示してくれるので、まずはそこを見るだけでも十分参考になる。
    #7-05 画面 8

数字をどう活かす?:増やす・減らす・変える

アクションシグナル対応
増やす特定のページにアクセスが集中している=ニーズが高いトップページのクイックリンクやボタンに追加・強調して、さらに使いやすく
減らす極端にアクセスが少ない、公開から数か月経ってもほとんど見られていない内容の見直しや他ページへの統合を検討。古い情報が残り続けるとポータル全体の信頼が下がる
変える平均滞在時間が極端に短い=情報が見つからずすぐ離脱している可能性ページのレイアウトや見出しを見直す
#7-05 画面 9

運用のポイント

  • レポートのデータは過去90日分に限られ、それより前は自動的に消えて取り戻せない。半年前と比べたい場合は、アイコンから Excel データを定期的にエクスポートしておく。
    #7-05 画面 16
  • 毎月細かく改善しなくても、3か月に1度程度、人気コンテンツや見られていないページを振り返るだけでポータルの質は着実に上がる。
データを見たら実際のアクションに落とし込む。ポータルは作って終わりではなく、使われながら育てていくもの。少しずつ改善を繰り返し、ユーザーの声を聞きながらより良いサイトに育てよう。
セクション8 エンディング

#8-01おわりに

SharePoint で社内ポータルサイトをゼロから作り上げました。サイトの構造設計に始まり、申請・制度・Q&A の各ページの作成、ニュース機能での情報発信、そして見てもらうための運用設定まで一通り取り組みました。

  • 使われるポータルを作るためのスキルと設計の考え方は、すでに身についている。自信を持って職場でトライしよう。
  • サイト構築は最初から完璧を目指さなくて大丈夫。周囲の声に耳を傾けながら、トライ&エラーを重ねていく。
  • 社内の情報を整理してみんなが使いやすい環境を作る役割は簡単ではないが、必ず誰かに感謝される仕事。迷ったらいつでもこの講座に戻ってこよう。