Bingチャット（AI）でサイト作ってみた
サイトのテーマは「架空のオシャンなバー」です。何故バーなのかというと、私が行きたいからです。
また今回使ったのはChatGPTではなく「Bingチャット」です。画像もAIに作らせたいので、同じくMicrosoftのサービス、「Image Creator」を使いました。
HTMLの基本構成を出力して。レスポンシブ対応で。
と命令。すると以下のコードを生成してくれました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
</head>
<body>
<!-- ここにページのコンテンツを記述 -->
</body>
</html>
・・・おお、出来てる。
UIフレームワークとしてBulmaを使いたいので＜head＞にCDNを追加してください。さらに＜body＞内の記述もBulmaにのっとった記述にしてください
そして返ってきたのが以下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<!-- Bulma の CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<!-- ヒーローイメージ -->
<section class="hero is-primary">
<div class="hero-body">
<!-- ここにヒーローイメージの内容を記述 -->
</div>
</section>
<!-- メインコンテンツ -->
<main class="section">
<div class="container">
<!-- ここにメインコンテンツの内容を記述 -->
</div>
</main>
<!-- フッター -->
<footer class="footer">
<div class="content has-text-centered">
<!-- ここにフッターの内容を記述 -->
</div>
</footer>
</body>
</html>
とてもいい感じです。キッチリとした正確な命令でなくとも、意図をくみ取って的確な返答をしてくれるので、ストレスなくスムーズに進めることができました。
店の名前やキャッチコピーなんかもAIに出力してもらったものです。画像も全てAIで生成しています。
ついでにプライバシーポリシーも(笑)
これまではGoogleで検索しながらの作業が当たりまえでしたが、これからはAIに質問していくほうが早そうです。業務スピードにかなり貢献してくれそう。WordPressのサイト作成なんかは専用のチャットボット「ChatWP」もあり、とても有用そうです。これからもうまく使っていければと思います！
ではまた。