インタラクティブチュートリアル
親しみやすいアシスタントの案内で、実践的なステップバイステップのチュートリアルから vibe coding を学べます。自分のペースで自然言語プログラミングをマスターしましょう。
"こんにちは！私は vibe coding 学習のガイドです。これらのインタラクティブなチュートリアルで一緒に進みましょう！"
おすすめチュートリアル
Vibe Coding 入門
vibe coding の基礎と、自然言語を使って初めてのアプリケーションを作る方法を学びましょう。
高度なプロンプトエンジニアリング
効果的なプロンプトを作る技術をマスターし、複雑なプロジェクトに必要なコードを的確に生成しましょう。
HTML 入門
わかりやすいステップごとのガイドで HTML の基礎を学び、初めての Web ページを作りましょう。
プロのための JavaScript 基礎
実践的なビジネスアプリケーションを通じて、JavaScript の必須概念をマスターしましょう。
ゲームコーディングの基礎
JavaScript を使って、初めてのインタラクティブなゲームを楽しく作りましょう。
Vibe Coding とは？
やりたいことをわかりやすい言葉で説明するだけでソフトウェアを作る方法を発見しましょう。コーディング経験は不要です。
AI エージェントとの交渉術
AI に結果をお願いするのはもう終わりにしましょう。役割設定、制約、コンテキスト、反復という4つの戦略的な交渉テクニックを学び、AI に必要なことを正確にやらせましょう。
ちょいテク：エージェントタスクを高速化する Claude Sonnet 4.6 へのアップグレード
Claude Sonnet 4.6 はよりスマートなエージェント検索を搭載 — トークン削減、低レイテンシ、同じ品質。既存プロジェクトを10分以内でアップグレードする方法を学びましょう。
ピクセルからプロダクトへ
Figma とコードの間の溝を埋めましょう。デザインシステムがどのように CSS コンポーネントに変換されるかを学びます。
0円 MVP
無料ツールで初めてのアプリを作りましょう。一銭もかけずにデザイン、コーディング、ホスティングを行います。
PRD からプロトタイプへ
AI で PRD をクリック可能なプロトタイプに変えましょう。仕様書ではなく、証拠をリリースします。
数分でランディングページを
チケットを起票せずに、コンバージョンに最適化されたランディングページを作って公開しましょう。
CSV から Web アプリへ
CSV をアップロードしてインタラクティブなデータエクスプローラーを生成しましょう。SQL の先へ。
初めてのインタラクティブな授業
即時採点付きのクイズアプリを作りましょう。生徒が本当に気に入るものを作ります。
チュートリアルをすべて見る
あなたのスキルレベルや興味にぴったりのチュートリアルを探してみましょう
Vibe Coding 入門
vibe coding の基礎と、自然言語を使って初めてのアプリケーションを作る方法を学びましょう。
Web アプリケーションを作る
モダンなフレームワークとベストプラクティスを使い、vibe coding でレスポンシブな Web アプリケーションを作りましょう。
データ管理と API
vibe coding プロジェクトでデータを効果的に扱い、外部 API を連携する方法を学びましょう。
高度なプロンプトエンジニアリング
効果的なプロンプトを作る技術をマスターし、複雑なプロジェクトに必要なコードを的確に生成しましょう。
モバイルアプリ開発
vibe coding のテクニックを使って、iOS と Android 向けのネイティブモバイルアプリを作りましょう。
デバッグと最適化
vibe coding で生成したコードをデバッグし、最適化するための効果的な戦略を学びましょう。
HTML 入門
わかりやすいステップごとのガイドで HTML の基礎を学び、初めての Web ページを作りましょう。
CSS で見た目を整える
わかりやすい CSS テクニックで、Web ページにスタイルと色を加えましょう。
レスポンシブデザイン
デスクトップパソコンからスマートフォンまで、あらゆるデバイスで Web サイトを美しく見せましょう。
プロのための JavaScript 基礎
実践的なビジネスアプリケーションを通じて、JavaScript の必須概念をマスターしましょう。
DOM 操作
Web ページを動的に更新して、インタラクティブなビジネスアプリケーションを作る方法を学びましょう。
データの可視化
ビジネスデータを効果的に伝えるプロフェッショナルなチャートやグラフを作りましょう。
ゲームコーディングの基礎
JavaScript を使って、初めてのインタラクティブなゲームを楽しく作りましょう。
アニメーションの基礎
ゲームや Web サイト向けのかっこいいアニメーションの作り方を学びましょう。
ゲームの仕組み
ポイント、レベル、パワーアップなど、魅力的なゲームの仕組みを設計しましょう。
Vibe Coding とは？
やりたいことをわかりやすい言葉で説明するだけでソフトウェアを作る方法を発見しましょう。コーディング経験は不要です。
初めての Web ページ
AI が生成した HTML と CSS を使って、自己紹介ページを作りましょう。コードの出力を読み、書き換える方法を学びます。
インタラクティブにする
JavaScript プロンプトを使って、ボタン、カウンター、動的な動きをページに加えましょう。
本物のアプリを作る
ページからアプリへステップアップ。構造化された AI プロンプトを使って天気ダッシュボードとレシピブックを作りましょう。
あなたの Vibe Coding ツールキット
プロの vibe coder が日々使うツール、テクニック、プロンプトのパターンをマスターしましょう。
AI エージェントとの交渉術
AI に結果をお願いするのはもう終わりにしましょう。役割設定、制約、コンテキスト、反復という4つの戦略的な交渉テクニックを学び、AI に必要なことを正確にやらせましょう。
ちょいテク：エージェントタスクを高速化する Claude Sonnet 4.6 へのアップグレード
Claude Sonnet 4.6 はよりスマートなエージェント検索を搭載 — トークン削減、低レイテンシ、同じ品質。既存プロジェクトを10分以内でアップグレードする方法を学びましょう。
ピクセルからプロダクトへ
Figma とコードの間の溝を埋めましょう。デザインシステムがどのように CSS コンポーネントに変換されるかを学びます。
C のいらない CSS
プログラミング言語を学ばずに、クリーンでメンテナンスしやすいスタイルを書きましょう。マージンではなく、本物のレイアウトを作ります。
レスポンシブの現実
メディアクエリと流動的なデザインをマスターしましょう。一度作れば、どこでも動きます。
アニメーションとインタラクション
CSS アニメーション、トランジション、マイクロインタラクションでデザインに命を吹き込みましょう。
ポートフォリオをリリースする
初めてのライブプロジェクトをデプロイしましょう。ホスティング、SEO の基礎、そして自分の作品の語り方を学びます。
0円 MVP
無料ツールで初めてのアプリを作りましょう。一銭もかけずにデザイン、コーディング、ホスティングを行います。
アイデアからアプリへ
課題の説明を動くソフトウェアに変えましょう。考えすぎる人とリリースする人を分ける思考法。
10分で決済を追加する
決済システムを構築せずにクレジットカードを受け付けましょう。数時間で最初の売上を手にできます。
ユーザー、データ、ダッシュボード
誰が、なぜあなたのアプリを使っているのかを把握しましょう。ファネル、リテンション、収益を追跡します。
ローンチデイ プレイブック
ローンチ前の仕上げから、ローンチ後の勢いまで。最も優秀な創業者がローンチの週末をどう過ごすか。
PRD からプロトタイプへ
AI で PRD をクリック可能なプロトタイプに変えましょう。仕様書ではなく、証拠をリリースします。
社内ツールを素早く
エンジニアリングを待たずに、仕様から管理ダッシュボードや社内ツールを作りましょう。
PM のためのデータ可視化
CSV や API データからライブダッシュボードを作りましょう。スプレッドシートではなく、インサイトを伝えます。
ワークフローを自動化する
Slack ボット、メール自動化、cron ジョブを作りましょう。戦略のための時間を取り戻せます。
関係者にリリースする
デプロイし、共有し、実際のフィードバックで改善しましょう。20枚のスライドを動くデモに置き換えます。
数分でランディングページを
チケットを起票せずに、コンバージョンに最適化されたランディングページを作って公開しましょう。
メール自動化ビルダー
テンプレートを使ったステップメールのシーケンスを作りましょう。コードなしでナーチャリングを自動化。
SEO コンテンツエンジン
メタタグとサイトマップを自動生成するブログを作りましょう。SEO チームなしで上位表示を。
アナリティクスダッシュボード
独自のマーケティング指標ダッシュボードを作りましょう。データの可視化を自分のものに。
フルファネル
ランディングページからメール、アナリティクスまでをエンドツーエンドでつなぎましょう。完全なマーケティング自動化。
CSV から Web アプリへ
CSV をアップロードしてインタラクティブなデータエクスプローラーを生成しましょう。SQL の先へ。
API 連携ダッシュボード
実際の API に接続してライブチャートを作りましょう。リアルタイムのデータ、リアルタイムのインサイト。
インタラクティブなビジュアライゼーション
AI で D3/Recharts のビジュアライゼーションを作りましょう。データに物語を語らせます。
共有できるレポート
データから PDF や HTML のレポートを生成しましょう。毎週のレポート作成を自動化します。
データアプリをデプロイする
一般公開向けのデータダッシュボードをリリースしましょう。localhost から世界へ。
初めてのインタラクティブな授業
即時採点付きのクイズアプリを作りましょう。生徒が本当に気に入るものを作ります。
コンテンツをゲーム化する
シンプルな教育用ゲームを作りましょう。学びを退屈ではなく、夢中になれるものに。
生徒の進捗トラッカー
進捗トラッキング付きのクラスダッシュボードを作りましょう。各生徒がどこにいるかを把握できます。
適応するコンテンツ
生徒のレベルに合わせて調整されるアダプティブなコンテンツを作りましょう。大規模なパーソナライズ学習を。
学校で共有する
生徒にデプロイして配布しましょう。あなたのパソコンから生徒のブラウザへ。
学習パス
体系的な学習パスで、初級から上級まで vibe coding をマスターしよう
対象者別の学習パス
あなたの経歴や目標に最も合った学習パスを選びましょう。各パスは、最も役立つ体験を提供できるように設計されています。
ユース（13〜25歳）
楽しくインタラクティブなゲームベースのチュートリアルで、すぐにフィードバックを受けながら学べます。
デザイナー
あなたのデザインを、実際に動く Web サイトやアプリに — コーディングの経験は不要です。
マーケター
開発チームに頼みたかったツールを自分で作る — ランディングページ、ダッシュボード、自動化。