はじめまして。フォームデザインのヤマザワです。

みなさんはAIを活用していますか？

私は昨年の5月頃から使い始め、今は主にChatGPTを利用しています。ほかにも、GeminiやCursorなども状況によって使用しています。
AIの使用前は、AIについては以前から耳にしていたものの、なかなか実際に使うところまでは至りませんでした。
ちょうど同じ頃、仕事でもAI関連の話題を耳にする機会が増え、「これからは使いこなせないといけないな」と感じるようになりました。
使い始めは「実際に何ができるのだろう？」と思いながら、AIにいろいろ質問したり、イラスト作成や画像合成の精度を試したりしていました。

そこでふと思ったのが、
「AIがプログラムを書いてくれるなら、自分でも何かツールを作れるのではないか？」
「社内業務を便利にするツールを作れないだろうか？」

ということでした。

まず、最初に試作したのはWordPress用のチャットボットUIでした。
右下固定で表示されるチャット形式のUIで、簡易的な評価機能やサイト内検索機能を実装していました。
AIに教えてもらいながら、JavaScriptを使って試行錯誤しつつ制作していました。

機能としては、
・カテゴリ別の評価機能
・3問形式の質問フロー
・WordPress REST APIを利用したサイト内検索

などを実装しました。

そこで、またふと思ったのが、
ちょうどその頃、自分用のTODO管理ツールを探していたのですが、なかなか「これだ」と思えるものが見つからず、「自分で作れるのでは」と思いました。

それまでは、紙にメモを書いたり、テキストメモを使ったり、Asanaなどの管理ツールを利用したりしていました。
まず最初にやったことは、AIに「こんな感じのTODO管理ツールは作れる？」と相談し、イメージ案を作ってもらうことでした。

そこから、
「ああでもない、こうでもない」
「こういう機能が欲しい」
「この操作感にしたい」

とAIとやり取りを繰り返しながら、開発をスタートしました。

作業としては、プログラム自体はAIに書いてもらい、そのコードをベースに私が見た目や動作を調整していく、という流れで進めました。
ただ、実際に進めてみると簡単にはいきません。

AIにプログラムを書いてもらい実装しても、エラーが出る。
エラー内容をAIに見せると、

「ここが重複しています！」と言われる。
「えっ？ そのコード、さっきAIが『これで動きます』って出したものだけど……」と返すと、
「そうでした」
というやり取りを何度も繰り返しました（笑）。

ChatGPTで解決できない時はGeminiで試し、それでも解決しなければCursorで試す――そんなトライアンドエラーを繰り返しながら、第一弾の試作が完成しました。
実際に使ってみると、

「この機能は必要」、「これはいらない」、「もっとこう操作したい」

という点がたくさん見えてきました。
そこからUIを大幅に変更したり、仕様を見直したりしながら改良を重ね、現在は第二弾を制作・運用しています。

現在の主な機能は、

・タスクボード
・カレンダー表示
・ガントチャート表示
・完了案件のアーカイブ機能

などです。

左上：カレンダー、左下：新規タスク入力画面、右上：ボードビュー、右下：ガントチャート

また、期限が近づくとデスクトップ通知が出るようにしています。
完了した仕事は編集画面で「完了」にチェックを入れると打ち消し線が入り、そのまま残しておくこともできます。

編集画面

さらに、「完了タスクをアーカイブ」を押すと、完了済みのタスクをまとめてアーカイブページへ移動できます。
「復元」ボタンもあるため、必要に応じて元に戻すことも可能です。
現在も調整中で、例えば祝日表示は2025年では問題なく動いていたものの、2026年になって祝日のズレが発生したため、現在は祝日名を一時的に非表示にしています。

ほかにも、
・スマホUIの改善
・ローカル保存からFirebaseへの移行
・社内共有機能

など、今後対応すべき内容はいろいろあります。

実際にツールを作ってみて感じたのは、「最初の設計がとても重要」ということでした。

今回は、「どんな機能が必要か」、「どういう運用をするか」を十分整理しないまま作り始めてしまったため、途中で何度も方向転換やUI変更が発生し、結果的にかなり時間がかかりました。
ただ、その分学ぶことも多く、非常に良い経験になりました。

————————-
▼TODO / スケジュール管理ツール概要
React（JavaScript）で開発している社内向けTODO / スケジュール管理ツールです。
ボード表示、カレンダー表示、ガントチャート表示に対応しており、期限通知やアーカイブ機能も実装しています。
現在はローカル保存ベースですが、将来的にはFirebaseを利用した共有運用も想定しています。

————————-
【技術構成】
フロントエンド：React / JavaScript
UI：CSS（カスタム実装）
データ保存：localStorage / IndexedDB
開発環境：Node.js / localhost