- 2005年に動画デーティングサイトというアイデアから始まったYouTubeは、今では世界中の数十億人が毎日訪れて多様なコンテンツを視聴するメディアプラットフォームへと成長した
- YouTubeの象徴的な赤いロゴは長年にわたりブランドアイデンティティを代表してきたが、最近ではより柔らかな赤と意外性のあるマゼンタのグラデーションが導入された
- これは小さいながらも意味のある変化であり、20周年を迎えたYouTubeがどのようにブランドを新鮮に保っているかを示す例である
変化の理由
- YouTubeの社内アートディレクションおよびデザインチームは、20年間使われてきた赤を進化させようとした
- 既存要素のうち時代に合わない部分を研究した結果、カラーが優先度の高い改善課題に含まれるという結論に至った
- 新しい色は、ブランドのアイデンティティを維持しつつ、よりモダンでアクセシビリティの高い方向へ調整された
従来の赤の問題点
- 以前の赤（RGBの純粋なレッド）はUIで目立ちすぎ、特定の画面ではオレンジに見えるなど、色の一貫性に問題があった
- TVなど一部のディスプレイでは焼き付き（burn-in）を引き起こし、画面に永久的な跡が残る場合があった
- 赤は強烈な色であるため、使い方を誤るとユーザー体験に疲労感を与えるという指摘があった
新しい赤とグラデーションの導入
- やや冷たさを感じる赤に調整することで、画面の焼き付きや色の歪みといった技術的問題を緩和した
- 従来のYouTubeの遺産を尊重しつつ、アクセシビリティとモダンな感性を考慮して、柔らかく活気のあるトーンになるよう設定した
- 赤はYouTubeの中核アイデンティティを示す重要な瞬間にのみ使い、視覚的インパクトを最大化する戦略を立てた
- ここにグラデーションを追加し、赤とマゼンタが調和する視覚的な楽しさを与えた
- ロゴ、プロダクトアイコン、進行バー(progress bar)、Like/Subscribeボタン、Premiumバッジ、ライブリングなどに新たに適用された
デザイン戦略と適用事例
- 必要なときだけ強い赤を使うことで、ブランドアイデンティティを保ちながらユーザーの疲労を防ごうとした
- さまざまなチームと協業して新しい色とグラデーションの適用可能範囲を探り、実際の製品インターフェース全体で一貫性を確保した
- 細部にこだわるデザイナー、ディレクター、エンジニアとの議論を通じて、グラデーションが大画面でどう見えるか、アクセシビリティ基準を満たすかなどを確認した
- 登録ボタンや高評価ボタンなど重要なアクションにブランドカラーを割り当て、それ以外の通常状態はモノクロームトーンを維持して情報伝達を明確にした
モーションデザインとブランドアイデンティティ
- YouTubeは動画プラットフォームであるため、モーションによって視線を引きつけ、機能的な案内を提供することが重要だった
- カラー更新に合わせて、起動アニメーション(startup animation)でロゴが拡大・縮小しながらグラデーションが強調される効果を追加した
- 進行バー(progress bar)をやや細く、より速く見せることで、現代的な印象と視覚的な楽しさを高めた
- マゼンタのグラデーションが入ったトピックチャンネルアイコンにも小さなアニメーションを導入し、ブランドの統一感と楽しさを加えた
- 単色では形の変化しかできないが、グラデーションを使えば微妙な動きだけでも雰囲気を調整できるという利点がある
- ユーザーがモーションによって負担を感じないよう、「適量の砂糖（楽しさを与えつつ過剰にしない）」を目指した
アクセシビリティへの配慮
- テキストのコントラストを確保するため、赤とマゼンタの明るさやトーンを細かく分け、UI要素のサイズや状況ごとに最適値を適用した
- 単一の色だけで情報を伝えないよう注意し、重要なボタンなどにはブランドカラーを使いつつ、通常状態はモノトーンにした
- 低性能デバイス向けにモーションを制限したり、画面サイズに応じてモーションの強度を調整したりする適応型フレームワークを導入した
- 可能な限り視覚的負担が大きくならないようモーションの範囲を縮小し、必要に応じてアニメーションを無効化できるよう設計した
結論
- 新しい赤とグラデーションは、YouTubeが20周年を機にブランドを進化させる中核要素である
- 赤特有の力強さを維持しつつ、技術面・デザイン面・アクセシビリティ面の課題を改善した成果を示した
- モーションとグラデーションを適切に活用することで、YouTubeがより楽しく人間味のあるプラットフォームになることに貢献した
- これは変化を続けるYouTubeの姿を示し、ユーザーがブランドの進化を直感的に感じ取れるようにする事例である
2件のコメント
記事の最後で画面全体がマゼンタに変わってから、ものすごく目が痛いですね..
プログレスバーにマゼンタのグラデーションが入ったのは、個人的にはどこか画面の表示がおかしいように感じました。面白いのは、そう感じたデバイスがGoogleのPixelだったことです。