ホームページの作り方｜AIで作って自分で直す7ステップ（要件→たたき台→HTML→画像→公開→計測→保守）

ホームページは「要件→たたき台→HTML→画像→公開前の確認→公開と計測→保守」の7ステップで作ります。 AIでたたき台とHTMLまでは作れますが、載せる事実・法律上の表示・公開前の確認は人が決めます。 自社のURLで公開するには、独自ドメイン・サーバー・SSL（常時HTTPS）を用意します。

ホームページを作る7ステップ

ホームページの作り方は、各工程で人が決めることと、AIに任せる作業を分けると整理できます。

作り方の選択肢

初心者がホームページを自分で作る場合は、公開後に誰が更新できるかを基準に制作方式を選びます。

簡単に作れるかだけでなく、公開後に直せるかも選ぶ基準にします。AIはCMSや作成サービスにも組み合わせられるため、公開先と更新方法を別に決めます。

CMSの例にはWordPress（ワードプレス）、作成サービスの例にはWixがあります。表の向き不向きは、公開後の運用を考えた編集上の整理です。

WordPress本体はライセンス料なしで商用利用できますが、サイト全体の維持費が無料になる意味ではありません。WixではSSL証明書は追加料金なしですが、独自ドメイン接続にはアップグレードが必要です。WordPressの機能、WixのHTTPSとSSL

方式を決める前に、無料の試用や手元の確認で次の4点を試しておくと、後から乗り換える手間を減らせます。

1. 商品説明と画像を差し替えます。
2. スマホ表示と、変更を戻す操作を試します。
3. 問い合わせ、独自ドメイン、計測の利用条件を確認します。
4. 別の担当者へ権限と手順を渡し、操作を再現します。

ステップ1｜要件を決める

会社のホームページは、誰に見てもらい、何をしてほしいかを決めてから、必要なページを洗い出します。

自社で受注するか、販売先へ案内するかで、必要な機能と確認事項が変わります。カートがなくても、広告に基づき電話やメールで申込みを受ける内容なら、通信販売広告に当たり得ます。

通販では、価格に加え、送料や購入者が負担する費用も分かるように表示します。消費者庁の通信販売広告の説明

最終確認画面では分量、価格、支払時期・方法、引渡時期、撤回・解除条件を確認します。申込期限を設ける場合は期間も示し、定期購入は継続条件との整合も確かめます。

問い合わせフォームで氏名や連絡先を直接取得するときは、原則として利用目的を明示します。問い合わせへの回答と販促案内への利用を分け、送信前に目的を確認できる配置にしましょう。

総務省は、自社商品のオンライン販売や、自己の情報発信のための企業サイトを対象外の例としています。外部送信規律は、すべての会社サイトに一律の同意バナーを求める制度ではありません。

独立した情報配信などは実態から対象を判断し、通知・公表で対応する場合は次を示します。

1. 送信される利用者情報の内容
2. 情報を取り扱う者の氏名・名称
3. 情報の利用目的

外部送信規律の対象外でも、GA4の利用規約に基づくプライバシーポリシー等の説明は残ります。解析、広告、動画などの外部サービスを一覧にし、実装と説明が一致しているか確認します。Googleアナリティクス利用規約

ステップ2〜3｜たたき台とHTMLをAIで作る

AIには確定した資料と見た目の決まりを渡し、骨組み、文章、HTMLの順に分けて作らせます。

AIへの指示文の例

指示文1：構成案を作る

法人の仕入れ担当者に、見積もり相談をしてもらう会社サイトを作ります。
会社情報と商品資料だけを使い、必要なページと説明の順番を提案してください。
料金、認証、実績を補わず、未確定事項は「要確認」と示してください。

指示文2：HTMLとCSSを作る

承認済みの構成と原稿、トーン＆マナー文書に沿ってHTMLとCSSを作ってください。
スマホ表示、見出しの順序、キーボード操作、入力欄の説明を考慮してください。
フォームの見た目と送信処理を区別し、必要な接続設定を明記してください。

指示文3：公開前に修正する

添付した画面と確認結果を基に、文字の見切れとボタンの重なりを直してください。
生成元を修正し、変更点と再確認する操作を説明してください。
会社情報、価格、リンク先は変更せず、前の版へ戻せる状態を残してください。

ホームページを作るHTMLの最小例

HTMLは見出しや本文の構造を表し、CSSは見た目、JavaScriptは動きや操作を担当します。

次は、会社案内の1ページを表す12行の最小例です。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会社案内</title>
</head>
<body>
<h1>会社名</h1>
<p>確認済みの事業内容を記載します。</p>
</body>
</html>

フォームは入力欄が表示されても完成ではなく、受付、通知、エラー処理まで接続します。

当社では見た目の決まりと生成元を残す

当社では、色、書体、部品、動き、文章の決まりをまとめた、トーン＆マナー文書をAIに渡します。

