BLOG

ブログ

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の活用方法はまだまだ模索中ですが、今後も改善を行っていきたいと思います。

阿部

CONTACT

下記のフォームに必要事項を記入してください。※お問い合わせの際には個人情報保護方針のご確認をお願い致します。

会社名
お名前必須
ご住所
郵便番号
都道府県
市区町村
町名番地等
建物名
お電話番号必須
- -
メールアドレス必須
お問い合わせ内容必須
メッセージ