KAI-YOU Premiumのトップページリニューアルを振り返る
こんにちは、KAI-YOU でUIデザインを担当しているPENTAGRAM（@PENTVGRVW）です。お久しぶりのブログ更新になります💪
KAI-YOUが運営している月額制サービス『KAI-YOU Premium』では、2021年1月にトップページのリニューアルが行われました！（※その際のお知らせはこちらから）
ある意味サービスの顔とも言えるトップページのリニューアルにはアイディア出しからリリースまでに約3ヶ月ほどかかり、（当時）開発部以外からのメンバーにも参加してもらったりとかなり大きなプロジェクトでした。
今回は、そんな紆余曲折あった3ヶ月間をざっと振り返ろうと思います。
なぜリニューアルしたのか
今回、KAI-YOU Premiumのトップページをリニューアルしたのは、以下の2点が大きな理由でした。
① コンテンツ量が増え、多種多様な記事があることを知ってもらいたい
② 記事の新しい/古いに囚われない探し方（dig）を提案したい
① コンテンツ量も増えたので、多種多様な記事があることを知ってもらいたい
2019年のリリースから1年半が経ち、400本以上の記事がリリースされています。
KAI-YOU Premiumが扱うのは「ジャンルを横断し世界をよりワクワクさせるポップなコンテンツ」です。目的の記事を読んで終わり〜ではなく、自分の触れたことがない様なジャンルやカルチャーに対して、興味を持っていただくためにより多くのコンテンツが選べる・目に入るようなデザインを目指しました。
② 記事の新しい/古いに囚われない探し方（dig）を提案したい
メディアはどうしてもリリース情報や時事的なニュースを取り扱うことが多くなるため「最新順」にコンテンツが並びがちです。ですが、KAI-YOU Premiumが扱うコンテンツは"鮮度"に囚われません。
古いから面白くないなんてことはありません。また、より多くの方にコンテンツが届けられるよう、投稿日がコンテンツを選ぶネガティブな基準にならないよう、今回のリニューアルでは「最新」や「新着」といった言葉を可能な限り排除しています。
興味の入口を増やすために
もっとユーザーに「回遊」してもらうためには、興味の入口を増やす必要がありました。そのために既存のサブスクサービスはもちろん、様々なWebサービス、モバイルファーストをより意識していくためにアプリデザイン等の調査を重ねました（※画像はその一部）
いろいろなレイアウトを試していくなかで、一つずつ記事を並べるのではなく、ゲーム、VTuberといった具体的なジャンルやインターネットの最新流行といった抽象度の高いものなど、テーマを持った塊としてコンテンツを表示することで「興味を連鎖」させることができるのでは、という仮説に辿り着きました。
興味を連鎖させることで、これまで一覧ページに行かないと見えづらかった「こんな記事もあるんだ！」というコンテンツの多様さをより見せやすくなります。さらに、様々な角度から選択肢を提示することでユーザーがその中から自分が気になるものを選ぶ余地も残すことができるため、このアイデアは積極的に取り入れることになりました。
ベストなコンテンツ量を探る
表示する要素を決定したあとは実際の画像やテキストを配置してバランスを確認します。純粋に表示するものが増えたのでユーザーがどこを見ていいか分からなくなってしまうのを防ぐためです。
ユーザーがその記事を読むか判断をする際には、以下の2つが重要になります。
・サムネイル（画像）で判断する
・テキスト情報（記事タイトル等）で判断する
それぞれの要素がユーザーにとって使いづらくなってしまわないよう、背景色のような大きな要素から記事情報のような細かい箇所までを順々に詰めていきました。 デザイン完成後は、AdobeXDのプロトタイプ共有機能を使うことで実際に社内の人たちに実寸サイズのデザインレビューを手伝ってもらっています。
きちんと開発段階で使用感を確認することでリリース後に大きな違和感を与えないようにするのと、開発側が間違った方向に走り出していないかチェックすることができます。 たくさんの人に協力してもらう必要があるので時間こそとられてしまいますが、大きいプロジェクトなので細かく舵を取っていくことでリカバリーも早急に対応することができました。急がば回れですね。
本格的なコンテンツの入れ込み
デザインのフィードバックが完了したら、さらに詳細な情報を入れ込んでいきます。文字数の多い/少ないものが入っても問題ないか、ホバー（要素をタップ👆）した際の動き等、イレギュラーが発生してしまわないか想定に想定を重ね、一つずつ不安要素を潰していきます。
この段階で、推しが参加している記事で登録してくれたユーザーが、推しの過去の記事を見逃してしまわないよう、直感的に記事を探しやすくするために「クリエイター枠」も追加されました。
確認を重ねてかなり形が固まってきたところでさらにブラッシュアップ！PCユーザー向けにタイトルやサムネだけでは感じ取れない面白さを補足できればということで、マウスホバーで拡大＋詳細情報が表示されるようになりました。
実装を担当してくれたエンジニアと何度も操作感を擦り合わせ、なめらかな変化を再現してもらいました（感謝🙏 ）
他にもサービスを安心して使っていただけるように各要素の*1角を基本丸めるようにしたり、お気に入りの連載の更新状況を一目で分かるように連載ステータスに合わせてアイコンや本数を表示するようにしたりと、痒いところに手が届く施策を意識しました。
リリースへ
こうして約3ヶ月の開発期間を経て、無事リニューアルしたトップページをリリースすることができました！
リニューアルプロジェクトはゴールではなく、これからもっと良いコンテンツを届けていくためのスタート地点だと考えています。ですので、リリース後はリニューアルで増えた要素がちゃんと機能しているか日々チェックしたり、改善の余地がないか探っています。
もちろん、開発陣だけでは気付けない部分もあるかと思いますので、どしどしご意見ご要望いただけると嬉しいです！一緒にサービスを育てていけたらなと思います🙇♂️
おわりに
KAI-YOUでは、エンジニアを絶賛募集中です💪
興味のある方はぜひのぞいてみてください！一緒にお仕事できる日を楽しみにしてます〜〜〜
また、noteでも社内の様子やお知らせ、編集長のコラムを発信中です✨
こちらもチェックお願いします！
