こんにちは。デザインチームリーダーの小住です。
ノヴィータでは全社的にOKRを取り入れており、デザインチームでは「デザイナー全員がUI/UXの設計ができること」をObjectiveに掲げています。
UI/UXはWeb制作の界隈でも非常に注目を集めている分野です。ノヴィータのデザインチームには経験を積んだベテランのデザイナーが多く、そうしたメンバーの活躍で十分な品質の制作ができていました。ですがチームには経験の浅いメンバーもいます。もちろん、経験を積んで成長して欲しいと思いながらも、要求の高い案件を経験してもらう体制が整っておらず、ベテランに頼ってしまっていた状況に危機感も少なからずありました。
それを打破すべく、デザインチームでは「UI/UX設計」をチームのOKRとして取り組み、誰がアサインされてもチーム品質として一定の制作ができることを目標にしました。
今回はデザイナー全員で「チーム品質」を実現するため、UI/UX設計ができるようにフローを整備したこと、そのフローを自社コーポレートサイトのリニューアルプロジェクトで実践して得られたものについてお伝えしていきます。制作の段階でデザイナーが関与できるUI/UXの領域にご興味ある方はぜひご一読ください！
【課題】フローのない状態では、設計しようにも「経験」に左右される
ノヴィータのOKRは、全社、部、チーム、個人でそれぞれ策定しています。デザインチームは新しいサービスの開発や、受注単価・利益率を上げる高付加価値の商材へシフトするために「UI/UX実績を増やす」ことを目標にしていました。
この目標を達成するには、成果物の品質を属人的なものからチーム品質としてデザイナー全員が体現できる必要があります。そのためにUI/UX設計をチームで共通認識化するため、工程を整備し定義する必要性を感じたのです。
一般的に言われる「UX＝ユーザーエクスペリエンス」はビジネスやサービス全体の根底に関わるものであり、制作の局面においてデザイナーだけで関与できるものではありません。ですが今回整理し、情報設計や画面設計は、Web上におけるユーザー体験を左右する重要な工程であり、デザイナーが携わることのできるUXの領域だとわかりました。
「UI/UX設計とは」を整理していく過程で、クリエイティブとして関われるUXの設計は「情報設計」や「画面設計」、UIの設計は「デザイン設計」と強く紐づいていることに改めて気付かされました。
デザイナーがこれらを適切に設計することで、ユーザー体験を向上させることができます。
しかしチーム内の現実として、ベテランのデザイナーは「経験」を元に設計を行っているという状況がありました。フローが整備されておらず再現性がないため、個人の経験値に頼っており、デザイナー全員で一定の品質を生み出すことが難しいという課題も見えてきました。
【課題】設計を行おうとしていたがうまくいかなかった過去
デザインチームでは、過去、これらの設計のために「VI設計書」というドキュメントを作成していました。しかしフォーマットにいくつか不便があったためか効用が実感できず、案件によっては作成自体もできていませんでした。
当時のVI設計書で感じていた課題はこのようなものでした。
- クライアント様と認識の相違が発生する可能性があった⇒抽象と具体の話が織り交ぜられていたため
- デザイナー側が混乱しやすい内容⇒具体が掲出されているため、うまく使えないと形骸化しやすい
- 上記の状況である割に、作成に手間が掛かっていた⇒あったほうがよいということはわかっていても、どのように活用すべきかわからなかった
活用できるよう共通認識化されておらず、さらに内容の形骸化などでVI設計書は、自主的に活用されるものではなくなっていました。
そのため実際のデザイン業務ではVI設計書を使用せず、これまでの経験を元に設計を行うのが常態化していました。要件から「こういう課題感や要望があるからこうしよう」という内容を汲み取り、頭の中だけで設計してデザインの制作をしていたのです。
それでもベテランのデザイナーはある程度の品質のアウトプットができていたのですが、若手デザイナーはどうしても要求を満たすデザインができない状況がありました。
結果的に「要求の高い案件に若手をそもそもアサインできない」悪循環に陥ってしまい、経験を積んでもらう機会自体が遠のいてしまっていたのです。こうした事態が発生するようになり、設計段階への課題感が強まっていきました。
【転機】「設計」をフロー化したきっかけと見込める効果
こうした問題を認識していた中、上司との1on1でこの課題を共有する機会がありました。そこで「何が」「どのように」あれば良かったのか整理してみると良いと助言をもらいました。
制作の進め方を見直してみると、デザインの設計を経験に大きく頼っていたことに気が付きました。経験値のように個人差があるものをベースにしようとしていたせいで、要件が複雑化した際に、経験の浅いデザイナーが対応できなくなっていたのです。
対策として考えたのが、標準となるフローの整備とそのフローに基づいた工程ごとの成果物を用意することでした。標準フローと成果物を定義していれば、どんな案件でも、経験の少ないデザイナーのアサインでも、一定の品質を保てる再現性を持たせられると考えてのことです。
フローの整備では、情報設計からデザイン設計までの工程を洗い出しました。自分の経験を基本に関連記事を参考にしたり、生成AIを利用したりしてプロセスの粒度を細かくしていきました。
フローは大きく分けて「情報設計」「画面設計」「デザイン設計」の段階に分けられます。そのフェーズごとに具体的な作業と目的、インプット、アウトプットまでを明確にして、一つの流れとしてまとめました。
画像はフェーズごとに必要な情報をまとめたフロー図です。（完成版ではなく日々アップデートしています）
こうしてフロー化に必要な項目を洗い出したことで、制作領域のUXの核は「情報設計」「画面設計」フェーズ、UIの核が「デザイン設計」にあることを再認識したのです。
【実践】設計したフローを自社コーポレートサイトリニューアルでトライ
現在はフローを経た成果物を作り上げる段階にあります。アウトプットの場となったのは、ノヴィータのコーポレートサイトのリニューアルプロジェクトです。
ノヴィータでは今年秋の公開を目標に、コーポレートサイトのリニューアルが進行しています。デザイナーとしては、今回整備したフローを実践して成果物とするのに格好の機会でした。
プロジェクトはすでに進行していたため、実践できたのは「デザイン設計」フェーズからとなりましたが、実際にフローに従ってコーポレートサイトをデザインしてみました。その結果、これまで経験をベースに自分の頭の中でふわっと行っていた工程を言語化でき、確実にデザインを進められている実感がありました。
またフローの運用観点でも、案件ごとに要件や要求の背景が異なるため、必ずしも流れ通りに工程を踏むのではなく、カスタマイズも必要そうだという発見もありました。
コーポレートサイトのデザイン制作を通して得られた実感や使用感から、今回整備したフローはデザインの品質を安定化させて、デザイナー誰もが「チーム品質」で制作するのに有用だと感じています。
個人の単位で考えると、現状ある程度できていることを言語化したり整備し直すのは面倒で負荷もかかることでした。ですがチームとして課題を感じている以上、手間をかけてもアップデートを試みるのは大切なことです。
今回の取り組みは未来への投資としてリターンを期待するには十分なものが出来上がったと思っています。
ノヴィータのサービスにご興味がございましたらお問い合わせください！
コーポレートサイトもぜひご覧ください。
仲間を求めています！ 募集中の職種はこちらから（Wantedly）
