小売業に必要な動画プレーヤーのブランディング

Anything that can increase a business’s revenue by 10%–20% isn’t just essential; it’s mandatory. For top retailers, whose combined brand value exceeds $1 trillion, that doesn’t just mean using the right logo. Every detail on every customer touchpoint must support and convey the brand.increase a business’s revenue by 10%–20% isn’t just essential; it’s mandatory. For top retailers, whose combined brand value exceeds $1 trillion, that doesn’t just mean using the right logo. Every detail on every customer touchpoint must support and convey the brand.

企業がブランドを監査する際に見落とされがちな要素のひとつが、オンライン動画プレーヤー（OVP）です。現在、多くの企業がウェブサイトやアプリで動画プレーヤーを使用していますが、ブランド対応のプレーヤーを導入していない場合も少なくありません。無料のプレーヤーを使用しているか、あるいはOVPにブランド設定機能があることに気付いていないのかもしれません。いずれの場合でも、汎用プレーヤーではブランドの一貫性が損なわれ、結果として収益の損失につながる可能性があります。

お使いのプロバイダーがブランディングされたプレーヤーを提供しているかどうかわからない場合は、どのプラットフォームでもカスタマイズ可能な要素を確認してください。

ブランディングできる動画プレーヤーの要素

今日のオンライン動画プレーヤーは HTML5 で構築されているため、技術的には他のウェブ オブジェクトと同様にカスタマイズできます。ただし、ブランディングを目的として、これらの項目は一般的に以下の 4 つのカテゴリに分類されます。

• 色：色は、私たちが最初に思い浮かべるブランド要素の1つかもしれませんが、動画プレーヤーは、それを適用する最後の場所の1つかもしれません。再生ボタンからボリュームコントロール、プログレスバーまで、すべてをブランドカラーにカスタマイズすることができます。
• フォント：Comic Sansを除けば、ほとんどの人はタイポグラフィについて考えることはありません。しかし、たとえHelveticaとArialの違いが分からなくても、マクドナルドの「M」が突然Times New Romanで表示されたら、誰でも気づくはずです。同じことが、プレーヤーの再生時間や吹き出し文字にも当てはまります。間違ったフォントが使われると、ブランド体験が損なわれる可能性があります。
• アイコン：ロゴを超えて、アイコンのデザインも視覚的なブランディングにおいて重要な要素です。あるブランドは曲線を好み、他のブランドは直線を求めます。細い線を好むブランドもあれば、太く力強い線を求めるブランドもあります。色やフォントと同様に、再生ボタン、音量調整、その他のプレーヤーのコントロールも、異なるアイコンでカスタマイズすることができます。
• コントロール：ブランドによっては、プレーヤーのコントロールそのものが間違ったメッセージを送る可能性があります。また、プレーヤーのレイアウトによっては、他の国の視聴者には異質に感じられるかもしれません。そのため、動画プレーヤーのコントロールの表示と位置の両方を調整できるようにすることが重要です。

動画プレーヤーをブランディングする方法

動画プレーヤーは、さまざまな方法でお客様のブランドに合わせてカスタマイズできます。たとえば、ウェブ開発者がウェブページの CSS をインラインですばやく編集することができます。ただし、このような編集は 1 つのページとそのページでホストされているプレーヤーにしか適用されないため、最良の方法とは言えません。

ブランディングされた動画プレーヤーをより適切に管理するには、動画プラットフォームから管理する必要があります。それには主に 3 つの方法があります。

すぐに使えるプラットフォーム・オプション

小売業者に最適な動画プラットフォームは、動画プレーヤーを簡単にカスタマイズできるように、インターフェイスにいくつかのオプションを提供しているはずです。たとえば、Brightcoveでは、以下をすばやく調整できます。

プリセットのパレットを提供する一部の技術ソリューションとは異なり、ほとんどの動画プラットフォームでは、ブランドの16進数、HSV、またはRGB値で色を完全にカスタマイズできます。とはいえ、通常、プレーヤーのフォントを変更するためのすぐに使えるオプションはありません。

JSONエディター

