DESIGN FIRST1
v0
LPや画面デザインを、見ながら作り込みたい人へ。
自然な言葉や参考画像からWebの画面を作り、会話で修正できます。UIから始めて、必要に応じて機能やデータ連携へ広げられます。
- 日本語で作りたい画面を説明できる
- 参考画像やワイヤーから形にしやすい
- プレビューとコードを見ながら直せる
AI WEBSITE BUILDER GUIDE / 02
BUILD A SITEWITH WORDS
コードが分からなくても、作りたいページを言葉で説明して形にできます。LP、ポートフォリオ、小さなWebアプリ。完成形と作業の続け方から、相性のよいツールを選びます。
公式情報確認日：2026.07.1801 / COMPARE
作り方が違う、3つの選択肢。
順位は、非技術者が画面を確認しながら修正し、公開できるところまで進みやすい順です。公開先や外部サービス連携は変わることがあるため、使う前に公式情報をご確認ください。
見た目を丁寧に作り込みたいなら v0、データを使うサイトやアプリなら Lovable、まず動くものを素早く公開したいなら Bolt が選びやすいです。
FULL STACK2
Lovable
会員機能やデータ保存のあるサイトまで作りたい人へ。
自然な言葉から、画面だけでなくバックエンド、データベース、認証、外部連携を含むWebアプリを組み立てられます。
- 作りたい流れを文章で伝えられる
- データやログインを使う構成へ進められる
- 生成されたコードを後から編集できる
QUICK BUILD3
Bolt
アイデアをすぐ動くサイトやアプリにしたい人へ。
作りたいものをチャットで伝えると、WebサイトやWebアプリを生成し、内蔵エディタで修正しながら公開まで進められます。
- サイトから小さなアプリまで作れる
- 会話と画面確認を行き来しやすい
- 作ったものを公開する流れがまとまっている
02 / CHOOSE
完成形から逆算する。
まずは作りたいものを一文で決め、必要な機能を後から足していきます。
紹介ページやLPを作る
v0で見出し、写真枠、特徴、CTAの順を作り、スマホ表示を見ながら整えます。
入力・保存のあるツールを作る
Lovableで「誰が何を入力し、何が保存されるか」から説明します。
まず動く試作品を公開する
Boltで最小の機能だけを作り、実際に触ってから次の修正を決めます。
03 / START
失敗しにくい始め方。
最初から完成版を一度に頼まず、構成、見た目、機能の順に確認します。
ページの目的を書く
「AI動画を初めて作る人へ、作り方と作品を紹介するページ」のように、一文で決めます。
必要な区切りを並べる
ヒーロー、特徴、作例、よくある質問、問い合わせなど、ページの順番を先に作ります。
スマホで最後まで確認する
文字の大きさ、画像の切れ方、ボタンの遷移先を確認してから公開します。
04 / SOURCES
公式情報を基準に更新。
各サービスの公式ドキュメントを確認して作成しています。生成できる内容、公開方法、利用上限、外部連携は変更されるため、制作前に公式ページをご確認ください。