売上を10%~20%向上させることができるものは、必須ではなく、絶対に必要です。ブランド価値が1兆ドルを超えるトップ小売業者にとって、それはただ正しいロゴを使うだけではありません。すべての顧客接点における詳細が、ブランドを支え、伝えるものでなければなりません。
ビジネスがブランドの監査を行う際、しばしば見落とされる要素のひとつがオンラインビデオプレーヤー(OVP)です。今日、ほとんどのビジネスはウェブサイトやアプリでビデオプレーヤーを使用していますが、ブランド化されたプレーヤーを使用している企業は少ないのが現状です。無料のプレーヤーを使用している場合や、OVPにブランド機能があることに気づいていない場合もあります。それにしても、汎用的なプレーヤーはブランドの一貫性を損ない、最終的にビジネスの収益に影響を与える可能性があります。
お使いのプロバイダーがブランド化されたプレーヤーを提供しているかどうかわからない場合は、どのプラットフォームでもカスタマイズ可能な要素を確認してください。
ブランド化された動画プレーヤーの要素
今日のオンライン動画プレーヤーは HTML5 で構築されているため、技術的には他のウェブ オブジェクトと同様にカスタマイズできます。ただし、ブランディングを目的として、これらの項目は一般的に以下の 4 つのカテゴリに分類されます。
- 色:色は、私たちが最初に思い浮かべるブランド要素の1つかもしれませんが、動画プレーヤーは、それを適用する最後の場所の1つかもしれません。再生ボタンからボリュームコントロール、プログレスバーまで、すべてをブランドカラーにカスタマイズすることができます。
- フォント:Comic Sansを除けば、ほとんどの人はタイポグラフィについて考えることはありません。しかし、たとえヘルベチカとアリアルの違いが分からなくても、マクドナルドの「M」が突然Times New Romanで表示されたら、誰でも気づくはずです。同じことが、プレーヤーの再生時間やホバーテキストにも当てはまります。間違ったフォントが使われると、ブランド体験が損なわれる可能性があります。
- アイコン:ロゴを超えて、アイコンのデザインも視覚的なブランディングにおいて重要な要素です。あるブランドは曲線を好み、他のブランドは直線を求めます。細い線を好むブランドもあれば、太く力強い線を求めるブランドもあります。色やフォントと同様に、再生ボタン、音量調整、その他のプレーヤーのコントロールも、異なるアイコンでカスタマイズすることができます。
- コントロール:ブランドによっては、プレーヤーのコントロールそのものが間違ったメッセージを送る可能性があります。また、プレーヤーのレイアウトによっては、他の国の視聴者には異質に感じられるかもしれません。そのため、動画プレーヤーのコントロールの表示と位置の両方を調整できるようにすることが重要です。
動画プレーヤーをブランド化する方法
動画プレーヤーは、さまざまな方法でお客様のブランドに合わせてカスタマイズできます。たとえば、ウェブ開発者がウェブページの CSS をインラインですばやく編集することができます。ただし、このような編集は 1 つのページとそのページでホストされているプレーヤーにしか適用されないため、最良の方法とは言えません。
ブランド化された動画プレーヤーをより適切に管理するには、動画プラットフォームから管理する必要があります。それには主に 3 つの方法があります。
ブランド化されたプレーヤー要素 |
OOTBプラットフォーム・オプション |
スタイルシート |
スタイルシート+スクリプト |
カラー |
どんなものでも |
どんなものでも |
どんなものでも |
フォント |
なし |
どんなものでも |
どんなものでも |
アイコン |
限定 |
どんなものでも |
どんなものでも |
コントロール(視認性/配置) |
限定 |
限定 |
どんなものでも |
すぐに使えるプラットフォーム・オプション
小売業者に最適な動画プラットフォームは、動画プレーヤーを簡単にカスタマイズできるように、インターフェイスにいくつかのオプションを提供しているはずです。たとえば、Brightcove では、以下をすばやく調整できます:
要素 |
カラー |
アイコン形状 |
コントロールポジション |
コントロールの可視性 |
再生ボタン |
✔ |
✔ |
✔ |
|
コントロールバー |
✔ |
|||
品質セレクタ |
✔ |
✔ |
||
シーク・フォワード/バックワード |
✔ |
✔ |
||
再生速度 |
✔ |
✔ |
||
フルスクリーン |
✔ |
✔ |
||
ボリュームスライダー |
✔ |
✔ |
||
サムネイル求む |
✔ |
|||
ピクチャー・イン・ピクチャー |
✔ |
✔ |
||
ソーシャルシェアリング |
✔ |
✔ |
プリセットのパレットを提供する一部の技術ソリューションとは異なり、ほとんどの動画プラットフォームでは、ブランドの16進数、HSV、またはRGB値で色を完全にカスタマイズできます。とはいえ、通常、プレーヤーのフォントを変更するためのすぐに使えるオプションはありません。
JSONエディター
一部のプラットフォームには、プレーヤー コードを直接操作できる 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;
}
また、プレーヤーのStylingタブで、"Show title and description "が選択されていないことを確認してください。そうしないと、デフォルトでプレーヤーの上部に両方が表示されます。
スクリプト
ブランド化された動画プレーヤーの色やフォントの変更は、既存の属性を編集するため比較的簡単です。動画プレーヤーのレイアウトを完全に変更するには、スクリプトを使用する必要があります。
CSSドキュメントの作成は比較的簡単ですが、Javascriptは開発経験やサポートなしでは操作できません。社内にそのためのリソースがある場合は、プレーヤーのカスタマイズに関する プレーヤーのカスタマイズに関するサポート ドキュメントをご覧ください。また ブライトコーブ グローバル サービスチームに直接お問い合わせいただくこともできます。