2023.05.22
AIでコーディング時間を短縮
ホームページ制作におけるコーディング時間の短縮は制作会社にとっての課題です。
コーディング時間を減らすためにAIを活用する方法を考えてみました。
以下は誰でもホームページが作成できるようになる使い方ではなく、htmlの構造を考えた上でAIにコーディングしてももらう方法です。
プロンプトは以下になります。
プロンプト
以下のHTMLを書いてください。どうかお願いします。
html
-head
--title[サイトタイトル]
-body
--div.container mx-auto
---header#header
----h1[サイト名]
---section.flex justify-center
----div
-----div
------h3[見出し]
------p[本文]
----div
-----div
------h4[見出し]
------div
---section
----h3[見出し]
----div.grid grid-cols-2
-----div
------img[01.jpg]
-----div
------img[02.jpg]返答結果
はい、喜んで。
<html>
<head>
<title>サイトタイトル</title>
</head>
<body>
<div class="container mx-auto">
<header id="header">
<h1>サイト名</h1>
</header>
<section class="flex justify-center">
<div>
<div>
<h3>見出し</h3>
<p>本文</p>
</div>
<div>
<h4>見出し</h4>
<div></div>
</div>
</div>
</section>
<section>
<h3>見出し</h3>
<div class="grid grid-cols-2">
<div>
<img src="01.jpg" alt="">
</div>
<div>
<img src="02.jpg" alt="">
</div>
</div>
</section>
</div>
</body>
</html>Google BardとchatGPTで試してみましたが、結果はほぼ同じでした。
Google Bardの方が返答スピードは早かったです。
htmlを効率的に書く方法としてPugがありますが、Pug形式でAIにお願いしても同じ結果になるかと思います。
AIの活用方法はまだまだ模索中ですが、今後も改善を行っていきたいと思います。
阿部
GA4の基本 カスタムイベントを設定しよう
AIでコーディング時間を短縮
「ITパスポート」って何？
2023.4 決算会開催! @飯坂ホテルジュラク様
Live2Dってなに？サガスケのLive2Dモデルを作ってみた！
次世代拡張子webpとは？JPGやPNGのいいとこ取り！簡単な変換方法もご紹介
校正ってなに?〜企業の販促ツールの作成をまかされたら〜
ここまでできちゃう！AIでのデザイン自動作成!!
今のままで大丈夫？ランディングページ改善アイデア
できてる？デザインの基本の「キ」文字組を極める!
SDGsを配慮したデザインとは？