AIを使ってWordPressホームページを作る方法|実際の制作フロー

AIを使えば、WordPressのホームページ制作は以前よりかなり進めやすくなりました。

ただし、

AIに「ホームページを作って」と頼めば全部完成する

というわけではありません。

実際には、

  • 何のためのサイトか決める
  • 必要なページを整理する
  • デザインの方向性を決める
  • サーバーとドメインを準備する
  • WordPressを設定する
  • AIを使って文章や構成を作る
  • 最後は人間が確認する

という流れが必要です。

この記事では、AIを使いながらWordPressホームページを作る実際の流れを順番に紹介します。

CONTENTS

先に結論:AIは「全部やらせる」より「工程ごとに使う」

自分が実際に使っていて感じるのは、

AIはホームページ制作のすべてを任せるより、工程ごとに使い分ける方が強い

ということです。

例えば、

  • サイト構成を考える → ChatGPT
  • 文章を整理する → ChatGPT
  • デザイン案を考える → AI
  • CSSやコードを作る → ChatGPTやClaude
  • 不具合を調べる → AI
  • 最終的な判断 → 人間

という形です。

AIは制作スピードをかなり上げてくれます。

ただし、

何を作るのかを決めるのは人間

です。

1. まずホームページの目的を決める

最初にやるべきことはWordPressをインストールすることではありません。

まず、

何のためにホームページを作るのか

を決めます。

例えば、

  • 会社を知ってもらいたい
  • 問い合わせを増やしたい
  • 店舗への来店につなげたい
  • 採用を強化したい
  • 商品を販売したい
  • 制作実績を見せたい

などです。

ここが曖昧なまま制作すると、

「見た目はきれいだけど何のサイトなのか分からない」

という状態になりやすいです。

AIにはこう聞く

例えばChatGPTに、

「建設会社のホームページを作ります。目的は問い合わせ増加と採用です。必要なページ構成を考えてください」

と聞けば、最初の構成案を出してもらえます。

その案をそのまま使うのではなく、

本当にその会社に必要なのか

を確認しながら削ったり追加したりします。

2. 必要なページを決める

目的が決まったら、次にページ構成を整理します。

一般的な会社サイトなら、

  • トップページ
  • 会社概要
  • サービス・事業内容
  • 実績
  • 採用情報
  • お知らせ
  • お問い合わせ

などがあります。

ただし、会社によって必要なものは違います。

例えば施工会社なら、

施工事例

が重要です。

飲食店なら、

料金・アクセス・営業時間

の方が重要になります。

AIを使うと候補は簡単に出せますが、

ページ数を増やすことが正解ではありません。

必要な情報だけに絞ることも大切です。

3. サーバーとドメインを準備する

WordPressを使うには、基本的に

レンタルサーバーと独自ドメイン

が必要です。

かなり簡単に言うと、

  • サーバー = ホームページを置く土地
  • ドメイン = ホームページの住所

です。

例えば、

example.com

のようなものがドメインです。

サーバーはどれを選ぶ?

WordPress向けのレンタルサーバーは多くあります。

代表的なものでは、

  • エックスサーバー
  • ConoHa WING

などがあります。

どちらもWordPressを簡単に始められる機能があります。

自分なら、

安定性や長期運用を重視するならエックスサーバー

WordPressをできるだけ簡単に始めたいならConoHa WING

という視点から比較します。

ここは別の記事で詳しく比較する予定です。

※この記事には今後アフィリエイトリンクを掲載する可能性があります。

4. WordPressをインストールする

サーバーを契約したらWordPressをインストールします。

最近のレンタルサーバーでは、

WordPressかんたんインストール

のような機能が用意されています。

そのため、以前のように

  • データベースを作る
  • WordPressファイルをアップロードする
  • FTPで接続する

といった作業を自分で行わなくても始められます。

サーバー側の案内に沿って、

  • サイト名
  • ドメイン
  • WordPressユーザー名
  • パスワード

などを設定すれば、WordPressを開始できます。

5. WordPressテーマを決める

