公開日 : 2024年03月12日

Yahoo!きっずサイトのリブランディングを手掛けました!【UI・UX設計編】

今回、サイトのリブランディングを手掛けさせていただいたお客様は、LINEヤフー株式会社様。

「Yahoo!きっず(ヤフーきっず)」は子供向けポータルサイトです。インターネットの情報検索や、図鑑、食育、ゲームなど安全に楽しく学べるサービスを提供しています。

 

LINEヤフー株式会社:https://www.lycorp.co.jp/ja/

Yahoo!きっず:https://kids.yahoo.co.jp/

dot button company株式会社が手掛けた「Yahoo!きっずサイトのリブランディング」について、手掛けた背景や制作でのこだわりをお届けします。 

=========================

はじめに、フェーズ1として、ペルソナの設定をアンケート調査や仮説設定、ワークショップを通じて立証してきました。

【ペルソナ設定編】についてはこちらをご覧ください。

こちらで定まったペルソナから

①カスタマージャーニー

②クリエイティブ設計

を行なっていきます。

まずは、①カスタマージャーニーからご紹介していきます。

フェーズ1で得られた結果を元に導き出されたペルソナから、カスタマージャーニーマップを作成していきます。作成するマップは、親(選定者)と子(利用者)それぞれの状態を可視化し、Yahoo!きっず様のWEBサイトの利活用に向けたアプローチの精査を行いました。

 

偶発的な出会い”セレンディピティ”を大切に、ユーザーがサービスを知り、利用意向をもって実際に利用するまで、また、利用後に利用の継続をするまでに、ユーザーが辿る一連の体験を様々な視点から検討していきました。

 

カスタマージャーニー例

 

ここで定まったユーザーの利用シーンや目的に沿って、クリエイティブへと落とし込んでいきます。

②クリエイティブ設計は、今まで行なってきた、ペルソナ・カスタマージャーニーマップ等の情報からどういったコンセプト・デザインイメージやインターフェースとするのかを設計します。

これまでに「Yahoo!きっず」が築いてきた安心・安全なインターネット体験の提供に加え、「今を生きる子どもたち」のニーズを取り入れたサービスへ変容させることで、今の時代に適した “学び方、学ぶ力(リテラシー)” を育成してことを提案しました。そして、力強く生きていくための新しい知恵や術を身につけられる場としてブランドを強化し、これからの時代を生き抜く力を身に着けるコンテンツをクリエイティブの方向性として提示しました。

このような方向性や意見交換の中から、コンセプトの軸となるタグラインとステートメントをコピーライターの小藥 元さんとYahoo!きっず様がディスカッションを重ね制作されました。

小藥 元

https://meet-and-meet.com/

「次の世界をノックしよう。」

学校だけじゃない。

塾だけでもない。

生きているのは世界なんだ。

空みたいに海みたいに、

広くて深くて面白い。

学ぶも探すも冒険さ。

きみのすぐ横に、世界の扉。

まず、「Yahoo!きっず」の現在のポジションやこれから目指していくべき所、あり方などの整理・意思疎通をさせて頂きました。

このような意見やアイデアを経てたどり着いたサイトには、多くのクリエイティブ面での思いが込められています。

 

TOP画面には、子どもたちが偶発的に様々な情報に触れることができるよう、中央に「ノックする」のボタンを設置しています。こちらは、ノックすることで画面に展開されるコンテンツがランダムに再表示される仕組みで、子ども達の興味の幅を越えて、新たな出会いを生み出します。

さらに、TOP画面は再表示されるごとに背景のビジュアルのパターンが代わり、新たな世界を演出してくれます。

きっず検索ランキングなどの下層ページも一部、見やすくリデザインを行いました。

さらに、動物、植物、科目などの名称をオリジナルの図としてパターン化し、ボタンや背景などに多用しています。こちらは、一つの形に縛られず可能性を広げて様々なことに対して関心を抱いてほしい思いも込められています。

タグも様々なワードを設定することで、直感的に新たな興味に出会える役割を果たしています。

現在、こちらの「Yahoo!きっず」のサイトは、プロトタイピングやユーザーテストを行い、調整を行なっております。最初のペルソナの設定からユーザー視点での使いやすさ、関心の持ちやすさなど、多くのクリエイティブを「Yahoo!きっず」のサイトから感じ取っていただけると嬉しいです。今後も、偶発的な出会い”セレンディピティ”に溢れた魅力的なサイトにご期待ください!

 

=========================

【制作】

dot button company
責任者 中屋
クリエイティブディレクター 松本

アートディレクター 株式会社 Grand Slam 澁田