当社では「AIっぽさ」を減らすため、抽象図形、光の玉、紫のネオン、すりガラスを避けます。同じ角丸カードの3列並びや絵文字も使わず、1画面の主役を1つに絞ります。

当社のトップページは2026年10月時点で15版目で、前の版も保存しています。公開HTMLだけの修正は次の組立時に消えるため、生成元へ変更を残します。

ステップ4｜画像を用意する

画像は、商用利用の条件、第三者の権利、実物との一致を確認してから、表示に必要な容量へ軽くします。

画像生成AIの商用利用条件

商用利用は規約の順守が前提で、一般向けアプリとAPI、法人向けクラウドの条件は別です。提供元との出力の帰属と、日本法上の著作権の発生も分けて判断します。OpenAI利用規約、Gemini API追加利用規約

文化庁は、生成物の侵害判断では既存作品との類似性と依拠性を確認すると整理しています。自社に著作権が生じるかも、人の創作意図や創作的寄与などに応じて個別に判断されます。

他社作品を参考資料として入力できるかと、生成物をホームページで公開できるかも別の確認です。入力素材、指示、生成結果、人が加えた修正、権利確認の記録を残しましょう。文化庁のチェックリスト＆ガイダンス

図解とaltは本文と実際の画像から作る

当社では図解を作る際、見出しだけでなく節の本文を渡し、生成後に内容を突き合わせています。

見出しだけから作った図は、当社の確認では43％が本文と食い違っていました。これは当社の確認例であり、画像生成AI全般の誤り率を示す数値ではありません。

数字の入ったグラフは画像AIへ描かせず、実データからSVGを作って数値との一致を保ちます。架空の人物画像を使う場合も、実在する社員や顧客の写真だと誤解される見せ方を避けます。

altは画像を実際に見てから書き、検索語を詰め込むより、画像の役割が伝わる説明にします。装飾画像に空のaltを設定することと、alt自体を省略することは区別して実装します。

WebPで画像を軽くする

当社では生成したPNGをWebPへ変換し、約1.2MBの画像が約47KBになった例があります。

変換後は文字や商品色の崩れを確かめ、表示サイズに合う画像を用意します。画面外の画像は、遅延読み込みの対象として検討しましょう。

ただし、最初に大きく見える主画像まで遅延読み込みにすると、表示が遅くなる場合があります。容量だけを減らすのでなく、どの画像を先に表示するかも含めて調整してください。

公開に必要な独自ドメイン・サーバー・SSL

公開環境は、URL、ページの配信先、通信の保護をそろえ、自社が契約と設定を管理できるようにします。

作成サービスにはホスティングが含まれる場合があり、別のサーバー契約が不要な方式もあります。独自ドメインも無料公開の必須条件ではありませんが、自社のURLで継続運営する前提で準備します。

ドメインを取得しただけでは公開されず、公開先に接続するためのDNS設定が必要です。会社のメールも同じドメインを使っている場合は、メール用設定を把握してから変更しましょう。

常時HTTPSでは問い合わせページだけでなく、画像やスクリプトも含めてHTTPSで配信します。証明書の警告、HTTPからの誘導、更新方法を確認し、通信の保護と事業者の信用は区別します。

ステップ5｜公開前に確かめる

公開前はスマホの見た目だけでなく、操作の完了、表示速度、権利まで実際のページで確かめます。

スマホ表示とフォームは最後まで操作する

スマホでは、商品選択から問い合わせや購入の完了まで、利用者と同じ順序で操作します。

開発者ツールでは実機を完全に再現できないため、最後は実際のスマホでも確認します。当社では画面を1枚ずつ撮って並べ、登場の動きがある部分は1秒ほど待ちます。

当社では公開の記録が成功でも、実物が変わっていなかったため、本番URLを開き直しています。承認した内容が反映され、フォームも動くかを確かめます。

Core Web Vitalsの基準で速度を見る

評価はモバイルとデスクトップを分け、実利用データの75パーセンタイルを基準にします。古い資料のFIDではなく、2024年3月12日から主要指標となったINPで確認します。GoogleのWeb Vitals解説

PageSpeed Insightsの実利用データは過去28日間で、新規ページでは表示されない場合があります。公開前はラボデータで直し、公開後に得られる実測と、手元での操作結果を合わせて確認します。

通常の読み込みを測るLighthouseでは、利用者の操作がなくINPを測定できません。画像の表示領域を確保し、重い処理を減らしてから、メニューやフォームを操作します。

アクセシビリティを人の操作でも確認する

通常の文字と背景は原則4.5対1以上のコントラストを確認し、200％に拡大しても操作できるか試します。大きな文字等の例外もあるため、デジタル庁のガイドを基準に条件を照合してください。