WordPressでは「テーマ」によってサイト全体のデザインや機能が大きく変わります。

無料テーマもありますが、仕事で使うホームページでは有料テーマを使うこともあります。

自分はWordPress制作で、

SWELL

を使うことが多いです。

SWELLはブログ向けというイメージもありますが、設定やCSSを組み合わせれば企業サイトにも使えます。

ただし、

テーマだけでデザインが完成するわけではありません。

重要なのは、

  • 配色
  • 写真
  • 余白
  • フォント
  • 情報の順番

です。

6. AIでサイト構成を具体化する

ここからAIを本格的に使っていきます。

まずはトップページの構成を考えます。

例えば、

「塗装会社のトップページを作ります。ターゲットは群馬県で外壁塗装を検討している30〜60代。問い合わせにつながる構成を考えてください」

とAIに伝えます。

すると、

  1. メインビジュアル
  2. 選ばれる理由
  3. サービス
  4. 施工事例
  5. 料金
  6. 施工の流れ
  7. よくある質問
  8. CTA

のような案が出てきます。

ここで重要なのは、

AIの回答を完成品だと思わないこと

です。

例えば「料金」が必要ない会社もあります。

逆に、

  • 補助金
  • 対応エリア
  • 保証
  • 火災保険

などが重要な会社もあります。

AIの提案をベースにしながら、実際の事業内容に合わせて調整します。

7. AIで文章のたたき台を作る

サイト構成が決まったら、文章を作ります。

AIがかなり役立つ部分です。

例えば、

「地域密着の塗装会社として安心感が伝わる、80文字程度の紹介文を作って」

のように依頼できます。

ただし、AIだけで文章を作ると、

どこかで見たような文章

になりやすいです。

そこで、

  • 実際の会社の強み
  • 創業年数
  • 対応エリア
  • スタッフの特徴
  • 実績
  • お客様からよく言われること

などを追加します。

AIにゼロから作らせるのではなく、

実際の情報をAIに整理してもらう

という使い方の方が強いです。

8. デザインの方向性をAIと考える

AIはデザインの方向性を考えるときにも使えます。

例えば、

「建設会社のホームページ。深緑をメインカラーにして、地域密着・信頼感・力強さを感じるデザイン案を3つ出して」

と頼めます。

さらに、

  • 参考サイト
  • ロゴ
  • イメージカラー
  • 写真
  • ターゲット

を伝えると精度が上がります。

AIで画像を生成して、

メインビジュアルのイメージを確認する

という使い方もできます。

9. WordPressで実際に組み立てる

ここまで決まったら、WordPressでページを作っていきます。

自分の場合は、できるだけテーマの標準機能を使います。

例えば、

  • カラム
  • ボタン
  • 見出し
  • フルワイド
  • 背景
  • 画像
  • 投稿一覧

などです。

テーマ標準機能でできない部分だけCSSを追加します。

この方が、

後から修正しやすい

からです。

最初からすべてコードで作ると、少し変更したいだけでもコードを触る必要が出てきます。

10. CSSが必要な部分はAIに作ってもらう

WordPress標準機能だけでは再現できないデザインもあります。

その場合はAIにCSSを作ってもらいます。

例えば、

「このカードをPCでは4列、スマホでは2列にしたい」

「画像にマウスを乗せたときだけ少し拡大したい」

「H2の左に4pxの黒いラインを追加したい」

のように具体的に指示します。

ポイントは、

変更したい箇所だけを伝える

ことです。

「サイト全体をかっこよくして」

のような曖昧な指示だと、必要のない場所まで変更されることがあります。

11. スマホ表示を必ず確認する

ホームページはPCで作って終わりではありません。

実際にはスマートフォンから見る人も多いため、

スマホ表示の確認は必須

です。

チェックするのは、

  • 文字が小さすぎないか
  • ボタンを押しやすいか
  • 画像が切れていないか
  • 横スクロールしていないか
  • 余白が広すぎないか
  • セクションが長すぎないか

などです。

