【Webデザイン】youtubeのデザイン・UI・UXを語ろう

Youtube-Clone-Thumb ぷろぐらみんぐ🏫

 こんにちは!ぐんたろです!

 Webデザインを少しかじったら、いままで自然と触っていたWebページがすごすぎて当たり前のWebサービスが異次元の高さの技術を使っていると思ったことありませんか?

 今回は「Youtube」Webデザイン・UI・UXを作りながら、技術の高さやUI・UXのすごさをコーディングをやったことのない方にもわかりやすく説明していきます!

 Webデザインをこれから勉強したい方や普段Youtubeを使っている方も、Youtubeのすごさを語るときにほかの友達にしっかり「マウント」を取れるように解説していきますので、ぜひご覧ください!

この記事でわかること
  • Youtubeのデザインについて
  • YotuubeのUI・UXについて
  • Youtubeの機能について

今回作成いたしましたYoutubeのクローンが以下のリンクになります。

Loading....

Youtubeの【ヘッダー】のデザイン・UI・UX

  ヘッダーの機能についてですが、Youtubeのヘッダーにはさまざまな機能が詰まっています。

 まずは画像で確認しておきましょう。

Youtubeのチャンネル画面

 ヘッダーには左のボタンから、サイドバーの開閉、「Youtube」のロゴリンクボタン、検索バー、音声入力のボタン、動画の追加ボタン、アプリケーションボタン、通知ボタン、アバターボタン。

 「8つのボタン」があります。8つと言っておりますが、8つもボタンがあってさらにボタンを押したら機能が出てくるところが、すごすぎます…。

 サラッと左上のサイドバーの開閉ボタンをみなさん使用したことがあると思いますが、開閉ボタンの実装は割と難易度高いと思っております。

「みなさん、サイドバーの開閉ボタン使用しますか?」

 しない方が多いと思います。しかし、Youtubeはユーザーファースト。使用する人がいるかもしれないので設置しております。

Youtube-Cloneのサイドバー

 実際コーディングした一部が上記の画像になります。

 正直、完全模写できませんでした。ほんとにYoutubeを作るエンジニアはすごすぎるって話です。

 さらに、ヘッダーの検索バーアルゴリズム(検索機能)Googleと同等なので、最強クラスです。この検索バーだけあればもはやサイドバーも綺麗なデザインも入りません。情報を探すことは容易になります。

 「みなさんはYoutubeの説明書をみなくてもヘッダーのこのボタンで何ができるかを勝手に意識しながら使うことができていますか?」

 ヘッダーのアイコンのボタンで

「このボタンを押したら動画がアップロードできるな!」

「こっちはホーム画面に戻れそう!」

と思ってYoutubeを使用しているでしょう。考えなくてもYoutubeがあなたの心理を読んでいる、Youtubeの画面のデザインにはそのような力があります。これが「UI・UX」の考え方になります。

 動画アップロードするならMovieボタンを押しませんか?これはYoutube側があなたを誘導しているのです。説明書をみなくてもYoutubeの画面を触れるのはあなたがYoutubeを愛しているからではないです。誘導されています。心を読まれています。多機能だが、説明書もいらないのは本当にすごい。

Youtubeの【サイドバー】のデザイン・UI・UXについて

 続いてサイドバーです。

サイドバーは簡単そうだな〜。すごいシンプルだし、自分でも作れるんじゃないかな〜★

Youtubeのサイドバー

 確かにシンプルです。ですが、このサイドバーはスクロールしてもヘッダーと一緒にずっとついてきませんか?

 当たり前のようについてきてもらっていますが、これはまたYoutube側の技術です。

 ユーザーが頻繁に使用するであろう、機能(アイコンボタン)を配置しております。「ホーム」、「発見」、「登録チャンネル」、「ライブラリ」

 私は「ライブラリ」、「ホーム」ボタンは頻繁に使用しております。

 頻繁に使用するであろう機能をサイドバーに設置しておくことで、

 ユーザーに「探させない」。

