これまでの「らしさ」を引き継ぎ、新しい“仕掛け”と両立させる

CULTIBASEの立ち上げは、全部で3フェーズあるWDAのリニューアルプロジェクトでもあるかと思います。新しいメディアの立ち上げが既存サービスのリニューアルを兼ねているという、やや複雑な構造のプロジェクトでもあると思うのですが、瀧さんはどのような経緯で取り組んでいかれたのでしょうか。

瀧まず、この夏ローンチした「CULTIBASE」は、WDAリニューアルプロジェクトの第1フェーズにあたります。 改めて全体像を説明すると、第1フェーズでは会員制のメディアCULTIBASEを、第2フェーズでは既存のWDAを統合したオンラインプログラムである「CULTIBASE Lab」を、第3フェーズでは集中講座プログラムである「CULTIBASE School」を立ち上げるという段階的なリニューアルとなっています。

瀧私がミミクリにジョインしたのが2月で、それと同時にWDAのリニューアルプロジェクトがスタートした形でした。WDAは以前から知っていたので、これまで培われてきたサービスの特色を大事にするためにも、外部から見た第三者的な視点の意見も出していこうと考えたんです。リニューアルにあたり、大事にしていたことは2つありました。1つ目は、これまで運営してきたWDAならではの良さや「らしさ」を生かし、引き継いでいくこと。2つ目は、新しくやりたいことや仕掛けたいことを、実際のユーザーの方にも受け入れてもらえるような仕組みとして実現することです。サービスを運営する側の視点と、ユーザーのニーズや学習スタイルの視点、その両方をバランスよく考えて実現していくことを目指しました。

プロジェクトをスタートするにあたって、瀧さんが初めに取り組んだのはどのようなことだったのでしょうか。

瀧3つのフェーズの全体像を踏まえながら、まずはWDAや代表的なユーザー像の理解を深めていくことから始めました。WDAの運用を担うメンバーに、コアなユーザーがWDAをどんなふうに活用しているのかを聞きながら、仮説としてのペルソナを作ってみたんです。その上で、実際のWDA会員さんをはじめとする、ターゲットユーザーに近しい方にインタビューを行い理解を深めた後、最終的には2パターンのペルソナを作りました。これまでWDAを活用していた、引き続き大事にしていきたい既存のユーザーの方と、これから新しくCULTIBASEのユーザーになってほしい新規のユーザーの方、両方のペルソナを設定して、サービスづくりを進めていったんです。

コンセプトとして「組織イノベーションの知を耕す学びの場」という言葉を掲げていますね。これはどのように言語化されていったのでしょうか。

瀧まず、サービスブループリント（顧客の理想的な体験の流れと、それに沿うサービス提供者のアクションを可視化したダイアグラム）を作りました。ユーザーがメディアを知り会員になり、学びがステップアップされていく流れの理想像を可視化したんです。それから全3フェーズのコンセプトをそれぞれ言語化し、どのような“場”にしていくのかを決めていきました。

1ユーザーとしても、CULTIBASEは心地の良い空間だなと感じています。言語化されたコンセプトと視覚化されたビジュアルが、矛盾なく接合されているようなイメージを受けました。

吉野ビジュアライズの段階では、コンセプトの定義がほとんど定まっている状態でした。体制としては、僕がUIデザインと開発・ビジュアルディレクションを、VI開発は同じくDONGURIのアートディレクター 吉田直記が担当しています。

瀧そうですね。コンセプトと合わせて、ユーザーに持ってもらいたい印象についても言語化して、それも合わせて共有したんです。ちょっと、実際に使用していたMiro（オンラインホワイトボードツール）のページを一部お見せした方がいいかもしれないですね。

これは……！ すごい(笑)。 情報密度が高くて、ちょっと圧倒されてします。

瀧新型コロナウイルスの影響で、サービスデザインの初期段階ですべてオンラインに切り替える必要があったんです。情報が散らばって共有しづらくなるだろうと考えて、開発メンバーに「とりあえずここを見てね」っていう場所を用意しておくのがいいかなと。

ミミクリもDONGURIも、2020年3月からリモートワークに切り替えていましたね。

瀧そうなんです。なので、CULTIBASEのコンセプトや方針については、すべてここに集約されています。例えば、この中には先ほどお話ししたサービスブループリントだけでなく、日本カラーデザイン研究所が開発した「言語イメージスケール」などを活用しながら出していったコンセプトキーワードなども含まれています。このようなキーワード出しなどをミミクリ主導で行った後、DONGURIに渡していくような流れでした。

