CASE STUDY 01

しまじろうクラブ

ベネッセコーポレーション「こどもちゃれんじ」会員サイト
リニューアルプロジェクト
フォーデジットデザインの仕事について、実例を通してご紹介するケーススタディ。今回は、2013年6月~2014年4月に手がけた株式会社ベネッセコーポレーションの「こどもちゃれんじ会員サイト “しまじろうクラブ” 」です。多くの家庭で親しまれる幼児教育教材「こどもちゃれんじ」の会員サイト刷新により、同サービス全体の価値向上を目指しました。これに弊社がどう取り組んだかを、現場スタッフの視点でお届けします。
クレジット
PRODUCE : 仁田 雄一
PMO : 藤原 正平
DIRECTION : 矢部 一樹
AD : 石田 康太
DESIGN : 石川 奈津美
DEVELOP : 松村 茉利恵 /
fact-real,Inc. / Synform
クライアント
株式会社ベネッセコーポレーション
URL
http://kodomo.benesse.ne.jp

キックオフ

予想を上回る大規模プロジェクト

2013年6月、以前からお付き合いのあるベネッセコーポレーション様から「会員サイトのリニューアルをお願いしたい」とご相談を頂いた。まずは事前説明とのことで、プロジェクトリーダーの仁田雄一、プロジェクト管理担当の藤原正平、ディレクターの矢部一樹の3名で新宿オフィスを訪問。「しまじろうクラブ」は、人気キャラクター・しまじろうで知られる幼児教育教材「こどもちゃれんじ」の会員サイトだ。このときは「リニューアルを考えており、レスポンシブ、フラットデザインでお願いしたい。具体的な内容はキックオフミーティングで」とのシンプルな与件共有のみで、初の打ち合わせを終えた。

数日後、キックオフミーティングで再び新宿へ。先日とは大きく異なり、クライアント含め5社、30名以上が集う様子を前に、このリニューアルが単にデザイン改修を超えた規模・内容のものだと知る。「サービス全体の再定義から、新規ウェブ/アプリサービスの立ち上げ、それに伴うサイトのフルリニューアルを行いたい」との先方挨拶にはじまり、新コンセプト、新サービスの内容や、会員基盤の改修と連携の必要性など、多岐に渡るスコープでの説明があった。予想以上のスケールだが、やりがいも充分。改めて気を引き締め、弊社側のチーム編成と担当領域を整理して臨むことになった。

プロジェクトマネジメント計画

ツール選定と計画化

今回の弊社の担当領域は、会員サイトのフルリニューアル、新規ウェブサービス立ち上げにおける、設計、デザイン、実装だ。システム開発は別会社が担当する。「こどもちゃれんじの会員サイト」は運営実績も長く、クライアント内でもサービスとコンテンツ両部門にご担当者がいる大規模サイトだ。さらに今回のリニューアルは、上述のシステム開発会社陣とも円滑な連携を要する。そこで、始めにプロジェクトマネジメント計画を整理し、以下の体制・ツール利用で連携を目指した。

  • 日々のコミュニケーションと課題管理は「Backlog」にて集約
    クラウド型プロジェクト管理ツール・Backlogを導入し、クライアント、弊社、システム開発会社2社の4社で必要な情報を共有。クライアント側ご担当者のリテラシーの高さもあり、効果的な活用が実現できた。
  • 開発会社との連携には「ChatWork」を活用
    連携他社様からの推薦もあり、クラウド会議室ツール・ChatWorkを導入。多領域連携の中でフェーズごとに発生する変更点や再調整の解決に活躍した。
  • プロジェクト計画は「Smartsheet」で工程化
    オンラインのプロジェクト管理ツール「Smartsheet」にて、WBS*を作成。
    *WBS(Work Breakdown Structure):プロジェクトマネジメントの計画手法のひとつ。必要な作業を細かい単位に分割し、階層構造などで管理する。

