SharePoint Online ポータル ブランド化ガイダンス

  • [アーティクル]

ポータルでカスタム ブランドを適用できる機能は重要です。この記事ではブランド化のオプションとベスト プラクティスの概要を説明します

注:

このガイダンスは主に SharePoint Online を対象にしていますが、大部分はオンプレミスの SharePoint 環境でホストされているポータルにも適用されます。

行うべきではないこと

以下では、ポータルにブランド化を適用するときに行うべきではない主要な事柄を一覧で示します。

回避すべきこと:

  • Office 365 スイート バーのブランド化をオーバーライドする。
  • 個人用サイトのブランド化をカスタマイズする。
  • カスタム マスター ページを使用して、既定でカスタム ブランドを実装する。

ブランド化の要件と一般的な原則

通常、組織はユニークなポータルにすることを望みます。 カスタム ブランドを使用すると、企業ブランドとその価値の向上に役立つため、(企業) ポータルにおいてカスタム ブランド化ソリューションは不可欠です。

カスタム SharePoint Online ポータルを構築する際の一般的なブランド化の要件

  • 外観のカスタマイズ:

    • カスタムの配色を実装する。
    • カスタム ロゴを表示する。
    • サインイン ページの外観をカスタマイズする。
    • ナビゲーション コントロールの外観を変更する。

  • レイアウトの調整:

    • ページ上の情報の全体的なレイアウトを変更する。
    • ポータルを "レスポンシブ" にする
    • カスタム フッターを表示する。

  • 機能の追加:

    • ポータルのナビゲーション動作をカスタマイズする。
    • ページ上にカスタム コントロール (Web パーツ) を追加する。

以降のセクションで、これらの要件に対処する方法について説明します。

一般的な原則

SharePoint Online 環境でポータルをブランド化する際には、以下の一般的な原則について考慮してください。

  • SharePoint Online サービスは常に改善されています。 このサービスの更新内容によって、標準ページのドキュメント オブジェクト モデル (DOM) 構造や、標準ファイルのコンテンツ (たとえば、マスター ページなど) が影響を受ける可能性があります。 開発者はこの点を念頭に置き、サポートされないカスタマイズ方式 (たとえばページの DOM 構造にある特定の要素の位置など) に依存すべきではありません。

  • マスター ページのカスタマイズを避けます。 サービスの更新により、標準のマスター ページ構造が影響を受ける可能性があります。 いずれかの標準マスター ページのコンテンツをコピーすることでカスタム マスター ページを実装した場合、この標準マスター ページが更新されたかどうかを監視し続け、変更内容をカスタム マスター ページに再実装する必要があります。 それを行わないと、カスタム マスター ページの使用中に、一部の SharePoint 機能が正しく動作しなくなる可能性があります。 この理由で、マスター ページをカスタマイズすると、リスクと保守コストが増加します。可能な場合にはマスター ページのカスタマイズを避けることをお勧めします。

  • 個人用サイト (OneDrive for Business サイト) のカスタマイズされたブランド化はサポートされていません。 Office 365 テナント レベルのブランド化設定を使用してカスタム配色を適用できます。 これは、OneDrive for Business の既定のモダン エクスペリエンスに当てはまることに注意してください。

  • SharePoint Online ポータルを、Office 365 エコシステム全体の一部と見なす必要があります。 そのため、すべてのポータルに Office 365 スイート バーが表示されるようになりました。このバーのカスタマイズはサポートされていません (「Office 365 スイート バー」のセクションをご覧ください)。

  • ブランド化と、ナビゲーション コンポーネントの構造を計画するときには、「SharePoint Online ポータル用のナビゲーション ソリューション」で概説されている推奨事項に従うことが重要です。

  • カスタム コントロール (Web パーツ) を使用してポータル機能を拡張するときには、「SharePoint Online ポータル パフォーマンス ガイドライン」に記されている推奨事項に従うことが重要です。

  • "クラシック" サイト/ページと "モダン" サイト/ページでは、ブランド化方式にかなりの違いがあります。 "モダン" サイトとページに関する詳細については、「"モダン" チーム サイトのカスタマイズ」と「"モダン" サイト ページのカスタマイズ」をご覧ください。

外観のカスタマイズ

SharePoint ポータルの外観をカスタマイズするための標準的な方法がいくつかあります。

  • 管理者はテナント全体の Office 365 テーマをカスタマイズできます。
  • カスタム テーマを特定のサイトに適用できます。

この手法により、さまざまなポータル サイトで必要な色を "取得" して、柔軟性の高い配色を行うことができます。 さらに柔軟性が必要な場合、標準のマスター ページ (seattle.master) から作業を開始し、カスタム テーマを適用したり、サイト カスタム CSS 設定 (Web.AlternateCSSUrl) を使用して必要な CSS ファイルをフックアップしたりできます。 カスタム ロゴの画像を設定するには、Web.SiteLogoUrl プロパティを使用します。

これらの手法については、以下の記事と PnP サンプルに示されています。

SharePoint 用のカスタム CSS ファイルを開発する際には、次の推奨事項に従ってください。

  • 標準の CSS クラスのオーバーライドを制限する。
  • Web.AlternateCssUrl プロパティを使用してカスタム CSS ファイルを組み込む。
  • Office 365 スイート バーのブランド化をオーバーライドしない。オーバーライドすると、ユーザーがポータルの外に出たときにユーザー エクスペリエンスが途切れます。

Office 365 サインイン ページ

会社のブランド化を Office 365 サインイン ページに適用できます。 このプロセスについては、「会社のブランドを Office 365 サインイン ページに追加する」で説明されています。

