AIにデザインを見てもらって「で、次は？」となったので、レビュー工程をまるごと案内するツールを作りました！

こんにちは！　AYUNEです！
最近、AIにデザイン画像を見せて、レビューしてもらう実験をしていました。
「近接・整列・反復・コントラスト」の4原則をもとに見てもらうと、これが思っていた以上に具体的！
「なんとなく見づらい」ではなく、「この情報とこの情報が離れているから、関係性が伝わりにくい」と、理由まで説明してくれます。
でも、実際に使い込んでみると、こんな問題が出てきました。

デザインレビューは、ひとつのプロンプトでは終わらない

よく考えると、診断と修正では、AIに頼みたい仕事がまったく違うんですよね。
最初は、デザインの目的を読み取り、問題と理由を言葉にしてほしい。
次は、その内容を元画像の上に赤や矢印で書き込んだ「赤字校正紙」にしてほしい。
さらに次は、元画像・レビュー・校正紙を全部踏まえて、赤字の残っていない完成イメージを作ってほしい。
完成案が元画像とほとんど変わっていなければ、今度は情報設計から作り直してほしい。
これを全部ひとつの巨大なプロンプトへ詰め込むのではなく、その工程に合ったプロンプトを、そのタイミングで使えるようにしたい！
そんな発想から作ったのが、Design Review Navigatorです。

診断から完成案まで、順番にポチポチ進めます

Design Review Navigatorは、ChatGPTやGeminiなどの外部AIと一緒にデザインレビューを進めるための、ブラウザツールです。

流れはこんな感じです。

1. デザイン4原則で診断する

2. レビューを赤字校正紙にする

3. 修正後の完成イメージを作る

4. 変化が弱ければ、再構築を依頼する

各ステップに専用プロンプトとコピーボタンがあります。

前の工程で作ったレビューや画像を、次の工程へバトンタッチしていく仕組みです。最後には、元画像から完成案までを横または縦に並べて比較できます。
APIキーも登録も必要ありません。HTMLファイルをブラウザで開けば、そのまま使えます。

例えば、こういうチラシ原稿があったとします（例として厚労省のチラシをお借りしました）

STEP 1　診断プロンプトボタンを押してコピーします。

本ツールからは一旦離れて、外部のAI（今回はchatGPT）でプロンプトを入力して送信。回答が返ってきたら、そのままそのチャットに続けて、

STEP 2　赤字校正紙プロンプトをコピーして、チャットに貼り付けます。

その回答で、赤字校正紙の画像が出てくるはずです。

さらに続けて、チャット欄に、
STEP 3　完成イメージ用プロンプトをコピーして貼り付けます。
その際、chatGPTやGeminiでは「画像を生成」モードにしてくださいね！

そこで完成イメージの画像が出てくればOKです。
ただ、たまに修正指示が守られていなかったり、版型そのものが変わってしまったりすることがあります（この辺りの精度はもっと研究します！）

縦長のチラシだったのに、なぜか横長のスライドみたいになった・・・。
というときは、もう一度、そのチャットに続けて、
STEP 4　再構築プロンプトをコピーして貼り付けます。

で、ようやく完成イメージが出てきました。
STEP 1での修正内容が反映されているか、確認してみましょう。

最終的に並べて比較してみることができます。

「修正した感」って、意外と大事でした

テスト中、AIが「62点です。情報設計に大きな問題があります」と評価したのに、完成案が元画像とほとんど変わっていないことがありました。
いやいや、それで本当に62点から改善したの……？と思いますよね（笑）。
もちろん、派手に変えれば正解という話ではありません。
でも、大きな問題を指摘したなら、完成案にもそれに見合った変化が必要です。
そこで、問題の深さに合わせて「修正強度」を判断し、必要なら色や余白の微調整だけではなく、情報設計から組み直す考え方をプロンプトへ入れました。
Before／Afterを見たクライアントにも、「なぜ変えたのか」「何が良くなったのか」が伝わる。そこまで含めて、デザインレビューだと思っています。

画像はブラウザ内だけ。でも、ここは必ず確認してください！

仕事の資料を扱うなら、セキュリティ面も気になりますよね。
Design Review Navigatorへ登録した画像や進捗データは、このツールから外部サーバーへ送信されません。使っている端末のブラウザ内だけに保存されます。
ツール内にAIのAPIキーや独自の解析サーバーはなく、私が登録画像を受け取る仕組みもありません。
ただし、ここには大事な注意点があります。

ツール上で画像をアップロードしても外部へは送信されませんが、レビューのために外部AIであるChatGPT、Geminiなどへ画像や文章を添付すると、その時点でデータは外部AIサービスへ送信されます。

業務で使う場合は、利用するAIの規約、データ利用設定、契約プラン、そして会社や取引先のセキュリティルールを必ず確認してください。機密情報、個人情報、顧客名、未公開の数値などは、必要に応じてマスキングしましょう。
共有端末を使った場合は、作業後にツールの「データを消去」を押すこともお忘れなく！

会社で使ってもいい（業務内容を含んだ資料をアップしてもいい）AIサービスが決まっている場合があると思いますので、その場合は問題ないと思われますが、必ず会社のルールを確認してください。

ツール内で管理している間はブラウザ内で完結。外部AIへ渡すときは、そのAIと会社のルールを確認する。この線引きを守って使っていただければと思います。

AIが作る時代だからこそ、「なぜ直すのか」を残したい

AIがデザイン制作の中へどんどん入ってくると、作業は確実に速くなります。
その一方で、少し気になっていることがあります。
これまでジュニアデザイナーは、先輩から修正指示を受けながら、「なぜここを動かすのか」「なぜこの情報をまとめるのか」を少しずつ学んできました。
でも、AIが一瞬で完成案を出してしまうと、その途中にあったはずの考え方が見えなくなるかもしれません。
完成画像だけを受け取って「きれいになった！」で終わるのではなく、ひとつひとつの修正箇所を人間が確認する。そして、どうしてその修正が必要なのかまで理解する。
Design Review Navigatorが、そんな学びを残すための小さな助けにもなればいいな、と思っています。
AIに仕事を任せながら、デザインの考え方やレビューのノウハウは、ちゃんと人から人へつないでいく。そのための道具として使ってもらえたら、とてもうれしいです！

Design Review Navigator

いろんなツール作ってます！

新アルバム出ました！

Apple Musicでも配信スタートしました！

#生成AI #AI活用 #デザイン #デザインレビュー #個人開発 #便利ツール #資料作成 #業務効率化 #ChatGPT #Gemini  #デザインAI #デザインの基本 #プレゼン資料 #情報設計 #クリエイター #情報セキュリティ