デザインレビュー、無限ループしていませんか？楽天カードのデザインプリンシプルを作った話
こんにちは、クリエイティブデザイングループのVideoです。
突然ですが、皆さんのチームにこんな瞬間ありませんか？
レビュー会議で「あれ、この問題、前も見た気がする…」と既視感に襲われる瞬間。毎回異なる指摘が出て、デザインも仕様もなかなか確定せず、修正と差し戻しを繰り返してしまう。
私たちの組織にもありました。何度も、何度も。
このような課題は、人によって品質にばらつきが生じる原因となり、多くのレビューを重ねることでようやく一定の品質に到達するといったスピード感の欠如にもつながってしまいます。
今回は、そんな現場の課題を解決するために策定した「楽天カードデザインプリンシプル」について、制作の過程をお話しします。
なぜつくったのか
楽天では「Rakuten Brand & Rex Guidelines」という楽天グループ全体のUI/UXの指針があり、楽天カードでも独自のデザインシステムを運用しています。しかし、実際の制作現場では「この場合、どのように判断すれば良いのだろうか？」と迷う瞬間が多くありました。
大きな指針と具体的なコンポーネントの間にある判断基準が欠けていたのです。
そこで、現場で頻出するUI/UX課題を解決し、一貫した品質向上を目指すための行動指針として、デザインプリンシプルを策定することにしました。
どうやってつくったのか
外部の専門家にもご協力いただき、以下のステップで進めました。
課題の洗い出し
以下の3つの視点からアプリとWebの総点検を実施しました。
①ヒューリスティック評価
ヒューリスティック評価とは、専門家が既知のユーザビリティ原則（ヒューリスティック）に基づいて、ユーザーインターフェースの問題点を特定する評価手法のことです。
今回はこの手法を使い、ユーザー視点での「体験・操作性」を確認し、実際に使ってみたときの使いづらさや不満を洗い出しました。
②エキスパートレビュー
デザイナー視点から「経験則・作法」を確認し、意匠、一貫性、情緒的な印象表現などをチェックしました。
③リファレンスに基づくレビュー
標準的・汎用的なデザイン体系による「UI原則」に基づき、課題を抽出します。
点検の結果、アプリとWebを合わせて計96件の課題が見つかりました。
私たちはこれらの課題を一つ一つユーザビリティの観点から「重症度」を診断し、何が原因で起きているのか、その根本的な要因を徹底的に特定していきました。
例えば、アプリのホーム画面では、以下のような課題がありました。
情報の優先順位が不明瞭で、ユーザーが迷子になる
タップ領域が小さく、誤操作が起きやすい
一貫性のない表現で、学習コストが高い
2つの視点でデザインプリンシプルを設計
課題を分析する中で、気づいたことがあります。
それは、「今、現場で直面している問題」と「将来的に顕在化する可能性のある問題」、両方に備える必要があるということです。
①課題解決を目的とした指針
今、現場で困っていることへの対応
実際のプロダクトで起きている96件の課題から抽出。「ボタンの配置がバラバラ」「情報の優先順位が不明瞭」など、制作時に抜け漏れが発生しやすいポイントを指針としてまとめました。
→ 実用性重視。今日の制作から使える具体的な指針へ。
②原則に基づいた指針
今後も守り続けるべき本質的な原則
今は顕在化していないが、デザインの基礎として常に考慮すべき原則。
例えば「ユーザーの認知負荷を下げる」「一貫性を保つ」といった普遍的な原則がこれに該当します。
→ 基礎固め。チームのスキルが変わっても揺るがない指針へ。
私たちは、①を重点的に網羅しつつ、②の重要部分もカバーする。
この両輪で、現場で本当に役立つデザインプリンシプルを目指しました。
発散と収束を繰り返す
課題を分類し、グルーピングし、統合し、言語化する。この作業を何度も繰り返しました。
どんなものができたのか
こうして、13個のデザインプリンシプルが完成しました。
それぞれのデザインプリンシプルには、具体的なBefore/After例や、判断に迷った際のチェックポイントを盛り込んでいます。
ただ、ここで一つ悩みました。真面目すぎるガイドラインって誰も読まない。立派だけど誰も開かないドキュメント。そんな未来だけは避けたかった。
そこで、制作のメイン担当者が、ユーモアを交え、親しみやすいガイドラインへと仕立て上げました。思わずクスッと笑ってしまう表現や、誰かに共有したくなるような例が随所に散りばめられています。
無機質で厳格なルールではなく、誰もが親しみを持って活用できる。
そんな「とっつきやすさ」を大切にしました。
抽象的な理想論で終わらせず、今日の制作から活用できる実践的な内容。
そして、読んでいて楽しい内容。この両立こそが、このデザインプリンシプルの特徴です。
例えば、こんな感じです。
つくって終わりじゃない、育てていく
デザインプリンシプルは、プロジェクトがスタートする段階から、デザインを制作するまでの間で、困った際の拠りどころとして定期的に参照されています。
そして、私たちはつくって終わりではなく、全員で「育てて定着化させる」ことを大切にしています。
具体的な取り組み：
Figmaテンプレートへの組み込み
「プリンシプル道場」と称した、デザイナー・ディレクターでの相互レビュー会
紙で印刷して机に置き、いつでもどこでも参照できる環境づくり
これからも、一緒に
デザインプリンシプルができてから、レビューでの議論が建設的になり、判断のスピードも上がってきました。
たとえば、機能改善の議論で「このプリンシプルに照らすと、操作フローをこう変えるべきでは？」といった、共通の指針に基づいた提案ができるようになりました。デザイナーが企画者やディレクターに説明する際も、経験則ではなく「プリンシプル」という共通言語を使うことで、双方が納得感を持って判断できるようになっています。
実際に、デザインプリンシプルをもとにした改善施策も多くなり、数字としての効果も現れています。
プロダクトが進化を続けるように、デザインプリンシプルもチームと一緒に成長させていきたいと考えています。