AIミリしらで、一ヶ月でツールを3つ作ってわかったこと

こんにちは、サービスデザイナーの小野です。

まず前提ですが、私はコードが書けません。せいぜいCSSのフォントサイズをいじるくらいで、ターミナルと言われたら真っ黒な画面が浮かんで身構えるタイプです。

そんな私が、この1ヶ月でAIを使ってツールを3つ作りました。うち2つは社内や知り合いに公開しています。

いま振り返っても、「え、どうやった？」という感じなのですが、作ってみたらこういうことがわかった、という話を残しておきたくなりました。同じように自分には無理と思っているデザイナーさんや、AIをどう使おうか考えているどなたかの参考になれば嬉しいです。

---

作ったもの

1つめ：3日以上かかる作業が半日に！スクリーンショット自動化ツール

URLを渡してコマンドを打つだけで、3サイズのフルページスクショが自動で保存されるツールを作りました。
ターミナルで動くだけの小さなものですが、自分の手で動くものを作れたのは人生で初めてでした。3日以上かかっていた作業が、半日で終わるようになりました。

工夫

• ページが表示される前にシャッターを切ってしまう問題に、待ち時間を入れ、さらにスクロールして画像を読み込ませてから撮ることで対応しています。
• 撮った1000ページ分のスクショは、use_figmaでFigma上に自動整列させました。

2つめ：大事な仕事に集中できる！モジュール管理ツール

数百ページある大規模サイトの既存モジュールを洗い出して管理するウェブアプリを作りました。

モジュールの画像・ID・タイプ・説明をまとめて管理でき、どのページで使われているかの共通度が数字でわかります。ステータス切り替え、ページタイトル検索、CSV書き出しにも対応しています。 これは、私がはじめてブラウザで触れる形にしたアプリで、社内でも共有しています。 新しいコンポーネントを設計するとき、似た部品がすでに何個あってどこで使われているかをパッと見られるようになったのが、一番の変化でした。

工夫

• AIに分類を丸投げすると意図とずれるので、出てきた分類を自分たちでチェックし、もう一度グルーピングし直す工程を挟みました。
• AIが共通ページ数を数えてくれる性質を活かし、共通ページが少ないモジュールを統合候補として洗い出せるようになっています。また副産物として、Figmaに並べた既存ページのスクショにモジュールをマッピングする作業も自動化できました。

3つめ：趣味用メモアプリ

気づきをコンテンツと紐付けて記録したり、大事な日付をカウントダウンできたりするメモ管理アプリを作りました。

工夫

• 他人にデータが見えない構造にするために、本人のデータだけが返る仕組みを、データベース側とコード側で二重に確保しました。
• 友人に使ってもらう前提で、文言が初見で伝わるか・誤操作しないかを一つずつ確認しました。

　

AIとの付き合い方で、変わったこと

まず、エラーで立ち止まる時間が、ぐっと短くなりました。
以前はエラーが出たら検索結果を5つくらい開いて、似た事例を探して、自己判断で試すのが当たり前でした。今は、エラー文をAIとのチャット画面にそのまま貼るだけ。しかも自分の状況に合わせた答えが返ってきます。一度この速さを知ると、もう戻れません。

頼み方が下手だったことにも気づきました。
最初は、「ウェブアプリ作って」のようなざっくりした頼み方をしていて、当然AIも困ります。 というより、自分も何を作りたいのか、よくわかっていませんでした。 まずログイン画面だけ、次は保存機能だけ、と一画面ずつ一機能ずつ分けて頼むようになってから、急に進むようになりました。

AIが、「これで動きます」と言ってくれるとつい信じたくなるのですが、意外と動かないことがあります。そのときは、「動かしたけどこうなった」と返す。この往復を重ねるうちに、だんだん精度が上がっていきました。

モジュール管理ツールを作ったときに感じたのも、これに近いです。 AIに雑に投げるだけだと、自分の意図からずれた答えが返ってきます。けれど、たたきとしては十分に使えるので、そこに自分の判断を乗せていくと、一人でゼロからやるより断然早いです。 AIに全部任せるでもなく、AIを拒むでもなく、ちょうど真ん中のラインを探っていく付き合い方に落ち着いていきました。

　

デザイナーとして、気づいたこと

コードは書けなくても、「保存ボタンを押したら、入力した内容がデータベースに送られて、成功したらリストに反映されてほしい」とは言えます。 よく考えたら、これは普段デザイナーとしてやっていることそのものでした。仕様を決めて、ふるまいを言語化して、実装に渡す。今回はその先のバトンを、エンジニアではなくAIに渡してみた、という感覚です。

もうひとつ、AIが作ってきたUIを見て、「なんか違う」と気づけるのはデザイナーの強みだと思います。３つめのメモアプリでは、「設定ボタンとユーザー管理ボタンが近すぎて誤タップしそう」という気づきから、何度も細かい修正を入れました。AIは意外と、指の距離感のような触ったときの感覚までは想像しきれないんですよね。

モジュール管理ツールで痛感したのも、「何を分類の軸にしたいかはデザイナー側の意図に強く依存する」ということでした。AIの出してきた分類を鵜呑みにせず、自分の仕事で使える形に整え直す。そのためにも、何を作りたいか、どう分類したいか、を自分の言葉で持っておくことが、AIを使いこなす以前の土台として効いてくると感じました。

コードが書けない自分にはアプリ作りは無理だとずっと思い込んでいました。 でも、AIに頼めば自分のアイデアを一度形にできるという選択肢が増えました。頭の中にあるイメージを一度自分の手で動かしてみてから話せるようになった、というのは、仕事の場面でも効いてきそうな気がしています。

　

おわりに

AIを活用して自分でツールを作る最初の一歩を後押ししてくれたのは、社内の空気でした。
モンスターラボでは、AIのワークショップや勉強会が定期的に開かれ、みんなの活用アイデアのシェアも活発に行われています。

1ヶ月前だったら、何か作ってみたいなと思っても「作り方がわからないな」でそのまま忘れていたと思います。それが今は、次は何を作ろうかな、と考え始めているところです。

• #企業カルチャー
• #デザイナー
• #サービスデザイン
• #AI