お役立ち情報
お客様のビジネスを、
WEBでええ感じに
お客様のビジネスを、
WEBでええ感じに
生成AIの進化によって、ホームページ制作の進め方が大きく変わり始めています。
これまでのホームページ制作では、ヒアリング、サイト構成の検討、原稿作成、ワイヤーフレーム制作、デザイン、コーディングといった工程を、それぞれ人の手で進めることが一般的でした。
しかし現在では、AIを活用することで、こうした制作工程の多くを効率化できるようになっています。
では、AIを導入すればホームページ制作のすべてが自動化できるのでしょうか？
私たちは、そうは考えていません。
重要なのは、AIにすべてを任せることではなく、AIが得意な作業と、人間が判断すべき作業を適切に分担することです。
今回は、合同会社WEBでええじゃないかで検討・活用している、AIを取り入れた新しいホームページ制作の進め方をご紹介します。
従来のホームページ制作では、クライアントからヒアリングした内容をもとに、制作会社がサイト構成や原稿を考え、デザイナーが画面を設計し、コーダーがWebサイトとして構築するという流れが一般的でした。
この制作方法には、専門家が各工程を丁寧に進められるというメリットがあります。
一方で、初期段階では完成イメージを共有しにくく、制作途中で「思っていたものと違う」という認識のズレが生じることもあります。
AIを活用した制作手法では、この初期段階の進め方が大きく変わります。
例えば、ヒアリング内容からサイト構成の案を作成したり、各ページの文章を下書きしたり、HTML/CSSを使ってワイヤーフレームを視覚化したりする作業を、AIに支援してもらうことが可能です。
| 制作工程 | 従来の制作方法 | AIを活用した制作方法 |
|---|---|---|
| ヒアリング整理 | 担当者が議事録・要件を整理 | AIで要点を整理 |
| サイト構成 | 担当者が構成案を作成 | AIで構成のたたき台を生成 |
| 原稿作成 | ライター・ディレクターが作成 | AIで下書きを作成し、人が調整 |
| サイトマップ | 専用ツール等で作図 | AIでHTML/CSSによる図を生成 |
| ワイヤーフレーム | デザインツールで作成 | AIで画面構成を可視化 |
| デザイン・実装 | デザイナー・コーダーが制作 | AIの支援を受けながら制作 |
| 品質確認 | 制作者が確認 | AIを補助的に使いつつ人が最終確認 |
AIの導入によって特に変化するのは、構成案や原稿などの「最初のたたき台」を作る工程です。
これまで時間をかけていた初期の資料作成を効率化し、クライアントとの認識合わせや、サイトの品質向上に時間を使えるようになります。
ここからは、実際の制作工程に沿ってご紹介します。
ホームページ制作において、最も重要な工程の一つが初回ヒアリングです。
AIがどれだけ進化しても、この工程を省略することはできません。
まずは、クライアントに以下の内容を確認します。
ヒアリング内容は、AIを使って要約・整理することも可能です。
ただし、AIがまとめた内容をそのまま正解とするのではなく、クライアントの意図が正しく反映されているかを担当者が確認します。
最初にサイトの目的と方向性を明確にすることで、後工程での手戻りを減らしやすくなります。
次に、ヒアリング内容や既存サイトの情報、クライアントとのやり取りなどをAIに共有し、新しいサイト構成案を作成します。
例えば、コーポレートサイトであれば、トップページ、会社概要、サービス紹介、実績紹介、採用情報、お問い合わせといった必要なページを整理します。
ここでは、単にページを並べるのではなく、各ページの目的や掲載する情報も検討します。
また、サイト構成とあわせて見積もりのたたき台を作成することも可能です。
ページ数や必要な機能を整理したうえで制作費用を検討できるため、構成案と見積もりの整合性を確認しやすくなります。
もちろん、最終的な見積金額は作業範囲や難易度、工数を踏まえて人間が判断します。
サイト構成がまとまったら、次にサイトマップ（サイト構成図）を作成します。
サイトマップとは、ホームページ全体のページ構成や階層関係を図にしたものです。
例えば、施工実績やブログ記事などがある場合は、第3階層までのページ構成を整理します。
ここで活用するのが、AIによるHTML/CSSの生成です。
テキストで整理したサイト構成をもとに、各ページの関係性や掲載コンテンツを含んだ構成図を視覚化します。
HTML/CSSで作成すると、ブラウザ上で表示できるだけでなく、構成変更にも柔軟に対応できます。
なお、ページ数が多いサイトマップを画面幅に無理やり収めようとすると、表示が崩れたり、読みにくくなったりする場合があります。
そのため、横方向に長い構成図では、横スクロールを可能にする設計がおすすめです。
この段階でサイト全体の構造を可視化しておくことで、ページの不足や重複にも気づきやすくなります。
サイト構成が決まったら、各ページに掲載する文章のたたき台を作成します。
ここで重要なのは、すべてのページの文章を一度に作ろうとしないことです。
例えば、トップページの原稿を作成した後、サービス紹介ページ、会社概要ページというように、1ページずつ内容を作り込んでいきます。
その方が、各ページの目的や必要な情報を確認しながら、精度を高めやすくなります。
作成した文章はGoogleドキュメントに整理し、1つのドキュメントへまとめます。
こうすることで、クライアントが原稿を確認しやすくなり、後から修正内容を管理する際にも便利です。
私たちが想定している制作フローでは、ヒアリング情報などの必要資料がそろっていれば、サイト構成案から各ページの原稿のたたき台までを、初期の1日程度でまとめることを目指しています。
ただし、これは初稿作成の目安であり、サイト規模や情報量によって必要な時間は変わります。
AIで原稿のたたき台を作成したら、クライアントに内容を確認していただきます。
ここでは、Googleドキュメントを活用します。
修正用に複製したドキュメントを共有し、実際の文章に直接修正やコメントを入れていただく方法です。
例えば、「このサービスの説明をもう少し詳しくしたい」「ここに自社の強みを追加したい」といった内容を反映していきます。
確認期間は、1週間程度を目安とします。
この工程をデザイン制作の前に設けることが、今回の制作フローの大きなポイントです。
先に文章を固めておくことで、デザイン完成後に大幅な原稿修正が発生するリスクを減らせます。
また、文章の段階でクライアントと認識を合わせておくことは、完成するホームページの品質向上にもつながります。
原稿の確認が完了したら、AIを活用してワイヤーフレームを作成します。
ワイヤーフレームとは、ページ内の文章、画像、ボタンなどの配置を整理した画面設計図です。
今回の制作方法では、HTML/CSSを使ってブラウザ上にワイヤーフレームを表示します。
ここでは、クライアントが修正した文章を実際の画面に配置することが重要です。
仮の文章ではなく、掲載予定の文章を使用することで、見出しや本文の長さ、情報の優先順位を確認できます。
また、画像を配置する予定のエリアはグレーの背景で表示し、画像ファイル名を記載しておきます。
例えば「main-visual.jpg」「service-01.jpg」といった名称を表示させることで、後から画像を当てはめる際にも管理しやすくなります。
この段階では細かな装飾よりも、情報の伝わり方や画面構成を優先します。
ワイヤーフレームがまとまったら、画像や配色、フォントなどのデザイン要素を加えていきます。
ここでは、HTML/CSSを使用した静的サイトとして構築します。
静的サイトとは、WordPressなどのCMSに組み込む前の、HTML/CSSなどで構成されたWebサイトです。
各ページに画像やデザインを反映させ、実際のホームページに近い見た目を作っていきます。
さらに、ページ間のメニューやリンクを接続し、ブラウザ上でサイト全体を確認できるようにします。
これにより、クライアントは静止画のデザインカンプだけでなく、ページを移動しながら完成後のイメージを確認できます。
パソコンやスマートフォンでの見え方も、この段階で確認していきます。
WordPressへ組み込む前に、静的サイトの状態でクライアントに確認していただきます。
ここでは、実際にブラウザを操作しながら、ページのデザインや導線、掲載内容をチェックします。
修正が必要な場合は、この段階で対応します。
今回の制作手法で重視しているのは、WordPressへの実装前にデザインの方向性を確定させることです。
もちろん、WordPress化した後にも調整が必要になる場合はありますが、事前に主要なデザインを確定しておくことで、大幅な手戻りを減らしやすくなります。
静的サイトの確認と修正が完了したら、WordPressへの実装を進めます。
ブログや施工実績、お知らせなど、クライアントが自分で更新したいコンテンツについても、必要に応じて管理画面から編集できるようにします。
あわせて、SEO（検索エンジン最適化）に関する基本設定や、お問い合わせフォームの設定なども行います。
特にお問い合わせ機能については、フォームの送信だけでなく、メールが正しく届くかどうかまで確認する必要があります。
また、スマートフォンでの表示、リンク、ページの動作なども確認します。
AIを使って制作した場合でも、公開前の品質確認を省略してよいわけではありません。
最終確認が完了したら、ホームページを本番環境に公開します。
公開後は、各ページの表示やリンク、お問い合わせフォームなどを改めて確認します。
WordPressのログイン情報や更新方法など、運用に必要な内容も整理して納品します。
ホームページは公開して終わりではありません。
公開後の更新や改善によって、事業の成果につなげていくことが重要です。
今回ご紹介した制作フローには、従来の制作手法との大きな違いがあります。
それは、デザインより先に、サイト構成と文章をクライアントに確認してもらうことです。
ホームページは見た目が重要だと思われがちですが、実際には「誰に、何を、どの順番で伝えるか」が非常に重要です。
文章の内容が定まっていないままデザインを進めると、後から文章量が変わった際に、レイアウトそのものを変更しなければならないことがあります。
一方、先に原稿を整理しておけば、その情報に合わせてデザインを考えることができます。
AIの活用によって、原稿のたたき台を短時間で作りやすくなったからこそ、こうした「原稿先行型」の制作フローを採用しやすくなりました。
これは、AIの導入による単なる時間短縮以上に、制作の進め方そのものを改善する考え方だと思います。
ここまでAIを活用した制作方法を紹介してきましたが、AIを使えば誰でも簡単に高品質なホームページを制作できる、というわけではありません。
例えば、AIはヒアリング内容をもとにサイト構成案を提案できますが、その構成が本当にクライアントの事業に適しているかは、別の問題です。
また、AIが生成した文章が正確であるか、企業の強みを十分に表現できているかについても、確認が必要です。
特に、制作会社側に求められる役割は大きく変化すると考えています。
これまでは、デザインやコーディングなどの制作技術そのものが、大きな価値を持っていました。
今後はそれに加えて、クライアントの課題を正しく理解し、必要な情報を整理し、適切な制作方法を判断する力が、より重要になっていくでしょう。
AIによって制作の選択肢が増える一方で、どの方法を選ぶべきかを判断するディレクション能力の重要性は、むしろ高まると考えています。
AIを活用したホームページ制作には、さまざまなメリットがあります。
まず、初期の構成案や原稿、ワイヤーフレームの作成を効率化できることです。
また、制作途中でも画面を視覚化しやすいため、クライアントと完成イメージを共有しながら進めやすくなります。
さらに、人がゼロから資料を作成する時間を減らすことで、ヒアリングや戦略検討、デザインの品質向上に時間を配分できる可能性があります。
一方で、注意しなければならない点もあります。
AIが生成する情報には誤りが含まれる場合があり、事業内容やサービス情報については事実確認が欠かせません。
また、AIが生成したコードについても、表示速度、セキュリティ、アクセシビリティ、保守性などの観点から確認が必要です。
クライアントから預かった情報をAIへ入力する際には、機密情報や個人情報の取り扱いにも配慮する必要があります。
AIを活用することと、品質管理を簡略化することは別の話です。
制作工程を効率化できた分、必要な確認や改善にしっかり取り組むことが重要だと考えています。
AIの進化によって、ホームページを作るための技術的なハードルは、今後さらに下がっていくと予想されます。
しかし、ホームページを作れることと、そのホームページが事業の役に立つことは同じではありません。
例えば、問い合わせを増やしたい企業と、採用活動を強化したい企業では、必要なサイト構成も掲載すべき情報も異なります。
重要なのは、見た目の整ったホームページを作ることではなく、その企業にとって必要なWebサイトを考えることです。
そのためには、クライアントの事業を理解し、課題を整理し、適切な情報設計や運用方法を提案する力が欠かせません。
私たちWEBでええじゃないかでも、AIで効率化できる工程には積極的にAIを取り入れながら、人間が担うべきディレクションや品質管理を大切にしていきたいと考えています。
AIを活用した新しいホームページ制作手法についてご紹介しました。
今回の制作フローでは、ヒアリングからサイト構成、原稿作成、ワイヤーフレーム制作までをAIで支援し、クライアントとの確認を経て、静的サイトの構築、WordPressへの実装、公開へと進めます。
特に重要なのは、原稿を先に整理することと、WordPressへ実装する前に、実際に操作できるサイトで完成イメージを確認してもらうことです。
AIを使う目的は、単にホームページを早く作ることではありません。
制作工程を効率化し、クライアントとの認識のズレを減らし、より良いホームページを作るための時間を確保することにあります。
これからもWEBでええじゃないかでは、新しい技術を積極的に取り入れながら、事業の成果につながるWebサイト制作を目指していきます。
合同会社WEBでええじゃないかでは、ホームページ制作、ECサイト制作、LP制作から、公開後の運用・改善まで幅広く対応しています。
「今のホームページを見直したい」「自社に必要なサイト構成から相談したい」「AIを活用した効率的な制作に興味がある」といったご相談も歓迎しています。
あなたの事業を、WEBでええ感じに。
