AIを活用して、自身のポートフォリオ兼サービス紹介サイト「hiro-dev-lab」の初期版を約4時間で制作しました。
実際に制作したホームページはこちらです。
hiro-dev-labには、ITエンジニアとしてのプロフィール、対応できる開発領域、技術スタック、開発実績、ブログ、お問い合わせなどを掲載しています。
AIに一度指示を出しただけで、ホームページが自動的に完成したわけではありません。
サイトの目的や掲載内容を整理したうえで、ページ構成、文章作成、デザイン案、実装作業などにAIを活用し、最終的な内容や表示はWebエンジニアとして確認・調整しています。
この記事では、AIを活用してホームページを約4時間で制作した工程、短時間で公開できた理由、AIに任せた作業と人が判断した作業について紹介します。
AIで制作したホームページ
今回制作したhiro-dev-labは、ITエンジニアとしての情報発信と、Webシステム・AI導入に関する相談窓口を兼ねたホームページです。
主に、次の内容を掲載しています。
- プロフィール
- 対応できること
- Webアプリケーション開発
- 業務システム開発
- AIシステム開発
- 使用できる技術
- 開発実績
- 技術や業務改善に関する記事
- お問い合わせ
単なる名刺代わりのホームページではなく、開発実績やSEO記事を継続的に追加し、検索流入から仕事の相談につなげることを目的としています。
約4時間で制作した範囲
約4時間で制作したのは、hiro-dev-labの初期公開版です。
初期版では、ホームページとして最低限必要な情報に絞って制作しました。
- トップページの構成
- メインビジュアル
- 自己紹介
- 対応できる開発領域
- 技術スタック
- 開発実績の概要
- お問い合わせへの導線
- スマートフォン表示
- WordPressへの実装
- 基本的なSEO設定
開発実績の詳細ページやSEO記事などは、初期公開後に追加しています。
最初からすべてを完成させるのではなく、必要な情報を先に公開し、その後にホームページを育てていく方法を採用しました。
AIホームページ制作の実際の工程
1．ホームページの目的を整理
最初に行ったのは、デザインやコーディングではなく、ホームページを作る目的の整理です。
hiro-dev-labでは、次の目的を設定しました。
- ITエンジニアとしての経歴を伝える
- Webシステム開発の経験を紹介する
- 開発したシステムを掲載する
- AIや業務改善に関する情報を発信する
- 開発や協業の相談を受け付ける
ホームページ制作では、最初に目的を決めることが重要です。
目的が曖昧なままAIへ指示すると、見た目は整っていても、誰に何を伝えたいのか分からないサイトになりやすいためです。
2．対象となる閲覧者を設定
次に、どのような人にホームページを見てもらいたいかを整理しました。
hiro-dev-labでは、主に次のような閲覧者を想定しています。
- Webシステムを開発したい企業
- Excelや紙の業務をシステム化したい事業者
- AIを業務へ導入したい企業
- 業務委託のエンジニアを探している担当者
- 開発パートナーを探している企業やエンジニア
- 開発実績や技術力を確認したい採用・発注担当者
対象者を整理することで、掲載するサービスや実績、文章の表現を決めやすくなります。
3．ページ構成をAIで作成
目的と対象者をもとに、ホームページへ必要なセクションをAIで洗い出しました。
初期案から不要な項目を削除し、最終的に次の流れへ整理しています。
メインビジュアル
↓
プロフィール
↓
対応できること
↓
技術スタック
↓
開発実績
↓
お問い合わせ
トップページを見た人が、次の順番で理解できる構成を意識しました。
- 誰のホームページなのか
- 何を依頼できるのか
- どのような技術を使えるのか
- どのようなものを開発しているのか
- どこから相談できるのか
AIは複数の構成案を短時間で作成できます。
ただし、提案された項目をすべて掲載すると情報量が多くなりやすいため、ホームページの目的に合わない内容は削除しました。
4．掲載文章のたたき台を作成
プロフィール、サービス説明、開発実績、お問い合わせなどの文章も、AIを活用して作成しました。
最初に、次のような情報を箇条書きで整理しています。
- これまでの職歴
- エンジニアとしての経験年数
- 使用できるプログラミング言語
- 参加したプロジェクト
- 対応できる開発工程
- 今後取り組みたい分野
- 開発したシステム
- 相談を受けたい内容
その情報をもとにAIで文章案を作成し、実際の経験と一致するように修正しました。
AIで文章を作る場合は、次の点を確認する必要があります。
- 実際には行っていないことが書かれていないか
- 経験のない分野を実績として表現していないか
- 過剰な表現になっていないか
- 専門用語が多すぎないか
- 初めて見る人にも内容が伝わるか
- 問い合わせにつながる文章になっているか
AIは自然な文章を生成できますが、その内容が事実かどうかまでは保証してくれません。
最終的な文章は、必ず人が確認する必要があります。
5．デザインの方向性を決定
hiro-dev-labでは、ITエンジニアのポートフォリオとして、技術力と信頼感が伝わるシンプルなデザインを採用しました。
デザインを検討する際は、次の点を意識しています。
- 文章を読みやすくする
- 余白を十分に取る
- 技術情報を整理して表示する
- 問い合わせ先を見つけやすくする
- パソコンとスマートフォンの両方に対応する
- 装飾を増やしすぎない
- 記事や実績を追加しやすくする
AIを使うと、配色、レイアウト、セクション構成などの案を短時間で比較できます。
ただし、提案されたデザインをそのまま使用するのではなく、ホームページの目的や掲載内容に合わせて調整しています。
6．WordPressへ実装
hiro-dev-labはWordPressで制作しています。
WordPressを選んだ理由は、公開後に次の内容を自分で追加できるためです。
- 開発実績
- サービス紹介
- SEO記事
- プロフィール
- お知らせ
- よくある質問
AIを活用して、HTMLやCSS、レイアウトの実装を効率化しました。
一方で、AIが生成したコードは、そのまま使用できるとは限りません。
次のような問題が含まれる可能性があります。
- スマートフォンで表示が崩れる
- 不要なコードが多い
- 同じ処理が重複している
- WordPressの構造に合っていない
- 他の部分へ影響する
- 将来的に修正しにくい
- アクセシビリティが考慮されていない
生成されたコードを確認し、必要な部分だけを採用して調整しました。
7．スマートフォン表示を調整
ホームページは、パソコンだけでなくスマートフォンからも閲覧されます。
そのため、次の項目を確認しています。
- 見出しが大きすぎないか
- 文章の横幅が読みやすいか
- ボタンを押しやすいか
- メニューを操作できるか
- 画像が画面からはみ出していないか
- 余白が広すぎたり狭すぎたりしないか
- お問い合わせまで迷わず移動できるか
AIが生成したデザインでも、実際の端末で確認すると調整が必要になることがあります。
8．基本的なSEO設定
初期公開時には、次のような基本設定を行いました。
- ページタイトル
- メタディスクリプション
- 見出し構成
- スラッグ
- 内部リンク
- スマートフォン対応
- 記事を追加できる構成
- お問い合わせ導線
検索流入を増やすためには、ホームページを公開するだけでは不十分です。
公開後に、提供するサービスと関連する検索キーワードを調査し、記事やサービスページを追加する必要があります。
hiro-dev-labでも、公開後に次のようなテーマの記事を追加しています。
- Excel業務のシステム化
- AIホームページ制作
- 在庫管理システム
- 予約管理システム
- Google口コミの自動返信
- AI導入支援
- IT顧問
- FDE
AIに任せた作業
今回のホームページ制作では、主に次の作業へAIを活用しました。
- ページ構成案の作成
- 見出し案の作成
- キャッチコピーの案出し
- 掲載文章のたたき台
- サービス説明文の整理
- HTML・CSSの実装補助
- 表現の調整
- SEOタイトル案
- メタディスクリプション案
- FAQの案出し
- コードの修正案
AIを活用することで、何もない状態から最初の案を作る時間を大幅に短縮できました。
人が判断・確認した作業
AIを使っても、次の作業は人が判断する必要があります。
- ホームページの目的
- 対象となる閲覧者
- 掲載するサービス
- 掲載する実績
- 経歴やスキルの正確性
- 問い合わせ導線
- デザインの採否
- コードの品質
- WordPressへの実装
- スマートフォン表示
- 公開して問題ない内容か
- 今後の更新方法
AIは制作を支援するツールであり、事業の責任者や制作者の代わりになるものではありません。
約4時間で制作できた理由
必要な情報に絞った
最初から多数のページや機能を作らず、初期公開に必要な情報へ絞りました。
短納期で制作する場合は、すべてを一度に完成させようとしないことが重要です。
自分の事業情報が整理されていた
プロフィール、スキル、実績、対応できることなど、ホームページに掲載する情報をすぐに用意できました。
情報が不足している場合は、ヒアリングや確認に時間が必要になります。
AIを工程ごとに利用した
「ホームページを作って」と一度だけ指示するのではなく、次のように工程を分けてAIを利用しました。
- 構成を考える
- 見出しを作る
- 文章を作る
- 表現を修正する
- 実装方法を考える
- コードを確認する
工程を分けることで、生成結果を確認しやすくなります。
WordPressを利用した
WordPressを利用することで、ブログや実績を後から追加できる構成にしました。
独自の管理機能をゼロから開発しなかったことも、制作時間を短縮できた理由です。
初期公開と追加改善を分けた
初期版を公開した後に、SEO記事や開発実績を追加しています。
最初から完成形を目指さず、公開後に改善する前提で制作しました。
約4時間では制作しなかったもの
初期公開時点では、次のような作業は行っていない、または限定的に対応しています。
- 多数の固定ページ
- 詳細な開発事例
- 大量のSEO記事
- 写真撮影
- オリジナルイラスト
- 複雑なアニメーション
- 予約機能
- 決済機能
- 会員機能
- 多言語対応
- 独自の管理システム
- 外部サービスとの複雑な連携
これらを含める場合、4時間での制作は困難です。
「約4時間で制作」というのは、必要な情報へ絞った初期公開版の事例です。
AIを使えばどのホームページも4時間で作れるのか
すべてのホームページを4時間で制作できるわけではありません。
制作時間は、次の条件によって変わります。
- ページ数
- 掲載する文章の量
- 写真やロゴの有無
- デザインへの要望
- 修正回数
- 関係者の人数
- WordPressの設定
- お問い合わせフォーム
- 予約や決済
- 会員機能
- 外部システムとの連携
次の条件がそろっているほど、短時間で制作しやすくなります。
- 小規模なホームページ
- 掲載情報が整理されている
- 写真やロゴが用意されている
- デザインを細かく指定しない
- 既存のWordPressテーマを活用する
- 必要最低限の内容から公開する
- 修正の判断者が一人
- 複雑な機能を含まない
AIによる短時間制作が向いているホームページ
- 個人事業主のホームページ
- 小規模企業のサービスサイト
- ポートフォリオサイト
- 店舗や施設の紹介サイト
- 新規事業の検証用サイト
- イベント告知ページ
- 採用ページ
- ランディングページ
- 開業前の仮サイト
- 既存ホームページのリニューアル案
特に、まずは小さく公開し、実績や記事を後から追加するホームページと相性があります。
AIによる短時間制作が向かないケース
次のようなホームページは、十分な制作期間が必要です。
- ページ数が多い
- 多数の関係者が確認する
- 独自デザインへの要望が強い
- 写真や動画の撮影が必要
- EC機能がある
- 会員機能がある
- 複雑な予約管理がある
- 基幹システムと連携する
- 高度なセキュリティ要件がある
- 法務や社内審査が必要
- 多言語対応が必要
AIによって一部の工程を効率化できても、要件整理、確認、テストに必要な時間は省略できません。
AIホームページ制作で失敗しないためのポイント
AIが生成した文章をそのまま使わない
事実と異なる内容や、他社と似た表現が含まれていないか確認します。
見た目だけで完成と判断しない
問い合わせ導線、スマートフォン表示、更新方法まで確認する必要があります。
事業の強みを具体的に伝える
一般的な表現だけでは、他社との差が分かりません。
実際の経験、実績、制作事例、対応方法などを掲載します。
公開後の運用を考える
誰が文章を更新するのか、記事を追加するのか、WordPressを管理するのかを決めておきます。
必要な機能を最初に増やしすぎない
初期公開に必要な機能へ絞り、運用しながら追加する方法が適しています。
AIホームページ制作代行で対応できること
hiro-dev-labでは、AIを活用しながら、次のようなホームページ制作に対応しています。
- ページ構成の整理
- 掲載文章の作成
- WordPressへの実装
- スマートフォン対応
- お問い合わせフォーム
- SEOの基本設定
- サービスページ制作
- 開発実績ページ制作
- SEO記事制作
- 公開後の更新支援
- AIチャットボットの追加
- 予約・顧客管理などの機能追加
単にAIでページを生成するのではなく、事業内容を確認し、問い合わせにつながる構成へ調整します。
AIホームページ制作に関するよくある質問
本当に約4時間で制作したのですか？
hiro-dev-labの初期公開版は、AIを活用して約4時間で制作しました。
ただし、公開後に開発実績やSEO記事などを継続して追加しています。
どのホームページでも4時間で制作できますか？
すべてのホームページを4時間で制作できるわけではありません。
ページ数、原稿、デザイン、写真、必要な機能などによって制作期間は変わります。
原稿がなくても制作できますか？
事業内容やサービスをヒアリングし、AIを活用しながら文章案を作成できます。
最終的な内容は、実際の事業内容と一致しているか確認します。
WordPressで制作できますか？
対応可能です。
WordPressで制作することで、公開後にブログ、実績、お知らせなどを自分で追加できます。
SEOにも対応できますか？
SEOタイトル、メタディスクリプション、見出し、スラッグ、内部リンクなどの基本設定に対応します。
関連キーワードを狙ったSEO記事の作成も可能です。
公開後に機能を追加できますか？
対応可能です。
予約、顧客管理、会員登録、AIチャットボット、外部サービス連携など、必要に応じて追加できます。
AIを活用してホームページを短納期で制作したい方へ
AIを活用すると、ホームページ制作の構成、文章、デザイン、実装を効率化できます。
しかし、AIへすべてを任せるだけでは、事業内容が正確に伝わらなかったり、問い合わせにつながらないホームページになったりする可能性があります。
重要なのは、AIによる制作スピードと、人による判断・品質確認を組み合わせることです。
hiro-dev-labでは、自身のホームページを約4時間で制作した経験をもとに、個人事業主や中小企業向けのAIホームページ制作代行に対応しています。
- できるだけ早くホームページを公開したい
- 文章や構成から相談したい
- WordPressで制作してほしい
- SEOを意識したサイトにしたい
- 公開後に実績や記事を追加したい
- 将来的に予約や顧客管理を追加したい
このようなご相談に対応します。