# AI画像付きのランディングページやサイトを約10分で作る方法 > Oranzyで、AI画像付きのランディングページや複数セクションのサイトを約10分で作る手順を紹介。目的とターゲットの整理から、デザインの選択、構成・文章・イラストの生成、ブロックの修正、公開前のスマートフォン表示チェックまで、生成をやり直さずに仕上げるための具体的なコツを解説します。 - **Canonical URL**: https://oranzy.ai/blog/ja/ai-website-landing-page-builder/ - **Language**: 日本語 (ja) - **Oranzy Tool**: [/tools/sites](https://oranzy.ai/tools/sites?utm_campaign=ai-website-and-landing-page-builder&utm_content=ai-website-landing-page-builder&utm_medium=article&utm_source=seo_blog&utm_term=ja) - **初回特典 · 100トークン**: [登録して100トークンを受け取る](https://oranzy.ai/go/seo-100?next=%2Flogin%3FreturnTo%3D%252Ftools%252Fsites&utm_campaign=ai-website-and-landing-page-builder&utm_content=ai-website-landing-page-builder&utm_medium=article&utm_source=seo_blog&utm_term=ja) --- 商品やサービスを紹介するページは、目的と掲載内容を先に決めておくと短時間で作れます。Oranzyのサイトビルダーでは、ビジュアルの方向性を選び、構成・文章・イラストを生成してから、必要なブロックだけを編集できます。内容がそろっていれば、初稿作成から確認まで約10分が目安です。 ## 作成前に決めること 生成を始める前に、次の4点をメモしてください。 - **目的**：購入、問い合わせ、資料請求などから主要な行動を1つ選ぶ。 - **対象者**：誰のどんな課題を解決するページかを1文で書く。 - **掲載情報**：商品名、特徴、価格や提供条件、問い合わせ先など、確認済みの情報を用意する。 - **必要な構成**：冒頭、特徴、利用方法、よくある質問、行動を促すボタンなどを決める。 1つの行動に集中させたい場合はランディングページ、サービス紹介や会社情報などを分けて見せたい場合は複数セクションのサイトが適しています。 ## Oranzyでサイトを作る4ステップ 1. **サイトビルダーを開く**：[Oranzyのサイト作成ツール](/tools/sites)にアクセスします。初めて使う場合は[登録して100ボーナストークンを受け取り](/go/seo-100)、作成を始めます。 2. **方向性と内容を指定する**：用意した目的、対象者、掲載情報を入力し、ブランドに合うビジュアルの方向性を選びます。色、雰囲気、必要なセクション、ボタンの目的も伝えます。 3. **構成・文章・イラストを生成する**：生成された初稿を確認し、見出しの順序、文章の内容、画像が目的に合っているかをチェックします。最初の画面で何を提供しているか分かる構成を目指します。 4. **ブロックを修正して公開する**：修正が必要なブロックを個別に編集します。見出し、価格、ボタンの文言とリンク先を確認し、公開前に画面表示をチェックしてからサイトを公開します。 ## そのまま使える指示文の例 以下を自分の商品やサービスに合わせて書き換えてください。未確定の価格や実績は、生成文をそのまま事実として掲載せず、確認してから追記します。 > 在宅勤務者向けのデスクライトを紹介するランディングページを作成。目的は商品ページへの誘導。白と深緑を基調に、落ち着いたミニマルなデザインにする。セクションは冒頭、商品の3つの特徴、使用シーン、よくある質問、購入ボタンの順。冒頭には明るいデスク環境のイラストを配置し、画像の主題が文字と重ならないようにする。ボタン文言は「商品を見る」。価格や性能の数値は、指定した情報だけを使う。 横長のメイン画像を想定する場合は16:9、正方形の紹介画像を想定する場合は1:1と指定すると、画像の用途を伝えやすくなります。実際の表示では、画面幅による画像の切れ方も確認してください。 ## よくある失敗と生成の無駄を防ぐ方法 - **指示が曖昧**：「おしゃれなサイト」だけではなく、対象者、色、雰囲気、目的を指定します。 - **情報を盛り込みすぎる**：冒頭には提供内容と主要な行動を置き、詳しい説明は後のセクションに分けます。 - **生成された文章を未確認で使う**：価格、性能、実績、連絡先は元資料と照合します。不明な情報は削除するか、確認後に入力します。 - **小さな修正のために全体を再生成する**：見出しや画像など、問題のあるブロックから個別に直します。大幅な方向転換が必要な場合だけ、指示を整理して再生成を検討します。 - **行動を促す先が不明**：ボタンの文言とリンク先を対応させ、リンクが正しく開くか確認します。 ## 公開前の最終チェック パソコンとスマートフォンの両方で、見出しの改行、文字の読みやすさ、画像の切れ方を確認します。ボタンや問い合わせ先が正しく機能するかを試し、誤字、古い価格、仮の文言を修正してください。公開後も実際のページを開き、必要な情報とリンクが表示されることを確認します。 ## FAQ ### サイトは本当に10分で作れますか？ 目的、文章に使う情報、希望するデザインが決まっていれば、約10分で初稿の作成と確認を進められます。情報収集や修正の量によっては、さらに時間が必要です。 ### ランディングページと複数セクションのサイトはどう使い分けますか？ 購入や問い合わせなど1つの行動に集中させるならランディングページが適しています。サービスの詳細や会社情報などを整理して見せたい場合は、複数のセクションを設けます。 ### 生成された文章や画像の一部だけを修正できますか？ はい。全体を作り直す前に、修正が必要なブロックを個別に編集できます。見出しや画像など、問題のある箇所から確認してください。 ### 公開前に必ず確認すべきことは何ですか？ 価格や実績などの事実、ボタンのリンク先、連絡先、スマートフォンでの表示を確認します。公開後も実際のページを開いて、表示とリンクをチェックしてください。 --- ### この手順をご自身の素材で無料体験 新規登録で100ボーナストークンを即時付与。動画生成や商品画像作成をすぐにお試しいただけます。 - [登録して100トークンを受け取る](https://oranzy.ai/go/seo-100?next=%2Flogin%3FreturnTo%3D%252Ftools%252Fsites&utm_campaign=ai-website-and-landing-page-builder&utm_content=ai-website-landing-page-builder&utm_medium=article&utm_source=seo_blog&utm_term=ja) ### すべての言語 - [العربية (ar)](https://oranzy.ai/blog/ar/ai-website-landing-page-builder/) - [Deutsch (de)](https://oranzy.ai/blog/de/landingpage-mit-ki-erstellen/) - [English (en)](https://oranzy.ai/blog/en/ai-landing-page-website-builder/) - [Español (es)](https://oranzy.ai/blog/es/crear-landing-y-sitio-web-con-ia/) - [Français (fr)](https://oranzy.ai/blog/fr/creer-site-web-avec-ia/) - [हिन्दी (hi)](https://oranzy.ai/blog/hi/ai-website-landing-page-builder/) - [Bahasa Indonesia (id)](https://oranzy.ai/blog/id/cara-membuat-landing-page-dengan-ai/) - [Italiano (it)](https://oranzy.ai/blog/it/creare-landing-page-sito-ia/) - [日本語 (ja)](https://oranzy.ai/blog/ja/ai-website-landing-page-builder/) - [한국어 (ko)](https://oranzy.ai/blog/ko/ai-website-landing-page-builder/) - [Português (pt)](https://oranzy.ai/blog/pt/criar-landing-page-com-ia/) - [Русский (ru)](https://oranzy.ai/blog/ru/ai-website-landing-page-builder/) - [Türkçe (tr)](https://oranzy.ai/blog/tr/yapay-zeka-ile-web-sitesi-yapma/) - [Tiếng Việt (vi)](https://oranzy.ai/blog/vi/tao-landing-page-va-website-ai/) - [中文 (zh)](https://oranzy.ai/blog/zh/ai-website-landing-page-builder/)