紅茶とお菓子のペアリングを提案する「Teapair」を開発しました

作ったもの

Teapair - 紅茶とお菓子のペアリングを提案

紅茶の茶葉や飲み方、今の気分から、ピッタリのお菓子のペアリングを提案するWebサイト。紅茶好きの皆さんぜひ参考にしてみてください！まだ作りたてでバリエーションが少ないのですが…！

結果が表示されると、ページ下部に楽天APIよりおすすめ商品が表示されます。

ちなみに中の人が一番好きな紅茶はFortnum & Masonのロイヤルブレンド。これより美味しい紅茶に未だ出会えていません。こちらの画像はクラシックワールドティーというシリーズの缶です。国内で買えるものは揃っているはず。缶だけでもきゃわいいー！おっされー！！

事前準備

今回はClaude Codeをメインに使いました。実装以外の事務作業も手伝ってもらいましたよ。 例えば、楽天APIの利用申請。登録フォームに何を書けばいいか迷ったのですが、Claudeに相談したら、適切な説明文をササッと考えてくれました。

また、プロジェクトの指針となる以下のファイルもAIの提案で導入しました。

• DESIGN.md: デザインのコンセプトやルールをまとめたもの。
• CLAUDE.md: 開発時のルールやコマンドをAI自身が覚えておくためのメモ。

AIに選択肢を出してもらい、選んでいくだけで土台が完成。この時点で、自分でゼロから調べていた時の数倍のスピードを感じました。

DESIGN.md

CLAUDE.md

実装

Phase 1: まずは動くものを作る

最初はテキストベースで。「ダージリンにはアップルパイ」「アイスティーならプリンもいけるな」などなど、自分の経験や巷に言われている定石も参考に、ペアリング表をExcelで整理し、そのままClaudeに渡しました。思いつかない部分は「これに合うお菓子、他に何があるかな？」とアイデアをもらいながらリストを完成！

最初は画像がなく、絵文字が表示されるシンプルな状態でしたが、まずは動くことが大事。ここまでがあっという間でした。

Phase 2: 楽天API

次に、提案されたお菓子をそのまま買えるよう、楽天APIを連携させました。 ユーザーが選ぶと、サーバー側でAPIを叩き、商品名・画像・価格・アフィリエイトリンクを含む「商品カード」を表示させる仕組みです。

しかし、ここでトラブル発生。 {"error":"楽天APIエラー: 400"} というエラーが出続け、優秀なClaudeも「おかしいですね…」とお手上げ状態。

ここで学んだのは、最後は人間が調べること。ググってみると、楽天APIが仕様変更の移行期間だったことが判明。

楽天APIが突然動かなくなった話

こちらの記事を参考に修正コードをAIに伝えて無事解決。AIで解決できないときは、最近なんかしらの変化があったのかも？と疑い、技術記事を漁るのがよさそう。1ヶ月かかると思っていたのに、なんと1週間で主要機能が完成してしまいました！前回使い勝手の向上で時間がかかったから、今回は残りの3週間かけてやってみることに。

Phase 3: Vercelにデプロイ

一旦ここでVercelにデプロイ。前回、公開してから本番環境で不具合がでたり、スマホでの使い勝手を調整するのに時間かかったりしたので、完璧に作り込む前にデプロイすることに。特に今回は楽天APIを使っていて、本番動作確認が必要。ローカルでは動いていますが、Vercel環境で Referer ヘッダーが正しく送られるか、環境変数が正しく設定されるかは実際にデプロイしないとわかりません。早めに確認しておいた方が安全です。

デザイン

コードが秒速で生成される今、「デザインを先にFigmaで作るか、コードを書きながら調整するか」は悩みどころです。DESIGN.mdがあっても結局後から修正するなら、最初からFigmaとかでデザインを作り込んでから開発した方がいいのか？とも。いや、でも一人でデザインも開発もするなら、まずは動くものを完成させてから見た目の調整の方がいいような気もする。うーん。

私の場合、完成形が頭にあって、それを形にするだけなので、自分ひとりのプロジェクトならFigmaで形を作ってコーディングするのは手間かも。チームプロジェクトなら方向性のすり合わせや確認でデザインを完成させるステップはいるかも？一人なら、デザインが浮かんだら必要なパーツの画像を作ったり、コンポーネント単位でコーディングして組み合わせ。バランスを見て直接コードを調整ってのがよさそう。

• チーム開発： 認識を合わせるためにFigmaが必要。
• 個人開発： デザインのイメージが頭にあるなら、直接コードをいじり、コンポーネント単位でバランスを見る方が直感的で早い！

手描き風イラスト作り

Webサイトの温かみを出すため、手描き風のイラストをAdobe Fireflyで生成しました。

ただ、和菓子の生成が難しかった！特に「黒糖わらび餅」はなかなか思ったものが生成されず、見た目の特徴を英語で細かく指定して、ようやく形になりました。

その後は自力で背景透過やサイズ調整。AIで時短しつつ、最後の仕上げは自分の手で。このAIと手仕事のバランスが、愛着の湧くデザインを作るコツかもしれません。

レイアウト、UIの調整

あとは背景画像を追加したりやフォントを変更、絵文字をGoogle Fonts の「Noto Emoji」に変更して調整。Noto Emoji については、過去記事「AIコーディングの絵文字をNoto Emojiで垢抜けデザインへ」を参照してください！

地味ですが、フッターにある Buy me a coffee というサービスのリンク。コーヒーじゃないよなぁ…ってことで「Tea」に変更しましたw

正式公開

すでに公開自体はしていましたが、ここでようやくOGPやファビコン画像を用意したり、Metaタグを入れたりしてちゃんとしたWebサイトとしてSNSで共有。

最近はmixi2 に生息している私です。「mixi2紅茶部」というコミュニティに入っており、そちらでシェアしてみると、そこからの流入が今のところ一番多く、反響がありました。やはり同じ属性の界隈で拾ってもらうのがよさそうですね。（mixi2、めっちゃ平和なんでお気軽にお友だちになってくださいね！）

感想

AIコーディングの最大のメリットは、面倒な部分はAIに任せて、自分は楽しい部分（アイデアやデザイン調整）に集中できることです。

シンプルな DESIGN.md だけでは、なかなか思い通りの見た目になりません。でも、自分が「こうしたい！」という強いイメージを持って言語化できれば、AIは最強の助っ人になります。みなさんも、自分の「好き」を形にするために、AIを使ってみるのも良いですよ！

みなさんのおすすめ紅茶やペアリングも知りたいですー！また、もしこの記事やアプリが役に立ったら、ぜひ中の人に応援の紅茶を一杯いただけると今後の開発の励みになります！圧倒的感謝！