SharePoint のデザイン マネージャーの概要
重要
この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。 コミュニケーション サイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。 従来の環境やこれらのブランディング手法を使用することはお勧めしません。
SharePoint サイトのブランディングにデザイン マネージャーを使用する方法の概要が示されています。 デザイン マネージャーは、SharePoint と Office 365 の両方の発行サイトで使用可能な発行機能です。
デザイン マネージャーの概要
SharePoint サイトで組織のブランドを表現し、「SharePoint のように見える」ものではないようにするには、カスタム デザインを作成して、その目的を達成するデザイン マネージャーを使用します。 デザイン マネージャーは、SharePoint の機能です。この機能により、使い慣れた Web デザイン ツールを使用して、完全にカスタマイズされた完璧なピクセルのデザインを簡単に作成できるようになります。 デザイン マネージャーは、SharePoint と Office 365 の両方の発行サイトで使用可能な発行機能です。
デザイン マネージャーを使用すると、HTML と CSS のみを使用する、任意の Web デザイン ツールまたは HTML エディターを使用して、Web サイトのビジュアル デザインを作成し、そのデザインを SharePoint にアップロードできます。 デザイン マネージャーは、カスタム デザインのあらゆる側面を管理する中央ハブおよびインターフェイスです。
多くの場合、サイトのビジュアル デザインの作成は、複数の人または組織が関係する、さらに大きな処理の一部になります。 より大きな観点から見たタスクのロードマップについては、「SharePoint でのデザインとブランド化」を参照してください。
概要としては、デザイナーが次の作業を実行することになります。
SharePoint デザインの主要な概念を理解します。 詳細については、「 SharePoint ページ モデルの概要」を参照してください。
HTML および CSS でデザインのモックアップを作成します。 デザインの作成は Web デザイナーの中核の技術で、この記事の範囲には含まれていません。
デザイン マネージャーを使用して、デザインを実装します。 この記事の各セクションでは、デザイン マネージャーの概要、およびデザイン マネージャーを使用してビジュアル デザインを実装する処理について説明します。
デザイン マネージャーを使用してデザインを実装する
デザイン マネージャーを見ると、左側に、実行する必要がある高レベルのタスクを表す一連のリンクが表示されます。 設計とサイトの要件によっては、これらのタスクをすべて実行する必要がなく、必ずしもこの順序で実行する必要はありません。 それでも、このシーケンスは便利な出発点です。
開始の前に
デザイン マネージャーを使用する前に、デザインが必要です。 独自の Web サイト テンプレートを作成することも、既製の Web サイト テンプレートを使用することもできます。 "デザイン" は、サイトのビジュアル デザインを実装するファイルのグループです。最も一般的には次のとおりです。
SharePoint マスター ページに変換される、少なくとも 1 つの HTML ファイル
1 つ以上の CSS ファイル
JavaScript ファイル
画像
その他のサポート ファイル
HTML と CSS でサイトをモックアップすると、さまざまなページやページの種類を表示する方法のデザインを実装する HTML ファイルがいくつか存在する可能性があります。 これらの HTML ファイルの 1 つだけがマスター ページに変換されることに注意してください (各チャネルに独自のマスター ページがある複数のデバイス チャネルがない限り、次のセクションを参照してください)。 デザイン マネージャーを使用してページ レイアウトや表示テンプレートなどの他のサイト要素を作成した後、HTML モックアップからページ レイアウトまたは表示テンプレートに関連付けられている HTML ファイルと CSS ファイルにマークアップを転送できます。
作業を始める前に、必須の SharePoint アクセス許可も必要です。 デザイン マネージャーを使用するには、少なくともデザイン アクセス許可レベルがある必要があります。
デバイス チャネルを管理する
サイトをデザインする前であっても、サイトが対象とするデバイスは何か、各デバイス上のユーザー エクスペリエンスはどうなるかを考える必要があります。 たとえば、特定のクラスのスマート フォンまたはタブレットに、サイトのデザインを最適化する場合があります。
定義するチャネルに応じて、複数のデザインが必要な場合があるため、複数の HTML ファイルが必要になり、各ファイルが個別のマスター ページに変換されます。 また、各 HTML ファイル (および各マスター ページ) は、独自の CSS ファイルを参照できます。 サイトを設計する前に、デバイス チャネルを最初に考慮する必要があります。
デバイス チャネルを使用すると、異なるデバイスに異なるデザインを割り当てることによって、1 つの発行サイトをさまざまな方法で表示できます。 各チャネルには、特定のデバイスに最適化したスタイル シートにリンクする、独自のマスター ページを設定できます。 各チャネルでは、1 つ以上のデバイスに対して、「Windows Phone OS」のようなユーザー エージェント部分文字列を指定します。 これは、各チャネルに含まれるデバイスを決定するルールです。 そうすると、訪問者がサイトを閲覧するとき、各チャネルは、指定したデバイスまたはデバイスのクラス (たとえば Windows Phone) 用のトラフィックをキャプチャし、訪問者には特定のデバイス向けに最適化されたデザインでサイトが表示されます。
デバイス チャネルにはランク付けも含まれているため、デバイス チャネルは、順序が重要な SharePoint リストに作成され、格納されます。 リスト内のデバイス チャネルは上から下に並べ替え、包含ルールはその順序で処理されます。 つまり、最も特定のルールが一番上にあるデバイス チャネルが必要です。 たとえば、"Windows Phone OS 7.0" をターゲットとするチャネルは、"Windows Phone OS" をターゲットとするチャネルの前に配置する必要があります。
設計ファイルのアップロード
デザインを作成するときは、任意の HTML エディターを使用して、コンピューター上のファイルをローカルで操作できます。 ただし、最終的には、これらのファイルを SharePoint サイトのマスター ページ ギャラリーにアップロードして、デザイン マネージャーを使用してデザインを変換、プレビュー、および磨くことができるようにする必要があります。
簡単にデザイン ファイルをアップロードし、作業を続行するには、SharePoint サイトのマスター ページ ギャラリーにコンピューターのドライブを割り当てます。 これによって、コンピューターのフォルダーがマスター ページ ギャラリーに接続され、SharePoint のサーバー上にあるファイルを、まるでローカル ファイルであるかのように操作できます。
ネットワーク ドライブをマップした後、SharePoint に接続されているコンピューターのマップされたドライブ上のフォルダーにデザイン ファイルをコピーするだけで、SharePoint にデザインをアップロードできます。 HTML ファイルを SharePoint マスター ページに変換した後、それぞれの HTML ファイルが関連付けられているページ レイアウトと表示テンプレートを作成した後、コンピューター上の HTML エディターでそれらの関連する HTML ファイルを引き続き編集できます。 マップされたドライブにファイルを保存するたびに、SharePoint はコンピューター上のファイルをマスター ページ ギャラリーと自動的に同期します。 マップされたドライブに独自のフォルダー構造を作成できます。その構造は SharePoint によって管理され、マスター ページ ギャラリーに表示されます。 1 つのデザインに関連するすべてのファイルを 1 つのフォルダーに保持し、デザインをアップロードする準備ができたら、そのフォルダーをマップされたドライブにコピーする必要があります。
詳細については、「 方法: ネットワーク ドライブを SharePoint マスター ページ ギャラリーにマップする」を参照してください。
マスター ページを編集する
ナビゲーション、検索など、必要な SharePoint の機能をすべて含む、完全にブランド化したマスター ページの作成は、基本的に次の 3 ステップの処理になります。
HTML ファイルを SharePoint マスター ページに変換します。
マスター ページをプレビューし、問題があれば修正します。
マスター ページに SharePoint スニペットを追加します。
この 3 つのステップは、それぞれデザイン マネージャーの異なるページで実行します。
HTML ファイルを変換する
デザイン マネージャーの中心的な機能は、HTML デザインを SharePoint マスター ページに変換することです。 表示が成功するには、SharePoint マスター ページに、ASP.NET 要素および SharePoint に特有な要素を多数含める必要があります。 HTML ファイルをマスター ページに変換する場合、これらの必須の要素をすべて含む .master ファイルをデザイン マネージャーが作成するので、これらの要素について知る必要はありません。 変換中に、元の HTML ファイルに追加される HTML マークアップ (コメントなど) もあります。
変換後は、HTML ファイルと SharePoint マスター ページが関連付けられるので、割り当てたドライブで HTML ファイルを編集して保存すると、マスター ページは自動的に更新されます。 デザイン マネージャーには、HTML ファイルへの変更を .master ファイルに同期するかどうかを決定する Associated File という名前のプロパティが HTML マスター ページにあります。
注:
デザイン マネージャーには、最小限のマスター ページを使用してデザインを開始するオプションも用意されています。 このシナリオでは、HTML デザインから始める必要はありません。代わりに、SharePoint でマスター ページを正しくレンダリングするために必要な最小ページ要素を含む HTML マスター ページを作成し、HTML マスター ページを編集してデザインを構築できます。
マスター ページをプレビューする
マスター ページの変換に加えて、デザイン マネージャーにはサーバー側プレビュー (HTML エディターのデザイン時プレビュー) が用意されているため、マスター ページのライブ プレビューを取得し、ページのレンダリングを妨げる可能性がある問題を修正できます。 たとえば、HTML ファイルは XML に準拠している必要があるため、すべての要素に終了タグを指定するなど、軽微なマークアップの問題を修正する必要がある場合があります。 問題を解決するには、HTML ファイルを編集して保存し、サーバー側プレビューを更新する必要があります。
マスター ページをプレビューするときは、左上隅の [ プレビュー ページの変更] オプションを使用して、既存の任意のページと一緒にマスター ページをプレビューしたり、一緒にプレビューする新しいページを作成したりすることができます。 デザイン時に HTML エディターで HTML マスター ページをプレビューする場合と違って、このサーバー側のプレビューは、完全に機能するリアルタイムのプレビューなので、HTML ファイルを編集し、関連付けられた .master ファイルに最新の変更が同期されるように、そのファイルを保存して、リアルタイムのプレビューを更新し、ブラウザーで最新のデザイン変更を確認できます。
スニペットを追加する
マスター ページを変換し、それを正常にプレビューできたら、そのマスター ページにスニペットを追加できます。 スニペットは、ナビゲーション コントロールや検索ボックス、Web パーツなど、マスター ページに追加できる SharePoint コンポーネントの HTML 表現です。 マスター ページにスニペットを追加することにより、SharePoint のあらゆる機能をマスター ページにすばやく組み込めます。 スニペットの追加は基本的に次の 3 ステップの処理です。
スニペット ギャラリーでスニペットを検索し、構成します。
HTML マスター ページにスニペットをコピーします。
プレビューし、CSS を使用してスニペットのスタイルを設定します。
詳細については、「SharePoint デザイン マネージャー スニペット」を参照してください。
スニペット ギャラリーでスニペットを検索し、構成する
スニペット ギャラリーでは、編集中のファイルの種類がマスター ページかページ レイアウトかによって利用できるコンポーネントを、すばやく確認できます。 リボンで、スニペットを選択します。 右のプロパティ グリッドで、スニペットのこのインスタンス用にプロパティを構成してから、[更新] をクリックして、左の HTML スニペットを更新できます。
HTML マスター ページにスニペットをコピーする
スニペットを構成したら、クリップボードにコピーし、HTML ファイルの適切な場所に貼り付けます。 HTML デザインには既にモックアップコントロールや静的コントロールが含まれている場合があります。その場合は、スニペット ギャラリーの動的スニペットに置き換える際に、モックアップコントロールや静的コントロールを削除したりコメントアウトしたりできます。
プレビューし、CSS を使用してスニペットのスタイルを設定する
スニペットを HTML ファイルにコピーし、変更を保存した後、マスター ページのサーバー側プレビューを更新して、コントロールのレンダリング方法を確認できます。 スニペットには、HTML エディターでデザイン時プレビューを提供するマークアップが含まれていますが、サーバー側プレビューにはライブ データを含む完全な忠実度のプレビューが表示されます。たとえば、ナビゲーション コントロールには、データ ソースからのライブ データを含むサイトの現在のナビゲーション構造が表示されます。
既定では、ほとんどのスニペットは、メインの SharePoint スタイル シート corev15.css からスタイルを継承します。 スニペットのスタイルを設定するには、スニペットに適用されるスタイルを特定し、カスタム CSS でオーバーライドする必要があります。 これらの既定のスタイルを識別するには、Internet Explorer の開発者ツールなどのブラウザー ツールを使用できます。 Internet Explorer のサーバー側プレビューでマスター ページを表示しているときに 、F12 キーを押して [検索] を選択し、[要素の選択] を クリックします。 これにより、スニペットをクリックし、マスター ページのリンク先のカスタム スタイル シートに CSS を追加することで、オーバーライドするスタイルを正確に確認できます。
表示テンプレートを編集する
SharePoint Server のオンプレミス インストールを使用している場合は、コンテンツ検索 Web パーツやその他の検索駆動型 Web パーツを使用して、検索クエリの結果をページ上のコンテンツとして表示できます。 検索駆動型 Web パーツでは、次の 2 つの主な目的で表示テンプレートが使用されます。
検索結果アイテムに戻される管理プロパティを、JavaScript (実装するすべてのカスタム JavaScript を含む) で利用できるプロパティにマッピングするため。
HTML および CSS を使用して、これらのプロパティの表示方法を提示し、そのスタイルを設定するため。
マスター ページおよびページ レイアウトでは、関連付けられた HTML ファイルを編集しますが, .master ファイルや .aspx ファイルは編集しません。 同様に、表示テンプレートは HTML ファイルおよび関連付けられた .js ファイルから成りますが、HTML ファイルだけを編集します。 その HTML ファイルを保存するたびに、関連付けられた .js ファイルが SharePoint によって自動的に更新されます。
カスタム表示テンプレートを作成する場合は、まず既存の表示テンプレートの 1 つをコピーして変更する必要があります。 これは、既定の表示テンプレートには HTML ファイル内のコメントに情報が含まれており、適切な基本的なページ構造と、マッピング入力フィールドなどの基本的なタスク用のフレームワークが用意されているため便利です。
ページ レイアウトを編集する
ページ レイアウトを作成するプロセスは、マスター ページを作成するプロセスとは少し異なります。 マスター ページの場合は、HTML デザインから開始し、それを SharePoint マスター ページに変換してから、関連付けられている HTML ファイルの編集を続行します。 ただし、ページ レイアウトの場合は、まずデザイン マネージャーでページ レイアウトを作成し、.aspx ファイルと HTML ファイルを作成してから、HTML エディターのマップされたドライブから関連付けられている HTML ファイルを編集します。 デザイン マネージャーを使用してページ レイアウトを作成する必要がある理由は、ページ レイアウトに正しいページ フィールドのセットを追加できるようにするためです。
ページ レイアウトを作成するときは、ページ レイアウトをプレビューするマスター ページを選択し、[ページ レイアウト コンテンツ タイプ] を選択します。 コンテンツ タイプはフィールドとデータ型のスキーマであり、ページ レイアウト コンテンツ タイプで使用できるフィールドによって、デザインするページ レイアウトで使用できるページ フィールド コントロールが決まります。 最初にブラウザーでページ レイアウトを作成して、ページ フィールドを追加できるようにします。
関連付けられた HTML ファイルでページ レイアウトを作成したら、残りのステップはマスター ページの場合と同じです。
ページ レイアウトをプレビューし、問題があれば、HTML バージョンを編集および保存して、修正します。
ページ レイアウトにスニペットを追加します (構成、コピー、プレビュー、スタイル設定)。
スニペット ギャラリーでは、ページ レイアウトとマスター ページに対してさまざまなスニペットを使用できます。リボンには、その種類のファイルに関連するスニペットのみが表示されます。 たとえば、ナビゲーション スニペットと検索ボックス スニペットはマスター ページでのみ使用でき、ページ フィールドはページ レイアウトでのみ使用できます。
ページ レイアウトを設計する際の基本的なタスクは、コンテンツ作成者によって作成されたコンテンツを表示するページ フィールド コントロールを配置してスタイルを設定することです。 ページ レイアウトのスタイルは、マスター ページのリンク先のスタイル シート内に配置することも、各ページ レイアウトを独自のスタイル シートにリンクすることもできます。 HTML デザインにマスター ページよりもページ レイアウトに適したコンテンツが含まれている場合は、そのコンテンツを HTML マスター ページから転送し、それらのスタイルを関連するページ レイアウトの正しいコントロールと要素に適用します。
詳細については、「 方法: SharePoint でページ レイアウトを作成する」を参照してください。
テーマおよび構成済みの外観を作成する
Office 365 では、デザイン マネージャーにはテーマと構成済みの外観を作成するオプションがあますが、オンプレミスの SharePoint インストールにはありません。 テーマとは、カスタムデザイン (マスター ページ) に応用できる一連のフォントと色をいいます。 テーマは、テーマ ギャラリーにアップロードする .xml ファイルで定義されます。 カスタム マスター ページをテーマに対応させるには、マスター ページに特別なマークアップを追加する必要があります。SharePoint はこのマークアップを認識し、フォントや色などのテーマ要素を挿入するために使用します。
構成済みの外観とは、背景画像、テーマ (フォントと色)、デザイン (マスター ページ) の関連付けをいいます。 構成済みの外観は、事前に定義されたデザイン要素 - テーマ、背景の画像、マスター ページ - をさまざまに組み合わせて使用できるようにします。
デザインを発行し、適用する
イメージ、HTML、CSS、JavaScript ファイルなど、デザインで使用されるほとんどのアセットは、マスター ページ ギャラリーに存在します。 マスター ページ ギャラリーは SharePoint ドキュメント ライブラリであり、既定ではバージョン管理が有効になっています。これにより、ファイルを編集するたびにメジャー バージョンとマイナー バージョン (下書き) が作成されます。
サイトにデザインを適用するには、まず、デザインで使用される各ファイルまたはアセットのメジャー バージョンを発行する必要があります。 テスト環境でサイトを設計する場合は、サイトをプレビューする前にすべてのファイルを発行する必要がないように、マスター ページ ギャラリーのバージョン管理をオフにする必要があります。 ただし、ライブ サイトで設計する場合、これはベスト プラクティスではありません。
すべてのデザイン ファイルを発行したら、完成したマスター ページをサイトに割り当ててデザインを適用する準備が整います。 各サイトには、各デバイス チャネルに異なるマスター ページを割り当てることができます。デザイン マネージャーのこのページでは、マスター ページをチャネルに適用します。
デザイン パッケージを作成する
デザイン パッケージを使用すると、簡単に、デザインで使用するすべてのファイルおよび資産を収集し、それらを、あるサイトからエクスポートして、別のサイトにインポートし、その新しいサイトにデザインを適用できます。 テスト サイト コレクションでデザインを実装および洗練して、ライブ サイト コレクションに展開する場合、デザイン パッケージを使用してデザインを転送できます。
デザイン パッケージは.wsp ファイルであり、SharePoint ソリューション ファイルであり、基本的には特別な種類の.cab ファイルです。 デザイン パッケージを作成またはインポートすると、.wsp ファイルがソリューション ギャラリーに格納されます。 デザイン パッケージをインポートすると、パッケージが自動的にアクティブ化されます。 マスター ページとページ レイアウトがパッケージ化される前に発行され、マスター ページがパッケージ化される前にデバイス チャネルに割り当てられた場合、デザイン パッケージの展開時にデザインがサイトに自動的に適用されます。 それ以外の場合は、デザインを新しいサイトに適用するには、デザイン ファイルを発行し、デバイス チャネルごとにマスター ページを適用するだけで済みます。