# テーマとブランドカラーのカスタマイズ | Vodlix **Source:** https://vodlix.com/ja/features/themes-colors-changing **Summary:** ブランドカラー、ヘッダー、フッター、カードの形状、プレイヤーのスタイルを一度設定するだけで、ウェブ、テレビ、モバイルに適用でき、ウェブサイトのリアルタイムプレビューも確認できます。 **Publisher:** Vodlix --- ## テーマとカラー ブランドカラーを一度設定するだけで、Web、テレビアプリ、スマートフォンに適用でき、作業中にWebサイトのライブプレビューを確認できます。 - **Feature Plan:** 2 - back-end - core-platform ## 「テーマとカラー」：ストリーミングプラットフォームのブランド設定を一度行えば、あらゆる場所で適用可能 配色、ヘッダー、フッター、カード、プレーヤーを1か所で設定でき、ウェブサイトのリアルタイムプレビューも確認できます。 「Ocean」テーマを適用したストリーミングストアフロント（ノートパソコンおよびスマートフォン表示）と、外観エディタの「デザインから始める」プリセットの横に表示される画面 「Ocean」テーマが選択された外観エディタのデスクトップペインと、その配色で表示されたウェブサイトのライブプレビュー ### 統一されたブランド定義で、色味のばらつきを解消 Vodlixのテーマとカラー機能を使えば、ブランドカラーパレットを一度定義するだけで、ウェブサイト、テレビアプリ、モバイルアプリ全体に自動的に適用できます。 ブランドの一貫性が失われるのは、色が複数の場所で個別に設定され、徐々にばらつきが生じ、プラットフォーム全体で3つのわずかに異なる赤が混在してしまう場合です。Vodlixでは、色、ヘッダー、フッター、カード、プレーヤーのスタイル設定が1か所で行われるため、アプリがウェブサイトと色調がずれることはありません。1つの定義で、プラットフォームが進化してもすべての表示面の一貫性を維持できます。 - mx-auto #### ひとつの定義 配色を一度設定するだけで、すべての場所に反映されます。 #### ライブプレビュー 編集しながらウェブサイトの表示を確認できます。 #### カードの形状 各表示画面ごとに縦向きまたは横向きを選択可能です。 アプリプレビューの横に「縦向き」と「横向き」のオプションが表示された、モバイルアプリのホーム画面のヒーロー画像設定 ### 各表示画面に応じた縦向き・横向きのカード形状 Vodlixでは、コンテンツカードの形状を意図的に設定できます。なぜなら、カードの形状は色と同様に閲覧体験に大きな影響を与えるからです。 横向きのカードは、リモコン操作で横方向にスクロールするテレビ画面に適しています。一方、縦向きのカードは、縦方向のグリッドでポスターが読みやすいスマートフォンに適しています。各画面ごとにデフォルトのカード形状と注目カードの形状を個別に設定できるため、それぞれの画面で最適な形式でコンテンツを表示できます。これにより、レイアウトの選択は偶然の産物ではなく、ブランド戦略に基づく決定となります。 カスタムブランドカラーが適用されたモバイルアプリの色と、保存前に同じ再生ボタンの色が反映されているスマホのプレビュー ### 保存前のライブプレビュー Vodlixでは、テーマを調整している間、実際のウェブサイトのライブプレビューが表示されます。色、ヘッダー、フッター、カードの変更は、設定を行うと同時にプレビューウィンドウに反映されるため、変更後の見た目を推測する必要がなく、視聴者にどのように表示されるかを確認できます。モバイルアプリの設定には、スマートフォン画面のレイアウト図が用意されています。TVアプリの色は同じエディタで設定できますが、現時点ではプレビュー機能がないため、大きな変更を加える場合は、リビングルームで実際に視聴する前にテスト用テレビで確認してください。 「Default v2」テンプレート用のカスタムCSSエディタ。短いスタイルシートと「更新」ボタンが付いています。 ### 高度なスタイリングのためのカスタムCSS 標準のコントロール機能だけでは不十分なチーム向けに、Vodlixはテーマ設定内でカスタムCSSをサポートしています。 色、レイアウト、カードの設定で通常のブランディング要件はほぼカバーされるため、ほとんどの事業者は手動でスタイルを記述する必要はありません。ただし、タイポグラフィや余白、特定のコンポーネントを細かく制御する必要がある場合は、プラットフォームを変更することなく独自のCSSを追加できます。カスタムCSSは必要な時には利用でき、不要な時には邪魔になりません。 **Q: Vodlixでブランドカラーはどこで設定しますか？** ブランドカラーは、Vodlixの「テーマとカラー」設定で一度定義するだけで、ウェブサイト、モバイルアプリ、TVアプリ全体に自動的に適用されるため、すべての画面で同じカラーパレットが使用されます。 **Q: テーマの変更内容を保存する前にプレビューすることはできますか？** はい。Vodlixでは、色、ヘッダー、フッター、カードを調整する際にウェブサイトのライブプレビューが表示され、モバイルアプリの設定画面ではスマホ画面のレイアウトのスケッチが表示されます。テレビアプリの色についてはまだプレビュー機能がないため、テスト端末で確認してください。 **Q: デバイスごとに異なるカード形状を設定することはできますか？** はい。Vodlixでは、各表示面において、デフォルトコンテンツと注目コンテンツごとに、カードの形状（縦向きまたは横向き）を個別に設定できます。これにより、スマートフォンにはポスター形式が、テレビにはワイドカードが適した表示になります。 **Q: なぜ、ブランド定義を統一することが重要なのでしょうか？** 定義を統一することで、ブランドイメージのばらつきを防ぎます。色設定を一元管理することで、アプリとウェブサイトの表現に齟齬が生じることを防ぎ、ブランドの「赤」が3つの微妙に異なるバージョンで混在するような事態を未然に防ぎます。 **Q: 標準のテーマ設定機能以外に、独自のスタイルを追加することはできますか？** はい。Vodlixでは、プラットフォーム自体を変更することなく、タイポグラフィや余白、特定のコンポーネントを細かく制御する必要があるチーム向けに、テーマ設定内でカスタムCSSをサポートしています。 **Q: ブランドカラーが暗い背景ではうまく映らない場合はどうすればよいですか？** これはよくある問題であり、リリース後ではなくリリース前に発見しておく価値があります。重要なのは、日中にブランドガイドラインに合致しているかどうかではなく、夜11時にテレビ画面上のボタンが読み取れるかどうかを検証することです。 **Q: 独自のCSSを記述することはできますか？** はい、コントロールでは対応できないケースのためです。ほとんどのサービスでは必要ありませんが、必要な場合でも通常は全面的な変更ではなく特定の目的のためであるため、これはメインの経路というよりは、あくまで選択肢の一つとして存在しています。 **Q: これはカスタムテンプレートとどう違うのですか？** テンプレートとは構造やレイアウトのことであり、これの中にブランド価値が反映されています。テンプレートを変更する機会はめったにありませんが、ブランディングの変更に伴いカラー設定は頻繁に変更されるため、これらを意図的に分離しています。