INDEX
目次
前の章に戻る4章 AIと創る！実装のための技術設計
この章の目安学習時間：90分
この章で到達できるゴール：
- 設計したページ構成に基づき、AIを活用して主要ページのHTML構造を作成できる。
- サイトのペルソナに合わせて、AIにWebサイトの主要なテキストコンテンツを作成させることができる。
【4-1】AIと進める技術設計
目安の学習時間：30分
綺麗なHTML構造をAIに書かせる技
3章で作成したワイヤーフレーム（コンテンツの構成案）は、いわば建築前の間取り図です。
次はこの間取り図を基に、実際の柱や壁を組み立てるための技術的な設計に入ります。
まずは、ページの土台となるHTML構造をAIに作成させましょう。
ここでの重要なキーワードは「セマンティックなHTML」です。
これは、header、main、section、articleといった、タグ自体が意味を持つようにマークアップする手法のことで、SEOやアクセシビリティの観点から非常に重要です。
次はこの間取り図を基に、実際の柱や壁を組み立てるための技術的な設計に入ります。
まずは、ページの土台となるHTML構造をAIに作成させましょう。
ここでの重要なキーワードは「セマンティックなHTML」です。
これは、header、main、section、articleといった、タグ自体が意味を持つようにマークアップする手法のことで、SEOやアクセシビリティの観点から非常に重要です。
この指示により、AIは単なるdivタグの羅列ではなく、ページの構造を意味的に正しく表現した、品質の高いHTMLコードの雛形を生成してくれます。
この雛形を基に、実際のコーディングを進めることで、開発効率と品質が大きく向上します。
この雛形を基に、実際のコーディングを進めることで、開発効率と品質が大きく向上します。
CSS設計もAIで効率化しよう
HTML構造と合わせて、CSSをどのように管理していくかというCSS設計の方針も、実装前に決めておくと後々の作業が非常にスムーズになります。
クラスの命名規則などを決めておくことで、コードの再利用性が高まり、破綻しにくいスタイリングが可能になります。
CSS設計にはBEMやFLOCSSといった様々な手法がありますが、どれが最適か迷った時もAIに相談できます。
クラスの命名規則などを決めておくことで、コードの再利用性が高まり、破綻しにくいスタイリングが可能になります。
CSS設計にはBEMやFLOCSSといった様々な手法がありますが、どれが最適か迷った時もAIに相談できます。
AIは、複数の選択肢を提示してくれるだけでなく、具体的なコード例も示してくれるため、プロジェクトの規模や特性に合った最適な設計方針を、根拠を持って選択する手助けをしてくれます。
練習問題
問題
AIに「ブログ記事ページの基本的なHTML構造を、articleタグやasideタグを使ってセマンティックにマークアップしてください。
記事タイトル、公開日、カテゴリー、本文、関連記事一覧の要素を含めてください。」と指示してみましょう。
解答例
AIは、ブログ記事という文脈を理解し、以下のような適切なタグを使ったHTML構造を生成するはずです。
AIに「ブログ記事ページの基本的なHTML構造を、articleタグやasideタグを使ってセマンティックにマークアップしてください。
記事タイトル、公開日、カテゴリー、本文、関連記事一覧の要素を含めてください。」と指示してみましょう。
解答例
AIは、ブログ記事という文脈を理解し、以下のような適切なタグを使ったHTML構造を生成するはずです。
ブログ記事のタイトル
ここに記事の本文が入ります。
【4-2】AIコピーライティング入門
目安の学習時間：30分
もう悩まない！AIコピーライティング
Webサイトの骨格や構造が固まっても、そこに掲載する文章（コピー）が魅力的でなければ、ユーザーの心は動きません。
このコピーライティングも、AIが非常に得意とする分野です。
重要なのは、サイトの「目的」と「ターゲット（ペルソナ）」をAIに正確にインプットすることです。
誰に、何を伝えて、どうなってほしいのかを明確に指示することで、AIはターゲットの心に響く文章を生成します。
このコピーライティングも、AIが非常に得意とする分野です。
重要なのは、サイトの「目的」と「ターゲット（ペルソナ）」をAIに正確にインプットすることです。
誰に、何を伝えて、どうなってほしいのかを明確に指示することで、AIはターゲットの心に響く文章を生成します。
このように具体的なペルソナと、与えたい印象を伝えることで、漠然と「キャッチコピーを考えて」と指示するのとは全く異なる、質の高いアウトプットが期待できます。
質の高い文章をAIに書かせるコツ
AIが生成した文章は、非常に流暢で完成度が高く見えます。
しかし、それをそのまま使うのはプロの仕事ではありません。
より質の高いコンテンツに仕上げるためには、いくつかのコツがあります。
しかし、それをそのまま使うのはプロの仕事ではありません。
より質の高いコンテンツに仕上げるためには、いくつかのコツがあります。
- たたき台として使う：
AIの生成物は、あくまで「たたき台」です。それを基に、自分の言葉で表現を修正したり、より具体的なエピソードを加えたりすることで、オリジナリティと深みが増します。 - 対話で深める：
一度で完璧なものを求めず、AIとの対話を繰り返しましょう。「良いですね。もう少し短い表現にできますか？」「別の切り口の案も欲しいです」といったやり取りを通じて、アイデアはどんどん洗練されていきます。 - 最終判断は人間がする：
不自然な表現はないか、事実と異なる点はないか、そして何より「本当に人の心を動かすか」という最終的な品質判断は、必ず人間の感性で行う必要があります。
AIをアイデアの源泉として活用し、最後の仕上げは自分で行う。この共創プロセスが、質の高いコンテンツを生み出す秘訣です。
【4-3】4章 -章末課題- [AIとサイトに魂を吹き込む]
目安の学習時間：30分
問題
これまでの演習で作成してきた「焼きたてパン屋さん」のトップページについて、以下の2つをAIと協力して作成してください。
- メインビジュアルに掲載するキャッチコピー（3案）
- サイトのフッター部分のHTML構造
解答手順
この章のまとめ
これで「4章：AIと創る！実装のための技術設計」の解説を終わります。
サイトの骨格に、HTMLという構造を与え、CSSという設計方針を定め、そしてコピーという魂を吹き込む準備が整いました。ここまでくれば、実装作業は迷いなく進めることができます。
次の最終章では、本教材の学びを総括し、この「設計スキル」がWeb制作者としていかに強力な武器になるかを解説します。
サイトの骨格に、HTMLという構造を与え、CSSという設計方針を定め、そしてコピーという魂を吹き込む準備が整いました。ここまでくれば、実装作業は迷いなく進めることができます。
次の最終章では、本教材の学びを総括し、この「設計スキル」がWeb制作者としていかに強力な武器になるかを解説します。