ホームページの作り方は、見た人にしてほしい行動を1つ決め、3〜6ページほどの構成と文章を用意してから、自分でコードを書く、ホームページ作成サービスを使う、AIに頼むのどれかで形にする、という流れです。最後に独自ドメインとHTTPSを設定すれば公開できます。
最初に決めること：目的とページ構成
作り始める前に目的を決めておくと、途中で手が止まりにくくなります。まずは「このホームページを見た人に何をしてほしいか」を1つだけ決めましょう。小さな花屋なら「お店に来てもらう」か「電話で注文してもらう」です。そこから必要なページを決めていきます。
- トップ：お店の名前、ひとことの説明、いちばん見てほしい情報
- 商品やサービス：写真と価格
- お店の情報：住所、営業時間、地図へのリンク
- お問い合わせ：電話番号やフォーム
文章は先にメモ帳やワープロで書いておくと、作成画面の操作に気を取られずに済みます。写真も5〜10枚ほど集めておきましょう。スマホで撮った写真でも、明るい場所で撮れば十分きれいです。
自分で作る3つの方法
- コードを書く：HTMLとCSSを学んで自分でファイルを作ります。仕組みがすべて分かりますが、スマホでもきれいに見えるサイトにするには数週末ほどの学習が必要です。
- 作成サービスを使う：テンプレートを選んで文章と写真を入れ替えます。シンプルなサイトなら早いものの、そのサービスの編集画面の中でしか作れず、別の場所へ移すのは難しくなります。
- AIに頼む：作りたいホームページを文章で説明すると、AIがコードを書きます。プレビューを見ながら会話で直せて、できたコードも手元に残せます。
AIでホームページを作る手順
VibeDreamを使う場合は、New Projectを押して次のような文章を貼り付けるか、マイクで話しかけます。気に入っているサイトのスクリーンショットを添付して「こんな雰囲気で」と頼むこともできます。VibeDreamの画面は現在英語ですが、チャットは日本語で問題ありません。
駅前の小さな花屋「はなまる生花店」のホームページを作ってください。
ページは「トップ」「季節の花束」「お店の情報」「お問い合わせ」の4つです。
トップには店名と「誕生日やお祝いの花束を、ご予算に合わせてお作りします」という一文、電話番号を大きく表示してください。
お店の情報には住所、営業時間（10時から19時、水曜定休）、地図へのリンクを入れてください。
お問い合わせフォームの内容は保存して、パスワードで守った管理ページで店主だけが見られるようにしてください。
白と淡いピンクを基調にした、やわらかい雰囲気で、スマホで見やすくしてください。
文章はすべて日本語にしてください。チャットの横にプレビューが表示されたら、パソコン表示とスマホ表示を切り替えて確認します。「電話番号をタップしたら電話がかかるようにしてください」「花束の写真を3列で並べて、スマホでは1列にしてください」のように、1回に1つずつ直していきます。
ドメインとHTTPSを整えて公開する
ホームページを公開するには、ファイルを置く場所（ホスティング）、打ち込むアドレス（ドメイン）、鍵マークを表示するためのHTTPSが必要です。VibeDreamではPut it onlineを押して名前を決めると、1〜3分ほどで hanamaru.vibedreams.ai のようなHTTPS付きのアドレスで公開されます。1回の公開で5クレジットを使い、ホスティング代は料金に含まれています。
独自ドメインを使う場合は、Put it onlineの画面で表示されるTXTレコードとCNAMEレコードを、ドメインを買ったサービスで追加します。HTTPSは自動で設定されます。なお、hanamaru.com のようなwwwなしのドメインには現在対応していないため、www.hanamaru.com をつなぎ、wwwなしのアドレスは転送設定でwww付きに送るようにします。手順は英語のdeployment guideで詳しく説明しています。
公開前のチェックリスト
- スマホで全ページを開き、文字が小さすぎないか、横にはみ出していないかを見る
- 電話番号、住所、営業時間に間違いがないかを声に出して読み合わせる
- お問い合わせフォームから実際に送信して、内容が保存され、管理ページで見られるかを確かめる
- 写真のファイルが重すぎて表示が遅くなっていないかを見る
- 公開後も、価格や営業時間が変わったらすぐに直す
ホームページ作りにかかる費用
コードを自分で書く方法はお金がほとんどかからない代わりに、時間がかかります。作成サービスやAIツールは月額料金がかかりますが、短い時間で公開できます。VibeDreamはAll Access Miniが月49ドルで60クレジットからで、独自ドメインを使う場合はドメインの年間費用が別にかかります。詳しくは料金ページをご覧ください。3つの方法をさらに詳しく比べた英語の記事How to build a websiteもあります。