一部のプラットフォームには、プレーヤー・コードを直接操作できる JSON エディタがあります。これは通常、経験豊富な開発者の領域ですが、ブライトコーブのプレーヤーには、誰でもできる簡単な調整がいくつかあります（ブライトコーブのプレーヤー・モジュールで編集するプレーヤーを選択し、JSON エディタを選択します。）

• Remove the control bar.Remove the control bar. Because retailers want to keep the focus on their products, not the video experience, they often want to remove player controls completely. This is especially valuable for homepage players or other pages where you want looping videos that catch the eye without distracting from the purchase. All you need to do is add the property, "control_bar": false, and every control except the play button will be hidden.

• Stylize the play button.Stylize the play button. For brands that want to change how the play button reacts when you hover over it, Brightcove has two options. You can add a glow effect around the button, or you can make the button darken. Just add one of the following objects under the play_button property: "hover": "glow" or "hover": "darken".

Note:Note: When adding properties in JSON, be sure to close them and any preceding objects with a comma (,) unless directly followed by a close bracket (}). To prevent playback errors, the editor won’t accept invalid code and you won’t be able to save changes.

スタイルシート

ほとんどのウェブサイトでは、カスケーディング・スタイル・シート（CSS）を使ってブランド・スタンダードを設定しています。CSSは基本的にプレーン・テキスト文書で、特定のフォーマットに従ってウェブページ上のすべての要素の色、フォント、アイコンを調整します。

特に、プラットフォームがネイティブで提供する以上のカスタマイズが必要な場合は、CSS を使用してブランド動画プレーヤーを管理することもできます。ただし、適切な構文と値の知識が必要なため、開発者でない場合は、変更を加える前に開発者に相談してください。

CSSドキュメントを作るために必要なのは、Windowsならメモ帳、Macならテキストエディットがあれば十分です。

• 新規文書を作成する（テキストエディットの場合、「書式」→「プレーンテキストにする」を選択する）。
• セレクタ、プロパティ、値を追加する。
• CSSファイルとして保存する（拡張子.cssで保存するか、後でファイル名を変更する）

ブライトコーブ プレーヤーは、プレーヤーモジュールに移動し、プラグイン > スタイルシートを選択することにより、CSS でカスタマイズできます。ここでドキュメントをアップロードすると、プレーヤーはサイト上のどこに表示されても、それに応じてブランディングされます。開発者のリソースが不足している人のために、以下に自分で実装できる簡単なカスタマイズをいくつか紹介します。

プレーヤーフォントの変更

動画プレーヤーのテキストのほとんどは、非常に小さく表示されます（ランタイム、吹き出し文字など）。そのため、変更は慎重に行い、ブランド標準が異なるプラットフォームでの読みやすさを考慮していない場合は、UX の専門家に相談することを検討してください。とはいえ、プレーヤー全体のフォントを変更するには、以下の内容だけでCSSドキュメントを作成するだけです：

.video-js {

font-family: ;

}

After font-family and between the colon (:) and semicolon (;), add the font of your choice. Bear in mind that browsers support different fonts, and CSS is designed with a fallback system. At minimum, reference a recent list of common web fonts, and copy the font you want as displayed. For example, if you really want Comic Sans, your CSS doc would look like this:common web fonts, and copy the font you want as displayed. For example, if you really want Comic Sans, your CSS doc would look like this:

.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;

}

また、プレーヤーのスタイル設定タブで、「タイトルおよび説明文を表示」が選択されていないことを確認してください。そうしないと、デフォルトでプレーヤーの上部に両方が表示されます。

スクリプト

ブランディングされた動画プレーヤーの色やフォントの変更は、既存の属性を編集するため比較的簡単です。動画プレーヤーのレイアウトを完全に変更するには、スクリプトを使用する必要があります。

While creating CSS docs can be relatively simple, Javascript isn’t something you can manipulate without development experience or assistance. If you have in-house resources to do so, check out our support documentation on player customization to get started. You can also connect with our Brightcove Global Services team for direct support.support documentation on player customization to get started. You can also connect with our Brightcove Global Services team for direct support.