この記事は KINTOテクノロジーズアドベントカレンダー2024 の12日目の記事です🎅🎄

はじめに

こんにちは。KINTOテクノロジーズ モバイル開発グループ プロデューサーチームの やまゆき です。 
弊社では生成AIの使い方を学ぶ機会が、たくさん提供されています。 
私はエンジニアではありませんが、今回、生成AIでビジネスサイド向けの運用ツール「お知らせHTML作成ツール」を開発してみました。 この話をすると、よく「え！？生成AIを組み込んだの！？」と勘違いをされるのですが、 そうではなく「生成AIを道具として使って開発した」というのがこの記事の内容です。 
非エンジニアでも、自分で開発して業務を改善できる！そのことを実感したので、事例としてご紹介したいと思います。

背景：やろうと思った理由

私の担当アプリでは、PUSH通知をタップすると「お知らせの詳細ページ」が開きます。このページはWeb Viewになっており、HTMLファイルをWebにアップロードすることでお知らせを表示できます。

そのため、次のようなステップで運用されていました。
（１）ビジネスサイドから、表示したい内容をExcel・Word形式で入稿
（２）開発サイドの誰かがコーディングしてHTMLファイルを作成
（３）ビジネスサイドでHTMLファイルをチェック
（４）開発サイドの誰かが修正　[場合によって（３）（４）をくり返し]
（５）Web反映

入稿は、週に１〜２回のペース。
入稿元のビジネスサイドでは、入稿時に手元で完成形を確認できないため、何度も修正依頼をせざるを得ないという課題がありました。また、開発サイドとしても、修正を含め ”ちょっとしたコーディング” が頻発することで業務が圧迫され、スムーズな運用とは言い難い状況でした。

これらの課題を解決したい！ただ、CMS導入など大掛かりなことはできない・・・。 そこで、生成AIを使って今回開発した運用ツール「お知らせHTML作成ツール」を作るに至りました。

- 解決したかった課題（まとめ）

入稿時に手元で完成形を確認できるようにする（＝修正を無くす）
HTMLコーディング作業を無くす（＝業務圧迫の改善）

- 「Excel・WordのHTMLファイル出力」や「入稿時に生成AIでHTMLファイル化」ではダメだった理由

これらの方法でもHTMLファイルを作成できますが、ここで必要とされるHTMLファイルは単純な文章だけでなく、アプリ内のボタンやYouTubeの埋め込み動画、デザインが施されたトピックエリアなど、複雑な内容を含んでいました。また、Webの知識がない担当者でも手元で完成形を確認できるように、一発で高い品質のHTMLファイルを作成する必要があったため、これらの方法では運用が難しいと判断しました。

手順１：必要最小限の機能を定義する

まずやったことは、必要最小限の機能は何か？を書き出すことです。あれやこれや理想を言い出すとキリがないものですが、 非エンジニアの自分が一人で開発するのですから、ツール開発を夢で終わらせないためMVP開発を目指すことにしました。

- 私が書き出した必要最小限の機能

（１）フォーム形式で入力した内容を、HTMLファイルとして出力できる
（２）必要な入力欄は「タイトル・日付・見出しetc…」
（３）入力欄はユーザーの任意で、いくつでも追加・削除できる
（４）出力するHTMLファイルには、指定のデザインを反映する
（５）出力するHTMLファイルには、指定の計測パラメーターを反映する

手順２：プロンプトを書く

手順１で書き出した必要最小限の機能をもとに、以下のようなプロンプトを書いて生成AIへ指示を出しました。 私はCopilotを使いましたが、ChatGPT・Geminiなど、何を使っても問題ないと思います。

- 私が書いたプロンプト

ユーザーが入力した"お知らせ"の内容を、
HTMLファイルとしてダウンロードできるWEBページを作成してください。 
# 必要な入力欄
タイトル 
日付 
見出し 
サブ見出し 
段落 
画像
ボタン 
Youtube埋め込みタグ 
# 指示 
（１）フォーム形式で入力した内容を、HTMLファイルとして出力できる
（２）必要な入力欄は上記を参照
（３）入力欄はユーザーの任意で、いくつでも追加・削除できる
（４）出力するHTMLファイルには、指定のデザインを反映する
（５）出力するHTMLファイルには、指定の計測パラメーターを反映する
# 規定のデザイン（CSS）
https://〜
# 計測パラメーター
〜〜〜

手順３：調整する

手順２のプロンプトを生成AIへ入力すると、初手としては十分すぎるアウトプットが返ってくるはずです。それを元に、何だかちょっと違うな？あと少しこうだったら、という部分を生成AIと会話しながら調整します。

例

先ほどのフォームを、以下の指示を元に改善してください。
# 指示
画像の入力欄はURLではなく、その場でアップロードできるようにしてください。
難しい手順は踏まず、誰でも画像を反映できる状態が望ましいです。

- 調整する時のポイント

調整時は、改善点を１つずつ指示して進めることをおすすめします。例えば、「画像は〜」「ボタンの動作は〜」「入力欄は〜」と複数の改善点を一気に伝えてしまうと、生成が失敗した際に、どこで躓いたか分かりにくくなるためです。また、同じ理由で、生成されたコードやプロンプトの履歴は、バージョンを付けて残しておくことをおすすめします。
会話をしながら、少しづつ調整していきましょう！

- 粘り強く調整すれば、想像以上のものを生成できる！

私の場合、この調整手順で必要最小限の機能を実現したのはもちろんですが、最終的には以下のような機能まで生成し、組み込むことに成功しました。

• 入力内容をプレビューする
• 入力欄の順番を後から入れ替えられるようにする
• 過去に出力したHTMLファイルを読み込んで編集する
• 画像サイズが極端に大きい場合にエラーを出し、リサイズ方法を案内する

- デザインを調整して仕上げる

最後に見栄えがよくなるようCSSを調整しました。CSSは調べたり、これもまた生成AIに聞いたりして調整が可能ですが、面倒な方は以下のようなプロンプトで生成AIに指示してもいいかもしれません。

例

一般的な入力フォームとして使いやすいデザインとは、どのようなデザインですか？

それでは、それらのデザインを先ほどのフォームに反映してください。

- 完成例

こちらが、実際に私が生成AIを使って開発した運用ツールです！

https://www.youtube.com/watch?v=F-eyKyS8HSo

さいごに

この運用ツール開発によって、当初あった５ステップを２ステップに削減することに成功しました。

（１）ビジネスサイドから、表示したい内容をExcel・Word形式で入稿
（２）開発サイドの誰かがコーディングしてHTMLファイルを作成
（３）ビジネスサイドでHTMLファイルをチェック
（４）開発サイドの誰かが修正　（場合によって（３）（４）をくり返し）
（５）Web反映

↓

（１）ビジネスサイドから、表示したい内容をHTMLファイルで入稿
（２）Web反映

また、ビジネスサイドからは入稿が楽になったと嬉しい声をもらうことができ、ビジネスサイドも開発サイドも嬉しい、WIN-WINな業務改善となりました！

私個人としては、同じプロジェクトのバックエンドエンジニアに「昔ならこれと同じものを人の手で開発するのに、２週間ほどの時間とお金がもらえたのに…」と嘆かれたことが印象的でした。エンジニアではない私が、それだけの価値あるものを一人で開発できたことに驚いています。
生成AIには怖さすら感じることがありますが、怖がっていても何もならないので、たくさん活用したい！そう強く思い直すきっかけになりました。

何事も同じですが、コツは何度もチャレンジすることだと思います（笑）最後までご覧いただき、ありがとうございました。