はじめに
先日、Xtoneが全社あげてClaude codeを利用して何かのwebサービスを作るハッカソンを開催されました。 勉強会で、他の方が数分でアプリを作るのを見て「すごい！」と感じました。私は今まで全く触れたことがなく、正直ハードルの高さも感じましたが、それ以上に「面白そう」と思えてワクワクしました。
UX検討から実装まで、デザイナーとして一連の流れを経験した振り返りや感想をシェアできればと思います。
制作体制
全員複数のチームに分かれ、各自テーマを選んで制作を進めます。毎日チームMTGがあり、分からないことはサポートエンジニアに質問可能です。 私のいるチームは「レシピアプリ」がテーマになりました。ターミナル操作すら怖いレベルでしたが、サポーターにインストールや使い方を教わり、何とかClaude Codeを動かせました。試しにWebページを作ってみると数分で完成し「これはすごい！」と感動。ここから2週間のレシピアプリ開発が始まりました。
制作の流れ
というわけでワクワクしながらスタートしました。 チームでサポートを受けつつ、チームのサポートを受けつつ、制作は個人単位なので自由にアイデアを広げて、自分の作りたいものを形にできます。
ただ普段の料理はほぼ茹でるだけで、レシピアプリもほとんど使ったことがないので既存サービスをリサーチして整理しました。
ポイントは以下の通りです
- 自分が使いたいもの
- ユーザーにパーソナライズ
- AIを活用
- 公開したら多くの人に長く使ってもらえる
上記を前提にして進めることにしました。
コンセプト
LLMと相談してまとめたコンセプトは以下の通りです
- サービス名：にゃんでもCHEF
- コンセプト：誰にでも、使えば使うほど自分に合うレシピ提案アプリ
オンボーディングで料理スキルや好み、健康志向などを入力し、それに基づいてAIが最適なレシピを提案する仕様にしました。
UX検討
Claude CodeやChatGPTとリサーチ・相談しながらUX設計を進めました。「にゃんでもCHEF」という名前通り、幅広いユーザーに使いやすいことを意識。 ただ、構成や機能を洗い出すうちに「やりたいこと」が膨らみすぎ、デザインと実装を最後まで進められるか不安になるほど盛りだくさんになってしまいました。
画面構成
UX検討を経て以下の画面を設計しました。
- オンボーディング
- ホーム
- チャットモーダル
- Myレシピ
- 献立
- クッキングモーダル
- もぐもぐタイム
- プロフィール
画面同士の導線や関連性を整理したうえで、ChatGPTに実装指示書を生成してもらいました。
モック作成
チーム内で共有して有益だったのは、実装指示書をClaude Codeに読み込ませるとき、いきなり実装させずに、まず内容を理解させて要約させてから計画を立てる方法です。 このやり方で認識のズレを減らすことができました。
デザイン反映
コンセプトを作成してから他のステップと並行してFigmaでデザインの作成を進めていました。
このステップで一番苦戦するとは思っていませんでした。 FigmaデザインのURLを読み込ませ、トンマナやコンテンツ構成を分析させてから、モックに反映するやり方ですが、なかなかうまういかず、デザイン崩れや不具合が多く、「共通ヘッダーに」「カードを縦組みに」など具体的に指示しても、反映されないのに「できた」と返されたり、ボタンが動かなくなったり、不要な要素が追加されたりしました。
どうやらClaude Codeは、最初に生成したモックからUIを大きく変えるのが苦手かもしれません。細かい修正を続けても進展せず、時間の都合でデザイン修正は諦め、機能実装にシフトしました。
実装
モックやデザインがある程度揃ったところで、APIや機能実装を進めました。 チームメンバーはすでに音声入力などを実装していて、それを見て「自分にもできるかも」と思えました。
モックではAIチャットとレシピ生成は仮のもので、実際には機能として動いていないです。 AI関連の機能は短時間ではうまくいかず、すぐにトークン上限に達してしまいました。SNSシェアやお気に入り、動画再生などはスムーズにできました。
すべての機能は実装できたわけではないが、ある程度動作できて、アプリらしい形にはなりました。 デザイナーなのでバックエンドの知識がなく修正指示をどう出せばいいかわからず、ClaudeやChatGPTに修正指示作成してもらうように試しましたが、一部は有効だったので、指示の仕方がわかれば実装はスムーズにいくと実感しました。
作ってみてわかったこと
一通り進めて、少しはアプリ感は出ましたが、やはりうまくいかないことが多く、初の挑戦ではすべて完成にはいかなかったのですが、経験として今後に活かせるので、「こうすればよかった」を振り返ってみます。
細かいデザインは反映が難しい
Figmaデザインをモックに反映の際かなり苦戦したので、Claude codeはデザイン反映が苦手なのかと思いました。その後別のFigmaデザインのURLを渡して実装させたら、綺麗にできて、もしかすると既存モックに後から反映が苦手なのかもしれません。
ただ新しいデザインファイルを元に作成させて、最初はいい感じにできても、細かい修正を指示するとまた抜けたり思わぬ修正方向をしてしまうので、やはり細かいデザイン修正は限界があると思います。
スピードは早いが限界あり
簡単なWebページや機能は数分で作れるが、高度なAI機能はデザイナーでは実装は難しいと感じました。本格な開発はやはりチームが大事です。
指示の工夫が鍵
修正指示をAIに丸投げするのではなく、「こう直すべき」という文章をAIに生成させて活用すると精度が上がることがあります。 ClaudeやChatGPTに構成や指示書を作らせるのも有効ですが、Claude Code内でも可能なので、自分のやりやすい方法を選べぶとよいと思います。
Claude codeを使うコツ
今回のハッカソンを通じて学んだ「これを知っていればもっとスムーズだった」ポイントを紹介します。 他のデザイナーさんにも意見をいただきましてまとめました。ご参考になれば幸いです。
- 便利なコマンドの活用
- 最初からゴールの見える計画
- 完璧を求めない
便利なコマンドの活用
コマンドを使いこなすと、何かと便利で効率が良い。
- /init：プロジェクト仕様（CLAUDE.md）を自動生成
- /clear：セッションをリセット
- /compact：履歴を圧縮
- /model：利用中モデルを確認
- /help：コマンド一覧を確認
最初からゴールの見える計画
参考記事によると最初からゴールを明確にすることが大事です。
- 目的・完成イメージ・MVPを先に定義する
- セッションをマイルストーンごとに区切る
- CLAUDE.mdにルールをまとめ、毎回伝え直さない工夫をする
完璧を求めない
本格的な開発でなければ、デザインは作成せずClaude Codeに任せたほうがいいと思います。 「スタイリッシュ」や「任天堂風」「絵文字なし」などの指示あればある程度綺麗に作ってくれます。 Claude Codeは優秀なので、叩き台としての活用や面白いアイデアのモックを作らせるなど、十分活用できます。
デザイナーたちの作品
ハッカソンの発表会でたくさん面白いアイデアありましたので、いくつか紹介します。
SNS型レシピアプリ
こちらの作品はInstagramのようなSNS型で色々な人とレシピを共有できるレシピアプリ。 本格的に料理を楽しみたい方同士がレシピを自慢し合える便利な機能が揃っています。
Lazy Kitchen
世界一ハードルの低いレシピ検索アプリ。30秒以内のショート動画でレシピを確認でき、炊飯器のみ・レンチンのみなどのズボラ検索機能を搭載。5分以内・食材3つ以内などの絞り込みも可能。料理が苦手な人や忙しい人のニーズを深掘りした実用的なアプリ。
ARTWORK MUSIC
音楽再生と連動する視覚的・聴覚的体験を楽しめるプレイヤー。直感的な操作で音楽を楽しめるよう設計されており、視覚と聴覚を同時に楽しめる没入型の音楽体験を提供。音楽を通じた新しい体験価値を創出するアプリ。
終わりに
今回のハッカソンは挑戦でClaude Codeを通じて、これからのAIの活用法の参考にもなりました。 「Claude Code × デザイナー」という組み合わせはまだ試行錯誤が必要ですが、工夫次第で十分に可能性があります。 この記事が、同じようにClaude Codeを使ってみたい方の参考になれば幸いです。
