本記事では、MyBrandのメディアUIが大幅リニューアルとなりましたので、
リニューアルの概要と新UIの操作方法についてご案内させていただきます。
目次===============
==================
１．メディアUIリニューアルの背景
MyBrandは2024年1月にサービスをリリース後、多くの企業様にご利用いただいております。
その中で、メディアで発信するコンテンツの増加に伴い、
・表示したいコンテンツが埋もれてしまった
・もっと多くのコンテンツをトップに表示したい
・トップのコンテンツを選択したい
など、複数のご要望を頂戴しておりました。
当社としても、ご利用いただいている企業様の魅力を、サイトに来訪されたユーザー様にもっとお届けしたいと思い、今回のメディアUIの大幅リニューアルに至りました。
２．メディアUIリニューアルの概要
今回のリニューアルでは、大きく3つの変更がございます。
変更点①メインビジュアル（メディアTOP）の表示方法を「3パターン」に拡大
変更点②メインビジュアル以外のコンテンツレイアウトを自由に設定できるよう変更
変更点③メインビジュアル以外に表示するコンテンツについて「カテゴリ」を設定の上、「表示ロジック」を設定可能に変更
下記にて、それぞれの変更点について詳細を記載してまいります。
変更点①メインビジュアルの表示方法
メインビジュアルは、下記赤枠内のメディアのTOPに表示されるコンテンツを指しております。
●従来の表示
・従来はメインビジュアルの表示方法が「新着記事」が随時表示される形になっており、
会社が届けたいコンテンツが表示できない仕様となっておりました。
●今回の変更
・今回のアップデートにより、
メインビジュアルの表示方法が、下記3パターンより選択可能となり、
コンテンツの表示ロジックも設定可能になります。
ⅰ.マルチスライダー方式
画面上に常にコンテンツが3つ表示され、時間経過によりコンテンツが切り替わる方式
ⅱ.シングルスライダー方式
画面上に常にコンテンツが1つ表示され、時間経過によりコンテンツが切り替わる方式
ⅲ.記事固定方式
事前に設定したロジックに従い、コンテンツが1つ表示される方式
●コンテンツの表示ロジックと表示コンテンツ数について
１）コンテンツの表示ロジック：新着・ピックアップのいずれかで選択可能。
・新着：更新日が新しいコンテンツが表示される方式
・ピックアップ：事前に選択したコンテンツが表示される方式
２）コンテンツの表示可能数
・スライダー形式：最低3件、最大10件までコンテンツを表示することが可能です。
・記事固定 ：1件のみコンテンツを表示することが可能です。
変更点②メインビジュアル以外のコンテンツのレイアウト設定
コンテンツレイアウトの設定をするにあたり、
それぞれの場所を指す、用語について下記を用いてご説明いたします。
ⅰ.メインビジュアル下のレイアウト設定
メインビジュアル下のレイアウト設定では、下記4つの設定が可能になります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
・投稿種別：表示するコンテンツのロジック選択（新着/ピックアップ/タグの3つから選択可能）
・タイトル ：従来「ピックアップ記事」と表示されていた「タイトル欄」が自由設定可能に
・説明文 ：タイトルの下に表示される説明分
・行数 ：メインビジュアル下に表示するコンテンツの行数（1行～10行のいずれか）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
▼各項目の実際の画面イメージ
ⅱ.サイドメニュー横のレイアウト設定
サイドメニュー横のレイアウト設定では、下記6つの設定が可能になります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
・投稿種別：表示するコンテンツのロジック選択（新着/ピックアップ/タグの3つから選択可能）
・タイトル ：従来「ピックアップ記事」と表示されていた「タイトル欄」が自由設定可能に
・説明文 ：タイトルの下に表示される説明分
・表示形式：カード形式、リスト形式から選択可能
・列数 ：サイドメニュー横に表示するコンテンツの列数（2列・3列のいずれか）
・行数 ：サイドメニュー横に表示するコンテンツの行数（1行～10行のいずれか）
※リスト形式の場合は「列数」は1列のみとなります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
▼表示形式の画面イメージ①リスト形式（行は3行の場合）
▼表示形式の画面イメージ②カード形式（列は2列表示の場合）
ⅲ.フッター上のコンテンツレイアウト設定
フッター上のレイアウト設定では、下記4つの設定が可能になります。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
・投稿種別：表示するコンテンツのロジック選択（新着/ピックアップ/タグの3つから選択可能）
・タイトル ：従来「ピックアップ記事」と表示されていた「タイトル欄」が自由設定可能に
・説明文 ：タイトルの下に表示される説明分
・行数 ：フッター上に表示するコンテンツの行数（1行～10行のいずれか）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
▼実際の画面イメージ
３．操作方法
①採用メディア編集画面からレイアウト設定を開く
トップページより、「メディア」＞「レイアウト設定」をタップし開きます。
②コンテンツを追加する
各ブロックの「＋コンテンツを追加」をタップすると、各ブロックごとにコンテンツを配置することができます。
画面下の「削除」をタップすることでコンテンツを削除することができます。
【メインビジュアルについて】
メインビジュアルの表示種別は「スライダー（複数）」「スライダー（単一）」「記事固定」の3つから選択可能です。
メインビジュアルの投稿種別は「新着」「ピックアップ」の2つから選択可能です。
新着・・・公開日が新しい記事から順にメインビジュアルに配置されます。「スライダー（複数）」「スライダー（単一）」を設定している場合は、最大10件まで新着記事をメインビジュアルに配置することができます。
ピックアップ・・・公開中の記事のうち、選択したものがメインビジュアルに配置されます。
【メインビジュアル下について】
１．投稿種別を「新着」「ピックアップ」「タグ」の3つから選択
２．「タイトル」「説明文（任意）」を設定（どのような種類の記事が配置されているのかを閲覧者に伝えることができます）
３．行数を選択（デザイン性を踏まえ、メインビジュアル下は1行を推奨しております）
４．プレビューをクリックしデザインを確認し、保存。
※保存を押してしまうと、本番環境に反映されます。
【サイドメニュー横について】
メインビジュアル下の内容に加え、
サイドメニュー横では、表示形式を「カード」「リスト」の2つから選択可能です。
・カード形式
正方形のブロックの形式で表示されます。表示する列数を2列もしくは3列のいずれかから選択可能です。行数を設定することで表示される記事の数を変更することができます。
・リスト形式
横長のブロックの形式で表示されます。
行数を設定することで表示される記事の数を変更することができます。
【フッター上について】
メインビジュアル下と同様の操作にて、実装いただくことが可能です。