こうしたオンライン上での協議・共有体制を用意し、オフラインでも「関係全社での定例会議」「弊社とクライアント間の個別定例会議」を各週1回設定し、プロジェクトを推進した。

現状把握

コンセプト、方針、目的 ― まず現状を徹底理解

ディレクターの仁田・矢部がクライアントの戦略について一旦の解釈をまとめ、社内メンバー全員で認識の統一化を図った。並行して、現サイトのコンテンツ・サイト構造/ナビゲーション設計/各ページの画面設計/アクセス解析など、既存情報の収集、課題を抽出。コンセプトから具体的課題まで、網羅的に情報を整理した。

まずクライアント側からは、会員サイトのかたちとして以下の課題が挙がっていた。

  • ・コンセプト「つながる学び」「つながる子育て」を受けての今後のあり方
  • ・新企画サービスをどのように実現するか
  • ・会員ポイントをプレゼントに交換できるスキームを構築したい
  • ・複雑な会員登録プロセスを、ユーザーにストレスない形に改善したい
  • ・デザインとしては、レスポンシブ、フラットデザインを志向

これもふまえ、弊社では主に以下の作業を行った。

  • ・プロジェクトの目的明確化(コンセプト、方針、目的)
  • ・既存情報の収集、課題抽出
  • ・残す/編集する/追加するコンテンツの明確化(インベントリ作成)
  • ・他サービスとも連携する複雑な会員ステータスの理解
  • ・アクセス/既存ユーザー動向の解析(人気コンテンツ、使用デバイス)

その上で、改めてクライアントへのヒアリングを実施。過去の先入観に捕われずに意見交換し、その後約3週間で大枠の方針を詰めていった。

情報構造の設計

既存ニーズと新要件から、次の一手を

続いては、情報構造の設計。今回は後述する2つの新コンテンツがあるが、全体としては既存資源の再編集の割合も大きく、サービスの全体像をいかにわかりやすく伝え、使いやすさを実現するかが最重要課題となる。

ここで、特に関係者間で意見が分かれ、最も頭を悩ませたのはトップページの設計だった。端的に言えば、以下のような考え方の違いが当初見られた。

弊社
機能性を重視
このサイトのユーザーはロイヤルティが高く、かつ能動的。ゆえに最新・更新情報のスムースな伝達を優先したい。一方、新会員獲得やリニューアル周知の視点からは、サイト全体像を伝えることも重要。
クライアント
情緒・感覚性を重視
サイトのコンセプトが伝わり、ユーザーにとって興味のあるものが見つけやすい、再訪したくなるデザインにしたい。

当初、弊社のアイデアとしてはコンテンツ種別ごとに最新情報を露出し、登録ユーザーが目的の情報をキャッチアップでき、かつ新規ユーザーにもコンテンツを一覧しやすい案を提出した。ここでクライアント側と視点の差異を認識することになったが、サービス全体のクリエイティブディレクター(他社)による以下の考えが、両者を橋渡しする形となって再調整できた。

サービス全体のクリエイティブディレクター(他社)
機能と感覚のバランス
ゆったりとした落ち着きと、高感度なセンスを有した場所。
情報過多なトップページではなく、「メッセージの強調」「情報の選択」により、
ユーザーが本当に必要な情報を得られる構造。

結果、最新情報を強調しつつ、カテゴリ別のセグメント化はせず、多様な情報をグリッド形式に並べることで「おもしろい情報がありそう!」「楽しそう!」というポジティブな印象形成を狙う設計となった。

余談…
リニューアル後しばらくの運用を経て、利用率の高いユーザーへグループインタビューを行った。結果、その多くが特定のコンテンツを頻用しており、サービスの全体像を把握しておらず、未見のコンテンツが多いことが判明。今後の改善可能性として、全体像の理解促進と、より幅広い利用のために何ができるか、現在もUXを向上させるべく改善を継続している。

クリエイティブ

新会員サービスにおけるトーン&マナーの策定

