YouTubeの新チャンネルデザイン “One Channel”を試してみました

2013/03/10 00:15 ガジェ通ウェブライター

2月上旬より一部の有名ユーザだけに公開されていたYouTubeのチャンネルデザイン『YouTube One Channel』が全てのユーザに解禁されました。私が気になった部分は

「どのデバイスでも、どの画面でも美しく表示」

です。今まではパソコン、スマートフォン、タブレットなどデバイスごとにチャンネルの表示が大幅に異なっていました。One Channelでは全てのデバイスで同じような表示が行われるといわれています。

YouTubeの説明だと、ノートパソコン、携帯電話、タブレット、テレビや”冷蔵庫”などあらゆる画面で美しく表示されるとあります。

今回は実際に私のYouTubeチャンネルで試してみました。

2120×1193ピクセルという非常に大きな画像が必要

一瞬目を疑うようなサイズの画像をバナー用の求められます。従来の通常サイズの画像をアップロードすると、「画像が小さすぎます」とエラーメッセージが出ます。画像が大きいのは「Ratina」ディスプレイに対応するためです。約二倍のピクセル密度のバナーを使うことによりデバイスが対応していれば鮮明に表示されます。

このように非常に巨大な画像を登録します。画像内の枠線は各デバイスによる表示範囲

全てのデバイス用のバナーイメージは一枚の静止画から切り出される

上記画像はアップロードする画像の領域を示したものです。緑で示される中央の部分がどのデバイスでも必ず表示される安全な領域です。　この場所に文字や確実に伝えないといけないことをデザインします。　スマートフォンも緑色の領域が使われます。

タブレットでは更に黄色の領域が使われ、パソコンなど高解像度モニターだと赤色の部分が使われます。

灰色の部分に関してはテレビや冷蔵庫で使われる領域だと思われますが、手元にYouTubeに対応したテレビや冷蔵庫が無いので未調査です。

実際に各デバイスで表示してみました

上記画面はパソコンのブラウザでできるだけ狭く表示した場合です。　この場合は、緑の領域に相当するバナー画像が表示されています。

ブラウザの幅を広げると、赤の領域にそうとするバナー画像が表示されます。

スマートフォンの場合は、縦位置にしても横位置にしても緑の狭い領域が表示されます。(確認はiPhone5)

タブレットの場合は縦位置で緑の領域、横位置で黄色の領域まで表示されます。(確認はiPad三世代目)

気になった部分

一枚の静止画から全てのデバイス向けのバナーを作るため、デバイスごとに違いが出ないといわれていますが、画像の上に自動的にチャンネル所有者のアイコンや設定したリンクが表示されてしまいます。　上記画像では「安全領域」といわれている部分にアイコンやリンクなど(赤枠で協調)が表示されてしまい、この下のデザインは隠れてしまいます。バナーのデザインを行う際には気を付ける必要があります。