2024年5月 8日 (水)

Sharepoint

※2024年5月現在、SharePoint ブランドセンターのパブリックプレビューがロールアウトされてきています。

SharePoit ブランドセンターは、組織全体で SharePoint サイト上で利用する色、フォント、画像、その他のWeb資産を一元管理するサイトです。

20240508_201447

現在、サイトの見栄えを変更したい場合、既定のテーマから選択するか独自のテーマを作成するかくらいしかありません。独自のフォントを利用させるといったことができませんし、独自のテーマの作成もPowerShell等を使う必要があり、微調整がこまごま必要だったりと作業効率が良いとはお世辞にも言えません。しかし、ブランドセンターは Webサイトから直感的に展開できるようになります。

現時点で独自に展開できるのはカスタム フォントのみです。今後、機能が拡張される予定です。

SharePoint ブランドセンターを有効にすると、SharePoint と Viva Connections でカスタム フォントが利用できるようになります。

ブランドセンターは組織のアセット ライブラリー(Organization Asset Library: OAL)を利用してバックグラウンドで資産の保管と管理を行います。

現在、SharePoint ブランドセンターではテナント内で1つのサイトしかもてません。このサイトはグローバル管理者が管理します。

準備

ブランドセンターアプリはパブリックCDNを利用するため、これを有効化しておく必要があります。また組織のアセット ライブラリの設定も必要です。

組織のアセットライブラリが事前設定されていない場合は、SharePoint ブランド センターを有効化するときにこれらを一括して設定できます。

必要な手順

必要な手順は現在のテナント構成で異なります。次の3つのシナリオがあります。

  1. SharePoint 組織のアセット機能を利用していない
  2. プライベートCDNを使っていて、SharePoint 組織のアセット機能を使っている
  3. パブリックCDNを使っていて、SharePoint 組織のアセット機能を使っている

シナリオ別の手順の詳細は次のリンク先を参照してください。

SharePoint ブランド センター - SharePoint in Microsoft 365 | Microsoft Learn

ブランドセンター

ブランドセンターが利用できるようになると、ブランドセンターサイトの歯車アイコンをクリックすると「ブランドセンター(プレビュー)」メニューにアクセスできるようになります。

20240507_185531

ここからブランドセンター (アプリ) にアクセスできるわけです。

※このアプリは、ブランド センターのURLの末尾に "/_layouts/15/BrandCenter.aspx" を指定したページが実体です。

ここにはフォントを格納するための特殊なライブラリが用意されており、ここに独自に利用したいフォントをアップロードします。なお、現時点ではアップロードしたフォントは削除ができません。その代わりプロパティで非表示に設定できます。

20240508_211501

フォントは Web-safe フォントを入手するようにしましょう。

ブランドセンターアプリのトップページから「フォントの追加」をクリックします。ここにブランドフォントをアップロードします。たいていは zip ファイルとして提供されているため、これを解凍してここにアップロードします。サポートされているファイルの種類は次の通りです。 

フォントの種類 拡張子
True Type フォント .ttf
Open Type フォント .otf
Web Open Format フォント .woff
Web Open Format フォント .woff2

 アップロードできるフォントファイルのサイズの上限は10MBです。

 Microsoft が既定で用意しているもの以外は、各組織でフォントのライセンス管理をする必要があります。インターネット上には一部のフォントは商用販売されていますし、シェアウェアや無償利用できるものもあります。下記の Microsoft が提供するフォントライブラリでは、 Microsoft 以外でフォントを提供するユーザーや組織へのリンクが用意されています。ここからフォントを見つけることも可能です。

Font library - Typography | Microsoft Learn

SharePoint ブランドセンターが有効になると各サイトでは「外観」設定に「フォント(プレビュー)」が利用できるようになります。したがって各サイトでフォントを変更できます。独自のブランドフォントを用意しなくても Microsoft が既定で用意している複数のフォントから任意のものを選択することもできます。

20240508_211838

既定で用意されているフォントはフォントパッケージというもので配布されており、次の通りとなっています。

  • Microsoft default: Segoe UI
  • Amasis Pro
  • Aptos-Aptos Serif
  • Georgia Pro Condensed-Verdana Pro Condensed
  • Office: Aptos Display-Aptos
  • Sitka Heading-Sitka Text
  • Verdana Pro-Georgia Pro
  • Walbaum-Trade Gothic Next

SharePoint でサポートされるカスタム フォント コンポーネント

現時点では次の箇所でカスタム フォントが利用できます。

  • サイト ヘッダー - サイト タイトル
  • ハブ ヘッダー – ハブ タイトル
  • ナビゲーション (ハブとサイト) – リンクとラベル
  • ニュース Web パーツ
  • ページ タイトル領域
  • クイック リンク Web パーツ
  • ボタンViva Connectionsのダッシュボード
  • 画像 Web パーツ
  • サイト ヘッダー - 完了
  • セクション見出し
  • ヒーロー Web パーツ
  • サイト Web パーツ
  • 連絡先 Web パーツ
  • コール トゥ アクション Web パーツ
  • テキスト Web パーツ (RTE)
  • すべての Web パーツ タイトル (Microsoft から)

Viva Connections でサポートされるカスタム フォント コンポーネント

  • ウェルカム/グリーティング テキスト
  • セクション見出し
  • ダッシュボード カードレベル 1
  • リソース

フォントパッケージの作成

さて、独自のフォントをサイトで利用できるようにしましょう。このために作成するのがフォントパッケージです。

ブランド センター フォント パッケージ - SharePoint in Microsoft 365 | Microsoft Learn

作成方法の基本は次の通りです。

1. すでにアップロードしているフォントから表示フォントとコンテンツフォントとして利用するものを選択する

20240508_213750

2. フォントを見出しやタイトルなどに割り当てていく。

20240508_213900

3. サイドにパッケージに名前をつけ、ユーザーに表示するかどうかを指定して「保存」をクリックする。

20240508_213914

4. パッケージは複数作成できます。あとから編集も可能です。ただし、現時点ではパッケージの削除はできません。不要な場合は非表示にします。

20240508_213947SharePoint サイトへの適用

フォント パッケージが作成できから、あとは各SharePoint サイトの外観設定からブランド フォントを指定します。

Viva Connections アプリへの適用

Micorosft Teams の Viva Connections への適用手順は次のとおりです。適用すると SharePoint ホームサイトも同じフォントが適用されます。

参考情報