はじめに
ご覧いただきまして、ありがとうございます。
ニッセイ情報テクノロジー株式会社 プロダクト・サービス事業推進室の森田と申します。
私は普段、生成AIを活用するWebアプリケーション開発の中で、デザインの叩き台作成やVue + TypeScript 等を使用したフロントエンド実装に携わっております。が、UIデザインを専門的に学んだ経験はありません。そのため「ユーザーが使いやすいUIをどう作るか」を学習しつつ進める必要がありました。今回、非デザイナーの立場ながら工夫したポイントを整理してみましたので、UI設計に悩むエンジニアの参考になると幸いです。
既存サービスの UI パターンを徹底的に観察する
最初のステップは、既存の優れたUIから「パターン」を学ぶことでした。
ChatGPTやその他のチャット系サービスを観察してみると、よく使われる構造が見えてきます。
代表的なUIパターン
- 左にナビゲーション、中央にメインチャット領域
- チャットを始める動作はワンアクション（入力メッセージをいきなり入力すれば良い）
- メッセージ間のゆったりした余白
- ローディング表示は控えめながらわかりやすい
- チャットを始める以外の動作（設定系の動作等）は、右上ヘッダー部にまとめるか、左のナビゲーションのいずれかに配置
- スクロールしても「今どこにいるか」迷わない配置
多くのサービスが類似の作りを取っていることから、ユーザーの多くはこうしたデザインに「慣れ」ています。つまり逸脱すると、「使いづらい」と感じられてしまうポイントとも言えます。よって非デザイナーである自分が尖った独自のレイアウトを作るよりも、まずは 慣習的なパターンに寄せるほうがUIの破綻が少なく、安全 だと感じました。
OSSテンプレートやUIキットから構造を学ぶ
次に活用したのが、Vue向けテンプレートやOSSのUIテーマです。CreativeTim、Vuetify公式テーマなど“よく設計されたUI”を読み解くことで、「なぜこの構造だと見やすいのか」 が理解しやすくなります。
特に参考になったポイント
- レイアウトの骨格（サイドバー、トップバー、カードの配置）
- Vuetifyの spacing / grid を使った余白の作り方
- 色使い（アクセントカラーの最小化、一貫性）
- アイコンと文字のバランス
- コンポーネント構造・命名規則
- 有効なCSSユーティリティの使い方
OSSテンプレートは、「実用的な構造の教材」として非常に役立ちました。
UIデザインの記事を自分の画面に照らして採点する
プロのUIデザイナーによる記事や分析も有用でした。例えば「視線誘導」「情報密度」「余白の統一」「階層構造」「クリック可能領域のわかりやすさ」など、理論的な観点を自分の画面に当てはめてチェックリスト化し評価することで、改善点が明確に見えるようになります。
評価・採点してみると、
- 意味のある余白が足りない
- ボタンの主張が弱すぎる
- ボタンを押すと何が起きるのかがわかりにくい
- 情報の優先度が視覚的に反映されていない
といった課題が洗い出され、画面の質が着実に改善されていきました。
生成AIには“ピンポイントで”相談する
生成AIは、UIに関する具体的な疑問の解消にとても役立ちました。
たとえば「この配置は一般的にどう評価されるか」「この要素をどこに置くのが一般的？」「こういう用途なら、どんなUIパターンがある？」「この画面を改善するとしたら、どんな視点がある？」といった質問には高い精度で回答してくれます。ただし、実務では UI全体をAIに作らせることはしていません。これは次の章で説明する理由によるものです。
なぜ生成AIを使ったUI自動生成系ツール（Uizard／Galileo AI等）を使わなかったのか
近年、手書きのラフスケッチから画面モックを自動生成できる便利なサービスが登場しています。非常に魅力的な機能を提供しており、アイデア出しの初期段階では有効だと思っています。ただし、私の携わる開発ではメインの手段としては採用しませんでした。以下は、あくまで「私のケースにおける事情」ですが、何故そうしたのかを説明します。
理由その1：最終的な調整が多く、実装と統合する工数が大きかった
自動生成されたUIは「プロトタイプとして非常に有用」です。ただし、既開発中のWebアプリケーションに反映させるには、余白やフォントサイズ、色の統一、使用しているUIフレームワークとの整合、イベント管理の再実装、レスポンシブ調整といった追加作業が必要でした。これは環境によっては大きな負荷になり得るため、私のケースでは“そのまま実装に流用する”運用が難しいと判断しました。
理由その2：修正指示をAIに出す際、結局細かな仕様の記述が必要だった
UIを自動生成した後、細かな調整をAIに指示しようとすると、どの部分をどう変更してほしいかその背景は何かといったかなり丁寧な指定が必要でした。つまり、最終的に作りたいUIのイメージを自分が正確に言語化できないと、微調整が繰り返されてしまうという課題がありました。
理由その3：実装スピードを優先する環境では、自分で組み上げたほうが早い場面が多かった
UI整形の最終段階では、「既にあるコンポーネント構造の上に整合させる」作業が中心になります。そのため私の環境では、画面の叩き台は自分で作り、迷った点だけ生成AIに相談して精度を上げるという方針が、結果的にもっとも効率的でした。
非デザイナーがUIを作るときに役立った3つの原則（まとめ）
-
標準パターンを活かすことが最も安全
独自UIに挑戦するより、既存の優れたパターンから学ぶのが確実 -
OSSテンプレ × UI理論 × 生成AI の三本柱が強い
実例 → 理論 → AIによるブラッシュアップ、の流れでの実装が、再現性が高くよりスピーディな改善方法 -
AIは“部分的な相談”のほうが実務では扱いやすい
0→1を任せるより、1→2の改善に使うほうが効率的。
おわりに
生成AIの活用により、UIデザインはこれまで以上に取り組みやすくなりました。一方で、本当に狙った通りのUIデザインに近づけるには、高いプロンプトエンジニアリング能力が必要になる、とも感じています。
生成AIに丸投げしてしまうよりも、テンプレート・UI理論・生成AIをバランスよく組み合わせたほうが、よりスピーディに、非デザイナーであっても安定した品質のUIを作ることができると実感しました。
本記事が、UI設計に取り組むエンジニアの皆さんの参考になれば幸いです。