UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 UIコーダー 齋藤 (@31mskz10) です。

去年（2023年）から、YouTubeの広告スキップボタンのデザインが変わりました。
角丸のボタンになり、少し小さくなっています。

このデザイン変更はどのような意図があるのでしょうか？

デザイン変更の意図

2024年1月現在のYouTubeのスキップボタンは、「広告をスキップ」ではなく「スキップ」になっています。
また、角丸で透明度が上がり、サイズも小さくなっています。
ボタンには白い枠線が付いていましたが、それも無くなっています。

ちなみに、英語版では元々「Skip Ads」だったボタンが「Ads」の大文字が小文字になって「Skip ads」と表記されるようになったようです。

The new button has a rounded background, removes the capitalization of the word “Ads” in “Skip Ads,” is noticeably smaller, and is more transparent. In other words, it’s harder to click and it blends in more.

YouTube tests making the ‘skip ads’ button harder to notice

今まで「スキップ」ボタンは、YouTubeの中でもデザインが浮いた存在だったのですが、今回の変更で他のUIと統一されています。
Google広報も「一貫した体験を提供するために変更を行った」と説明しています。

ただその一方で、Google広告の専門家であるトーマス・エッセル氏は、この変更で「おそらく広告収入が増加するだろう」と発言しています。

今まではスキップボタンが目立っていて押しやすかったのですが、それを目立ちにくくするために変更を行ったとも受け取れます。

「タップ可能な領域 = 角丸」

「デザインを統一する」「広告収益の増加」などの目的がありそうですが、それによって起こりそうな影響をふと考えました。

2024年1月現在のYouTubeのデザインは、クリック可能な領域をどんどん角丸にしているように感じます。
チャンネル登録ボタンを始めとした様々なボタン、コメント領域や動画のサムネイルまでが、角丸になっています。

今回の「スキップ」ボタンの変更によって、YouTube上の背景色が付いたほぼすべてのクリック可能要素が角丸になりました。

その結果、「タップ可能な領域 = 角丸」というユーザーの学習が加速しそうです。

タップして欲しい領域は角丸にすると分かりやすくなりますし、逆にタップできない領域なのに角丸を使ってしまうと、ユーザーに誤解を与えてしまう可能性があります。

ユーザーが快適にサイトを使えるようにするためにも、YouTubeのような多くの人が使うサイトがどのようなデザインになっているのかを意識し、その要素を取り入れることも重要だなと感じました。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！

saito

高校時代にIT・Web業界に興味を抱き、神戸電子専門学校で2年間デザインやWeb実装について知識を得た後、新卒でN′sCreates株式会社のデザイナーとして入社。ミッションである｢解で快を創る｣を実現するべく日々の業務に向き合い、より良い提案を心掛けています。また、学生時代からWeb制作に関わる方のためのセミナーイベント「CSS Nite in KOBE」のスタッフとして業界の最先端に触れ、自主的に学習してきた知識やスキルを武器に、常に成長を続けている。