コード書けないデザイナーがAIで日記アプリを作ってみた体験談

最近、AIに指示してコードを書いてもらうことでツールやアプリを個人開発、いわゆるバイブコーディングをする人が増えたように思います。

この流行りに乗って（？）前々から作りたいと思っていた自分用の日記アプリをAIと共に作ってみることにしました。

筆者自身は仕事ではデザイナーをしていますがコーディング・プログラミングには一切触れておらず、超基本的なHTML/CSSぐらいしか分かりません。JavaScriptやPHPなどに至っては全く知識がなく、独力でアプリを開発させるのはまず不可能…そんな状態でも個人だけで使うのにはそこそこ十分なツールができました。

今回の記事では素人がAIを使ってアプリを完成させるまでの体験談をお伝えします🪽

この記事で紹介する手順や完成したツールは、AIと一緒に作った個人利用の範囲内で使用しているものです。私自身はプログラミングの知識がないため、技術的な正確性・セキュリティ面での安全性は保証できません。参考程度にご覧いただけると嬉しいです🙏

完成イメージ

日付・タイトル・テキストを入力するだけの超シンプルな日記です。「ノートに書いて本棚にしまう」使用感にしたかったので、UIや全体のイメージもリラックスした雰囲気の本棚っぽいイメージにしています。（まだまだ詰めようはありますが……）

書けた日記は一覧画面から読み返せるようにしています。編集と削除の機能もつけており、一度ゴミ箱に入れた日記は30日を過ぎたら自動で完全削除される仕様に。

スマホからもアクセスできるようにしており、データは同期されています。

最初からがっつり仕様を決めて開発していたわけではなく、作りながら機能を足したり調整したりといった試行錯誤を繰り返し、なんとか形にすることができました🙌

使用したツール・サービス

• Gemini
• Claude
• GitHub
• レンタルサーバー

AIツールにコードを書いてもらい、最終的にサーバーにアップしてネット環境で使えるようにする という流れでした。

Gemini＜開発メイン＞

ゼロ〜大まかな形ができるまではGeminiに任せます。

開発をするなら有料版の方が良いようですが、今回が初めてということもありお試しとして無料版を使用しました。実際に有料版を使ったことがあるわけではないので比較はできませんが、簡単な機能であれば無料版でも実装してくれそうといった感触でした。

特にCanvasという機能で実装した画面のプレビューを見ながら指示ができるのが便利！バージョン履歴を保存してくれるのも地味に嬉しいポイントです。コードを何度も修正したけど一旦元の状態に戻したい状況で事故りにくいと感じました。

Claude＜コード微調整＞

Geminiが書いたコードがうまく動かないとき、更に細かい調整がしたいときにClaudeに投げて修正してもらいました。

ClaudeはAIの中でもプログラミングが得意といわれています。実際に違いを実感できるほど使いこんだわけではないので断言はできないのですが、修正指示は忠実に直してくれてかなり助かったという体感でした。

（そんな使い方をするなら最初からClaudeでも良かった気もしますが、両方試してみたかったのです…🥹）

GitHub＜アップ場所＞

スマホからでも使えるようにするには何らかのサーバーにアップする必要があります。ローカルサーバーを立てるという方法もあったのですが、ターミナルを使ったことがなかったのもあり上手くいかず…

最初はGitHub にアップすることにしました。GitHubだとサーバーの契約もFTPソフト（ファイルをサーバーにアップロードするのに必要な専用のソフト）も必要ないので、手っ取り早くWEB上に公開したい場合は十分だったように感じます。

レンタルサーバー＜最終的なアップ場所＞

最終的にPHPを使いたいという方向性になり、GitHubだとPHPファイルをアップできなかったためレンタルサーバーを契約することに。

今回作ったアプリは画像ファイルもなく保存するデータもテキストのみで軽量、かつ一般には公開せず自分だけが使う予定だったので、容量少なめの安価なプランで十分でした。

サーバーはロリポップ のエコノミープラン、FTPソフトにはFileZilla を使用しました。

実際に開発した手順と体験記

順序としてはこんな感じでした。

• Geminiにアイデアを投げる
• Claudeに調整してもらう
• GitHub Pagesにアップ (→上手く動作せず最終的にはアップ場所変更)
• PHP対応のコードに書き換え
• レンタルサーバーの契約・アップ
• アプリアイコンを自作して完成

事前に計画を立てずに思いついたままいろんなツールをいったりきたりしているので、全く効率的なルートではありません…。（それでも一応形にはなっています。笑）

Geminiにアイデアを投げる

手始めに、思いついていたアイデアをそのまま思考モードのGeminiに投げてみました。

HTMLベースで、タイトルと本文を入力するだけのシンプルな日記アプリを作って。

本来のアプリ開発は着手前に要件をもっとしっかり練るものかと思いますが、今回は自分だけが使うツールというのもあり、思いついたものを形にしながら練っていくスタイルに。Reactなどのアプリ開発用の言語はさっぱり（ちょっと調べるまで意味もよく分かっていませんでした…）なので、HTMLで開発してもらっています。

これだけで、ツールっぽい画面ができました！

一度形になったものを見ると、こんな機能もほしい・ここはこういうデザインにしたいというアイデアが湧いてきます。ここから

• 書いた日記を一覧で見れる画面を別タブでつけてほしい
• 全体的にあたたかみのあるリラックスした雰囲気にしてほしい
• 本棚っぽいコンセプトにしたい
• 日付入力欄がほしい
• ボタンにアイコンを入れてほしい
• ゴミ箱機能もほしい
• 細かいフォントの指定
• ログイン機能をつけたい

…などなど諸々のリクエストを入れて調整してもらいます。

そして一旦できあがったのがこんな画面。