クリエイティブ面においては、ロゴ開発・サービス全体のコンセプト開発は他社のクリエイティブディレクターがご担当。弊社では具体的なデザイン落とし込みのトーン&マナー、フォント選択、カラースキーム、コンテンツアイコンなどのパーツ、処理定義などの詳細化を行った。

WEBサイトデザインにおけるデザインガイドラインを策定。

サイトの顔となるトップページでは、親子の自然体なイメージ写真や、各コンテンツのアイコンを主要素として配置。また「こどもちゃれんじ」人気キャラクター群が背景でゆるやかに流れるアニメーションにより「つながり」「共創」「楽しさ」を演出した。コンテンツエリアにもキャラクターの影を配し、マウスオンすると反転してその姿が見られるなど、インタラクションの楽しさにもこだわった。さらに今回はレスポンシブデザイン実現のため、サイトの更新性/ロード負荷/制作効率の観点から、企業サイトではまだ導入例の少ないWebフォントを採用している。

「楽しさ」にこだわったインタラクション演出「キャラクターかくれんぼ」。

サイト全体の実装

レスポンシブデザイン開発の効率化

これまで、クライアイントのベネッセ様におけるウェブサイトでは、PCサイトとスマートフォンサイトを個別に制作するのが通例だった。しかし今回は、ターゲットユーザーの多くが、自宅では操作が手軽なスマートフォンやタブレットを利用していること、また国内全体でもタブレット所有者は増加傾向にあり(*)、今後もその加速が見込まれる状況から、レスポンシブウェブデザインを採用した。

*参考:所有率の上昇ペースが上がるタブレット―定期調査「モバイル機器」
(インターネットコム:2014年7月25日記事)

今回は、4つのメジャーブレイクポイントを考慮した設計とした。すなわち、PC/9~10インチタブレット/7インチタブレット/スマートフォンである。タブレットについては、画面のサイズ感をもとに、ブレイクポイントを2つに分けた。

平たく言うと4デバイス分のサイトを作ることを意味するが、全デバイスのパターンのレイアウト・パーツをデザインするのはかなりの労力を要する。そこで、まずスマートフォンの構成を意識しつつ、PCページのデザインを作成。これをもとに、その他デバイスに関して最低限必要なデザインパーツを用意した。実装段階ではデベロッパー中心に、レイアウトやブレイクのイメージをデザイナーとも相談しつつ、各デバイスでの最適化を考えてマークアップしていく。時には、デザイナーに追加パーツをリクエストし、UI、レイアウトをも変更するなど、アジャイルによる開発が行われた。全体のボリュームが大きかったこともあり、まずはなるべく早く最終的なアウトプットの形まで持っていき、開発の安定・効率化を意識して進めた。

新サービスの開発

本質追究のためには「立ち戻る」ことを恐れない

今回、新規サービス「こどもちゃれんじFAMILY」について、企画段階からクライアントと共に開発に携わった。これは会員同士が、子育て上の出来事や想い、悩みなどを写真やコメントを通じて共有できるもので、他ユーザーがこれに対して共感やコメントを伝えられるSNS的なサービスである。

クライアントからは、継続利用促進のため「ほめポイント」という概念を用意し、投稿やコメントなどのユーザー行動に対してポイント授与ができるようにしたいとのオーダーもあった。すなわち、投稿などの参加アクションによりシステム側からポイントを付与されるのに加え、各ユーザーが互いの投稿への「ほめ度合い」に応じてポイントを与え/受け取れるというものだ。そこで、これも踏まえて機能要件の洗い出しを行う。

