あいのりのWEBサイトをトレースしてみた
前回の「BAKEのWEBサイトをトレースしてみた」をnoteにて更新したところ、かなり反響があり、Twitterのフォロワーが増えたり、noteのフォロワーが増えたり、各所で色々なデザイナーさんにRTで拾って頂いたり、DMを頂いたりしました。本当にありがとうございます。
反面、次のトレース分析を投稿するのが少しプレッシャーになってしまっていて、なかなか取りかかれずにいたのも事実です。
少し時間を置いてトレース分析をまとめる作業に取り掛かってみて、「分析においてクオリティ面での維持と更新」のバランスがすごく難しかったです。ただ、最終目的は自分の勉強のためなので、その辺りは気にせず更新することにしました…！
結果として、トレース分析って面白そうだなと思って読んでもらえたらいいなと思います。
前置きが長くなりましたが、トレース分析、はじめます。
目次
1 - あいのりとは？
2 - トレースのきっかけ
3 - 「WEBサイト」としてのトレース結果
4 - 現在の番組のポジション
5 - まとめと反省点
6 - おまけ
1 - あいのりとは？
平成生まれなら１度は見たことがあるであろう、不動の恋愛ドキュメンタリー番組だと思います。
私が見るきっかけになったのは母親が夜な夜な見ていたことがきっかけでした。その後中学生になった私は、川嶋あいさんや遊吟さんが主題歌の頃にはほぼ毎話見ていましたが(ちょうど桃さんやクロさんが出ていた頃です)、当時メンバーが出演していた年齢と私の今の年齢が大差なくて驚いています…。
2 - トレースのきっかけ
今回は、前回のトレースのきっかけとは真逆で、「先に番組を見た」ことから始まりました。
偶然飲み会から帰った後にテレビを点けたらやっていたのが、「あいのり Asian Jouerny」。
個人的には、大変申し訳ないのですが「まだやっていたんだな〜」という印象でした。ここ数年でテラスハウスなどの新興番組に負けているイメージがあったので、気になって「番組としてどのくらい続いているんだろう…」と思い検索した時に見たのと、ちょうどWEBサイトのまとめに掲載されていたのを見かけたことも相まって、トレースの材料に選びました。
3 - WEBサイトとしてのトレース結果
あいのり Asian JourneyのWEBサイトはこちら。
前回の反省を生かし、きちんとfont-familyの指定があるサイトを選びました。欧文は全てTeko、日本語は游ゴシック指定です。全体的に使用されている色数も少なく、比較的シンプルなサイトだったと思います。
デザインのルールをきちんと守り、セクション同士を入れ子にしたりはしていません。
サイトを見ていて「凝ってるな〜」と個人的に感じたのは、Twitterにも書いたのですが、
文字をドラッグした時の色がデフォルトの青ではなく、きちんと番組カラーのピンクに変わります。
実装しているサイトは初めて見たので、勉強になりました。
導入もそこまで難しくないようですが、対応ブラウザが限られるようなので要注意ですね。
どうやって書いてるんだろう？と思ったので、探してみた所こちらのサイトを見つけて確認しました。
4 - 現在の番組のポジション
これ、正直ものすごいポジショニングが難しかったです。
そもそも、あいのり・テラスハウス・バチェラーは見たことがあったのですが、色々調べていくうちに現代には色々な恋愛リアリティ番組があることが分かりました。
見たことがないものに関しては集めた情報のみでポジショニングをしているので、「もっとこっちのポジションだと思う」という意見もあるかと思います。
さらにこれら6番組の「公式WEBサイトの有無」について調べると地上波から始まったあいのり、テラスハウス、恋んトスについては公式サイトが有り、ネット配信から始まった今日好きになりました、オオカミくんには騙されない、バチェラーについては公式サイトがなかったため、この辺りは金銭面の余力かなと思います。
ただ、テラスハウスと恋んトスについても、放送局に付随する番組ページがあるため、「WEBサイト」として独立しているかと言われると難しいかと思います。
加えて、SNSとの連動性としてフォロワー数についても各番組調べてみたのですが、テラスハウスの一強でした。
ちょうどあいのりの地上波放送が一旦終了し、恋愛リアリティ番組に空きが出ていたタイミングと、SNSの流行時期が被ったことが一つ要因として考えられるのかなと思います。
また、Twitter・Facebookの運用が無いにも関わらずInstagramでテラスハウスにも劣らない人気を博しているのがabemaTVにて配信されている「オオカミくんには騙されない」「今日好きになりました」の2番組。
こちらは出演者も高校生と、完全にターゲット層が他の番組とは異なることが分かります。
単純なフォロワー数と、ポジショニングマップから分析してしまうと、「現代の恋愛リアリティ番組の流行り」が「日常的」で「共感が得やすい」所にシフトしてきているのかなと推測されます。
5 - まとめと反省点
今回のトレース分析は「WEBサイト→プロダクト」ではなく「プロダクト→WEBサイト」の流れを汲んで実践してみましたが、このやり方だと「WEBサイトとしてどこを改善すべきか」が非常に分析しづらくなります。
また、恋愛リアリティ番組が思った以上に多岐に渡っていて、一つ一つの番組の特徴をしっかり捉えきれなかったので、今後のトレース分析ではその辺りも詰めていきたいです。
ただ、今回の分析で、ことWEBサイトに関しては「あいのり一強」だということが分かりました。
他の番組がWEBサイトの運用には力を入れていない中で、このことは一つの強みになると思います。とはいえ、あいのり自体も次クールからはNetflixでの配信になるようです。この手の番組に関しては、いかに「放送中にSNSで共有してもらうか」の方がもしかすると重要なのかもしれません。
6 - おまけ
トレースをしている時に一つだけ気になった部分があったので、おまけ的に書いておきます。
スピンオフの4つのサムネイルの部分、一番右に余白が出来てしまっているのですが、サイト公開後でも起こりうることなんだなと思い、これも改めて勉強になりました。
ちなみに各サムネイルのmargin-rightを一旦消して、サムネイル部分を囲っているclassに「justify-content: space-between」を入れてみたら直りました。
スマホ版までは確認していないのですが、「当たりをつけて修正が出来る」くらい綺麗なコーディングを私は書けないので、まだまだ勉強、頑張っていきます。
最後までお読みいただきありがとうございました！
頂いたサポートは勉強やスキルアップのために大切に使わせていただきます！