吉野実はそれ以前の初期段階から、自分の中でイメージを掴むための仮説立ても並行して行っていたんです。勝手に進めていたものだったのですが、瀧さんからMiroで共有されたイメージやキーワードはその仮説とほとんど一致するものだったので、「同じでよかったな」と安心もしました。

吉野さんの方では、どのようなイメージを持っていたのでしょうか？

吉野やはり「ラウンジ」とか「カフェ」とか、“のんびりした感じ”はイメージしていました。色味のイメージも、現在の方向性とほとんど一致していたんですよ。CULTIBASEの全体コンセプトは、日常にあるオープンなスペースで、人が自由に出入りできる場所です。学ぶことができて、さらに実践もできる。コンセプトもイメージも細やかに言語化されていたので、お互いのイメージを共有しあいながら、さらにブラッシュアップを重ねていった感じですね。

「どうあるべきか」の視点から、要素を大胆に削ぎ落とす

CULTIBASEのUI設計やVI開発は、共有されたコンセプトをもとに、どのように進めていったのでしょうか。

吉野サービスブループリントと合わせてユーザーの導線や機能の要件定義も共有いただいたので、最初はUIから着手し始めました。VIは色味やトーンのリサーチを行っておき、後半になってから一気に固めていくような流れでしたね。UIについては基本的にシンプルに、コンテンツが読みやすいようにっていうのは意識しながら設計しました。かつ、今のトレンド感も意識しながら、という感じですね。いろんなサービスとかメディアに会員登録して、UIベースの画像ザッピングをして、そのコンポーネントとか気づきみたいなのを一つひとつ拾い上げながら落とし込んでいくような流れでした。でも、実は最初ちょっと試行錯誤があったんですよ。

とても洗練されたUIなので、「試行錯誤」の過程がなんだか意外に思えます。

吉野というのも僕自身、普段はブランドサイトやコーポレートサイトを作ることが多いので、サービス寄りのUIを設計するのはほとんど初めてだったんです。ブランドサイトはブランディングやコンバージョンを考えながら、ストーリーラインに沿ってページ構成や導線設計を行うことが多いので、ページを行ったり来たりするメディアやサービスとは設計の目的が結構違うんですね。将来的にはアプリ化する可能性もあるメディアなので、その展開も踏まえると、アプリライクなUIにしたほうが良いのかな？とか。いろいろ試行錯誤を重ねていたんです。UIのレビューは主に瀧さんとheyの松本さんに担当いただいたのですが、おふたりからプロトタイプへのフィードバックをいただいて、どんどん要素を削っていって、最終的に今のシンプルな形に行き着くことができたんです。

松本さんはUIデザインのアドバイザーとして参画されていますが、どのような経緯だったのでしょうか。

松本もともと交流があったミナベさん（DONGURI 代表）から、ある日「WDAがリニューアルするんですけど、プロトタイプのレビューしてもらえませんか？」って連絡をいただいたんです。

松本僕には、2つの役割が求められていたかなと思っていて。先ほど吉野さんもおっしゃっていた、サービスデザインの具体的なUIのデザインの細かい部分のレビューと、あとは単純に客観的な立場で、「1ユーザーとしてどういうサービスが欲しいか？」という率直な意見が欲しいっていう2つの役割がクロスしたところで、僕に声をかけていただいたのかなと思います。

そうして、プロトタイプのレビューを行なっていかれたんですね。

松本そうです。参画が決まって最初に瀧さんのMiroを見たとき、僕も「うわっ、この情報量はすごいな」と驚いて、圧倒されたりして(笑)。プロトタイプとはいえ、結構出来上がってきている段階でお声がけいただいたので、どこから関わるか？というすり合わせから始めました。その段階からできる範囲で、ビジュアルレイヤーの部分に注力してよりよいものに改善していきましょうっていう方針で、週次でどんどんレビューを回していきましたね。

吉野松本さんのレビューで、あれこれと続いていた試行錯誤がすっきりとまとまっていったんです。例えばスマートフォン閲覧時のボタン設計も、僕が出していた案はもっとアプリライクで、画面の中に複数のボタンがあるものだったんですね。それに対して「記事が主体なので、画面の中の情報量を減らすためにもハンバーガーアイコンの中に内包してしまう方がいい」というフィードバックをいただいて、要素を大胆に削っていくことができたんです。僕自身、普段ブランドサイト作っているときにはハンバーガーアイコンの中に内包するんですけど、スマートフォンでサービスを使う場面を考えると「やっぱりボタンが見えていた方がいいのかな」とか、考えすぎて少し判断しにくくなっていたところもあって。

