こんにちは、クラシル株式会社のharutoです🐒

先日投稿した銭湯記録アプリ「Sento Club」のリリースから早1ヶ月が経ってしまいました。この記事では、その取り組みの振り返りと学びを共有できればと思っています。（技術的な話は他の方が多く触れているのでこの記事ではやってみたきっかけや取り組み、気づきをメインで書いていきます）

（ちなみにSento Clubは、プロフィール機能やアバター機能など、ちょっとした面白い機能も追加しているのでぜひ使ってみてください🛀）

返答できていませんでしたが、たくさんの反応ありがとうございました🙇

📮 この記事を読んでほしい人

• Claude Codeを使って何か作ってみたいけど、きっかけが見つからない人

• どうやって使えばいいかわからない人

• 使うことでどんなメリットがあるか分からない人

そんな方に届いてほしいと思っています。

Sento Clubを作ったきっかけ

Claude Code流行ってるしそれ使って何かを作ってみたいな〜という気持ちもあり、そんな時にボヤッと考えてた趣味の銭湯巡りで「これまで何軒行ったんだろう？」が簡単に見れる訪問記録を手軽に残せて、回数券も把握できるアプリがあればいいなぁとなりSento Clubが生まれました。

これまでの実装経験

前提として、これまでコードについてはHTML/CSSの概要を知っている程度で、ゼロからコードを書いてプロジェクトを作ったことはありませんでした。

ただ、Cursorが出たタイミングで、ミュージックセレクターというWebのデモアプリを作ってみたり、身内で使えるその日やることを選ぶアプリを作ってみたりしていました。

Claude Codeでアプリを作ることを決めたきっかけ

これまでCursorなどを使って実装していたときは、ある程度できる感覚はあるものの、UIの実装部分が難しかったり、設計やツールとの接続まわりの相談をしても回答が曖昧だったりズレていることが多く、壁を感じていました。

ただ、Claude Codeの場合、Figma MCPを使ってデザインをそのまま渡すだけでUIがある程度形になり、あとは細かい修正をするだけでリリースできる状態まで持っていけました。Figmaで作った数画面やパーツのデザインを渡しておけばそれベースである程度は作ってくれるのでかなり重宝してます。

また、設計やツールの接続まわりの相談をしても的を射た回答が返ってくることが多く、これは感動しました。

この2点が重なって、「これでアプリを作ろう」と振り切ることができました。

Sento Club開発の進め方

まず、技術スタックはReact Native+ Firebaseで構成しています。ReactNativeはHTML/CSSの知識が活かせてとっつきやすかったのとクロスプラットフォームに展開できるのが選んだ理由です。（今はiOSしか公開してないですが）Firebaseはデータ保存やユーザー認証まわりを手軽に構築できる上に無料枠も広いため選びました。

進め方は、最初にざっくり必要な画面のデザインを作り、Claude Codeに渡して実装してもらいます。その後、実際の使用感やデザインを見ながら調整を繰り返していく、という流れで進めていました。

最初に作っていたデザインは、落ち着いたカラーや落ち着いたフォントを使った、大人っぽい昔ながらの銭湯らしいデザインでした。ただ、作っていく中で「もう少し楽しさや賑わいが欲しいな」と気づき、一気に配色を変えたりボタンを変えたりと方向転換しました。

普段の実業務ほどFigmaで作り込む場面は多くなかったのですが、レイアウトや見た目を確認したいときだけFigmaでデザインしてから渡す、という使い方がやりやすかったです。テキストで指示する場面とFigmaを使う場面を自然に使い分けられたのは良かったと思っています。

デザイナーとして楽しかった場所

ひとつはRiveアニメーションです。
普段の実業務では、Riveでアニメーションを作ってもそこで終わり、実際のアプリへの実装はエンジニアにお願いするというのが流れでした。ただ今回は、業務を通じてRiveとエンジニアとの連携の流れをある程度把握できていたこともあり、アニメーションファイルの作成からリリースアプリへの実装まで、一人で一気通貫でできました。それがすごく楽しかったポイントのひとつです。（databindingでこのデータをセットしてくださいを丸投げするだけで動くようにしてくれる）

少し前のものなのでUIや機能で差分はありますがRiveの入門をしたい方はぜひお読みください↓

もうひとつは、自分が理想とするUX体験を実際に触りながら検討できたことです。
Figmaでは平面上での確認や、複雑に組んだプロトタイプでの確認になりますが、Claude Codeを使いながら実装していくと、素早く本番に近い手触りで体験そのものを検討できます。これがデザイナーとしてすごく良かったポイントでした。

実装しながら悩んだポイント

進めていく中でエンジニアリング領域への知見が薄いデザイナーならではの悩みももちろんありました。

Claude Codeと相談しながら実装の全体像は掴めて、やることは理解したが一方で、「それが本当に正しいのか」「効率的な実装なのか」「セキュリティ的に問題はないのか」という不安が常に付きまとっていました。

都度質問しながら解像度を上げて改善していくフローはあるものの、負荷のかかる実装やログイン機能のような配慮が必要な機能を実装するときは、特に大きな不安を感じました。

この経験からの学び

今回の経験で改めて感じたのは、主軸となる専門性の大切さでした。
デザインを主にアニメーションや触り心地にこだわりを持ちながらエンジニアリング領域に踏み出せたからこそ意味があったと思っていて、主軸なしにとりあえず使えればいい中途半端に広がるだけでは突出したバリューは出せないと感じました。

また、今回の0→1のフェーズや小規模プロダクトはAIだけで十分なケースがある一方、多くの人に愛されるプロダクトへスケールさせていくためには、専門領域の深い能力がある人が必要だなと感じて、動くものは誰でも作れるけど、いい体験いいものを作るならこの人に。という状態を作っていかないとこれからは生存できないなと改めて感じました。

その上でAIに完全に自分の仕事をやってもらうというよりは、自分の中の100点を120点にも150点にも引き上げてくれる相棒として向き合っていいものを作っていきたいと思いました（いつか自分が不要になって捨てられる日が来るかもしれませんが、笑）

そして何より感じたのは、何でも作れる時代になったからこそ「何を作るか」が問われるということ。本当に必要とされるものは？自分が作っていきたいものは？と向き合う時間をもっと意識的に取っていきたいと思いました。

ここで書いたような話が坪田さんの記事に深く言語化して書いてある + 1on1でしていただいてすごく腹落ちしたのでおすすめです 📖

まとめ

この記事を読んで「Claude Codeでちょっと開発してみたいな」と思った方には、ぜひまずは小さいスコープから試してみることをおすすめしたいです。

自分の場合、過去にAIのキャッチアップがてら小さなWebアプリを作っていた経験があったからこそ、今回モバイルアプリを作るというステップに進むことができました。その経験がなければ、いきなり今回のようなことはできなかったと思います。

まずは自分が興味を持っていたり、日常でここ不便だなと感じたところに課題を設定して小さく作ってみて、肌感がつかめてきたらちょっとずつステップアップしていくのがおすすめです。

Sento Clubはまだまだいろんな実験や遊びができそうで楽しみにしています。一旦この段階まで作ることができて良かったですし、たくさんの学びがありました。

最後までお読みいただきありがとうございました。もしよければSento Clubをインストールして使ってみてください。

ーーーーーーーーーーーーーーー
クラシル株式会社では、他にもAIを活用した開発事例や現場のリアルな知見をテックブログにて積極的に発信しています。ぜひ他の記事もご覧ください。
https://zenn.dev/p/dely_jp