AIでWeb制作を時短する研究_其の一

2024年4月29日 17:40

Web制作という業務から離れて早五年。

「今後はもう、Web制作をする機会はないだろうなぁ」なんて思ってたんだけどね。

その機会が来そうな機会が若干してきたので、本業の傍らでも遅滞なくWeb制作をしていく方法を模索していく過程で、「AI使って時短できんもんやろうか？」と、GW中に転生した赤月ゆに嬢の声を聞きつつ手を動かしているのであります。

試しに、Chat GPTにお願いしてみる

まあ、あれです。

完全に知識のない状態なので、どうしたものか考え中なところからスタートなんですが、画像生成AIについてモニョモニョ調べ物をしていく際に、どうやらChat GPTを使ってHTMLやCSSを出力する事ができるらしいことがわかったので、ちょいと一年数カ月ぶりにChat GPTを触ってみた。

その際のやりとりがこんな感じです。

You
日本語に切り替えてください。

ChatGPT
もちろんです。日本語でどのようにお手伝いしましょうか？

You
WEBサイトを制作したいです。HTMLとCSSとJavaScriptを準備してください。

ChatGPT
了解しました。HTML、CSS、およびJavaScriptの基本的なテンプレートを作成しましょう。以下は、基本的なHTML構造とCSSスタイルを含むサンプルコードです。

Chat GPTとのやりとり（20240429）

でそのときに出力されたサンプルコードがこちら。

<!DOCTYPE html>
<html lang="ja">
<head>  
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイト名</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<h1>サイト名</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>

<main>

<section>
<h2>セクション1</h2>
<p>ここにセクション1の内容を追加します。</p>
</section>

<section>
<h2>セクション2</h2>
<p>ここにセクション2の内容を追加します。</p>
</section>
</main>

<footer>
<p>&copy; 2024 サイト名. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>

これは基本的なHTML構造で、CSSファイル（styles.css）とJavaScriptファイル（script.js）を読み込むようになっています。CSSファイルにはサイトのスタイルを、JavaScriptファイルには動的な機能を追加するコードを記述します。

Chat GPTとのやりとり（20240429）

……こんな感じで、こちらは全くhtmlやcssを書かずに、ざっくりとhtmlを出力してくれます。

このあと、モバイル機器での閲覧に対応させたり、ナビゲーションをモバイル機器に対応させるためのハンバーガーメニューを実装したり、トップページに設置したいスライドショーなんかのソースコードも、テキストで指示すれば出力してくれます。

この時点では、まあ出力はできるだろうけど、こちらにもhtmlやcssなどの知識がないと修正ができないので、そこまで有用ではない感じがします。

しかし、その後でちょっとおもしろい動画を見つけたんですよね。

サイトレイアウトからhtml出力が可能？

このショート動画が偶然流れてきたので、試しにChat GPTにこんなお願いをしてみた。

You
先程のソースコードを利用して、お洒落なホームページを作りたいです。

ChatGPT
素晴らしいですね！お洒落なホームページを作成するためには、デザインやコンテンツに注意を払うことが重要です。画像やテキストを交えてバランスの取れたレイアウトを作成しましょう。また、色やフォントの選択にもこだわりを持つと良いでしょう。どのようなコンセプトやテーマをお考えですか？それに応じてデザインの方向性を決めることができます。

You
高級なレストランのホームページを作りたいです。
必要な要素はどんなものがありますか？

ChatGPT
高級レストランのホームページを作成する際には、次のような要素が一般的に必要とされます。

レストランのロゴと名称: ロゴやレストラン名をホームページの上部に目立たせましょう。

ナビゲーションメニュー: メニューや予約、店舗情報など、重要なページへのリンクを含むナビゲーションメニューを配置します。

スライドショー: お店の雰囲気を伝えるための美しい画像を含むスライドショーを配置します。

料理メニュー: レストランの料理メニューを掲載し、料理の写真や説明を含めます。

予約フォーム: 顧客がオンラインで予約を行えるように、予約フォームを設置します。

店舗情報: 店舗の場所、営業時間、電話番号などの情報を提供します。
お知らせやイベント情報: 特別なイベントやプロモーション情報など、最新の情報を掲載します。

