こちらはAI活用や開発等をまとめたページになります。
まずは目次で概要を掴んでいただき、ご興味のある項目からご覧ください。
AIを活用した業務効率化への取り組み
ページ内でご紹介しているもの以外にも、マーケティングやUXなどの業務効率化を目的としたシステム、WordPressプラグイン等を企画/制作しています。
AI開発における役割分担の最適化
バイブコーディングでは、トークン消費や手戻りが増えると、開発コストが大きくなります。
そこで、企画や要件整理、仕様書の作成はGPTと行い、実装やローカル環境での検証はCodex(AIエージェント)へ任せるなど、工程ごとに役割と範囲を分けています。
Agent／Skillによる業務の自動化
要件整理、作業指示の作成、レビュー、検証、引き継ぎ資料の作成などを支援するAgentやSkillを複数開発し、プロジェクト進行の一部を自動化しています。
人が目的や優先順位、採否を判断し、AIが定義済みの手順に沿って処理を進めることで、確認の往復や手戻りを減らし、品質を維持しながらコストを抑えています。
開発したSkillの例
一例として、コストカットを目的にCodexへ作業を丸投げしないチェックリストを作成。
GPTが以下の項目を確認し、実装や検証を任せられる状態かを判定できるようSkill化しました。
- Codexを使用する必要がある作業か。
- 仕様、変更対象、対象外、禁止事項が明確になっているか。
- 実装後の検証方法、PASS条件、停止条件が定義されているか。
- Codexに設計判断や広範な原因調査を残していないか。
- 高リスクな変更について、実行前に追加レビューが必要か。
これにより、Codexへの曖昧な指示による手戻りや意図しない変更を防ぎ、品質を維持しながら、トークン消費、確認の往復、探索、再試行を抑えています。
PDF圧縮システムの企画、設計、UI/UX改善
PDFを手軽に圧縮したいユーザーに向けて、プロダクトの企画から機能要件の整理、システム設計、開発、UI/UX改善までを一貫して進めました。
圧縮機能を実装するだけではなく、ユーザーが現在の状況を理解し、迷わず操作を完了できる体験の設計を重視しています。
こちらは私個人でのプロダクト開発になります。
メンバーは私とAIエージェント/生成AIのみです。
プロジェクト概要
PDFファイルの容量を削減し、メール送付、Webアップロード、データ保管などを行いやすくするPDF圧縮システムを企画/開発しました。
ブラウザから利用できるクラウド版を想定し、利用環境や技術的な制約を踏まえて仕様を整理しています。
一般的なレンタルサーバーでも運用できるよう、サーバー側の処理だけに依存せず、ブラウザ上のJavaScriptなどを活用する構成も含めて検討しました。
担当した領域
- 私の担当箇所
-
- プロダクトの企画、コンセプト設計
- ユーザー課題の整理と機能要件の策定
- システム要件、基本方針の設計
- UI/UXの改善案の立案
- 技術案や実装内容のレビュー、意思決定
- 完成物の確認と改善指示
- AIの担当箇所
-
- 技術調査、技術選定案の提示
- システムの詳細設計
- 開発、コーディング
- テスト、不具合調査、修正
- UI/UXの実装
- 仕様書、引き継ぎ資料などの技術文書作成
上流設計で重視した事
利用者が迷わず完了できるタスクフロー
ユーザーがファイルを選択し、圧縮を実行し、結果を確認してDLするまで、迷わず進められる事を重視しました。
操作を『準備中』『ファイル選択待ち』『圧縮実行待ち』『処理中』『完了』に分け、各段階で必要な情報と操作をユーザーに示し、迷わずゴールに辿り着けるよう誘導。
利便性と技術的な実現可能性の両立
提供形態、実行環境、サーバーの制約、圧縮品質、処理時間などを踏まえ、実現可能な範囲でユーザーの利便性を高める仕様を検討しました。
UI/UX設計でこだわったポイント
現在の状況を理解できるステータス設計
処理の進行状況や次に必要な操作をステータス表示枠に集約。
ユーザーが『現在何が起きているのか』『次に何をすればよいのか』を判断できるようにしました。
システムから反応がないように見える時間を減らし、進捗状況が分からず不安に感じて、同じ操作を繰り返してしまうことを防ぐための設計です。
操作状況に応じた段階的なナビゲーション
ユーザーの操作を工程ごとに整理しました。
その時点で認識/操作すべき場所だけを目立たせ、次の操作へ段階的に誘導しています。
一度に多くの情報を出さず、迷わず進められるように設計しました。
システムの準備完了後
ファイル選択エリアの枠を点滅させ、最初の操作へ視線を誘導する。
PDF選択後
『圧縮を実行』ボタン上に光が流れる演出を加え、次に必要な操作を伝える。
圧縮開始後
モーダル内に処理状況を表示し、圧縮完了後のDL操作まで同じ枠内で案内する。
見落とし防止と煩わしさを両立したモーション設計
アニメーション
視認性を高め、次の操作を見落とさない為のナビゲーションとして使用しています。
ファイル選択枠
気づきやすさと煩わしさのバランスを調整しました。
最初は認識されやすい点滅の間隔と回数で強調し、その後は点滅の間隔を緩やかに空けて再強調する事で、急かされるストレス等を軽減しています。
『圧縮を実行』ボタンの演出
過剰なモーションを抑えています。
同じファイルに対して何度も繰り返さず、別のPDFを選択し直した場合のみ再実行する設計にしました。
圧縮効果を実感できるフィードバック設計
圧縮完了を通知するだけでなく、圧縮前後のファイルサイズや削減率を比較表示し、ユーザーが圧縮処理によって得られた効果をすぐに理解できるようにしています。
数値の変化を視覚的に分かりやすく提示する事で、機能的な結果だけでなく、操作を完了した達成感や納得感も得られる体験を設計しました。
情報設計でこだわったポイント
下記表示枠を分離しました。
- 一般利用者が必要な操作
- 開発や動作確認に使用する技術的な機能
選択肢を増やしすぎず、通常利用時に必要な操作へ集中できる画面構成にする事で、認知負荷の軽減を図りました。
技術的な機能は、正式版としてリリースする場合、一般利用者向けの画面からは削除する事も想定しています。
このプロジェクトで発揮した強み
本プロジェクトでは、画面デザインだけでなく、プロダクトの目的整理から機能要件、操作フロー、UI/UXの設計まで一貫して担当しました。
企画段階で『なぜこの機能が必要か』を整理した上で、利用環境や技術的な実現可能性を確認し、表示内容やタイミング、エラー時の動作まで具体的な仕様に落とし込んでいます。
開発後も実際の操作を確認し、迷いや分かりにくさが生じる箇所を継続的に改善しました。
機能要件を決める段階から、ユーザーがどのように理解し、操作するかまでを一体で設計したことが、本プロジェクトで発揮した強みです。
生成AIを活用した広告クリエイティブ制作
生成AIを制作工程に組み込み、広告クリエイティブの企画から制作までを効率化しています。
コンセプト設計から、訴求軸の作成や整理、コピー、構成、ビジュアルディレクションまでを行い、生成AIを活用して制作した広告クリエイティブ例です。
掲載作品はサンプル用の自主制作です。各企業やブランドによる公式広告ではありません。
各作品を選択すると大きく表示されます。
