こんにちは。アイレット株式会社デザイン事業部の鶴若です。
生成AIは、HTMLコーディングの効率化や品質向上を大きく進化させています。繰り返し作業や構造作成を自動化し、一貫性のあるコード生成を可能にする一方で、人間による確認と修正が重要です。

目次

  • ルールの設定
  • プロンプトを入力
  • 便利だと感じた点
  • 面倒・不十分だと感じた点
  • まとめ

ルールの設定

AIにHTML生成を指示する際は、意図した結果を得るために、事前にルールを指定することが重要です。
使用するタグ、HTML構造、CSS、JavaScriptなど、生成範囲を絞り込むことで、出力の精度を高め、修正の手間を減らすことができます。

プロンプトに下記を入力
これからの作業のルール
HTMLに付与するクラス: 指示するクラスから始めるBEM形式
画像のパス: /assets/img/sample.webp
画像のalt: sampleImage とする
画像の指示: 「画像」と指示があった場合は、サンプルとして上記の画像を使用する
HTMLの記述範囲: モジュール制作なので指示された部分以外は生成しない
生成されたHTMLの詳細説明: 不要
画像生成: 画像生成の依頼ではないので画像生成機能は使用しない
文字列の扱い: 特に指示がない場合は、文字列はテキストとして表示

※同じルールでも分析エラーが起こる場合があり、ルールの修正やプロンプトの見直しが必要になることがあります。
※「画像」などの単語に反応して、意図せず画像を生成してしまうケースもあるため、注意が必要です。

AIを効果的に活用するには、試行錯誤を繰り返しながら、最適なルールやプロンプトを見つけることが重要です。

プロンプトを入力

実際にプロンプトを入力し、AIにカード型のHTMLを生成させてみましょう。

プロンプト
html生成
クラス：card
−−−
画像
タイトル：ほげ
日付：2025/1/7
−−−

生成されたHTML

生成されたHTMLは、場合によってはタグの修正などが必要ですが、ベースとなる構造を素早く作成できる点で便利です。

AIによるHTML生成は、Webサイト構築を効率化する有効な手段と言えるでしょう。

活用について

静的HTML生成におけるテンプレート活用

Reactなどのフレームワークで動的なHTML生成が主流となる中、依然として静的HTMLを作成する場面は多く存在します。特に、同じ構造のHTMLを繰り返し生成するケースでは、効率化が求められます。

従来の手作業によるHTML生成は、時間と手間がかかり、入力ミスも発生しやすいという課題がありました。

そこで、テンプレートと入力データを組み合わせることで、HTML生成を効率化し、ミスを削減することができます。

1. テンプレートの作成

HTMLの構造を定義したテンプレートを作成します。
例えば、以下のようなカード型のHTMLテンプレートを作成します。

2. 入力データの準備

テンプレートに流し込むデータを用意します。
例えば、以下のようなデータがあるとします。

/assets/img/sample1.webp
alt hogehoge
title hogehoge
2025/1/8

/assets/img/sample2.webp
alt fugafuga
title fugafuga
2025/1/9

3. HTMLの生成

テンプレートの {src}、{alt}、{title}、{date} 部分に、入力データを順番に流し込むことで、HTMLを生成します。

生成されたHTML

このように、テンプレートと入力データを活用することで、HTML生成の効率化、入力ミスの削減、コードの統一性を実現できます。

さらに、この仕組みをツール化することで、より効果的に静的HTMLを生成することが可能になります。

上記のようなケースで役立った例

AIの画像認識と定型処理能力を活かして、デザイン画像から市区町村名を自動抽出し、チェックボックスへ入力する作業を自動化しました。

従来は手作業で時間がかかっていた作業が、AIにより大幅に短縮され、担当者は他の業務に集中できるようになりました。

文字の認識精度も高く、実用面で十分な効果を発揮しています。

また、Reactなどのフレームワークで使用するコードに変換することも可能です。
もちろん、完全に自動で変換できるわけではなく、ある程度の手直しは必要になります。

しかし、手動で変換するよりもはるかに効率的に作業を進められます。

例えば、AIが生成したHTMLをJSXに変換したり、propsやstateを定義したりといった作業を自動化できます。

AIを活用することで、Reactなどの開発を効率化し、より迅速にアプリケーションを構築できるようになるでしょう。

便利だと感じた点

  • 高い画像認識能力: 画像からテキストを正確に抽出することに優れています。
  • 定型処理能力: 決まった形式やルールに従ってデータを処理することに長けています。

面倒・不十分だと感じた点

  • 過剰なコード生成: 指示した範囲を超えて、〜 といったコード全体を生成してしまうことがあります。必要な部分だけを生成するように指示を明確化する必要があります。
  • 意図しないタグや非セマンティックな要素の使用: 適切なタグやセマンティックな要素が使われず、手動で修正が必要になるケースがあります。AIにタグの使用方法やセマンティックなHTMLの重要性を理解させる必要があります。
  • 不要なCSS出力: CSSが自動生成される場合がありますが、既存のデザインに合わせる必要があるため、多くのケースで不要となります。CSS生成の有無を制御できる機能が求められます。
  • 修正指示の反映不足: 修正指示を出しても、以前のコードが繰り返し生成されることがあります。AIの学習能力や指示の解釈能力に改善の余地があります。
  • 誤ったコードの生成: HTMLでは少ないものの、JavaScriptなどで動作しないコードや誤ったコードが生成されることがあります。生成されたコードの精度向上、特にJavaScriptにおけるロジックや構文の正確性が求められます。

まとめ

AI技術は日進月歩で進化しており、単純なコーディング作業は将来的にAIに取って代わられる可能性が高いでしょう。

しかし、だからといって人間の役割がなくなるわけではありません。むしろ、AIを効果的に活用し、その能力を最大限に引き出すことが、これからのプログラマーに求められる重要なスキルとなります。

具体的には、

AIとの対話: AIに的確な指示を与え、 desired outcome を得るためのコミュニケーション能力。
結果の評価と修正: AIが生成したコードを評価し、必要に応じて修正・改善する能力。
AIの学習: AIモデルの精度向上に貢献するため、学習データを提供したり、フィードバックを与えたりする能力。

などが重要になってくると考えられます。

AIはあくまでもツールであり、それを使いこなすのは人間です。AI技術の進化を恐れずに、積極的に学び、活用していくことで、新たな可能性を切り開いていきましょう。