【ChatGPTの使い方】HTMLとCSSの見出しデザイン生成【無料版でもできる】

はじめに

Webページやブログを書く人にとって便利なChatGPTの使い方をご紹介します。それがHTMLとCSSを使ったデザイン要素の生成です。例えば、ページタイトル（H1）の装飾やデザイン。ページ内のセクションを区切る見出し（H2）などは必ず使うことになりますが、自分でデザインのコードを考えるのは大変です。そこで今回ご紹介すすのがChatGPTにデザインアイデアのパターン出しをしてもらうということです。今回の内容は無料版のChatGPTでもできるので、本ページの内容も無料版で実践したものとなります。

 

ChatGPTでH2見出しを作ってみよう

H2見出しとはこのページの↑コレ「ChatGPTでH2見出しを作ってみよう」の部分です。このページで使っているのはテンプレートを公開してくれているページのものを色を変えてカスタマイズしたものですが、ユニークなデザインを作りたい時はこれから紹介する方法を試してみてください。

1.ChatGPTへのアクセス
まずOpenAIの公式ウェブサイトにアクセスします。
https://chat.openai.com/

2.H2生成の依頼文を送信する
今回は下記の依頼文で送ってみました。

HTMLとCSSでグラフィカルでカラフルなh2見出しのデザインを3案作ってください。

すると下記のメッセージが返ってきました。

もちろんです！以下は3つの異なるスタイルのカラフルでグラフィカルなh2見出しのデザインです。

1. 彩りのあるボーダー


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Heading Design 1</title>
<style>
h2 {
border-bottom: 3px solid #FF3366; /* ボーダーの色 */
padding-bottom: 10px; /* ボーダー下の余白 */
color: #333; /* テキストの色 */
}
</style>
</head>
<body>
<h2>Colorful Heading Design 1</h2>
</body>
</html>

2. グラデーション背景

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Heading Design 2</title>
<style>
h2 {
background: linear-gradient(to right, #FF3366, #33FF99); /* グラデーションの色 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h2>Colorful Heading Design 2</h2>
</body>
</html>

3. 彩りのあるテキストシャドウ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Heading Design 3</title>
<style>
h2 {
text-shadow: 2px 2px 0 #FF3366, 4px 4px 0 #33FF99, 6px 6px 0 #FF9933; /* テキストシャドウの色 */
color: transparent;
}
</style>
</head>
<body>
<h2>Colorful Heading Design 3</h2>
</body>
</html>

これらのコードを使って、カラフルでグラフィカルなh2見出しを実装できます。お好みのものを選んでお楽しみください！

3.生成されたコードの確認
生成されたコードをHTMLとCSSに記述してみると、下記のようなデザインが生成されていました。求めていたものと違った場合は、ガチャを回すように当たりが出るまで生成を繰り返しても良いですし、もう少し具体的な指示を追加して生成するのも良いでしょう。

Colorful Heading Design 1

Colorful Heading Design 2

Colorful Heading Design 3

 

 

デザインの方向性を指示する

見出しデザインの方向性を指示することで生成される内容のコントロールができます。要素、形状、色、コンセプトなど様々な組み合わせで試してみてください。一例としてここでは下記のように依頼文を送ってみました。

HTMLとCSSで帯の形がグラフィカルでユニークなh2見出しのデザインをリッチなトーンで3案作ってください。 コンセプト：美容。

すると下記のメッセージが返ってきました。

美容に関連するデザインを取り入れた、帯の形がグラフィカルでユニークなh2見出しの3つの案をご紹介します。リッチなトーンを取り入れています。

1. ゴールド装飾

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beauty Heading Design 1</title>
<style>
.gold-banner {
background-color: #F7DCA3; /* ゴールド帯の背景色 */
color: #6D4C41; /* テキストの色 */
padding: 10px 20px; /* 帯のパディング */
font-size: 28px;
font-weight: bold;
text-transform: uppercase;
border-radius: 20px; /* 帯の角丸 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影の効果 */
}
</style>
</head>
<body>
<h2 class="gold-banner">Beauty Heading Design 1</h2>
</body>
</html>

2. ローズゴールドのグラデーション

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beauty Heading Design 2</title>
<style>
.rose-gold-banner {
background: linear-gradient(to right, #EAD7B2, #FFC3A0); /* ローズゴールドのグラデーション */
color: transparent;
-webkit-background-clip: text; /* テキストにグラデーションを適用 */
background-clip: text;
font-size: 36px;
font-weight: bold;
text-transform: uppercase;
}
</style>
</head>
<body>
<h2 class="rose-gold-banner">Beauty Heading Design 2</h2>
</body>
</html>

3. フローラルリボン

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beauty Heading Design 3</title>
<style>
.floral-ribbon {
color: #6D4C41;
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
padding: 20px 40px;
border-radius: 30px; /* リボンの角丸 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 影の効果 */
}
</style>
</head>
<body>
<h2 class="floral-ribbon">Beauty Heading Design 3</h2>
</body>
</html>

それぞれのデザインが美容のコンセプトを表現しています。お好みのものを選んでお楽しみください！

生成されたコードの確認
生成されたコードをHTMLとCSSに記述してみると、下記のようなデザインが生成されていました。このように提示したコンセプトに合うようなデザインを提案してくれます。

Colorful Heading Design 1

Colorful Heading Design 2

Colorful Heading Design 3

 

このように様々なデザインのHTMLとCSSを瞬時に生成することができます。

 

おわりに

AIを使ったデザインの生成というと画像や動画などが目立ってしまいますが、このようなウェブページの要素の生成も実用的に使うことができます。今回は、見出しのデザインをテーマにその作り方とプロンプト例をご紹介しましたが、その他にもいろんな表現を作ることができるので、また追って記事にしてご紹介します。

関連記事