ClaudeのArtifacts機能でYahoo!乗換案内アプリを作ろう！

こんにちは！DiningXの吉波です！
生成AIの情報発信を始めて１週間、フォロワーが500人に到達しました！🎉皆さんフォロー&リポストしてくださり、ありがとうございます！🔥

今回は、ClaudeのArtifacts機能でYahoo!乗換案内アプリを作る方法を紹介します！実際のポストはこちら↓

ClaudeでYahoo!乗換案内のUI作りました！

検索履歴や検索結果が本家っぽくて良い感じ！🚃 pic.twitter.com/K94OVfx55I

— 吉波拓夢 | DiningX CTO (@yoshi8__) July 3, 2024

なんと、さとりさんにも広めてもらえました！🙌（めっちゃ嬉しい）

はじまり

まずはいつも通り、作りたいアプリをClaudeにお願いしましょう！

Claudeにお願いする

実際のアプリ画像を見せる

Claudeとの最初の会話で、大まかなUIの知識は教えてくれますが、詳細な部分は出力してくれないことが多いです。そこで、実際のUI画像を渡すことで、再現しやすくしてもらいます

乗換履歴画面を設計する