AIを使って銀行の画面を最初から最後までリデザインした方法

今まで話したことのないことを共有します。実際のプロジェクト、プロセスの各段階でAIを使用したバンキングダッシュボード画面の完全なリデザインです。クライアントや企業の名前は出しませんが、プロセスは起きたそのままです。

課題

その画面は法人バンキングユーザーがログイン時に見る財務サマリーダッシュボードでした。大きなリデザインなしで3年が経過していました。情報はありましたがレイアウトは密集し、ビジュアルヒエラルキーは壊れ、ユーザーフィードバックは常に同じことを言っていました：必要なものをすぐに見つけられない。

提案の納品まで2週間ありました。通常そのタイムラインではリサーチ、ワイヤーフレーム、おそらくハイフィデリティモックアップに到達する程度でしょう。AIを使って違うアプローチを試すことにしました。

最初にしたのは、リサーチチームが数ヶ月かけて蓄積したユーザーインタビューのメモを取ることでした。40ページ以上の書き起こしです。すべてをClaudeに渡し、主要な3つのフラストレーションパターンとユーザーが最も頻繁に言及する3つのタスクを特定するよう頼みました。

15分で、自分なら丸一日の読み込みと分析にかかる統合ができました。完璧ではなく、Claudeが単純化しすぎた結論をいくつか調整する必要がありましたが、出発点としては驚くべきものでした。

インサイトが明確になり、ビジュアルの方向性を探りました。異なるビジュアルヒエラルキーアプローチの金融ダッシュボードコンセプトをMidjourneyに生成させました。直接コピーするためではなく、バンキングダッシュボードがどう見えるべきかという自分の思考パターンを壊すためです。

生成した20のバリエーションのうち3つが、自分では探求しなかったであろうものを示しました。総残高よりキャッシュフローを優先する非対称なコンテンツ配置です。それはユーザーが求めていたものと完全に一致しました。

明確な方向性を持ってFigmaに戻りました。クライアントのデザインシステムの既存コンポーネントを使ってワイヤーフレームを構築し、Midjourneyにインスパイアされた配置を実際の制約に適応させました。12カラムグリッド、スペーシングトークン、制度的カラーパレット。

各モジュールのマイクロコピーの反復にClaudeを使いました。チャートのラベル、ツールチップ、空状態のメッセージ。通常は後回しにされるすべてをデザイン段階で解決しました。

通常3週間かかるものを1週間で納品しました。作業量が減ったのではなく、プロセスの各段階がより効率的だったからです。リサーチはより速く、ビジュアル探索はより広く、コンテンツの詳細は最初からより完全でした。

クライアントは軽微な変更で提案を承認しました。テストのユーザーは主要な情報を半分以下の時間で見つけられたと報告しました。

あの画面をデザインしたのはAIではありません。AIを自分の経験の延長として使った私です。バンキングデザイン10年の経験が判断力を与えてくれました。AIがスピードを与えてくれました。

その組み合わせに敵はありません。