松本記事コンテンツが主のメディアではあるので、第一印象で「本当に必要だろうか？」と感じた要素について、吉野さんと会話しながら削って整理していくのをメインで進めていきました。情報の骨組みを組み替えるような感じですね。

吉野リサーチの段階で既存サービスをたくさんザッピングしていたので、それを参考にしすぎてしまったんですね。松本さんに客観的なレビューをいただいたお陰で、改めて本来の目的に立ち返り、CULTIBASEのUIがどうあるべきかを考えることができたんです。ユーザーインタビューも行いながら、終盤でそうした細かい微調整を一気に進めていきましたね。

プロトタイプ段階でのユーザーインタビューはどのように行われたのでしょうか？

瀧実際のWDA会員さんにUIを触っていただいて、使い勝手などについてフィードバックをいただいたんです。最終調整の段階でサムネイル付きの記事を複数入稿しておいて、閲覧のしやすさや記事間の移動のしやすさなどを確認していただいた感じですね。

吉野幸いなことにクリティカルなフィードバックは無く、文字のサイズやページネーションについてなど細かい点についてのご意見をいただいた感じでしたね。一例を挙げると、当初は記事のページを分けて2ページ目以降は会員登録が必要になるという設計だったんですけど、「1ページで見れる方がいい」というフィードバックをいただいて、仕様を現在の形に変更しました。

「両端なものをいかに美しく、バランスよく成立させるか」

CULTIBASEはビジュアルや世界観もとても作り込まれていて、SNSでもサムネイルを楽しみにする声をよく見かけます。VIについては、どのように開発を進められたのでしょうか。

吉野全体のプロセスとしては、僕が最初に設定したビジュアルのトーンやカラーパレットなどをもとに、ロゴマークやビジュアルなどのVIをDONGURIの吉田が開発していくという流れでした。「CULTIBASE」のネーミングと「組織イノベーションの知を耕す。」というキャッチコピーはDONGURIのコピーライター 大久保潤也が担当しているのですが、それが決まったのが6月頃なので、ロゴマークを含めたVI開発はそのあたりの時期から詰めていきましたね。

「組織イノベーションの知を耕す学びの場」であるCULTIBASEは、地層をビジュアルのモチーフにされていますよね。

吉野これについては、僕の方で明確に「地層」という言語化をしていたわけではなかったんです。ただ、初期段階でカラーパレットやコンセプトのイメージ、色の組み合わせのザッピングをしたときに、土のイメージも含まれていたんですね。それをそのまま吉田に渡して、自由に発想してもらって「地層」というモチーフに辿り着いたんです。

CULTIBASEのシンボルマークについても、「土壌」「ハート」「新芽」「畑（地図記号）」など、VIの核となる複数の意味合いが含まれるダイナミックアイデンティティ（DI・柔軟性のある可変的な動的ロゴマーク）になっています。このシンボルマークは、どのように生まれたのでしょうか。

吉野当初から、ダイナミックアイデンティティの考え方を取り入れたいなとは考えていたんです。「組織イノベーションの知を耕す」というコンセプトなので、シンボルマーク自体で多様性や柔軟性を体現するためにも、いろいろな意味合いを表す自由度のあるものにしたいな、と。その意図を吉田が捉えてくれて、現在のロゴマークの形に落とし込まれた感じですね。

瀧ロゴマークについては複数の案があったんですけど、この案が第一の案として出されていて、すごくしっくりきたんです。他と比べても明らかに作り込まれていたので、CULTIBASEがユーザーにとってどのような空間になるのか、イメージも伝わりやすくて。

吉野他のパターンの案では、ロゴマークに使用するフォントもバリエーションがありましたよね。しっくりくるかこないか、というフィードバックを明確にもらえたので、すごく進めやすかったです。

ロゴタイプも、CULTIBASEの世界観を象徴するものになっていますよね。現在のフォントの他には、どのような案があったのでしょうか。

