概要
WisdomBaseのトップページは、複数の「掲載項目」を組み合わせて構築します。
本記事では、トップページを構築する基本的な流れを説明します。
トップページ構築の全体像
トップページの構築は、大きく以下の3ステップで進めます。
- 事前準備（掲載コンテンツの準備）
- 掲載項目の作成・設定（トップページ設定画面）
- 並び替え・公開
ステップ1：事前準備
トップページに掲載する素材を先に用意しておくと、スムーズに構築できます。
| 準備する内容 | 説明 | 参考記事 |
|---|---|---|
| コースの登録・整理 | カテゴリー・タグ・ラベルを設定し、コースを分類しておきます | カテゴリー・タグ・ラベル設定 |
| コースの表示順 | 「オススメ順」で表示したい場合は、表示順一覧で順序を設定しておきます | コースの並びを変更する |
| お知らせの作成 | トップページにお知らせを掲載する場合は、お知らせカテゴリーとお知らせを先に作成しておきます | お知らせの掲載方法 |
| グループの作成 | ユーザーグループごとに表示内容を出し分けたい場合は、グループを作成しユーザー・コースに紐付けておきます | ユーザーグループごとの出し分け |
| バナー画像の用意 | バナーを掲載する場合は、PC用・モバイル用の画像を用意しておきます | ― |
| その他独自掲載コンテンツ | サイトの説明文など | ― |
ステップ2：掲載項目の作成・設定
WisdomBase管理画面 > トップページ設定 から、トップページに掲載する項目を追加していきます。
「新規作成」をクリックし、以下の6種類から掲載したい項目を選択します。
| 掲載項目 | 用途 | 使いどころの例 |
|---|---|---|
| コース一覧 | コースを一覧表示 | 「人気コース」「新着コース」などカテゴリ・タグ別に複数作成 |
| マイコース一覧 | ログインユーザーの受講中コースを表示 | 既存ユーザーの利便性向上 |
| バナー画像（1枚） | 大きなバナーを1枚表示 | キャンペーン告知、メインビジュアル |
| バナー画像（小・複数） | 小さなバナーを横並びで複数表示 | カテゴリページへの誘導、複数キャンペーンの紹介 |
| フリーHTML（1カラム） | 任意のHTMLコンテンツを表示 | サイトの説明文、埋め込み動画、独自デザインのセクション |
| お知らせ一覧 | お知らせを一覧表示 | 新着情報、メンテナンス告知 |
各項目に共通する設定
すべての掲載項目には、以下の表示制御が用意されています。
- 表示対象（グループ別） ― 特定グループのみ表示 / 特定グループを除外 / 全員に表示
- 表示対象（ログイン状態） ― ログイン済みのみ / ゲストのみ / 常に表示
これらを組み合わせることで、ユーザーの属性や利用環境に応じたトップページを実現できます。
各項目の詳細な設定方法は トップページ設定 をご参照ください。
ステップ3：並び替え・公開
並び替え
掲載項目の見出し部分をドラッグ＆ドロップすることで、トップページ上の表示順を変更できます。
初期読み込み項目数
ページ表示時に最初に読み込む項目数を設定できます。掲載項目が多い場合は、この値を調整することでページの表示速度を最適化できます。
公開
新規作成した掲載項目は下書き状態です。内容を確認したら「公開」をクリックしてトップページに反映します。
トップページ構成の例
以下は、一般的なトップページの構成例です。
| 順番 | 掲載項目 | 役割 |
|---|---|---|
| 1 | バナー画像（1枚） | メインビジュアル |
| 2 | お知らせ一覧 | 新着情報 |
| 3 | マイコース一覧 | ログインユーザー向け |
| 4 | コース一覧「人気コース」 | オススメ順で表示 |
| 5 | コース一覧「新着コース」 | 新着順で表示 |
| 6 | バナー画像（小・複数） | カテゴリページへの誘導 |
| 7 | フリーHTML | サイト説明・問い合わせ案内 |
フッター部分にリンク集を設置することもできます。設定は フッターを設定する をご参照ください。
参考サイト
弊社が運営するtoC向けオンライン学習プラットフォーム「WisdomBase教材チャンネル」では、各種機能を活用してトップページに多数のコースをわかりやすく表示しています。同様のデザインはすべて「WisdomBase」でも実現可能ですので、ぜひ参考にしてください。