NMY

トップページを考える

Webディレクター解体アドベントカレンダー23日目の記事です。今日はWebサービスの顔、トップページについて考えてみます。

Webサービスを設計するにあたって数あるページの中でも、トップページというのは考えることがトップクラスに多い、設計の難しい領域です。その主な要因は、サービスの成長に合わせて担う役割を変化させる必要があるからだと思います。

たとえばこれはYouTubeサービス開始時から数年前くらいまでのトップページの変遷を2分程度の動画にまとめたものです。

最初はシンプルなログインするためのフォームと検索窓1つというツールっぽいトップページからスタートして、だんだん Featured とか Popular とか Trending とかそういう人気の動画が並ぶメディアっぽいトップページになっていき、最近はパーソナライズが強まってユーザーの興味に沿ったコンテンツがおすすめされるトップページになっています。これは非常に分かりやすい例で、大量のコンテンツや商品を扱うWebサービスの場合、多くがYouTubeと似たような変遷を辿っています。

まずツールの時代です。Webサービスの立ち上げ当初はコンテンツも少なくトップページに掲出するものがあまりない。そういう時はシンプルな投稿ツールに振り切った形にするか、ランディングページやガイドページのようなサービスの紹介に振り切るということをよくやります。

次にメディアの時代です。立ち上げれば多かれ少なかれコンテンツは増えてくるので、コンテンツを紹介する枠が生まれます。その枠が広がってページの大半を占めるようになると、メディアのようなトップページになります。メディア型のトップページは人気やトレンド、ランキングのようなサービス内で人気のコンテンツを紹介することが主な役割です。ただ、ここで問題になってくるのは人気コンテンツの品質と流動性のバランスを取りながら、如何に新規コンテンツを発掘して人気コンテンツに押し上げるかという循環系の設計です。

循環システムの設計

伝統的に古くから取り入れられてきたのが階段型の構造です。例えば最近投稿されたり更新された新規コンテンツを紹介する欄を設け、そこで瞬間的に人気の出てきたコンテンツをトレンドとして取り上げてバズを生む種にし、最終的に人気の出たコンテンツをランキングとか人気コンテンツの欄で大々的に取り上げるというような形。各段階ごとに枠を設けて、徐々に階段を登るように人気コンテンツへの道を用意します。

f:id:nmy:20201222202358p:plain

この構造の課題は評価システムが一本道になっており、そのレールに乗れなかったら脱落してしまい、誰にも注目されないコンテンツが大量に生まれることです。基本的に徐々に脱落していって少数のコンテンツのみが勝ち残る構造になっているので、ほとんどのコンテンツはそのレールから外れてしまいます。これはUGC系サービス共通の課題であり、各社がそれぞれのコンテンツ特性に合わせた工夫をしています。

例えばTikTokは、動画の尺が短く見る側のコンテンツ消費コストが低いことを利用して、人気やパーソナライズされた動画の合間に新規投稿された動画やまだほとんど見られていない動画を挟み込んで、作った動画が誰からも見られないという状況をなるべく防ごうとしています。これは尺が短くコストが低いサービスならではの設計ですが、サービスの特性を活かしたうまいやり方だと思います。

興味を細分化してコンテンツの出る面を増やし、同じ興味を持つ人たちに見てもらう場を作るという方法もよくとられます。よく使われるのはハッシュタグです。サービスのトップページは1つしかないので掲載されるコンテンツには限りがありますが、タグやカテゴリやその他何かの興味に基づいた面を増やすことで、より多くのコンテンツを紹介できるようになります。

あとはパーソナライズですね。ユーザーごとの興味の傾向を分析して、レコメンドの中にその興味に沿った新規コンテンツを混ぜ込みます。ハッシュタグの場合は閲覧者が自らそのタグを選択して能動的に見に行かないといけませんが、パーソナライズされたトップページでは受動的にコンテンツを提示できます。最近のWebサービスのほとんどが、程度の差はあれどトップページに何かしらのパーソナライズ要素を導入しています。トップページという限られた掲載枠を最大限効果的に生かすため、ユーザーの興味に応じて最適なコンテンツを機械が判断して提案しているわけです。

メディア or パーソナライズ

メディア型かパーソナライズか。このバランスを如何にとるのか。この匙加減や移行タイミングの見極めも、トップページを考える上で欠かせないポイントです。

メディア型の良いところは、サービスの色が出やすいのでターゲットユーザーに刺さりやすことです。トップページに掲出された人気コンテンツは、そのサービスの特徴を雄弁に語ってくれます。例えば同じ動画投稿サービスでも、ニコニコ動画とTwitchとTikTokではターゲットとなるユーザー属性がそれぞれ異なりますが、トップページに載っているコンテンツをいくつか見れば自分の好みにあっているかすぐわかると思います。

パーソナライズされていないトップページには、みんなが同じ物を見ているが故の良さがあります。それは共通の話題になれること。ヤフートップに載ったとか、はてブのホットエントリーに入ったとか、Twitterのトレンド1位になったとか、そこに掲載されることが1つのステータスになり、みんなの話題に登りやすくなります。そしてそれがそのサービスを特徴づけ、サービスそのものの顔になっていくわけです。

ただしこうしたメディア色というのは、成長の足枷になることもあります。メディアというのは特定のターゲットユーザーに向けた媒体ならではの色があるものですが、その色が合わない人にはなかなか受け入れられません。特定のターゲットユーザーの間に留まって更に深化を目指すのか、さまざまな属性のより多くの人たちに広く受け入れられるプラットフォーマーを目指す道へと進むのか、その方向に応じてトップページが担う役割が変わってきます。

前者を指向するサービスはよりメディア色を強め、後者を指向するサービスはパーソナライズの道に進みます。TwitterやFacebookなどのSNSはフォローとタイムラインという形式で個人に最適化されたトップページを維持してきました。冒頭にあげたYouTubeのトップページの変遷動画は、まさにメディアを脱却してプラットフォーマーとしてパーソナライズ色を強めてきた歴史を表しています。

コンテンツの循環やサービスの目指す立ち位置によって担う役割を常に変化させていく必要のあるトップページ。他にも考えるべき軸はサービスごとに様々だし、奥が深くて設計のしがいがありますね。トップページを考えるのはいつも楽しいです。