1. マウスを使わず、リンク、メニュー、フォームを順番に操作します。
2. 操作中の位置が見え、途中から抜けられなくならないか確かめます。
3. 必須やエラーを色だけで伝えず、項目名と修正方法を文章で示します。
4. 見出しと読み上げ順を確認し、図表の情報を本文でも得られるようにします。

JIS X 8341-3:2016にはA・AA・AAAの適合レベルがあり、対外的な準拠表明には適切な試験が必要です。Lighthouseの高得点だけで、JISのAA準拠を判断することはできません。

2024年4月から事業者の合理的配慮は義務化されていますが、事前の環境整備は努力義務と整理されています。すべての民間サイトにAA準拠が一律義務化された、という意味にはなりません。

ステップ6｜計測を始める

公開後はSearch Consoleで検索での状態を、GA4でサイト内の行動と成果を確認できるようにします。

インターネットで閲覧できること、Google検索に載ること、アクセスを測れることは別です。公開環境を用意したら、検索の確認とデータ収集の設定をそれぞれ行いましょう。

Search Consoleの登録手順

1. 自社で管理するGoogleアカウントでSearch Consoleを開き、プロパティを追加します。
2. サイト全体なら「ドメインプロパティ」、特定のURLから始まる範囲なら「URLプレフィックスプロパティ」を選びます。
3. ドメインプロパティなら、指定された確認用のDNSレコードを設定し、所有権の確認を完了します。
4. サイトマップを送信します。
5. URL検査で主要ページの状態を調べます。

URLプレフィックスプロパティは、指定したURLから始まる範囲が対象です。ドメインプロパティはサブドメインや複数のプロトコルを含み、通常はDNSで所有権を確認します。

確認用レコードは維持し、登録後は「検索パフォーマンス」で検索語と流入を見ます。サイトマップ送信や登録リクエストは、検索掲載を保証するものではありません。Googleのプロパティ追加手順

GA4の登録手順

1. Googleアナリティクスのアカウントを作成します。
2. 対象サイトのプロパティを作成します。
3. レポートのタイムゾーンと通貨、ビジネス情報などを設定します。
4. 「ウェブ」のデータストリームを作成し、サイトURLとストリーム名を登録します。
5. 拡張計測で収集するイベントを確認します。
6. 作成サービス・CMSの連携機能、またはGoogleタグでデータ収集を設定します。
7. リアルタイムレポートで受信を確かめ、詳しい動作確認にはデバッグモードを有効にしたDebugViewを使います。

連携機能と手動設置による二重送信を避け、設置経路を整理します。本番ページを開き、実際にデータが届くか確認してください。GoogleのGA4初期設定手順

推奨イベントが基本タグだけですべて自動収集されるわけではなく、連携や追加実装を確認します。重要な行動は「キーイベント」とし、問い合わせや購入につながったかを見ます。

氏名、メールアドレス、自由記入内容を、URLやイベントへ混ぜて送らないようにします。正しく測れる状態にしてから、流入の多いページと成果までの途中離脱を調べましょう。

ステップ7｜保守する

公開後は、内容更新、バックアップ、契約とSSLの期限、ソフトの更新を担当者とセットで管理します。

バックアップは復元手順まで確かめ、更新前の状態を残してから、確認用ページで動作を見ます。契約の通知先と支払方法も確認し、会社として管理権限を引き継げるようにしましょう。

よくある質問（FAQ）

無料での試作と会社としての継続運営を分けて考え、更新できる体制まで含めて作り方を選びます。

無料でホームページを作れますか

手元でHTMLを作ることや、無償ソフトによる試作から始められます。独自ドメイン、公開環境、追加機能は別の条件があるため、運用に必要な総額を確認します。

ドメインは何を選べばよいですか

社名との対応や入力しやすさで選び、登録条件も確認してください。「.jp」は国内に住所を持つ個人・団体・組織が対象で、「co.jp」は国内で登記した会社などが対象です。属性型JPドメインは原則一組織一ドメインで、例外制度もあります。

AIで作ったサイトの権利は自社のものですか

提供元の規約による出力の帰属と、日本法上の著作権、第三者の権利は分けて確認します。人の創作的寄与等により判断されるため、AIが生成しただけで、自社が独占できるとは限りません。

スマホ対応は必要ですか

スマホで情報を読み、問い合わせや購入を完了できる表示と操作を、制作の前提にしてください。Googleの検索もスマートフォンで取得した内容を使うため、パソコンだけの確認では不十分です。

自分で作るか制作会社に頼むかはどう決めますか

原稿承認、公開前の確認、日常更新を社内で続けられるかで、任せる範囲を決めます。複雑な販売機能や外部連携は、実装と確認の一部を専門家に依頼する方法もあります。

依頼時は生成元、素材の権利、管理権限、更新方法、バックアップの引渡し条件を確認します。自社の担当者が直す場面を想定し、操作確認と引継ぎまで依頼しましょう。