かつてはウェブサイトの構築は専門家に依頼しなければならない大掛かりなプロジェクトのように感じられました。しかし、もうその必要はありません。
私はHostinger Website Builderを利用しており、このガイドではログインした瞬間からサイトが公開されるまでの全工程をステップ・バイ・ステップでご案内します。
それでは始めましょう。
Hostinger Website Builderとは？
Hostinger Website Builderは、ホスティンガーのアカウント内に組み込まれたAI搭載のドラッグ＆ドロップ式ウェブサイトビルダーです。
インストールは不要、コードの知識も不要、デザインの背景も不要です。あなたが求めるウェブサイトを説明すると、AIがサイトを生成し、それをブランドに合わせてカスタマイズできます。
ゼロからプロフェッショナルなウェブサイトを最速で公開できる方法のひとつです。
ステップ1：ログインしてビルダーにアクセス
Hostingerにログインすると、まずhPanelに入ります。ここがウェブサイト、ドメイン、メール、請求情報などを管理するダッシュボードです。
左サイドバーにあるナビゲーションからWebsitesをクリックすると、「Websites list」と「Migrations」の2つの項目が表示されます。Websites listを選択してください。
「Websites list」ページには、アカウントに接続されているすべてのウェブサイトが表示されます。
画面右上の紫色の+ Add websiteボタンをクリックします。
ドロップダウンには以下の4つのオプションが表示されます：
- Hostinger Horizons
- WordPress
- Hostinger Website Builder
- Custom PHP/HTML website
ここでHostinger Website Builder（AIパワードのドラッグ＆ドロップビルダー）を選択します。
ステップ2：AIにサイトを説明
Hostinger Website Builderを選ぶと、「Let AI create your online presence.」というセットアップ画面が表示されます。
ここでAIに作りたいサイトの内容を伝えます。
「Describe your website or business.」というプレースホルダー付きの大きなテキストボックスがプロンプト入力欄です。ここに詳細を書くほど、AIの生成結果が精度を増します。
その下には「Create a business website」「Create an online store」「Design a portfolio」「Launch an appointments website」「Start a blog」「Launch a restaurant website」「Create a one pager website」といったクイックスタートの提案チップが並んでいます。クリックすると最初のプロンプトが自動入力され、編集して拡張できます。
画面下部にはPre-made templatesとLink in bio websiteのリンクがあります。AIを使わず既存のテンプレートを選びたい場合はPre-made templatesを、シンプルな1ページサイトを作りたい場合はLink in bio websiteを選択してください。
本格的なウェブサイトを作るなら、AIプロンプト欄から始めるのがおすすめです。
良いAIプロンプトの書き方
AIプロンプトはデザイナーへの指示書だと考えてください。具体的に伝えるほど、期待した通りのデザインとコンテンツが得られます。
このガイドで使用したプロンプトの例です。クリエイティブエージェンシー向けのサイトを作る場合：
“Build a modern, professional website for a creative agency that offers branding, graphic design, web design, and digital marketing services. The website should feel creative, bold, and trustworthy while staying clean and easy to navigate. Use a modern layout with strong visuals, good spacing, and stylish typography. Include the following pages: Home, About, Services, Portfolio, Blog, and Contact. On the Home page, add a hero section with a powerful headline, short value-focused description, and a clear call-to-action button like ‘Start Your Project’ or ‘Get a Quote.’ Write simple, persuasive copy that explains what we do, who we help, and the results we deliver. Make the website mobile-friendly, fast-loading, and optimized for basic SEO.”
業界、トーン、レイアウトスタイル、必要なページ、トップページ構成、コンテンツ目標まで具体的に指定しています。このレベルの詳細があれば、AIは期待に沿ったサイトを生成しやすくなります。
プロンプトを入力すると、テキストボックス右上にImprove descriptionボタンが表示されます。これをクリックするとプロンプトが拡充・洗練され、見落としがちな要素も追加されます。
準備ができたら、テキストボックス右下の紫色の送信アイコン（矢印）をクリックしてプロンプトを送信し、生成を開始します。
ステップ3：AIによるサイト生成を待つ
プロンプトを送信すると、すぐにAIが動き出します。深い紫色の全画面ローディング画面に「Looking for matching pictures…」とプログレスバーが表示されます。
この工程には通常30～60秒かかります。AIはレイアウト生成、コピー作成、ストック画像選定、ナビゲーション構築、サイト構造化などを並行して行っています。
ローディング中はタブを閉じず、そのまま完了を待ちましょう。
ステップ4：AIが作ったサイトを確認
生成が完了すると、プレビュー画面が表示されます。AIの成果を見るのはワクワクします。
画面左側にライブプレビュー、右側に「Your idea summary」パネルが表示され、入力したプロンプトの要約とEdit ideaボタンがあります。
私の場合、AIはサイト名を「BoldCraft Studio」とし、トップページに「Crafting Bold Brands That Shine」というキャッチコピー、サポート文、2つのCTAボタン（「Start Now」「Get Quote」）を生成しました。
ナビゲーションには指定した6ページ（Home、About、Services、Portfolio、Blog、Contact）が含まれています。
画面左上にはPrevious versions（代替デザインの参照）とRate site（評価）ボタン、右上にはデスクトップ・モバイル切り替えアイコンがあります。モバイル表示での見え方を早めにチェックしておくと安心です。
大まかな方向性に満足したら、右パネルの紫色のContinueをクリックして本格的なエディタに進みます。もし満足できなければ、Edit ideaを押してプロンプトを修正し、再生成しましょう。
ステップ5：エディタに慣れる
エディタはこの後もっとも長く使う画面です。最初にレイアウトを把握しておきましょう。
エディタは大きく2つの領域に分かれています：
- 中央の大きな領域はウェブサイトのキャンバスで、リアルタイムにサイトを操作できます。
- 左の狭い垂直サイドバーがコントロールパネルで、各種ツールが集まっています。
サイドバーの各メニューの役割は以下の通りです：
- Setup：サイト基本設定、接続ドメイン、プラン情報へアクセス。
- Elements：ドラッグ＆ドロップで新しいコンテンツブロックを追加。
- Pages：全ページの一覧。切り替え、追加、名前変更、並び替え、削除が可能。
- Styles：フォント、カラーパレット、ボタンスタイルなどグローバルデザイン設定。
- AI tools：Hostingerの文章＆コンテンツAIを使ってテキスト生成やリライト。
- Blog：ブログ投稿の作成・管理。
- Store：製品を販売する場合のEC機能（Businessプラン以上が必要）。
- SEO：各ページのメタタイトル、メタディスクリプションなど検索最適化設定。
- More：Appointments、General settings、Integrations、Form submissions、Analytics、Media library、Multi-language support、Manage backups、Export content to WordPress、Help and Resourcesなど。
エディタ上部のツールバーには、デスクトップ／モバイル切り替え、Undo／Redo、Connect domain、Preview、緑色のGo liveボタンがあります。
ステップ6：コンテンツを編集
ここからサイトを自分仕様に仕上げます。キャンバス上の任意の箇所をクリックすると編集モードになります。
各セクションにカーソルを合わせると左上に「Section」や「Header」などの青いラベルが表示され、上部に小さな浮遊ツールバーが出現します。
セクションツールバーには順に、Edit section（背景色・画像、パディング、レイアウト調整）、Generate image（AI画像生成）、複製、表示／非表示切替、削除、上下移動、三点リーダーの詳細オプションがあります。
テキストを編集するには、直接クリックして入力します。フォーマットツールが表示され、フォントサイズ、ウェイト、配置、色を調整できます。
画像を変更するには画像をクリックし、ローカルファイル、Hostingerのストックライブラリ、AI生成のいずれかを選択します。
まずトップページを仕上げ、Pagesパネルで他のページに切り替えて順に編集しましょう。
ステップ7：AI画像生成機能を使う
プロ用の写真がない場合に役立つのがAI画像生成機能です。
任意のセクションにカーソルを合わせ、浮遊ツールバーのGenerate imageをクリックすると、右側からパネルがスライドインします。
「Image description」テキストボックスに生成したいイメージを入力します。具体的かつビジュアル的な説明ほど質が高くなります。文字数上限は3,000文字で、品質インジケーターがリアルタイムに強度を示します。
たとえば「A modern creative agency workspace with designers collaborating around laptops and large screens, displaying branding designs, website mockups, and digital artwork. Bright, clean, and stylish office」と入力すると「Great description!」と表示されます。
準備ができたらCreate imagesをクリックし、生成された画像の中から選択してください。
注意点として、AI画像生成はBusinessプラン以上が必要です。Premiumプランの場合はアップグレードの案内が表示されます。
ステップ8：任意のページに新しい要素を追加
ページにまだないコンテンツブロックを追加するには、左サイドバーのElementsをクリックし、「Add elements」パネルを開きます。
Text、Button、Affiliate link、Add to bag、Image、Gallery、Video、Shape、Card、Map、Instagram feed、Contact formなどの要素がグリッドで表示されます。追加したい要素をドラッグ＆ドロップでキャンバス上の任意の位置に配置します。
配置後は要素をクリックして個別の設定やスタイルを調整できます。AIが生成したレイアウトに縛られず、要素の追加・削除・並べ替えが自由に行えます。
ステップ9：ページの管理
左サイドバーのPagesをクリックすると、すべてのページが一覧表示されます。任意のページ名をクリックしてそのページに切り替えられます。
新しいページを追加するにはプラスボタンを、ナビゲーション順を変更するにはドラッグ＆ドロップで並び替えを行います。
AIが生成した不要なページは削除し、新たにTestimonialsやPricingページなどが必要であればここで追加し、Elementsパネルで中身を作り込みましょう。
ステップ10：SEO設定
公開前にSEO設定を行いましょう。多くの人が省略しがちですが、15分程度の手間で検索流入に大きな差が出ます。
左サイドバーのSEOをクリックすると「Let’s be found on Google (SEO)」パネルが開きます。
パネルは左にページ一覧、右に「Website overview」があり、ビジネス名やサイト言語の設定が可能です。正しくなければEditで更新してください。
「Some pages require your attention.」とマークされたページにはオレンジの警告アイコンが付いています。ページをクリックしてメタタイトルとメタディスクリプションを入力しましょう。
良いメタタイトルは60文字以内で主要キーワードを含め、メタディスクリプションは160文字以内でページ内容を端的に説明します。検索結果に表示される重要な情報なので、各ページに時間をかけて設定しましょう。
ステップ11：ドメインの接続
カスタムドメインをまだ接続していない場合は、エディタ上部のConnect domainをクリックします。
既にドメインをお持ちの場合はDNS設定をHostingerのサーバーに向けることで接続できます。まだドメインを持っていない場合は、この画面からHostingerで新規購入することも可能です。
ドメインを接続するまで、サイトはyoursite.builder-preview.comのようなHostingerの仮サブドメインで公開されます。テスト用には問題ありませんが、公開時にはカスタムドメインを設定しましょう。
ステップ12：プレビュー＆公開
いよいよ公開目前です。エディタ右上のPreviewをクリックします。
訪問者に見える通りの全画面プレビューが表示されます。デスクトップ・モバイルの表示を切り替えて、両方で問題ないか確認しましょう。
特にモバイルのヒーローセクション、ナビゲーションの折りたたみ、画像の切り抜き状態をチェックしてください。
問題なければエディタに戻り、緑色のGo liveをクリックしてサイトを公開します。
ステップ13：連携機能を探る
サイト公開後は、左サイドバーのMore > Integrationsから連携機能を確認しましょう。
Integrationsパネルでは、Shippo（発送ラベル作成・受注管理）、Printful（プリントオンデマンド製品販売）、Hostinger Reach（メールマーケティング）、Google Ads（広告運用）、Custom code（独自のHTML/CSS/JS追加）など外部サービスと接続できます。
任意の統合機能にGet startedをクリックして連携設定を行い、再度公開すれば反映されます。
Hostinger Website Builderを最大限に活用するコツ
AIプロンプトには詳細を惜しまない。二文程度では一般的な結果になります。業界、ターゲット、デザインの好み、ページ構造、トーンを含む詳細なブリーフを5分かけて作成すると、後の編集時間を大幅に節約できます。
毎回Improve descriptionを使う。見落としがちですが、AIが曖昧な部分を具体化してくれるので必ず活用しましょう。
コピーは自分の言葉で丁寧に編集。AIの仮の文章は概ね良好ですが、あなたのビジネスや価値観を正確に伝えるために全ページを見直しましょう。
公開前にモバイル表示をチェック。Hostingerは自動でレスポンシブ対応しますが、画像や余白の微調整が必要になる場合があります。必ずモバイルで確認を。
全ページのSEOを設定。ホームページだけでなく、サイト内のすべてのページにメタタイトルとメタディスクリプションを設定しましょう。1ページあたり数分で完了し、検索流入を増やす最も簡単な方法です。
Media libraryで素材を整理。More > Media libraryで画像を一元管理すると、複数ページでの再利用や一貫性の維持が容易になります。
公開後も定期的に改善。サイト公開はゴールではなくスタートです。ビジネスの成長に合わせてコンテンツを更新し、ブログを追加し、ページを磨き続けましょう。
Hostinger Website Builderは、プロフェッショナルなウェブサイト構築のほとんどのハードルを取り除きます。AIがデザインとコピーの大部分を担い、カスタマイズエディタで仕上げ、SEOや連携機能がビルトインされています。
このガイドに沿って進めれば、1時間以内に美しく仕上がったウェブサイトを公開できるでしょう。
