ガイド付きチュートリアル: organizationのトレーニングサイトを作成する

[アーティクル]
03/08/2023

この記事では、トレーニングサイトの例の要素を紹介し、自分のorganizationに似たサイトを作成する方法を学習するのに役立ちます。このサイトの例では、特定のイベントに関する情報を提供し、ユーザーを学習と登録に向けてガイドします。視覚的な影響に依存して、訪問者の関与と動機付けを行います。

まず、コミュニケーションサイトをまだ作成していない場合は、この記事の「サイトを作成する」セクションを参照してください。ページを編集してサイトに公開する方法を知りたい場合は、この記事の「セクションと Web パーツの編集、作業および公開」セクションをご覧ください。

サイトを作成し、ページを編集する方法を確認したら、次のガイダンスを使用して、表示される要素を追加できます。

トレーニングサイトの例

ホームページの画像	カスタマイズ手順
	1. ロゴとサイト分類ロゴをカスタマイズし、サイトを分類します。方法はこちら 2. インパクトを生み出すヒーロー Web パーツを使用して、価値を視覚的に伝えます。方法はこちら 3. 主要なアクションへのユーザーのガイド訪問者の登録または詳細の検出を誘導します。方法はこちら 4. イベントについて説明するイベントの "what" と "why" を説明するテキストを使用します。方法はこちら 5. リンク付きの画像を使用して、可視性を高め、詳細な議題ページにリンクします。方法はこちら 6. 画像が重要な情報の領域を定義できる詳細情報を強調表示します。方法はこちら 7. イベントの日付を表示するユーザーがスケジュールを計画できるように、イベントカレンダーを指定します。方法はこちら 8. マップを追加するユーザーが必要な場所にアクセスするのに役立つマップを使用します。方法はこちら 9. ページ登録を提供する簡単に登録するためのフォームを追加します。方法はこちら

ホームページの画像

カスタマイズ手順

1. ロゴとサイト分類 ロゴをカスタマイズし、サイトを分類します。 方法はこちら

2. インパクトを生み出 すヒーロー Web パーツを使用して、価値を視覚的に伝えます。 方法はこちら

3. 主要なアクションへのユーザーのガイド 訪問者の登録または詳細の検出を誘導します。 方法はこちら

4. イベントについて説明するイベントの "what" と "why" を説明するテキストを使用します。 方法はこちら

5. リンク付きの画像を使用して 、可視性を高め、詳細な議題ページにリンクします。 方法はこちら

6. 画像が重要な情報 の領域を定義できる詳細情報を強調表示します。 方法はこちら

7. イベントの日付を表示 するユーザーがスケジュールを計画できるように、イベントカレンダーを指定します。 方法はこちら

8. マップを追加するユーザー が必要な場所にアクセスするのに役立つマップを使用します。 方法はこちら

9. ページ登録を提供 する簡単に登録するためのフォームを追加します。 方法はこちら

サイトを作成する

ここに示すようなサイトを作成するには、コミュニケーションサイトを作成します。これを行うには、SharePoint スタートページで [サイトの作成] を選択します (または、サイトをハブサイトと関連付ける場合は、ハブサイトに移動し、そこで [サイトの作成] を選択します。そうすると、コミュニケーションサイトがハブサイトに自動的に関連付けられます)。

サイトの作成オプションの画像

次に、[コミュニケーションサイト]、[トピック] レイアウトの順に選択します。サイト名、説明、その他の情報を入力して、[完了] を選択します。次に、この記事の例と同じ種類のレイアウトのテンプレートを取得します。

コミュニケーションサイトダッシュボードの画像

詳細については、「SharePoint Online でコミュニケーションサイトを作成する」を参照してください。

先頭に戻る

ロゴとサイト分類

この例では、ヘッダー領域には "スタンドアロン" ページであるため、ナビゲーションは含まれません。ただし、ヘッダー領域にはカスタムロゴが含まれており、サイトが "内部のみ" として分類されていることを示すラベルが表示されます。サイト分類では、内部、機密、高いビジネスへの影響、ビジネスへの影響の低さなどの値が使用されます。これらの値は、情報の機密性または情報のライフサイクルに関連する場合があります。

サイトロゴの画像

ロゴを変更してサイトを分類する方法については、「 SharePoint サイトの設定を管理する」を参照してください。

先頭に戻る

セクションと Web パーツを管理する

ページの右上にある [編集] をクリックして、編集を開始します。

編集エディションの画像

編集中は、左側のヘッダーの下に、下書きを保存したり、後で破棄したりすることができます。

セクションツールバーの画像

セクションの前後にある [+] 記号で、セクションが複数のレイアウトのいずれかを使用して追加されます。

セクションレイアウトオプションの画像

ページはセクションによって構成され、1 つ以上の Web パーツが配置されます。ページを編集すると、各セクションに、レイアウトの編集、移動、またはセクションの削除を行うコントロールが表示されます。セクションの操作方法の詳細については、「ページにセクションと列を追加または削除する」を参照してください。

[セクションの追加] オプションの画像

[プラス記号] セクションのプラス記号 [画像] を選択すると、セクション内の Web パーツの前後に表示される可能性があり、使用可能な Web パーツの種類が多数表示されます。すべての Web パーツの詳細については、「SharePoint ページで Web パーツを使用する」を参照してください。

セクションの追加アイコンの画像

Web パーツはセクション内で編集、移動、または削除できます。 [Web パーツの編集] アイコンで、Web パーツごとに一意の詳細なコントロールが開きます。

編集ツールバーの画像

ページの更新の準備ができたら、[発行] を選択して、organization全体に表示します。

発行アイコンの画像

ヒント

サイト内のすべてのページを管理するには、トップメニューの [ページ] をクリックします。

ページの使用の詳細については、「 SharePoint サイトでモダンページを作成して使用する」を参照してください。

先頭に戻る

Hero Web パーツを使用して影響を生み出す

ヒーロー Web パーツを使用して、ワークショップの焦点を訪問者に知らせます。この例で使用されているレイアウトは 2 つのタイルです。

ヒーローレイアウト: タイルまたはレイヤー:

Web パーツを編集すると、レイアウトオプションが表示されます。 [ タイル] オプションでは、1 から 5 つのタイルのレイアウトが表示されます。 [レイヤー] オプションでは、それぞれの画像を層として設定し、画像をタイトルの隣に表示します。最大 5 つのレイヤーを使用して、1 つの Web パーツでページ全体を作成できます。

各タイルを編集できます。

ヒーロー Web パーツ内のタイルを並べ替えるには、左側の [項目の移動] コントロールを使用します。右側のコントロールを使用すると、使用するテキストと画像を調整する 詳細を編集 したり、ホバーアニメーションの 焦点を設定 したり、拡大/ 縮小したり、画像を縮小したりできます。

この例では、ヒーロー Web パーツは全幅のセクションにあります。

ヒーロー Web パーツの画像

Hero Web パーツの使用の詳細については、「ヒーロー Web パーツを使用する」を参照してください。

先頭に戻る

イベントの日付を表示する

イベント Web パーツには、イベント情報が自動的に表示されます。表示されるイベントは、 ソース、 イベントリスト、 カテゴリ、 日付範囲のフィルターによって制御されます。イベントは、 フィルムストリップ ビューまたは コンパクト ビューで詳細な概要と共に表示できます。

このワークショップサイトの例では、この Web パーツで Filmstrip レイアウトが使用されています。

イベント Web パーツの画像