機能要件の一例

  • 投稿  :写真とテキストに加え、「おでかけ」「おたんじょうび」など日常行事にまつわるタグを選んで投稿。閲覧時はこのタグからの絞込表示もできる。加えてお子さんの年齢タグも用意。自分たちと同じ年ごろのお子さんを持つユーザーの投稿を見たい、というニーズを想定。
  • コメント:他ユーザーの投稿に対して、テキストでコメントできる。
  • 共感  :ライトにアクションできる「いいね!」的な何か。
  • ポイント:投稿、コメントなどの行動に対して、ポイントの授与・受取ができる。ポイントが貯まると「STAMP」がもらえる。各ユーザーが一日に使える「ほめポイント」量は規定される。
  • その他 :会員間ではオープンな場とし、Facebookのように個別に友達関係を結ぶ概念はなし。ただし、お気に入りのユーザーをフォローすることはできる。

ポイントを与える事が正解なのか?

詳細化したUI設計書をベースにお客様と数回ミーティングを重ね、機能要件が固まり、デザインによる精密化を行う。プロジェクトはおおむね順調に進展している――多くのメンバーがそんな風に思っていたある日、社内のデザインレビュー会議にといて、アートディレクターの石田康太がこんなことを言い出した。

「“ポイント付与”という機能があることで、かえって“親同士が共感し合う”というコンセプトから大きくズレていく気がする。」

これはデザインフェーズでの機能変更、というどんでん返しになりかねない意見だったが、立ち止まって考慮する価値のあるものとも思われた。そもそもこのサービスが目指すのは、親御さんたちが子育てで体験する“想い”を共感し合い、子どもたちとの時間をより楽しんでもらいたいということ。しかし、そうしたリアル体験への「ほめる」「共感する」行為は、そもそも数値化できないのでは? また、数値化とポイント貯蓄はゲーミフィケーション要素を高める一方、今回再優先すべきことではないかもしれない。

ある機能によるユーザー体験の課題は、UI改善などで解決できる場合もあれば、機能そのものの再考が必要なケースもある。弊社では話し合いの結果この問題を後者と捉え、思い切って再度アイデア出しに立ち戻ることにした。結果、ポイントではなく「ステキ!」「おめでとう!」「がんばって!」という想いを付与できる「キモチボタン機能」をお客様へ提案することに。

さらにこの「キモチボタン」では、しまじろうに登場してもらう案を考えた。「こどもちゃれんじ」利用者は、親子でとにかくしまじろうが大好きだ。たとえば教材DVDでは、歯磨きやトイレのトレーニングをしまじろうが呼びかけることで、子どもたちは慣れない生活ルールの習得にも頑張れる。そんなしまじろうがユーザーの想いのお届け役になることで「もらって嬉しい」「共感の想いが伝わる」体験のデザインを目指した。

しまじろうがユーザーの想いのお届け役になることで「もらって嬉しい」「共感の想い」が伝わる体験をデザイン。

この提案は、クライアントおよびバックエンド開発ご担当社の理解を得て、大きな支障なく実現することができた。そこには、日々重ねてきた定例会やオンラインコミュニケーションで築いた目的意識の共有と信頼関係も影響したと思う。なお本プロフェクトはこの件に限らず、全体的に柔軟なアジャイル開発的進行ができた点も特徴だと言える。

アプリライクな操作感をブラウザで。

インタラクションを実装に落とし込む際こだわったのは「アプリの操作感をウェブブラウザで」という点だった。サイト全体がいわゆる「ツール」的アプリに近いため、無駄なくサクサク動くことを第一とし、ページ遷移やアクション時など、要所でアニメーションも採用。使いやすさにもこだわり、画面下方へのスワイプによるリロード、ブラウザバック時の前画面スクロール位置記憶、「戻る」ボタンでのアクションの取り消し、タイムラインの初期表示ではソート&フィルタ導線など副次的要素を割愛するなど、細部に工夫を盛り込んだ。

一連のコンテンツが組みあがり、いよいよクライアントへのお披露目となる。毎回、自信はあれど緊張は隠せない一瞬。結果は、予想以上に高い評価と賞賛を頂くことができ、ほぼ一発OKに近い形となった。設計フェーズから時間をかけて意見交換しつつ作り上げたことで、コンテンツへの思想や方向性を共有できたこと、また細部まで徹底配慮して作り込めたことも要因かと思う。

