業務改善のためのAI活用

こんにちは、日々QCD改善に取り組んでいるディレクター、黒田です。

QCDとは、Quality(品質)、Cost(コスト)、Delivery(納期)の頭文字を合わせた言葉です。
つまり、納品物の質を高め、コストを下げ、納期を短縮するための取り組みです。
このような取り組みは、どの会社様も取り組む内容かと思いますが、近年のAIの目まぐるしい発展により、特にIT分野のQCD改善にはAIの力が不可欠になってきたように思います。

取り組みそのものは、最終的に全社的に浸透させて初めて大きな力となります。しかし、それにはまず「小さく始める」個人でのナレッジが必要です。

今回は、ディレクターとして私が実践したり、取り組んでいる内容をご紹介したいと思います。

ディレクター黒田のAI活用例＆実験
1・ChatGPTの活用
2・NotebookLMの活用
- 仕様書の横断的なチェッカーとして
- 簡易的なシステムの取説として
3・GeminiCLIの活用
4・Figmaからの自動コーディング

ディレクター黒田のAI活用例＆実験

ChatGPTの活用
NotebookLMの活用
GeminiCLIの活用
Figmaからの自動コーディング

1・ChatGPTの活用

まずは、ChatGPTによるAIの基本的な活用です。

ここで言う「基本的な活用」とは、「作業時間の短縮」です。
ディレクターとしては、文章の校正、アタリ画像の生成、リサーチ、一覧の生成などが挙げられます。
特に、「まずは一歩目」の叩き作業を時短できるのは本当にありがたいです。

ChatGPTの用法として一般的に知られているのは、ウェブブラウザからアクセスして利用する方法ですが、実はデスクトップアプリも存在します。（ご存知の方も多いかもしれませんが…）

インストールすると、Macでは（Option ＋ Space）で以下のような小窓が起動し、Spotlightの代わりのような感覚で利用できます。※もちろんWindows版もあります。

ChatGPTのダウンロードページ

このように、いつでもすぐに呼び出して利用できるようにしておくことで、気軽に時短作業に移行できるようにしています。

また、2025年8月現在、最新のGPTではGoogleドライブとのつなぎ込みなどもできるので、Google Geminiの使用感とどう変わってくるのかなど、今後研究の余地ありです。

2・NotebookLMの活用

次に、NotebookLMによるQCD改善です。

NotebookLM(ノートブック・エルエム)とは、Googleが開発した「AI ベースのノート・研究支援ツール」です。

なんだか難しそうな定義ですが、仕組みそのものは簡単です。
ツールの画面に様々な情報を投げ込み、投げ込んだ情報だけを元にして、情報整理や質問、依頼などをおこなえるツールです。

NotebookLMの公式サイト

これが「どう素晴らしいのか」を紹介するのは、公式サイトやまとめサイト、動画解説コンテンツなどに譲るとして、ここでは弊社での新たな取り組みを紹介します。

仕様書の横断的なチェッカーとして

今実験的におこなっていることの1つが、システムの仕様をMarkdownファイルにまとめ、複数ファイルの仕様表記に矛盾や不整合がないかをチェックすることです。

これは、結構な精度でフィードバックを返してくれます。
今までは、書類の精度を上げるには、自分以外の人の目でチェックしてもらう必要がありました(自分だけでは「思い込み」が発生するためです)。しかし、NotebookLMに頼ることで、指摘がなくなるまで延々と壁打ちができます。

これにより、1人でも一定水準以上のドキュメントが作成できるようになりました。

簡易的なシステムの取説として

もう1つは、前述の仕様書をNotebookLMに入れたまま、お客様へ提供する取り組みです。

NotebookLMは、現在プロ版と無料版のアカウントではリンク共有ができません。
このため、専用のアカウントを通じてお客様に提供します。そして、お客様が「この仕様どうだっけ？」と感じたときに、すぐにNotebookLMのチャットに質問し、その場で回答を得られる。といった流れを考えています。

これであれば、運用保守契約がない売り切りのシステムであったとしても、お客様はいつでも一定品質の正確な回答が得られます。

3・GeminiCLIの活用

次は、個人でのモノづくり活動やObsidianのお話になります。

Googleが開発したAI「Gemini」には、コードエディタのコマンドラインから直接利用できる「Gemini CLI」というツールが存在します。

Google GeminiCLI

コマンドラインから実行できるタイプのツールで、後述する開発においても、GitHub Copilot(pro)と共に大活躍してくれています。

現在の利用方法は、環境構築やビルドプロセスの構築、JavaScriptのコーディング、READMEのまとめなおし、コードのブラッシュアップなどです。
私はどちらかと言うとデザイン＆コーダー寄りの経歴のため、このような補助があることで、作りたいものを独力で形に起こしやすくなり、非常に助かっています。

また、ナレッジのメモツールとして「Obsidian」を使っているのですが、Obsidianにはコマンドラインパネルを追加するプラグインが存在します。これを利用して、Obsidianから直接Geminiを起動して利用することもあります。

※コマンドラインパネルの追加は有志のプラグインのため、ここでは紹介を控えますが、ご興味があれば検索してみてください。

4・Figmaからの自動コーディング

最後は、Figmaからの自動コーディングです。

2025年6月にFigmaから公式のMCPサーバー「Dev Mode MCP Server」が提供されました。これをきっかけに、「命名規則を固定しやすいシステム管理画面系であれば、AIコーディングの実験がしやすいのでは？」と思い立ち、個人活動として試していました。

結論から言うと、FigmaのレイヤーをPug記法で命名しておくと、かなりの精度で自動コーディングがはかどります。環境は、Figma公式のMCPサーバーと、VSCode＆Copilot pro(Claude Sonnet 4)の組み合わせです。

例えば、以下のようにFigmaのレイヤーを記述しておき、エディター側のプロンプトでコーディング規則を詳しく記載していると、ほぼ「そのまま使えるHTMLコード」を記述してくれるようになりました。

※ 最終的にFigmaのレイヤーの構造がそのままHTML構造になるので、編集中は、まるでFigmaでコーディングしている気分になります。

HTMLが安定すると、次はCSSです。

Figma側の作業では、スペーシングやフォントサイズなど、可変になりそうなものは可能な限りFigmaのバリアブルに登録しています。かなり数は多くなりますが、型が決まっているので、AIでの置換や、CSSのコーディングとの紐づけも良好です。
AIによるCSSコード出力は、その時々で実装方法に揺らぎはあるものの、初期プロンプトを改善していくと、期待の70％〜80％くらいのコードを出してくれるようになりました。（ちなみに、このときの実験段階ではレスポンシブ対応は含んでいません）

現在、これらの実験を通じて、「CSSフレームワークを使いながらも、フレームワークには一切干渉しない管理画面テーマ」を作成しています。そして、Figmaのバリアブルをデザイントークンとして利用し、クライアント個別のカスタマイズをFigmaだけで行えるスキームづくりを目指しています。

このあたりの進捗は、また機会があれば投稿するか、どこかで公開しようと思います。