どうも、ヒロキです。
最近、AI（Claude Code）を使ってWebアプリを作るのにすっかりハマっている僕ですが、
アプリを作っていくうちに、ふと思ったんですよね。
「作ったアプリ、どこにまとめて置いておこう？」
ということで、今回は、自作アプリをまとめて紹介するポートフォリオサイトをAIと一緒に作ってみました。
その名も、「kobapp（こばっぷ）」です。
今回は、なぜわざわざポートフォリオサイトを作ったのか、そして実際にどんなサイトに仕上がったのかを、詳しくお話ししていきます。
AIと一緒にデザインを決めていった流れや、デザインから公開までにかかった時間も書いているので、これからAIで何か作ってみたい人の参考にもなれば嬉しいです。
…あと、AIを使いすぎてお財布がピンチになりかけている話もちょっとだけw
興味ある方はどうぞ。
なぜポートフォリオサイトを作ったのか
これから、いろんなWebアプリを作ってブログで発表していこうと思っています。
ただ、アプリが増えてくると、
- どこに何のアプリがあるのか分からなくなる
- ブログの記事に埋もれて、アプリ自体が見つけにくい
- 「こんなの作れます」と人に見せるときに、まとめたページがない
という問題が出てきそうだなと。
そこで、作ったアプリを一覧で見られる「作品集」のサイトを作ることにしました。
アプリ専用のドメインとして「kobapp.jp」を取って、
- kobapp.jp：作ったアプリの一覧（作品集）
- アプリ名.kobapp.jp：それぞれのアプリ本体
という形にしています。
アプリが増えても、ドメイン代は1つ分で済むのがポイントです。
ポートフォリオサイト(kobapp.jp)はこんなサイト
トップページ：作ったアプリの一覧
トップページには、これまでに作ったアプリがカード形式で並びます。
今はまだ「QR宝探し」の1個だけですが、アプリが増えたら「もっと見る」ボタンで6個ずつ表示されていく仕組みです。
アプリが少ないうちは「次のアプリを作っています」という枠が表示されるようにしてもらいました。
…プレッシャーをかけられている気もしますがw
アプリの詳細ページ：App Storeみたいなスクショ
各アプリの詳細ページでは、スクリーンショットをApp Storeのように横に並べて表示しています。
ほかにも、
- できること
- 使った技術
- 関連するブログ記事
などをまとめて載せています。
管理画面：WordPressみたいにアプリを追加できる
個人的に一番うれしかったのが、これ。
サイトには管理画面もあって、WordPressで記事を書くような感覚で、アプリを追加したり編集したりできます。
アイコンの色や記号を選んだり、スクリーンショットを追加したりすると、トップページでの見え方がその場でプレビューされるという親切設計。
しかも、ログインした状態でサイトを見ると、WordPressのように画面の上に管理用のバーが出て、そこからすぐ編集画面に飛べます。
もちろん、AIとのチャットで「このアプリを追加して」と頼むだけでも追加できます。
AIと一緒にデザインを決めていった
今回、一番時間をかけたのがデザインです。
いきなりサイトを作るのではなく、まずAIにデザイン案を何パターンか作ってもらって、見比べてから決めるという流れで進めました。
例えば、トップページの背景は3つの案から選びました。
- 方眼ノート風
- アイコン柄
- やわらかい図形
最終的に選んだのは「やわらかい図形」。
グレーの背景に、黄色の丸や水色の角丸が端からのぞく、ゆるっとした雰囲気がお気に入りです。
ボタンも3つの案から選んで、マウスを乗せると矢印の丸が黄色に変わって、右にすっとすべる動きにしてもらいました。
色は、ロゴとボタンの紺色をベースに、黄色をアクセントに。
アプリの枠の色だけは、
うすい紺 → アプリの色 → 斜めのグラデーション → 黄色との2色（やっぱりやめた）
と、何度も試してもらってようやく決まりましたw
自分ひとりでやっていたら、こんなに何パターンも試す気力は絶対にありません。
「やっぱり前の方がいい」と言っても、AIは嫌な顔ひとつせず戻してくれるのが本当にありがたいです（笑）
かかった時間は、夕方から夜まで
デザイン案を作り始めたのが夕方の4時前。
サイトを公開して、細かいデザインの調整が終わったのが夜の8時半ごろ。
約5時間で、デザインから公開まで終わってしまいました。
しかも、その5時間の中には、
- 管理画面づくり
- GitHub（プログラムの保存場所）に保存すると、自動でサーバーに反映される仕組みづくり
- デザインの細かい調整
まで入っています。
（ちなみに、ポートフォリオサイトのモックを出してもらうだけなら10分ほどしかかからなかったというねw）
昔、RailsでQR宝探しアプリを作ったときは、1つのアプリに2週間かかっていたことを思うと…
いや、ほんとすごい時代になりました。
ただ、ひとつだけ問題が。
開発が楽しすぎて、夢中で「次はここを直して」「やっぱりこっちの色で」とAIにお願いし続けていたら、
Claudeの使用量が、とんでもないことに。
今は月20ドル（約3,200円）のProプランを使っているのですが、このままのペースで使い続けたら、
さらに上の月額100ドル（約1万6,000円）のプランに課金しないといけなくなりそうです（笑）
サーバー代の月数千円をケチってアプリの公開をやめていた男が、AIには月1万6,000円払おうとしている…。
人って変わるもんですねw
ちょっとしたこだわり：プロフィール写真
サイトの「ABOUT」には、僕のプロフィール写真も載せています。
この写真は、撮影場所などの情報（位置情報）を消してから使ってもらいました。
実はつい最近、ブログの写真に位置情報が残っていて、自宅の場所が分かってしまう状態だったことに気づいたばかりなんです…。
うっかりしていた僕が悪いんですが、それを見抜いてわざわざ位置情報まで消してくれるClaude先生、、
控えめに言って神です！
スマホで撮った写真をそのままネットに上げるのは、けっこう危ないので、皆さんも気をつけてくださいね。
（スマホで、写真に位置情報を保存させない設定にしておくのが良いです）
今後やりたいこと
kobapp.jp はできたばかりなので、まだまだやりたいことがあります。
- 新しいアプリを作って、どんどん追加していく（次はQRスタンプラリーを追加する予定）
- 作ったアプリの話は、これまでどおりこのブログで発表する
作ったアプリの「作った話」はこばっちブログに、作り方の細かい技術メモは姉妹ブログのPLOGに書いていこうと思っています。
まとめ
今回は、AIと一緒に自作アプリのポートフォリオサイト「kobapp.jp」を作った話でした。
- 作ったアプリを一覧で見られる「作品集」のサイト
- 各アプリは「アプリ名.kobapp.jp」で公開
- WordPressみたいな管理画面つき
- デザイン案を見比べながら、約5時間で公開まで完了
まだアプリは1個だけですが、ここからどんどん増やしていくので、たまに覗いてもらえると嬉しいです。
それではまた次回の記事で。
バーイ！
コメント