Bolt.newで高品質なLPを作る方法

TL;DR

Bolt.newで高品質なLPを作るには、技術要件を明示する、21st.devのUI部品を参照させる、参考サイトの全体画像から指示を作る、という3つの方法がある。セクションを部品化し、修正箇所やデザインの雰囲気を具体的に伝えると、品質向上とトークン節約を両立しやすい。

Transcript

はいどうもしです今回はですねBT. Newを使って高品質なランディング ページとか企業のホームページを作って みようというですねYouTube動画を 撮っていきたいと思いますま今見てるです ねこのページなんですけどボニュていう ですねAIのコーディングアシスタント ツール使ってえ作りましたはいま使い方に よってはですね結構高品質なランディング ページとか企業ホームページ作れますので まそのやり方僕色々ちょっとね触ってみて ま3つですね大きくわけで3つやり方が ありますのでちょっとそれをね紹介して いこうと思っておりますまね僕があの個人 やつ用に作ったこのノートプレっていう ランニングページもボトニューで作りまし たしはいこんな感じのねサイトですねま あとはもうホームページサイトですねま ちょ... Read More

Key Insights

• 曖昧な依頼は、セクションが少なく、見た目も簡素なページを生成しやすいため、目的や構成を具体的に伝える必要がある。
• 技術要件は、Next.jsのApp Router、Tailwind CSS、shadcn/ui、Framer Motionを明示すると、UIと動きの方向性を定めやすい。
• コンポーネント分割は、ヒーローや実績など特定セクションだけを修正でき、ページ全体の再生成に伴うトークン消費を抑えやすい。
• 追加指示は、背景画像、網目模様、カードの高さ、フォント、レスポンシブ対応など、変更対象と完成像を具体化するほど伝わりやすい。
• Bolt.newへの指示は、AIへの一括命令ではなく、プロジェクト担当者がフロントエンドエンジニアへ修正を依頼するように段階化するとよい。
• 21st.devの活用は、ヒーローや機能紹介などの既存UIを選び、Bolt.new向けプロンプトをコピーして実装の参考にできる方法である。
• LPの構成は、悩みへの共感、解決策、レビューなどの社会的証明、行動喚起、よくある質問という流れも考慮する必要がある。
• 参考サイト方式は、全体スクリーンショットを画像対応AIでプロンプト化し、Bolt.newへ渡すことで、外観の方向性を再現しやすくする。
• 🎬 このチャンネルの他の動画:
  • Node.jsとStripeでサブスク決済を作る方法
  • Next.jsでストリーミングとPPRを実装する方法
  • 個人開発に役立つClaude Codeスキル5選
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Bolt.newで高品質なLPを作る方法は？

高品質なLPを作る方法は、技術要件を明示して段階的に改善する方法、21st.devのUIコンポーネントを参照させる方法、参考サイトの全体スクリーンショットからプロンプトを作る方法の3つである。どの方法でも、ページの目的、必要なセクション、色や雰囲気、修正対象を具体的に伝えることが重要になる。

Q: Bolt.newへの曖昧な指示ではなぜ品質が上がらないのか？

曖昧な指示だけでは、必要なセクション、デザインの方向性、技術構成をBolt.newが判断できないためである。動画の例では、ホームページ制作事業のトップページを単純に依頼すると、セクションが少なく、ヒーローや問い合わせ部分も簡素になった。背景、カード、構成、動きなどを追加で指定すると改善できる。

Q: Bolt.newへ指定する技術要件は何ですか？

動画で指定している技術要件は、Next.jsのApp Router、Tailwind CSS、shadcn/ui、Framer Motionの4つである。Tailwind CSSはスタイル設定、shadcn/uiはUIコンポーネント、Framer Motionはアニメーションの実装に使うものとして紹介されている。加えて、セクションごとのコンポーネント分割も指示する。

Q: LPをセクションごとにコンポーネント化する理由は？

