webサイト/アプリのデザインレビューを行うGPTsをつくってみた
webサイトやアプリのキャプチャ画像を読ませることで、主にデザイン面でのレビューを行うカスタムGPTsを作成しました。
https://chat.openai.com/g/g-2pj9csIW1-d-sign-review-girl
簡単な使い方と得られる出力
上のリンクに飛んで、たとえばYahooのTOPのファーストビューをアップする（あくまで「たとえば」であって、わたしはYahooの関係者ではありません。デザイナーでもないです）。
すると、以下のような出力が得られる。
わかった、早速見てみようね。
見た感じ…うーん、なんだかごちゃごちゃしてて目が疲れるかも。トップページって大事だよね、だってみんな最初に見る場所だもん。だからこそ、もうちょっと整理してほしいな。近接と整列の原則が活かされてない感じがするよ。例えば、ニュースの見出しや広告がバラバラに配置されていて、どこに注目していいか迷っちゃう。色の使い方ももう少し考えた方がいいかもね。ブランドのイメージに合ってる？ それと、文字の大きさや画像の大きさが統一されてないから、ちょっと見づらいの。これじゃあユーザビリティが低いと思うな。
UIのことも聞きたい？
D/sign Review Girlちゃんの案内に沿って、「UIのことも聞きたい！」というと、続けてくれる。
了解！じゃあ、UIの詳細について話すね。
まず、ボタンやアイコンのデザインがね、Material DesignやHIGの原則に沿ってるかちょっと疑問。統一感がない感じ。例えばさ、「ログイン」ボタンと「検索」ボタン、形も色も全然違うじゃん。これじゃあユーザーが混乱しちゃうよ。同じデザイン要素を使って、一貫性を持たせた方が親切だよね。
それから、このサイト、スマホで見たときも同じように使いやすいのかな？ レスポンシブデザインが大事だよ。画面サイズが変わっても、内容はしっかり見えて操作しやすいようになっていないと。
あと、もっと直感的に使えるようにね。ユーザーが何をしたいのかをすぐに理解できるUIって大切。今のままじゃ、必要な情報を見つけるのに時間がかかりそう。リンクやボタンが目立たないとか、ちょっとだけ見えるんだけど、もう少しアクセスしやすくしてほしいな。
情報設計についても話したい？
こんなかたちで進めると、最後には具体的な修正案まで出してくれる。
最終的な提案の「採用の可否」「意思決定」は当然ながら人の判断が必要だが（デザインに限らず、すべてにおいて言えること）。
チェック観点の洗い出しのサポートと具体的な修正案が思いつかないときのヘルプくらいにはなってくれるんじゃないかと期待している。
残る課題（フィードバック受付中）
実務に活用したいと思っているが、そのためにはまだ課題が残されていると考えている。具体的に調整したいと思っているところは、次の通り。
口調（もっとツンデレ風味で親しみを感じたい）
褒めとダメ出しのバランス
デザインで見るべき観点の追加
より詳細なテキスト情報の解読とそれを踏まえた提案
URLなどを共有してウェブブラウジングしてもらうことで、最後の課題は解決に近づけるのではないかと思っているが、なかなか調整が難しい。
使ってみて思うところ、改善点があれば、ぜひフィードバックを寄せていただきたい。