企業の収益を10～20％増加させる可能性があるものは、単なる必需品ではなく、不可欠な要素です。ブランド価値の合計が1兆ドルを超えるトップ小売業社にとっては、適切なロゴを使用するだけでは不十分です。顧客とのあらゆる接点において、細部に至るまでブランドを支え、伝える必要があります。
企業がブランドを監査する際に見落とされがちな要素のひとつが、オンライン動画プレーヤー（OVP）です。現在、多くの企業がウェブサイトやアプリで動画プレーヤーを使用していますが、ブランド対応のプレーヤーを導入していない場合も少なくありません。無料のプレーヤーを使用しているか、あるいはOVPにブランド設定機能があることに気付いていないのかもしれません。いずれの場合でも、汎用プレーヤーではブランドの一貫性が損なわれ、結果として収益の損失につながる可能性があります。
お使いのプロバイダーがブランディングされたプレーヤーを提供しているかどうかわからない場合は、どのプラットフォームでもカスタマイズ可能な要素を確認してください。
ブランディングできる動画プレーヤーの要素
今日のオンライン動画プレーヤーは HTML5 で構築されているため、技術的には他のウェブ オブジェクトと同様にカスタマイズできます。ただし、ブランディングを目的として、これらの項目は一般的に以下の 4 つのカテゴリに分類されます。
- 色：色は、私たちが最初に思い浮かべるブランド要素の1つかもしれませんが、動画プレーヤーは、それを適用する最後の場所の1つかもしれません。再生ボタンからボリュームコントロール、プログレスバーまで、すべてをブランドカラーにカスタマイズすることができます。
- フォント：Comic Sansを除けば、ほとんどの人はタイポグラフィについて考えることはありません。しかし、たとえHelveticaとArialの違いが分からなくても、マクドナルドの「M」が突然Times New Romanで表示されたら、誰でも気づくはずです。同じことが、プレーヤーの再生時間や吹き出し文字にも当てはまります。間違ったフォントが使われると、ブランド体験が損なわれる可能性があります。
- アイコン：ロゴを超えて、アイコンのデザインも視覚的なブランディングにおいて重要な要素です。あるブランドは曲線を好み、他のブランドは直線を求めます。細い線を好むブランドもあれば、太く力強い線を求めるブランドもあります。色やフォントと同様に、再生ボタン、音量調整、その他のプレーヤーのコントロールも、異なるアイコンでカスタマイズすることができます。
- コントロール：ブランドによっては、プレーヤーのコントロールそのものが間違ったメッセージを送る可能性があります。また、プレーヤーのレイアウトによっては、他の国の視聴者には異質に感じられるかもしれません。そのため、動画プレーヤーのコントロールの表示と位置の両方を調整できるようにすることが重要です。
動画プレーヤーをブランディングする方法
動画プレーヤーは、さまざまな方法でお客様のブランドに合わせてカスタマイズできます。たとえば、ウェブ開発者がウェブページの CSS をインラインですばやく編集することができます。ただし、このような編集は 1 つのページとそのページでホストされているプレーヤーにしか適用されないため、最良の方法とは言えません。
ブランディングされた動画プレーヤーをより適切に管理するには、動画プラットフォームから管理する必要があります。それには主に 3 つの方法があります。
|
ブランド化されたプレーヤー要素 |
OOTB(out of the box)プラットフォーム・オプション |
スタイルシート |
スタイルシート＋スクリプト |
|
カラー |
任意 |
任意 |
任意 |
|
フォント |
なし |
任意 |
任意 |
|
アイコン |
プラットフォーム側の指定 |
任意 |
任意 |
|
コントロール（視認性／配置） |
プラットフォーム側の指定 |
プラットフォーム側の指定 |
任意 |
すぐに使えるプラットフォーム・オプション
小売業者に最適な動画プラットフォームは、動画プレーヤーを簡単にカスタマイズできるように、インターフェイスにいくつかのオプションを提供しているはずです。たとえば、Brightcoveでは、以下をすばやく調整できます。
|
要素 |
カラー |
アイコン形状 |
コントロールポジション |
コントロールの可視性 |
|
再生ボタン |
✔ |
✔ |
✔ |
|
|
コントロールバー |
✔ |
|||
|
品質セレクタ |
✔ |
✔ |
||
|
後ろにシーク・前にシーク |
✔ |
✔ |
||
|
再生速度 |
✔ |
✔ |
||
|
フルスクリーン |
✔ |
✔ |
||
|
音量調節スライダー |
✔ |
✔ |
||
|
サムネイルのシーク |
✔ |
|||
|
ピクチャー・イン・ピクチャー |
✔ |
✔ |
||
|
SNS共有 |
✔ |
✔ |
プリセットのパレットを提供する一部の技術ソリューションとは異なり、ほとんどの動画プラットフォームでは、ブランドの16進数、HSV、またはRGB値で色を完全にカスタマイズできます。とはいえ、通常、プレーヤーのフォントを変更するためのすぐに使えるオプションはありません。
JSONエディター
一部のプラットフォームには、プレーヤー・コードを直接操作できる JSON エディタがあります。これは通常、経験豊富な開発者の領域ですが、ブライトコーブのプレーヤーには、誰でもできる簡単な調整がいくつかあります（ブライトコーブのプレーヤー・モジュールで編集するプレーヤーを選択し、JSON エディタを選択します。）
- コントロールバーを削除する： 小売業者は、動画の視聴体験ではなく商品に焦点を当て続けたいため、プレーヤーのコントロールを完全に削除したいと考えることがよくあります。これは、ホームページ に配置されたプレーヤーや、購入の邪魔にならずに目を引くループ動画が必要なその他のページで特に価値を出すことができます。次のプロパティを追加します：
["control_bar": false]
この方法で、再生ボタン以外のすべてのコントロールが非表示にできます。
- 再生ボタンをスタイリッシュに： 再生ボタンにカーソルを置いたときの反応を変更したいブランドに対して、ブライトコーブには 2 つのオプションがあります。ボタンの周りにグロー効果を追加するか、ボタンを暗くすることができます。以下のオブジェクトのいずれかを
play_buttonのプロパティで設定します。
"hover": "glow"または"hover": "darken".
注意JSONでプロパティを追加する場合、閉じ括弧（}）が直接続かない限り、プロパティとそれに先行するオブジェクトを必ずカンマ（,）で閉じてください。再生エラーを防ぐため、エディタは無効なコードを受け付けず、変更を保存できません。
スタイルシート
ほとんどのウェブサイトでは、カスケーディング・スタイル・シート（CSS）を使ってブランド・スタンダードを設定しています。CSSは基本的にプレーン・テキスト文書で、特定のフォーマットに従ってウェブページ上のすべての要素の色、フォント、アイコンを調整します。
特に、プラットフォームがネイティブで提供する以上のカスタマイズが必要な場合は、CSS を使用してブランド動画プレーヤーを管理することもできます。ただし、適切な構文と値の知識が必要なため、開発者でない場合は、変更を加える前に開発者に相談してください。
CSSドキュメントを作るために必要なのは、Windowsならメモ帳、Macならテキストエディットがあれば十分です。
- 新規文書を作成する（テキストエディットの場合、「書式」→「プレーンテキストにする」を選択する）。
- セレクタ、プロパティ、値を追加する。
- CSSファイルとして保存する（拡張子.cssで保存するか、後でファイル名を変更する）
ブライトコーブ プレーヤーは、プレーヤーモジュールに移動し、プラグイン > スタイルシートを選択することにより、CSS でカスタマイズできます。ここでドキュメントをアップロードすると、プレーヤーはサイト上のどこに表示されても、それに応じてブランディングされます。開発者のリソースが不足している人のために、以下に自分で実装できる簡単なカスタマイズをいくつか紹介します。
プレーヤーフォントの変更
動画プレーヤーのテキストのほとんどは、非常に小さく表示されます（ランタイム、吹き出し文字など）。そのため、変更は慎重に行い、ブランド標準が異なるプラットフォームでの読みやすさを考慮していない場合は、UX の専門家に相談することを検討してください。とはいえ、プレーヤー全体のフォントを変更するには、以下の内容だけでCSSドキュメントを作成するだけです：
.video-js {
font-family: ;
}
その後 font-family とコロン（:）とセミコロン（;）の間に、お好みのフォントを追加します。ブラウザはさまざまなフォントをサポートしており、CSSはフォールバック・システムで設計されていることを念頭に置いてください。最低限、最近の 共通のウェブフォント、そして、表示させたいフォントをコピーします。例えば、本当にComic Sansを使いたいのであれば、CSSドキュメントは次のようになります：
.video-js {
font-family: Comic Sans MS, Comic Sans, cursive;
}
フォントファミリーのデフォルトライブラリーは限られているため、カスタムフォント用のクラスまたはソースURLをCSSドキュメントに追加する必要があります。貴社のブランドのフォントを適切に参照できるよう、ウェブデベロッパーに相談してください。
すべてのコントロールを取り除く：
商品ビデオをループ再生するウェブヘッダープレーヤーを作成したい小売業者にとって、コントロールバーやプログレスバーを削除するだけでは十分ではありません。大きな再生ボタンを含め、すべてを削除したいのです。そのために必要なのは、もう1つのシンプルなCSSドキュメントだけです。
.video-js .vjs-big-play-button {
display: none;
}
.video-js .vjs-control-bar {
display: none;
}
また、プレーヤーのスタイル設定タブで、「タイトルおよび説明文を表示」が選択されていないことを確認してください。そうしないと、デフォルトでプレーヤーの上部に両方が表示されます。
スクリプト
ブランディングされた動画プレーヤーの色やフォントの変更は、既存の属性を編集するため比較的簡単です。動画プレーヤーのレイアウトを完全に変更するには、スクリプトを使用する必要があります。
CSSドキュメントの作成は比較的簡単ですが、Javascriptは開発経験やサポートなしでは操作できません。社内にそのためのリソースがある場合は、プレーヤーのカスタマイズに関する プレーヤーのカスタマイズに関するサポートドキュメントをご覧ください。また ブライトコーブ・グローバル・サービスチームに直接お問い合わせいただくこともできます。