AIにスクリーンショットを見せて、

「スマホ表示で違和感がある部分を教えて」

と相談することもできます。

12. AIの回答をそのまま信用しない

ここはかなり重要です。

AIは便利ですが、

間違えることもあります。

例えば、

  • 存在しないWordPress設定を案内する
  • 古い情報を使う
  • CSSが別の場所にも影響する
  • プラグインの仕様を勘違いする

といったことがあります。

そのため、

AIが言ったから正しい

ではなく、

実際の画面や公式情報を確認します。

特に、

  • サーバー
  • セキュリティ
  • SEO
  • 決済
  • 個人情報

に関わる部分は慎重に確認した方がいいです。

13. 最後は人間がチェックする

AIを使えば制作スピードはかなり上がります。

ただ、最終的に見るべきなのは、

ユーザーにとって分かりやすいか

です。

例えば、

  • 何の会社なのかすぐ分かるか
  • どんなサービスがあるか分かるか
  • 問い合わせ方法が分かるか
  • 信頼できそうに見えるか
  • スマホで使いやすいか

を確認します。

AIは制作を手伝えますが、

サイトを見る人の気持ちまで完全に判断してくれるわけではありません。

最後は人間の判断が必要です。

AIを使うとWordPress制作はどれくらい楽になる?

AIを使うことで、

  • 構成を考える時間
  • 文章を作る時間
  • CSSを書く時間
  • エラーを調べる時間
  • アイデアを考える時間

はかなり短縮できます。

特に、

分からないことをその場で聞ける

というのが大きいです。

以前なら、

Google検索
→ 複数記事を読む
→ 試す
→ 失敗する
→ また検索

という流れだったものが、

AIに状況を説明
→ 解決案
→ 試す
→ スクリーンショットで再相談

という進め方ができます。

ただし「誰でもプロ並みのサイトが作れる」わけではない

AIを使えばホームページを作るハードルは下がります。

しかし、

AIを使えば誰でもプロと同じものが作れる

というのは少し違うと思っています。

ホームページ制作には、

  • 情報設計
  • デザイン
  • UX
  • SEO
  • 写真
  • コピー
  • マーケティング

など、さまざまな要素があります。

AIはこれらを補助できますが、

どの答えを採用するか

は人間が判断する必要があります。

AIとWordPressはかなり相性がいい

WordPressは自由度が高い一方で、少し覚えることがあります。

AIはその弱点をかなり補ってくれます。

例えば、

「この設定はどこ?」

「このCSSをどう直せばいい?」

「この文章は分かりにくくない?」

という疑問を、制作しながらその場で聞けます。

そのため、

WordPress + AI

は、これからホームページを作る人にとってかなり使いやすい組み合わせだと思います。

次はサーバー選び

WordPressを始めるには、サーバーが必要です。

次の記事では、

エックスサーバーとConoHa WINGを実際に比較して、どちらを選べばいいのか

をまとめます。

料金だけではなく、

  • WordPressの始めやすさ
  • 管理画面
  • 表示速度
  • サポート
  • 長期運用

なども含めて比較する予定です。

まとめ

AIを使ったWordPress制作は、

  1. サイトの目的を決める
  2. ページ構成を決める
  3. サーバー・ドメインを準備する
  4. WordPressをインストールする
  5. テーマを設定する
  6. AIで構成・文章・デザインを考える
  7. WordPressで制作する
  8. 必要な部分だけAIでCSSを作る
  9. スマホ表示を確認する
  10. 人間が最終チェックする

という流れになります。

AIはホームページを自動で完成させる魔法の道具ではありません。

でも、

制作を一緒に進めるアシスタント

として使えば、かなり強力です。

TAIGAMARU LAB.では、今後も実際にAIを使いながらWeb制作を進め、その過程や改善点も紹介していきます。

SHARE
  • URLをコピーしました!

AUTHOR

Web制作・システム開発・AI活用を中心に、実際に試して、作って、改善した記録をTAIGAMARU LAB.で発信しています。

CONTENTS