リリース

膨大な既存資源の再構築と新サービス立上げを達成

2013年7月のプロジェクト正式スタートから約10ヶ月をかけ、2014年4月、ついにリニューアル版「しまじろうクラブ」がリリースされた。その後、関係者全員が集う感謝会を開いていただき、各プロジェクトの振り返りも行われた。特に弊社が担当した領域はポジティブな評価を多く頂くことができ、メンバー全員の喜びとなった。

終わってみれば、当初お声がけ頂いた際の(勝手な)想像を大きく超えた、大規模かつ困難なプロジェクトであった。新サービスの立ち上げ、100数十ページに及ぶ既存コンテンツの再構成、また複数社、10名以上のご担当各位との調整や、これを円滑に行うためのドキュメント整備など、こなすべきタスクの量と質も多大なものだった。しかし、クライアントの信頼を頂き、協力会社の方々にもご理解頂いて企画フェーズから深く関わらせてもらえたことで「共に創りあげる」ことの本質的な意味を肌で感じられた貴重な体験になったと思う。

今回のように長期間かけてじっくり取り組むプロジェクトでは、サービスの目指すべき本質と徹底的に向き合うことができる。その中で結果を出していけたことが、各メンバーそれぞれにとって大きな自信となった。前述の通り、公開後のユーザー調査からさらなる改善も行っていき、これからもお客様と共により良いサービスを目指して、全力で臨んでいきたい。

みんなの想いがつまった、使う人の気持ちに寄り添った、デザイン。

「共創」「楽しさ」を目指したワクワクするデザイン。

設計フェーズから意見交換をし、細部まで徹底配慮して作り込んだユーザー体験。

<

まとめ

このプロジェクトで学んだこと

  • お客様とのコラボレーションの重要性。

    お客様からのトップダウンではなく、我々デザイン会社からの一方的な提案でもない。お互いがユーザーにより良い体験を提供するという目的に向かって、有機的にコラボレーションできたことが、プロジェクト全体の成果に繋がったと思う。

    Yuichi Nita , SENIOR DIRECTOR

  • サービスを徹底理解し、あるべき姿を考える。

    サービス全体〜個別機能の性質や目的を、メンバーがきちんと理解することが重要と再認識。そうすることで求められる役割や優先度が自然に整理され、良いものを生み出すための思考/判断のサイクルがスピーディーに循環していた。

    Kazuki Yabe , DIRECTOR

  • 使う人の気持ちに寄り添って、デザインすること。

    「もっとこうしたらいいんじゃないか」を一人でも考えることも大切だが、みんなでひとつのことを考える時間も大切。常に使う人の気持ちを第一に考えたから、1ページごとにみんなの想いがつまったサイトなったと思う。

    Natsumi Ishikawa , DESIGNER

  • 共同作業においては、課題を明確にし全体で共有することが大事。

    何を、誰が、いつまでに、どうする必要があるのか常に共有していたことで、脱線することなく目指す姿に向かうことができたと思う。「協働」の大切さや気をつけるべきポイントを学ぶことができた。

    Marie Matsumura , DEVELOPER

クライアント様からのメッセージ

株式会社ベネッセコーポレーション 牧野様

本質的な考え方で良い改善サイクルでものづくりができた

弊社の企画やデザイン要望などに対して、
もっと使うお客様に喜んでもらえるにはどうしたらよいか、
本質からUIやデザインを考えてくださるので常に良い改善サイクルでものづくりができました。
また、社内外で関係者が多いプロジェクトでしたが、
システム開発会社との連携もとてもスムーズでマルチタスクの進行管理も見事でした。

Contact Us

お仕事の依頼やご相談、弊社ご説明は
こちらからお問い合わせください。
TEL : 03-5774-6809 / 
FAX : 03-5774-6705