こんにちはジンジャーのプロダクトデザイナーの野口です！
今回はgemsを活用してデザインプロセス効率化に挑戦したことを記事にしてみます。
デザインの質向上とデザインレビュー時間の削減を同時に実現！
一人でデザインに向き合っていると視野が狭くなり、
修正漏れや別動線の検討などの発見が遅れてしまうことがあります。
そのため、デザインプロセスにおいて、
他者からのフィードバックは思考の整理や新しい視点の発見につながり、
デザインのブラッシュアップに不可欠な要素です！
しかし、お互いの集中した作業時間を確保するため、
打ち合わせの時間は可能な限り削減したいという課題がありました。
そこで、、、
「UIUXレビューGem」を作成しました🎉
このGemでは、「コンポーネントの適切な使用方法」や「UX観点でベストな動線を設計できているか」についてAIと壁打ちを行い1回目のデザインレビューの質を最大化することを目的としています！
レビューGemのカスタム設定でAIを「UIUXの専門家」にする
AIに質の高いレビューをさせるため、カスタム指示では以下の3つの要素を定義して、
component情報を共有しました。
【役割設定】
・デザインシステムのコンポーネント管理責任者
・UIUXの専門家
【レビュー視点】
・コンポーネントが提供したルールに厳密に従っているか。
・ユーザー視点から、アクセシビリティ 、使いやすさ、情報の明確性の3点に基づいた洞察。
【レビュー出力形式】
・概要と総合評価・要改善点（Component & Principle Breakdown）
・補足的な提案（Good-to-Haves）
依頼プロンプトでは「AIが本当に必要な情報」だけを渡す
レビューを依頼する際、AIの能力を最大限に引き出すため
以下の4つの要素を具体的に記述することをルール化しました。
1.レビュー対象の目的とゴール
2.利用コンポーネントと焦点
3.コンポーネントルールに意図的に沿っていない箇所の共有
4.特にレビューしてもらいたい箇所の指定
Beforeデザインに対してAIの指摘
デザイン
AIからのフィードバック
改善点
Card内の情報密度が高く、ユーザーが情報を素早く察知できない。
通知の「タイトル/要約」「発生時間」「カテゴリアイコン/バッジ」といった情報が、
同じようなフォントサイズ、ウェイト、色の強さで並んでおりユーザーの視線が定まりません。
通知のタイトルを最も目立つようにし、時間やアイコンといったメタ情報はそれを補足する情報として控えめにする必要があります。
※全文は長いので一部抜粋
AIから上記のようにフィードバックをもらいました！
なるほどね...🤔 修正します！
Afterデザインに対してのAIの指摘
デザイン
「Card内の情報密度が高くユーザーが情報を素早く察知できない」という指摘をもらったので、カードの中の情報に優先順位をつけて色と表示位置を調整しました。
AIからのフィードバック
通知の認識と内容の把握の項目が改善しました！
また、追加で下記のような改善提案もしてくれました💡
改善点
通知のタイトルと本文のまとまりを一つのグループとして認識できるように、日付・時間の要素をCardの右上隅などにより視覚的に分離した場所に配置し直すことで、情報のスキャン効率がさらに向上します。
提案 1
通知の「内容把握」とは直接関係しませんが、この画面の利用効率を高めるためにリストの上部、またはナビゲーションバーの隅に「すべて既読にする」というセカンダリアクションを明確に表示することを検討してください。ユーザーは通知を1つずつ開かずに、リストをクリアするという目的を効率的に達成できます。
提案 2
Card内の左右の余白が、画面端の余白（マージン）と一貫しているか確認してください。通知の本文が長くなった場合に、リスト全体の視覚的なまとまりを維持するため、デザインシステムで定義された統一されたスペーシングスケールを厳密に適用することを推奨します。
※全文は長いので一部抜粋
まとめ
「UIUXレビューGem」の導入により、
「初回レビュー時のデザインの質向上」と「レビュー時間削減」という
相反する目標を同時に達成できました 👏👏👏
また、AIとの壁打ちをデザインプロセスの初期に組み込むことで、
一人では気づきにくかった視点や潜在的な課題を、
打ち合わせ前にデザインに落とし込み、検討することが可能になりました！
今後も私たちは、AIを活用した新しいレビュー文化を推進し、
よりクリエイティブで効率的なデザイン組織を目指していきます！
皆さんもぜひGems活用してみてください 🙌
Discussion