Topics

Claude × 非エンジニアによるアプリ開発① - 作って、試して、調整していく。アプリを「育てる」新しいモノづくり

  • column

「AIを使ってアプリを作る」ということ自体、今ではそれほど珍しい話ではなくなってきました。

少し前まで、AIといえば文章の要約やアイデア出しを手伝ってくれる「優秀なアシスタント」というイメージが強かったのですが、最近では開発そのものをリードしてくれる「頼れるパートナー」へと変わりつつあります。

弊社メンバーもAIに触れる機会が増えており、「自分も何か作ってみよう」と思い立ったのが、このアプリ開発の始まりでした。

「せっかくなら業務に役立つものを…」と考えていたのですが、最初にパッと浮かんだのは仕事ではなく趣味の話でした。

ここ最近は映画鑑賞にハマっていて、毎週何本か観るようになり、視聴予定や気に入った作品などを全てiPhoneのメモ帳に書き溜めていました。

ところが、リストが溜まるスピードが速いうえに似たようなタイトルも多く、「あれ、これ観たっけ?」となることが多発。とうとうメモ帳での管理が破綻しました。

そこで「いっそ自分専用のツールを」と作成したのが、今回紹介する「映画ウォッチリスト」です。

雑なプロンプトでも動くアプリは作れる

AIを使った開発というと、「細かな要件までブレイクしたプロンプトを書かないといけない」というイメージがありますよね。

背景や仕様を整理したうえで要件を抜け漏れなく伝えて、初めてまともに動くものができあがる、そんな風に考えている方も多いんじゃないでしょうか。

もちろん、背景や仕様をまとめて渡せるならそれに越したことはありません。ただ、今回やってみて分かったこととしては、かなり雑な指示でも、こちらの意図をちゃんと汲んで実装してくれるということでした。

簡易的なアプリだったというのもあるとは思いますが、やりたいことをただ詰め込んだだけのプロンプトで、普通に動くアプリができあがりました。最初のプロンプトはこんな感じです。

映画のウォッチリストを作りたいです。
まずはプロトタイプなので、1つのHTMLのみで完結させて、ブラウザで開けばすぐ動くようにしてほしいです。
機能としては、作品のタイトルと、どこで配信しているか(U-next、Prime Videoなど)を入力して登録でき、 登録した作品を一覧で表示できるようにしたいです。
また、「視聴済み」のチェックも付けられるようにしてください。

AIを使わない従来の開発なら、どれだけ簡単なものでも「UIを考えて」「利用する技術を選定して」「コーディングして」と、数時間は軽く溶けてしまう作業です。それをClaudeは、ものの数分でやりたいことを理解して、最適なUIやツールの選定から実装まであっさり終わらせてしまいました。

あまりのスピードに、感心を通り越して若干の恐怖すら覚えたほどでした。

ここまで速いと、こちら側にもどんどん欲が出てきます。ベースができてからは、思いつく限りの要望をひたすら投げ続けました。その時のプロンプトも綺麗なものではなく、気になった箇所を箇条書きにし『ここを直して』と伝える程度で、人間のエンジニア相手なら間違いなく嫌がられるくらいに雑なものです。

こんな適当なキャッチボールを何度か続けていくうちに、ウォッチリストの大枠はあっさり完成。
微調整を含めても、初稿アプリができあがるまでにかかった時間は1時間ほどでした。

思いついたら即実装。足しながら育てていく

枠組みが完成した数日後、各自がAIで作ったアプリを紹介し合う場が設けられ、他のメンバーの作品を見る機会がありました。その中に「Gemini Nano」を組み込んだアプリを作っている方がいました。

それを見た瞬間、「そういえば自分も、観たい映画を探すときにGeminiを使ってるな。これをアプリに組み込めば、ウォッチリストをベースに映画を探せるんじゃないか?」と思い立ち、帰宅後にさっそく開発を再開。

人相手なら「開発の途中で勝手に仕様を増やすな」と怒られる暴挙ですが、こういうのもさらっと対応してくれるのがAIのすごいところ。これも数分で映画の検索機能を実装してくれました。

こうして無事に検索機能はできたのですが、次に気になってきたのが「精度」です。

最初はウォッチリストに登録した映画のタイトルとジャンルだけを頼りに、おすすめを◯本出してもらう、かなりざっくりした仕様にしていました。そのせいで、ジャンルは合っていても、自分の好みとはズレた映画が提案されることが多いという課題がありました。お気に入り登録した作品をベースにピックアップしてもらう仕様に切り替えたりと色々と試してみたのですが、結果は変わらず。