Office 365 スイート バー

スイート バーに関する Microsoft の観点からのガイダンスを次に示します。

  • スイート バーはテナント レベルのナビゲーション コンポーネントです。ユーザーはスイート バーを使用して、すべての Office 365 サービス間を簡単に移動できます。
  • ポータル アプリケーションが独自のスイート バーを所有することはありませんし、そうする必要もありません。
  • スイート バーはアプリケーションの一部ではなく、これをブラウザー ツールバーのように扱うことができます。
  • スイート バーの変更/構成は可能ですが、Office 365 Admin ページだけから、テナンシー レベルに限りそのような操作が可能です。
  • アプリケーション内でコードを使用してスイート バーを変更 (移動、非表示) しないでください。
  • アプリケーションでスイート バーの一部 (アプリ起動ツール アイコンなど) を再利用しないでください。
  • 賢いように見える細工をしようとすると、今後予期しない問題が発生する可能性が高くなります。

レイアウトの調整

SharePoint ポータルのレイアウト調整を検討する際に、開発者がしばしば最初に思いつく選択肢は、カスタム マスター ページを作成することです。 カスタム マスター ページは引き続きサポートされていますが、前述の理由により、この方式は推奨されません。つまりカスタム マスター ページを使用すると、長期的なリスクと保守コストが増加します。

開発者は、SharePoint ポータルのレイアウトを調整するための代替方式を考慮する必要があります。 これらには以下が含まれます。

  • カスタム CSS を実装する。
  • カスタム ページ レイアウトを使用する。
  • クライアント側スクリプトを挿入して、共通のブランド化要素 (フッターなど) を実装する (この方法については次のセクションで取り上げます)。

こうした方式を組み合わせることで、カスタム マスター ページを作成しなくても、目的とする SharePoint ポータル レイアウトを実現できます。

GitHub にある次の PnP サンプルとソリューションは、この実現方法を示しています。

機能の追加

ページにクライアント側スクリプトを埋め込むことで、ポータルの外観と機能をさらにカスタマイズできます。 たとえば、この方式を使用すると、ナビゲーション コントロールをカスタマイズしたり、ポータルのすべてのページにカスタム ヘッダーとフッターを追加したり、その他のカスタム UI ブロックを実装したりできます。

次の方式を使用して、JavaScript を埋め込むことができます。

  • サイトまたはサイト コレクション レベルでカスタム アクションを追加する これにより、サイトまたはサイト コレクションのすべてのページで特定の JavaScript の実行をトリガーできます。

  • 実際の JavaScript コードまたは JavaScript ファイルへのリンクを使用して、ページにコンテンツ エディターまたはスクリプト エディター Web パーツを追加する。 これにより、特定のページ上で JavaScript コードの実行をトリガーできます。

  • ページ レイアウト ファイルのコンテンツに、JavaScript コードまたは JavaScript ファイルへのリンクを含める。 これにより、このページ レイアウト ファイルを使用するすべての発行ページで JavaScript の実行をトリガーできます。

注:

カスタム アクション方式は、現在の発行ポータルを含め、"クラシック" サイトでのみ動作します。

次の PnP サンプルは、JavaScript 埋め込みを実現する方法を示しています。

注:

JavaScript を使用してポータル機能を拡張するときには、「SharePoint Online ポータル パフォーマンス ガイドライン」に概説されている推奨事項に従うことが重要です。

ブランド化資産のプロビジョニング

ブランド化ソリューションを実装するための最後の手順は、ブランド化資産をプロビジョニングすることです。 通常、ブランド化資産にはイメージ、CSS ファイル、JavaScript ファイルが含まれます。

これらのファイルを展開するには、次のようにいくつかの方式があります。

  • 個別のサイト コレクション内のライブラリにファイルを発行する。 この場合、各サイト コレクションは独自のバージョンのブランド化資産を使用できます。 ファイルへのアクセスは、標準的な SharePoint セキュリティ メカニズムを使用して制御されます。 ただし、ファイルを更新した場合、各サイト コレクションにそれらを再アップロードする必要があります。

  • 1 つのサイト コレクション (中央の場所) にあるライブラリにファイルを発行する。 このシナリオの場合、すべてのサイト コレクションで単一の最新バージョンのブランド化資産を使用できます。 更新されたファイルをアップロードする必要があるのは、1 つの場所に対してのみです。 管理者は、すべてのサイト コレクションのユーザーに、中央の場所で発行されたファイルへのアクセス権を確実に与える必要があります。

  • CDN (Web アプリケーション、Azure CDN、または Office 365 CDN) にファイルを発行する。 この場合、すべてのサイト コレクションが単一の最新バージョンのブランド化資産を使用できます。 更新されたファイルをアップロードする必要があるのは、1 つの場所に対してのみです。 CDN の場所を使用するとパフォーマンスは向上しますが、コンテンツが SharePoint の外部に格納されるため、標準的な SharePoint セキュリティ メカニズムを使用して資産を保護できなくなります (ただし、CDN 上のファイルをセキュリティで保護できる Office 365 プライベート CDN 機能は例外です)。

PnP プロビジョニング エンジンを使用して、SharePoint ライブラリにブランド化資産を展開できます。 Office 365 CDN 機能を使用すると、ファイルが CDN で自動的にプロビジョニングされます。 代替 CDN ソリューション使用する場合、CSN にファイルを発行するためにカスタムのプロビジョニング方式が必要になります。

CDN の詳細については、以下を参照してください。

関連項目