AIでゆっくり学ぶReact - ランディングページで『Vibe Coding』
この記事ではランディングページ制作を例にしてReactを学びつつ、同時にAIツールの使い方も学んでいきます。なお、本記事は連載の第1回で、今後続編を追加していく予定です。
ゆっくり着実に学ぶ
世間一般のAIコーディングでは「これで10倍速！」のように速さを追い求めるノウハウが多く紹介されています。
しかし、この連載では、あえてゆっくりと着実に学ぶことを目指します。なぜなら、急ぐことだけが重要なのではなく、着実に技術を習得することで、できることが増え、自身の成長を実感する喜びも得られると考えるからです。
技術の使い方を着実に学ぶ方がいいというのは、AIツールについても、Reactについても言えます。幸いなことに、Reactを学ぶのにAIを使うと補助輪がついたようにつまずくことが減りますし、同時にAIツールの使い方にも詳しくなります。
ランディングページとは？
ランディングページとは1ページのみで構成されるWebページのことで、主に検索結果や広告などからの遷移先として使われます。以下はGitHub Copilotのランディングページです。
典型的なランディングページは縦長です。例えば、「月額課金型のサービス」「スマホの料金プラン案内」「保険の案内」「英語学習アプリ」などで、縦長のWebページをスクロールしていくと、メリットや料金比較が載っていて「今すぐ始める」「料金比較」などのボタンがついているものを見たことがあるかと思います。
本記事でランディングページからReactの練習を始める理由は、それがReactで作る上で非常に単純で学習しやすいからです。ごく少数の機能しか使わず、ルーティング、即ちURLに応じたページ分けも不要、データベースも不要、内部状態の管理も必要ありません。本来Reactを使う必要が全くないくらい単純ですが、練習の手始めにはランディングページのその単純さが適しています。
Vibe Codingをはじめる
それではAIツールを使ってコーディングを始めましょう。ここではまずVibe Codingと呼ばれるアプローチを採用します。
Vibe Codingの定義は以下のリンク先にある通りで、簡単に言うと「AIに大まかな指示を出す」「ソースコードは気にしない」「AIと会話しつつ修正していく」という流れの中で「Vibe(雰囲気)」を感じながら行うコーディングです。
- Addy Osmani氏によるBeyond Vibe Codingにおける説明
- Andrej Karpathy氏によるVibe Codingという命名の起源になったとされるXの投稿
Vibe Codingを始めるには多くの人にとって馴染みのあるチャット型AIアプリを使うのが簡単です。本記事ではGeminiを使っています。
同じくチャット型のChatGPT、Claudeでも構わないのですが、Geminiで2.5 Flashモデルを選ぶとChatGPTやClaudeに比べて無料プランの枠内でもかなりたくさん使えるようです。
チャット型ツール以外にも、Claude CodeのようなCLI型ツールやCursorのようなIDE統合ツールを使いたい方もいるかもしれません。しかし、Reactを学びたい方全員がこれらのツールを使いこなせるわけではありません。最も手軽に使えるチャット型ツールに慣れておくことで、AIを活用した練習の頻度が増えると考えられます。そのため、本記事ではチャット型ツールでのVibe Codingを紹介しています。
最初なので、AIに渡すプロンプトはできるだけシンプルにしましょう。
Reactでセールスプロモーション用のランディングページを作ってください
Geminiでソースコードを生成する場合、以下の動画のようにCanvas機能を使うとプレビューまで見えて便利です。
Geminiで生成されたReactソースコードには以下の特徴があり、ChatGPTやClaudeで生成しても同様の特徴を持ちます。
生成出力の特徴:
- 単一ファイルの中にソースコードを出力します。
- この単一ファイルは完全なReactプロジェクトではありません。
- そのためGeminiの外で動かすにはReact開発環境の設定が必要です。
- CSSについて何も指定しないと、多くの場合Tailwind CSSを使います
- Reactコンポーネントライブラリであるshadcn/uiを使うことも多いようです。
プロンプトによる見た目の更新
Vibe Codingの続きです。プロンプトで指示してランディングページを更新していきましょう。
料金セクションを追加してください
これは見た目にもきれいなセクションを追加してくれます。
続けていきましょう。
製品の特徴的な機能を紹介するセクションを追加してください。
横4x縦3のカードを並べたレイアウトで、機能を表すアイコンを表示してください。
製品の印象的なスクリーンショットと、
興味をひく宣伝文句を載せたセクションを追加してください
GeminiチャットアプリのCanvasでは、生成画像を埋め込む機能はありません。そのためスクリーンショット画像の代わりに長方形を塗りつぶした領域に文字が配置されています。
一撃ではうまくいかず、工夫が必要なプロンプト
先ほどの料金セクションをよく見ると、カード間で要素の高さがズレています。
そこで、以下のプロンプトで修正を試みますが…
料金セクションの料金表示位置がずれています。
３枚のカードの料金の表示位置の高さ、
機能リストの始まる位置の高さ、
ボタンの位置の高さ
を揃えてください。
…うまくいきません。
ほとんど何も変わっていません
高さを揃えるために「それっぽい」修正をしてくれていますが、実際には全く効果がない修正になっています。
AIからの返答 - 「それっぽい」修正の中身
ご指摘ありがとうございます。料金セクションのカード内の要素（料金、機能リスト、ボタン）の縦方向の配置を揃え、視覚的な一貫性を高めます。
Pricing Section の各カードに Flexbox (Tailwind CSS のflex,flex-col,justify-between) を適用し、料金、機能リスト、ボタンがカードの高さに関わらず整列するように修正します。
LandingPage.jsxファイルを更新します。料金セクションのカードに Flexbox を適用し、以下の修正を行いました。
- カードコンテナ: 各カードに
flex flex-colを追加し、内部の要素を縦方向に配置するようにしました。- 要素のグループ化と配置:
- 料金表示部分:
flex-grow-0を適用し、コンテンツのサイズを維持します。- 機能リスト (
ul):flex-growを適用し、残りの垂直方向のスペースを占有することで、リストの開始位置を揃えます。また、mt-0 mb-8に変更し、リストの上下のスペースを固定しました。- ボタン:
mt-auto(自動マージン) とflex-grow-0を適用し、常にカードの最下部にボタンが整列するように固定しました。これで、異なる機能数を持つプランカードでも、料金表示、機能リストの開始、ボタンの位置が綺麗に揃うようになり、視覚的な均整が取れました。
そこで、3種類の料金プランのデザインを統一することで高さを揃えやすくします。
料金セクションのカードのデザインは3つ全て統一して、
プロのカードも同じデザインにしてください。
ただし、真ん中のカードのカラーはそのままにしてください。
その後、再び高さを揃えるプロンプトです。
料金セクションの料金表示位置がずれています。
３枚のカードの料金の表示位置の高さ、
機能リストの始まる位置の高さ、
ボタンの位置の高さ
を揃えてください。
これでうまくいきました。
途中からの大幅な軌道修正はうまくいかない
さて、Geminiが作ってくれたランディングページはなかなか見栄えのする仕上がりになっていますが、冒頭に掲載したGitHub Copilotのランディングページや、その他実在するサービスのランディングページと比較すると、やはりまだ見た目はコマーシャルクオリティ、プロフェッショナルクオリティには達していません。
そこで次のようなプロンプトで指示を出してみます。
さらにモダンで洗練された、プロフェッショナルクオリティの見た目にしてください。
実在するサービスのように、ページの来訪者が信頼感をもってサービスの契約ページに遷移できるような、
世界的な大企業と同等レベルの品質と安心感を感じるデザインにしてください
このプロンプトによる変更の前後を比べてみたのが以下の動画ですが、正直ほとんど見た目は変わっていません。左側がこのプロンプトの実行前、右が実行後です。
これは初回のプロンプトのあとは既存のソースコードに「引っ張られてしまう」、つまり既存のソースコードをもとにそれを修正する形で2回目以降のプロンプトに従おうとするので、大きすぎる修正は難しくなってしまうためです。
AIからの返答 - 修正の中身
承知いたしました。現在のランディングページのデザインを、世界的企業が採用するような、モダンで洗練されたプロフェッショナルな品質へと刷新します。
デザイン改善のポイント:
- カラースキーム: 信頼性の高い**ディープインディゴ（indigo-900）をベースに、先進性と清潔感を象徴するシアン（cyan-500）**をアクセントカラーとして使用します。
- タイポグラフィ: 読みやすく、メリハリのあるフォントウェイトとサイズ調整を行い、情報の伝達力を高めます。
- コンポーネントデザイン:
- カード: 影を控えめにし、角を丸く（rounded-3xl）することで、よりモダンな印象に。
- ヒーローセクション: CTAをより強力に目立たせ、安心感を強調するレイアウトに変更。
- 料金プラン: ハイライトプランを背景色でなく、強力なボーダーとシャドウで際立たせ、プロフェッショナルな統一感を保ちます。
デザインを大幅に調整した LandingPage.jsx を以下に示します。
大胆なリデザインも含めて検討してください。と指定しても、ダークテーマになったくらいで見た目のクオリティ的にはほぼ変化がないものが出力されます。
大胆なリデザインも含めて検討してください。
さらにモダンで洗練された、プロフェッショナルクオリティの見た目にしてください。
実在するサービスのように、ページの来訪者が信頼感をもってサービスの契約ページに遷移できるような、
世界的な大企業と同等レベルの品質と安心感を感じるデザインにしてください
まとめ
ここまでランディングページを題材にVibe Codingを試してみました。
Reactでセールスプロモーション用のランディングページを作ってくださいという非常にシンプルな指示でも、いまの時代のAIチャットツールはなかなかのクオリティのランディングページを作成してくれますし、その後の指示で追加セクションも作成できました。
ただし、プロフェッショナル / コマーシャルクオリティと言えるものではなく、出力の品質に本気でこだわりたいなら、もっと管理され系統立ったアプローチが必要です。本記事と後続の連載記事はReactの練習なので、ランディングページの見た目にはそこまでこだわりませんが、出力されるソースコードの品質をコントロールするアプローチが重要であることは同じです。
また、一旦ソースコードを出力したら途中から大幅な軌道修正は難しいことも学びました。そのため、理想の出力を得るために大事なことは最初のプロンプトからゴールにある程度近づくこと、そこから先は着実にゴールへの距離を縮める修正テクニックを身につけることが重要です。
出力をコントロールするために必要なのは、出力されたソースコードを読み解く力です。つまり、React自体の理解が必要になってきます。
次の記事ではAIツールの力を借りて、Reactによるランディングページのソースコードを読んでいきましょう。Vibe Codingではソースコードをほとんど気にせず進めてきましたが、いよいよReactの理解を深め、さらなるスキルアップを目指す段階になります。
Discussion