UIパーツの検索、ワイヤーフレーム作成、PC・スマホ表示の比較を行うツールを制作。目的・機能・UIを自分で決め、Codexを使って実装しました。
- 本人
- 企画・機能選定・UI・操作設計・改善判断
- AI
- Codexによる実装・修正支援
表示比較は、6画面の案から390px・1440px中心の2画面へ絞りました。
Aoi Toolsの制作過程を見る山口 碧｜Web/UIデザイン・AI活用事例
Web/UIを設計し、
AIと実装する。
使う人や目的に合わせて、画面構成・UI・必要な機能を自分で考えています。要件整理、調査、実装、検証にはAIを使い分け、Webツールの制作や日々の業務に取り入れています。
制作事例を見る
デザイン制作と業務でのAI活用事例
Webツールの設計、広告バナーの制作、制作知識の整理、Excel作業まで。何を自分で判断し、AIをどの工程で使ったかを紹介します。
SCSSを初めて学ぶ人に向けて、Lessonの順番、説明の細かさ、画面構成を設計。ロゴも自分で制作し、ChatGPTで構成を検討、CodexでWeb実装を進めました。
- 本人
- 教材設計・UI・ロゴ制作・内容確認
- AI
- ChatGPTで構成検討／Codexで実装・修正支援
本人制作のロゴ
制作知識の整理・参照
Google Drive Knowledge
制作の判断基準を、次の作業にも引き継ぐ。
デザイン原則や過去の判断、制作ルールを資料として蓄積。目次から課題に関係する資料を選び、ChatGPTやCodexに参照させています。
Knowledgeの運用を見る業務手順の整理
Excel × Microsoft Copilot
照合・集計を、繰り返し使える手順にする。
回答データと参照データの照合・集計にCopilotを活用。作業手順と確認箇所をプロンプトにまとめ、結果は自分で確認しています。
Excelでの活用を見る目的とデザインは、自分で決める。
何を作るか、誰が使うか、どの機能を残すか。制作の方針を決めたうえで、工程ごとにAIの支援を取り入れています。
本人の担当
企画・要件の決定、ロゴやUIの制作、レイアウト・操作の設計、内容確認、採用・改善の判断。
AIの支援
要件や構成の整理、公開Webの調査、コードの生成・修正・確認、定型的な照合・集計。
制作の工程に合わせて、AIを使い分ける。
- 01
目的と条件を整理
本人: 誰が何に使うか、必要な条件を決めます。
AI支援: ChatGPTで要件を整理し、必要に応じてGeminiで公開情報を調べます。
- 02
構成とデザインを決定
本人: 画面構成、UI、ロゴ、必要な機能を自分で制作・判断します。
AI支援: 関係するKnowledgeを参照し、判断材料を確認します。
- 03
制作・実装
本人: 決めた仕様とデザインをもとに、画面や機能を形にします。
AI支援: Codexを使って実装・コード確認・修正を進めます。
- 04
実画面で確認
本人: 表示、操作、内容を確かめ、直す箇所を判断します。
AI支援: Codexの検証や、必要に応じてGeminiの一次レビューを使います。
- 05
修正・仕上げ
本人: 修正後の画面を確認し、完成と公開の判断を行います。
AI支援: Codexで修正を進め、使い回す手順や判断基準を整理します。
制作ルールも、次の作業へ。
デザインの判断基準や確認手順を資料に残し、作業に必要な部分だけAIに参照させています。作業の複雑さに合わせて、設計・実装・確認の担当も分けています。
判断基準を引き継ぐKnowledgeの運用制作工程と使用ツール
- 考える・整理するChatGPT
- 制作前の壁打ち、要件・構成・アイデアの整理、Knowledgeの参照。
- 実装・確認するCodex
- Web実装、コード確認、修正、表示や動作の検証支援。
- 調査・一次レビューGemini / Gemini Spark
- 公開Webや複数サイトの調査、情報整理、一次レビュー。
- 業務データの照合・集計Microsoft Copilot
- Excelでの定型集計・照合、作業手順とプロンプトの整理。
判断基準を蓄積する場所
Google Drive Knowledge — デザイン原則、Webの実例、コピー、過去の制作判断や運用ルールを保存し、必要な資料だけ参照します。
制作・公開に使う道具
画面・ビジュアルの制作 — Figma・Photoshop・IllustratorWeb実装・公開 — HTML・CSS・JavaScript・GitHub・Cloudflare
山口 碧
Aoi Yamaguchi
Webサイトの更新・制作、Web/UIデザインを中心に取り組んでいます。使う人に合わせた画面構成や操作を考え、ロゴやレイアウトなどのデザインも自分で制作・判断しています。
制作では、要件整理や調査、実装、検証にAIを取り入れています。実際に使って確かめながら、必要な機能や伝わり方を見直しています。