キュービック・エクスペリエンスデザインセンター・UIデザイナーの木田です。2020年4月にキュービックに新卒入社し、今は3年目になります。

今回は、昨年行われたデザインカンファレンス「Designship」用に作った特設サイトのプロジェクトについてまとめていきたいと思います。このプロジェクトは同期の重田と2人で担当し、それまでぶつかっていたいわゆる「若手デザイナーがぶつかる壁」を乗り越えた貴重な経験になったと思っています。

デザイナーの仕事に慣れ、依頼されたものはつくれるようになってきたけれど、及第点以上のアウトプットを作れない。そんな悩みを抱える同世代のデザイナーにとって少しでも参考になれば幸いです。

私はキュービックのUIデザイナーとして、普段はメディア事業部から依頼された案件やデザイナー自ら起案した施策のUIデザインなどの業務をしています。

入社当初は、なかなか相手の要望に沿うデザインができない状態でしたが、業務経験を積み、日頃の先輩のフィードバックや品評会などのおかげもあって、徐々にデザイン業務に慣れてきたように思います。

しかし、依頼者や上司の「期待に沿うもの」は作れても、「期待を超えるもの」がなかなか作れず、モヤモヤを感じていました。同期の重田も、表面的には違えど本質的には同じ課題を抱えており、若手特有の壁にぶつかっていました。

ある程度デザインはできるようになってきたが、期待を超えるものをなかなかつくれなかった

そんな私たちは、2021年の8月にDesignshipの特設サイトのプロジェクトにアサインされました。

Designshipでは公式ホームページに協賛企業のバナーを掲載することができます。多くの企業は、リンク先としてコーポレートサイトや採用サイトを設定しているのですが、CDO篠原の発案でDesignship用特設サイトを作ることに。新卒入社した私たちだからこそ感じられる会社への愛やキュービックらしさの表現が期待されていたように思います。

「デザイナーが集まるお祭りのようなイベントだから、特設サイトもお祭りのような雰囲気でつくろう」という方針のみが決まっている状態で、私たちに託されました。篠原がPO(プロジェクトオーナー)として入る形ではあったものの、上流からものづくりをする経験がほぼなかった私たちが主導していくのは正直不安でした。

上流から全部自分達主導で進めるプロジェクトへのアサインははじめて

しかし同時に、これだけ自由度の高いプロジェクトは初めてだったのでワクワクもしました。「私たちにしか作れないサイトを作ろう!」そう意気込んでプロジェクトを開始しました。

まずは篠原が打ち出した方針の「お祭り」を分解して考えるところからはじめました。

「お祭り」といっても想像するものはさまざまで、それらを共有し発散させることでより面白いアイデアの創出を目指しました。そのためにまずは特設サイトで出したい「お祭り」の雰囲気のヒントになる言葉を集めてみました。

「お祭り」から連想されるワードを発散

次にその「お祭り」を誰に届けたいかを考え、キュービックを知ってもらいたい相手となるターゲットを絞り込みました。

「ターゲットがこのページで得たい情報はなにか」「キュービックがこのページに訪れた人へ伝えたいことはなにか?」などを決めていき、イメージに落とし込みました。

誰に届けたいか、思いつく限り発散してみる
ターゲットの解像度を上げるために、ペルソナを設定

ページコンテンツの設計ではキュービック独自のビジネスフレームワーク「CUEM(キューム)」を使って、「得たい成果」を設定。「キュービックを知ってもらうこと」そこからさらに「キュービックに興味を持ってもらうために採用ページへ訪問してもらうこと」を得たい成果とし、そこから逆算して、ターゲットが知りたいであろう情報を洗い出し、コンテンツを絞り込んでいきました。

コンテンツを発散し、ざっくりと並べてみる
社内のUXデザイナーやコーポレートメッセージとの一貫性を生むためブランドデザイナーと相談しながら、詳細を詰めていく

ある程度サイトの上流部分が定まってからは、ビジュアルイメージを発散していきます。リサーチをしてムードボードを作り、イメージを制作。先にバナーのビジュアルイメージをFIXさせた後に、サイト全体のデザインを進めていきました。