このデザインがストレス無くYoutubeを使用することができるデザインです。今日もYoutubeを3時間は見ました。ストレスなど全くありません。

 「ライブラリ」、「ホーム」ボタンサイドバーの開閉に入れておけばいいじゃないかと私が開発をしていたら思うところですが、Youtubeの開発者は開閉することすらも「ストレス」だと感じたのでしょうか。

 ここまでユーザーファーストになれるWebアプリケーションがあるのでしょうか…。

Youtubeの【バナー】のデザイン・UI・UXについて

 バナーについてです。

バナーってどこの部分?

バナー広告って聞いたことあるな〜

 本記事で「バナー」とはYoutubeのチャンネルホーム画面のチャンネルの広告画像とその登録者の人数が記載されているところを「バナー」と呼んでいきます。

Youtube-Bannerの画面

 バナーには「ブランドイメージの画像」と「アバター画像」、「チャンネル名」、「チャンネルカスタマイズ」、「動画を管理」、「スライドメニュー」があります。

 ブランドイメージ画像はチャンネルのイメージ画像をYoutubeチャンネルを開設した全員が設置することができます。みんなそれぞれちがう画像を入れることができるのですが、この機能は普通にすごいです。この機能だけで小さなinstagramを作ることができます。そのくらい素晴らしい機能です。

 開発者は基本は掲示板を作成していきます。掲示板の応用して応用して…応用したものがinstagramやTwitter、そして、Youtubeとなります。

 簡単そうに聞こえるかもしれませんが、Youtubeにはおすすめ機能などが備わっていますのでただの掲示板ではないことは言うまでもありませんがデーターベースというデータの保管場所から大量のデータを検索して表示させる機能は本当に複雑で開発者はこのデータの保管場所からデータを取り出すことを繰り返し、Youtubeのようなリッチなコンテンツを作成しております。エンジニアは本当にすごいです。

 メニューのスライドバーもサラッと設置されていますが、これを作るのは激ムズです。ましてや、メニュー下に自分が今どこのメニューを触っているか(写真で言うと「ホーム」というボタンの下線),これを表示させているのはユーザーにとっては無意識にわかりやすいと感じるものでしょう

 このように「自分が今どこにいるか」を表すエンジニア的に言うと「状態」を表す機能もかなりな技術力を要するUI・UXになります

 スライドバーは画面から消えたり、現れたりすることができるので、多くの情報を小さな空間で表すことができます。見た目的にも非常にモダンな作りで、流行りのデザインです。Youtubeは流行りにももちろん敏感です

Youtubeの【メインボディー】のデザイン・UI・UX

 最後に、視聴する動画を選択することができるボディーのデザインについてです。

 みなさんがいつもYoutubeにお世話になっているのはここの機能です。

 動画は「サムネイル」と「タイトル」、「視聴回数・アップロード日時」が記載されている、一個のカードがずらっと並んでいるデザイン。これを「カードデザイン」とも呼ばれていて、いまの流行りのデザインです。よくこのようなデザインが他のWebサイトでも見かけると思いますが、Webデザインはカードを意識して作成していくことで、「整列」「近接」「対比」「反復」、いわゆる「デザインの4原則」を意識して作成されていることが多いです。

 カードを一つの「名刺」と考えて、「反復」させていくという考え方でYoutubeのボディーは作成されていることにお気づきでしょう。

 もちろん「遊戯王カード」と考えても、「反復」させていくことができます。

 このカード反復の繰り返しのおかげで、

ユーザーは「まだ動画がある」

勝手に意識して、スクロールすることがやめられなくなり、Youtubeに平気で8時間ネットサーフィンすることが可能になります。

Youtubeのデザインにより、まる1日をYoutubeで潰せる

 要するにYoutubeのデザインはYoutubeで1日中過ごせるようになっております。Youtubeはユーザーが満足するまで延々と動画サーフィンさせることで、広告を多く視聴者へ流すことができる、ということになります。

 これが広告収入を生み出すデザイン・UI・UXの「基礎」、いや「頂点」といえます…。

 Youtubeにストレスなく動画サーフィンすることができているのはあなたがYoutubeを「愛している」わけでも「動画をみるだけの仕事をしている」わけでもなく、Youtubeのエンジニア・デザイナーの意図通りに動いてるからということです。

 NIKEオンラインストアの「模写」コーディングも行なっておりますのでぜひご覧下さい!

コメント

タイトルとURLをコピーしました