純粋にタイトルとジャンルだけだと情報不足なのかと思い、各映画のあらすじを情報として持たせることにしました。とはいえ、自分でいちいちあらすじを入力するなんて面倒なことは絶対にやりたくない…。どうしたものかと悩んだ末、ここでもAIの力を借りることにしました。

「リストに入力したタイトルをもとに、あらすじが自動で登録される仕組み」に改修。あらすじの精度を担保するために、WikipediaのAPIを使って登録タイトルから該当情報を取得し、それをベースにAIがあらすじを自動生成するというコードをこれもまたClaudeに書いてもらいました。

正直、これでもまだ精度が甘いところは残っていて、最終的にはTMDBのAPI連携へのアップデートも検討中です。とはいえ、「ちょっとの間違いはご愛嬌」と思える程度のレベルにはたどり着きました。この一連の微調整にかかった時間も、2〜3時間ほどです。

余談ですが、後日いざ実機で使っていこうとなった時、Gemini Nanoが利用できなさそうだったので、結局Gemini APIに切り替えました。無料枠だとリクエスト回数に制限はあるものの、Gemini Nanoを使うよりも良いモデルが利用できるので、精度はグッと上がりました。

出来上がったアプリを少し紹介

思いつくままに手を加えながら、まさに「使いながら育てた」このアプリですが、気づけばこれだけの機能が揃っていました。

【ウォッチリスト】

  • 映画タイトル・ジャンル・配信サービス・あらすじの登録
  • 各種APIを活用した「あらすじの自動生成」
  • 「未視聴 / 視聴済み」の切り替えチェック
  • ジャンル別・お気に入り・未視聴/視聴済みでのフィルタリング機能

【作品検索】

  • お気に入り情報をもとにGeminiがおすすめ映画を提案
  • ジャンル・提案本数を指定可能
  • おすすめされた作品をワンタップでウォッチリストに登録
  • 視聴済みの映画も視聴済ステータス付きでリストに追加可能

これまで「映画を探す」と「映画を記録する」でバラバラだった作業が、このアプリひとつに集約されました。
以前は検索のたびに自分の好みをAIに説明していたのですが、その手間もなくなって、いつでも好みの映画を探せるようになっています。

本来の目的だったウォッチリストのほうも、視聴状況やお気に入り、ジャンルで絞り込めるので、管理のしやすさはメモ帳時代とは比べものになりません。

個人的に嬉しいのが、検索結果にリスト記載漏れの作品があったとき、ワンタップで追加できる点です。
わざわざタイトルを打ち込んで登録する手間も省けるようになりました。

まとめ

ここまで読んでお気づきかもしれませんが、今回のアプリ開発で私はコードを一行も書いていません。「こういう機能が欲しい」と言葉で伝えるだけで、Claudeが全部実装してくれました。

やってみて一番に思ったこととしては、「最初から完成形を決めなくてもよかった」という点です。使いながら「あれも欲しいな」「これはちょっと違うな」と気づいて、その都度Claudeに伝えていく。アプリを「作る」というより、「育てる」に近い感覚でした。

もし「プロンプトはちゃんと書かなきゃいけない」と思って二の足を踏んでいる方がいたら、まずは雑に投げてみてください。イメージと違うものができあがったら、少しずつ直していけばいいだけの話で、失敗らしい失敗もありません。一度やってみれば「あ、意外といけるな」という感覚が掴めるはずです。

ぜひ、気軽に試してみてください。

この記事を書いた人

新卒入社からの成り上がりディレクターとして現在奮闘中!デザインから広告運用まで、あらゆる分野を制覇するマルチタレントを目指して日々挑戦中です。仕事ではスマートなディレクションを目指す一方、プライベートでは家という名の要塞で引きこもりライフを満喫中。アニメが好きだったりする。

ハンダちゃん

Webディレクター / 2022年入社

このスタッフの記事を見る

安心のチーム体制とスピードのある対応力が自慢

リベロジックでは、ベテランスタッフが積極的にプロジェクトを推進するため、お客様から高く評価されています。
プロジェクトマネージャー、ディレクターをきちんとアサインし、プロジェクト全体をスムーズに進行することを心掛けています。 不必要なフルコミットでのコスト増加を防ぎ、適材適所にリソースを配分するスタイルで、業務内容の把握から見積作成/提出の速さにも定評があります。

当社はSES的な常駐業務等は積極的に行っておりませんので予めご了承ください。

Slack、Teams、Redmine、Backlog、Asana、Jira、Notion、Google Workspace、Zoom、Webexなど、ほぼすべての主要なプロジェクト管理ツールやチャットツールをご利用いただけます。

Webのお悩みご相談ください。

ケーススタディ