ムードボードを制作し、実際のサイトに当てはめて確認しながら複数案制作
決まったビジュアルテーマをもとに、ページの演出や挿絵のイラストを制作

上流部分も具体のビジュアルも随時POの篠原と壁打ちしながら進め、各プロセスで篠原からのGOサインが出たら次に進む、といった流れでサイトを作っていきました。

しかし、GOサインがなかなか出ず、とにかくパターンを出しては見せる、ダメだったらまたパターンを新たに出して篠原に見せる、といった形で正直かなり苦戦していました。

各プロセスで、数多くのフィードバックをもらう

作っては篠原のもとに持っていき、を繰り返していくうちに、徐々に「篠原にOKをもらうため」にデザインをしていたことに気づき始めました。

実際に篠原にも「僕のOKをもらうためにやってるの?」と言われ、ハッとしたのを覚えています。「ユーザーに正しく向かって、“自分のこうしたい”をぶつけて」と言われたのです。

そこで「まず自分はどういうものを作りたいのか」に立ち返ることにしました。

この特設サイトがどんな文脈で載っているのか、最初の「得たい成果」のところに戻って、思考をし直しました。そこから、特設サイトを「キュービックのデザインチームで得られるポジティブな感情を表すもの」と再解釈をして、ビジュアルを新たに作り直します。

この特設ページで表現すべきことの答えは、POの篠原でもなく私自身でもなく「ユーザーの中にある」という以前から業務で言われている言葉を思い出しました。

ユーザー起点に立ち返り、とことん考え直すことにしました。チームメンバーに相談したところ、「実際にユーザーに聞いてみたら?」と助言をもらい、急遽社外のデザイナーにアンケートを実施。

複数立てた仮説のうち、どれが最適なものなのか、ターゲットに当たるユーザーの声を聞いてみることにしました。

立て直した仮説の確度を上げるために、スピーディーにアンケートを実施
プロセスの最初に立ち返って「本来自分はどういうサイトをつくりたいか」という主張を育てていく

ビジュアルも、壁打ちを繰り返していくうちに正直「こういう点を押さえていたら篠原はOKを出すだろう」という観点も見えてきます。もちろんその観点を頭から消し去ることはできないとしても、あくまで「ユーザーはこう、だから自分はこうしたい」という主張を乗せたデザインを心がけました。

ユーザー起点で考えた自分の「こうしたい」をデザインに反映させていく

なぜこのデザインにしたか、を言語化し、強い主張として持てるようになってから、スムーズに前進したように思います。

そうして完成したサイトがこちら。

サイト設計時に、Designshipの期間中に訪れたユーザー数(UU数)の目標を設定していたのですが、達成とはいかないものの目標の90%を記録することができました。

また、社内でも「デザインチームってこんなことやってるんだ」「デザインチームについての詳細情報がわかるページがなかったからありがたい」と好評でした。

社内外で反響が得られる

このプロジェクト以降、「言われた通りのデザイン」から脱することが少しずつできているように思います。特設サイトと同じように、どんな小さな依頼でも、ユーザーを起点とした自分の主張を持つことが徐々にできるようになってきました。

主張を作るためには、その依頼の文脈を理解しにいくことが大切です。依頼者と同じくらいの解像度で文脈を理解できていれば、相手の期待を超える提案・アウトプットを出せるようになると思っています。

依頼されたら要件やFBの内容に飛び付かず、インタビューなどで情報を収集・分解しながらインサイトをまとめ、POの意図と自分の解釈をすり合わせる
ユーザーはどんなテイストが好きか、複数案検討してブラッシュアップ
1つひとつのデザインに主張を持つことで、よりよいアウトプットが出せるように

「言われたものをつくる」ではなく、「ユーザーをみて、自分の頭で考えたものをつくる」。それは、自分の足や耳や目を存分に使ってユーザーに近づき、その人がどんな課題や期待を持っているのかを正しく知らないとできないこと。想像力をめいっぱいはたらかせて、創造する。そうやって自分で答えを出していくことの大切さを学びました。デザイナーとして1つレベルアップをしたように思います。

これからも、人の心を動かすようなものをどんどんつくっていきたいです。

このデザイン組織をもっと知る