セクションごとにコンポーネント化する理由は、修正範囲を限定し、トークン消費を抑えやすくするためである。ページ全体を一つのコードとして生成すると、小さな変更でも多くのコードを修正することになる。ヒーロー、サービス、実績などを分割すれば、対象部分だけを指定して更新できる。

Q: 21st.devをBolt.newで使う方法は？

21st.devで使いたいUIコンポーネントを選び、Bolt向けのプロンプトをコピーして、Bolt.newの指示欄へ貼り付ける。動画ではパーソナルジムのサイトを例に、ヒーロー、機能紹介、カリキュラムの各セクションを順に追加している。生成後は、日本語化、画像、余白、フォントなどを個別に調整する。

Q: 参考サイトから似たLPを作る方法は？

参考サイトを探し、GoFullPageでページ全体のスクリーンショットを取得して、その画像から実装用プロンプトを作成する。動画ではGeminiのDeep Researchで参考サイト集を探し、画像をClaudeへ渡して内容を把握させた後、抽出したプロンプトをBolt.newへ入力する流れを示している。複雑なアニメーションの再現は難しい場合がある。

Q: Bolt.newで生成したページのエラーを直す方法は？

表示されたエラー内容をBolt.newへ渡し、修正を依頼することで対応できる。動画ではプレビューが表示されない場面で、エラーをコピーして入力し、自動修正を試している。修正後はプレビューを再確認し、ヒーローや各セクションが意図どおり表示されるかを確かめる必要がある。

Q: Bolt.newでスマートフォン対応を確認する方法は？

Bolt.newのレスポンシブ表示機能を使い、タブレットやスマートフォン相当の幅へ縮めてレイアウトを確認する。自動的に対応している場合もあるが、崩れが見つかった場合は「レスポンシブ対応もお願いします」と具体的に指示する。表示幅ごとにナビゲーション、カード、文章の配置を確認するとよい。

Q: コンバージョンを意識したLPの構成は？

動画で例示される構成は、利用者の悩みへの共感から始め、解決策を提示し、レビューなどの社会的証明を加え、最後に行動喚起とよくある質問を配置する流れである。UIコンポーネントを並べるだけでなく、訪問者が内容を理解して行動へ進める順序を設計する必要がある。

Q: Bolt.newでデザインを細かく改善する指示の出し方は？

変更する場所と望む状態を一緒に伝える。例えば、ヒーローへ網目模様の背景を加える、カードの高さをそろえる、セクションを増やす、フッターを追加する、日本語フォントへ変更する、といった指示が使える。画像を添えて、その見た目を参考にコンポーネントを作らせる方法も紹介されている。

Summary & Key Takeaways

• 最初の方法は、Bolt.newへ技術要件とページ構成を具体的に渡す進め方である。動画ではNext.jsのApp Router、Tailwind CSS、shadcn/ui、Framer Motionを指定し、各セクションを別々のコンポーネントとして作らせている。曖昧な一文だけで依頼した場合よりも、アニメーションやフォームを備えた構成へ改善しやすく、部分修正時のトークン消費も抑えやすい。

• 2つ目の方法は、21st.devに掲載されたUIコンポーネントのプロンプトをBolt.newへ渡す手順である。パーソナルジムのサイトを例に、ヘッダー、ヒーロー、機能紹介、カリキュラムの各セクションを順番に生成している。生成後に画像、余白、日本語表記、フォントなどを調整し、必要に応じてエラー修正機能を使うことで、既存デザインを土台に仕上げられる。

• 3つ目の方法は、参考にしたい企業サイトやLPを探し、GoFullPageでページ全体のスクリーンショットを取得して、画像から実装用の指示を作る手順である。動画ではGeminiのDeep Researchで参考サイト集を探し、画像をClaudeに読み込ませてプロンプトへ変換し、その内容をBolt.newへ渡す流れを紹介している。ただし、複雑なアニメーションは再現が難しい場合がある。