レビューや評価: 顧客のレビューや評価を掲載し、信頼性と信頼を高めます。

コンタクトフォーム: 顧客が質問や問い合わせを行えるように、コンタクトフォームを用意します。

ソーシャルメディアリンク: レストランのソーシャルメディアアカウントへのリンクを含み、顧客とのつながりを強化します。

これらの要素を組み合わせて、高級レストランの魅力的なホームページを作成できます。デザインやコンテンツは、レストランのブランドやイメージに合わせて調整しましょう

Chat GPTとのやりとり（20240429）

……漠然とした質問では、ソースコードを書いてもらうには至らないので、別の方法を試してみる。

You
こちらのWebサイトを参考に、レイアウトのコーディングができますか？
https://backpackersjapan.co.jp/

ChatGPT
もちろんです。サイトのレイアウトやスタイルを参考にしながら、似たようなレイアウトを作成することができます。ただし、元のサイトのデザインやコンテンツは著作権で保護されている可能性があるため、完全にコピーするのではなく、インスピレーションを得て独自のコードを作成することをお勧めします。

与えていただいたサイトを見る限り、次のような特徴があります。

ナビゲーションバーが上部にあり、背景が透明でスクロール時に固定されます。

ヒーローセクションには大きな画像とテキストがあります。

セクションごとに異なる背景色やパターンが使われています。

サイト全体がレスポンシブデザインに対応しています。

これらの特徴を参考にしながら、類似したレイアウトをHTMLとCSSで作成することができます。必要に応じてJavaScriptを使用して動的な機能を追加することもできます。どのような部分を特に作成したいですか？

You
トップページの全体的なレイアウトをHTMLとCSSにしていただいて、横幅600px以下になった際はモバイルに対応できるようにしてほしいです。

ChatGPT
了解しました。トップページの全体的なレイアウトをHTMLとCSSで作成し、横幅が600px以下の場合にモバイルに対応するようにします。以下がそのコードです。

Chat GPTとのやりとり（20240429）

で、以下がそのソースコードです。

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルレイアウト</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
<div class="container">
<h1>サンプルレイアウト</h1>
<nav>
<div class="menu-icon">&#9776;</div>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>

<main>
<div class="container">
<section class="hero">
<h2>Welcome to Our Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>

<section class="content">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

<section class="content">
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

<section class="content">
<h2>Contact Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</div>
</main>

<footer>
<div class="container">
<p>&copy; 2024 サンプルレイアウト. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>

CSS（styles.css）

/* リセットCSS */
body, h1, h2, p, ul, li
 {
margin: 0
;
padding: 0
;
}
body
 {
font-family
: Arial, sans-serif;
background-color: #f7f7f7
;
}
.container
 {
width: 80%
;
margin: 0
 auto;
}
header
 {
background-color: #333
;
color: #fff
;
padding: 20px 0
;
position
: fixed;
width: 100%
;
}
header h1
 {
float
: left;
margin-left: 20px
;
}
nav
 {
float
: right;
margin-right: 20px
;
}
nav ul
 {
list-style-type
: none;
}
nav ul li
 {
display
: inline;
margin-right: 20px
;
}
nav ul li a
 {
color: #fff
;
text-decoration
: none;
}
.menu-icon
 {
display
: none;
cursor
: pointer;
}
main
 {
margin-top: 100px
;
}
.hero
 {
background-image: url('hero-image.jpg'
);
background-size
: cover;
color: #fff
;
padding: 100px 0
;
text-align
: center;
}
.content
 {
background-color: #fff
;
padding: 40px
;
margin-bottom: 40px
;
}
footer
 {
background-color: #333
;
color: #fff
;
padding: 20px 0
;
text-align
: center;
}

このコードでは、ヘッダーにロゴとナビゲーションがあり、スクロール時に固定されます。ヒーローセクションとコンテンツセクションが含まれており、各セクションには適切な背景色やスタイルが適用されます。

参考になるものがあれば、具体的にソースコードを出力してくれるみたいですね。

ただ、先程の動画と同じようにGPT Storeを使った方法を試そうとしたところ、どうやら有料のようなので、これは一旦諦めて、CreateというAIサービスがどんなものか試してみた。

詳しくはこちらの動画を参考にしてください。