一覧画面やゴミ箱など自分がほしい機能は大体カバーでき、アプリが一旦仮完成📙Canvas上で実際にGeminiが作った画面を動かしながら検証できるので、ここまで楽々でした。

Claudeに調整してもらう

Geminiが作ってくれたファイルを一度ローカルに保存して動作を確認しようとしてみます。すると、まさかのローカルファイルから開くと何も表示されない事態が発生（笑）

またGeminiにお願いしてもいいのですが、ここからはより細かい修正になってくるだろうと考え今度はClaudeにバトンタッチすることにしました。ClaudeもGeminiと同じくチャットベースで会話ができるので、ファイルを添付して画面が進まない旨を相談。

修正ができたら、念の為ローカルファイルでも開いて動作確認をします。

PCだけで使うならここまで確認できたらOKなのですが、今回はスマホメインで使いたいという条件が…。特にiPhoneだとHTMLファイルをローカル環境で開くことができないため、なんらかのサーバーにアップすることが必須でした。

ローカルサーバーも考えましたが、PCと同じWi-Fi環境に繋がっていないと使えなかったり、立ち上げるのに必要なターミナルの使い方に不安があったりしたので、まずはGitHub Pagesにアップしてみることに。

GitHub Pagesにアップ

GitHub Pagesにアップしたことでスマホからもアクセスできるようになりました。

しかし、実際にスマホで使ってみるとあるはずのボタンが消えていたり、データが保存されていなかったりといくつかの問題が。どこかを修正してもらう度に今度は別の箇所がおかしくなったり気になる箇所が出てきたりしてしまう、モグラ叩き状態になっていたようでした。

実際に動かしてみて初めて分かる問題点や気になる点はたくさんあることに気づき、「人が使えるものをつくる」ことの大変さを実感…。

Claudeに相談しつつ、改善をしてもらいました。

特にデータが保存できない問題は厄介。もともとlocalStrageというデータをブラウザに保存する仕組みを使っていたのですが、これだとコードを修正するたびにデータが消えてしまっていました。

JSONファイルをローカルファイルとしてダウンロードできる機能をつければ、データのバックアップはとれるようだったので一旦その運用にしていました。しかしいちいち手動で保存するのも面倒…。

サーバーサイドにデータを保存してコードを変更しても消えないようにするのが一番楽ですが、HTMLとJavascriptだけではその実装が難しくPHPが必要とのこと。GitHubはPHPファイルを扱えないので、最終的にはPHPを扱えるレンタルサーバーを検討することにしました。

データをサーバーに保存するには他にも外部サービスを使う方法もあるようです。

PHP対応のコードに書き換え

最終的にはレンタルサーバーを契約し、ファイル転送ソフトでAIが作ったファイルをアップする ということにしました。

まずはClaudeに日記データをサーバー形式で保存できる用にコードを書き直してもらいます。こんな感じの指示をしました。

• 今のHTML/JSの日記アプリを、PHPでサーバーに保存する構成に変更して
• データはJSONファイルに追記していく形にして
• POSTで送信してPHPで受け取って保存
• 簡単なパスワード保護もつけて

これだけでちゃんとPHP対応版のコードに書き換えてくれました！

レンタルサーバーの契約・アップ

できあがったファイルはサーバーにアップします。

レンタルサーバーを契約するときには

• 無料SSL化に対応している
• テキストファイルしか扱わないので容量や表示速度は重視しなくてもOK
• 個人利用なのでできるだけ安価でコスパが良いもの

という観点で考え、最終的にはロリポップ のエコノミープランで運用することに。

サーバーが契約できたら、ファイルをアップするためにFTPソフトを使います。

今回はFilezilla を使用してアップロードしました。

アプリアイコンを自作して完成

サーバーにアップしてスマホからもアクセスできるようになったら、ホーム画面にショートカットアイコンを作ることでHTMLベースのファイルで作っても「擬似アプリ」っぽくなります。ここでアプリアイコンがないとちょっと寂しいので、最初はClaudeに作ってもらいました。

が、作ってもらったものではちょっとかわいすぎたので（笑）、最終的にはFigmaで作り直したものをアイコンにすることに。

Figmaコミュニティで公開されているApp Icon Tooikit から簡単に作ることができました◎

まとめ｜作ってみた感想

以上がAIと一緒にアプリを作ってみた体験談でした。

シンプルな日記アプリならそこまで苦労せずに作れるんじゃないか？と思っていましたが、いざ形にして使い出すと使いにくい点が続出したり、スマホからもWEBからも同期して使えるようにするには保存の仕方に工夫が必要だったり…

普段からアプリ開発やプログラミングに携わっている人からすると当たり前の常識かもしれませんが、何気なく使っているツールやアプリの裏側にはいろんな技術が走っていることを改めて実感しました。

名前くらいは聞いたことがあるけど実際に意味は全く分からない技術用語もたくさん出てきたのですが、実際に使ってみることで「これを実現するためにはこの技術が必要」といった何のためのものなのかは感覚的に理解できたような気がします…

もちろんアプリストアでリリースできるようなクオリティのものではありませんが、個人で遊ぶ範囲内なら十分使えるものができました！

知識がないままAIが書いたコードでリリースして問題になるケースもあるので、個人開発するにもある程度慎重になる必要はあるかもしれません。

ですが、いざやってみることで初めて分かることや楽しさもたくさんあったので、一度チャレンジしてみてよかったと思えました！興味がある人はぜひチャレンジしてみてください💡

この記事で紹介する手順や完成したツールはAIと一緒に作った、個人利用の範囲内で使用しているものです。私自身はプログラミングの知識がないため、技術的な正確性・セキュリティ面での安全性は保証できません。参考程度にご覧いただけると嬉しいです🙏