吉野アカデミックな文脈として海外の大学でよく使われる太めのサンセリフ体の案と、反対に細めのセリフ体の案も出したりはしました。ただ、サンセリフ体では少し重たすぎたり、セリフ体では「洗練された」印象も抱かれやすく、ユーザーにとっては敷居が高く感じられる面もあるんですね。日常にあるオープンな学び場、というコンセプトを表現するためにも、アカデミックな文脈に寄りすぎないようにする必要がありました。ミミ＆グリ（横断経営するミミクリデザインとDONGURIの通称）の根底には「両端なものをいかに美しく、バランスよく成立させるか」っていう思想があると思っているので、そうした検討を重ねる中で、現在のちょうどいいフォントに落ち着いた形でしたね。サンセリフ体がベースなんだけど、端にちょっとセリフが付いていたり。大文字のUが、小文字のuの形をしていたり。洗練されすぎているわけではなく、美しいんだけども一癖ある、みたいな。3案出して、瀧さんと対話する中でも「これが一番しっくりくる」という一致感がすごくあって、「やっぱりこれでいいんだ」と確信を持てましたね。

リニューアルのサービスデザインの過程に触れられる、レアな“過渡期”

CULTIBASEは、ビジュアルやサムネイルが作り込まれていることも特徴的ですよね。サムネイルが記事の内容を象徴するアートワークになっていて、日々の更新が楽しみになっています。

吉野サムネイルは週のうち1記事はVIの世界観を踏襲するようにしているのですが、他の記事については意図的にバリエーションを出そうとしています。写真も使うようにしたり、レイアウトや色の使い方などをいろいろ変えて「どこまでやるとCULTIBASEらしさが破綻するのか？」みたいなところを、定性的なんですけど色々と検証している感じですね。これから外部のデザイナーの方にもサムネイル制作を依頼していきたいと考えているので、あらかじめ振り幅を出しておくことで、今後の運用レギュレーションを定めることにも繋がっていけばいいなと。サムネイルのビジュアルについても、松本さんからのフィードアップでブラッシュアップされたんですよ。動物の案を出していただいたのって、松本さんでしたよね。

松本そうですね。基本的にはUIレベルでのフィードバックをスコープとしていたんですけど、ビジュアルの部分で気付いたところもお伝えしたりしていました。グラフィックはコアにある「耕す」というコンセプトから構成されているんですけど、初期は、人と木と植物しかいない状態だったんです。動物もいた方がいいかもしれないと思いつき、家にある絵本のイラストなどを参考資料としてお見せしたんです。

吉野「耕される土壌」がモチーフなので、キャラクター作るとしたらモグラかな？ みたいな話はしていたんですけど、確かに動物がいた方が表現の振り幅も広がるなと。松本さんから絵本のイラストなどを参考資料として共有いただいて、吉田にキツネやリスなどを追加で増やしてもらったんです。

トップページのキービジュアルとして固定表示される注目記事については、PCとスマートフォンで異なるサムネイルを作り分けていますよね。スマートフォンで見たときにも世界観や可読性が保たれていて、その細やかさに驚きました。

吉野そうですね。少し手間はかかるのですが、注目記事は記事詳細ページ用とPCトップページ用とスマートフォンのトップページ用で、3枚の画像を制作しています。ビジネスパーソンはスマートフォンで記事を読む場面も多いのではないかと思い、PCとSPで変わらない体験が設計できるようにと考えていたんです。実際にはコロナ禍の影響もありPCで読む方も多くなっていますが、デバイスを問わずどこでも手軽に知識を得られるオープンな空間づくりを今後も続けたいなと思います。

これから第2フェーズに向かっていくところと思いますが、最後に、現在取り組まれていることを教えてください。

吉野CULTIBASEは「知識」を届ける場所なので、それを象徴する意味でもサイト全体で“本を選ぶ”ような体験ができるUIにしたい、というのは考えています。その一端として、特集コンテンツは本の表紙のモチーフとしたデザインになっているんですよ。「ライブラリ」のような体験を実現していくためにも、これからのアップデートを考えていきたいですね。

瀧私は今、第2フェーズである「CULTIBASE Lab」で実現したい機能の洗い出しなどを進めているところです。「CULTIBASE Lab」での学習スタイルの理想像ってどんなものだろう？ どのような場所であることがよいのだろう？ というところを整理しながら、画面やUIのデザインに少しずつ入っていきたいなという段階ですね。今はちょうど、WDAからCULTIBASEに徐々に移行する過渡期でもあるんですよ。リニューアルのサービスデザインの過程に触れることのできるレアなタイミングでもあるので、サービスデザインに興味がある方であれば、その観点でも楽しんでいただけるのではないかなと思います。個人やチーム、そして組織としての創造性が耕されていく場所として、これからも多くの方にCULTIBASEを訪れていただきたいですね。