AIと作る10種類の見出しデザイン

Webサイトには色々な見出しがありますが、どうやって作るんですか？

見出しはページの顔とも言える重要な要素だよ。今日は、AIの力を借りて、様々な見出しデザインを作ってみよう。

見出しにもいろんなデザインがあるんですね。でも、どうやってAIに伝えればいいんですか？

見出しのプロンプトは、ボタンよりずっとシンプルだよ。基本的には「どこに装飾を付けるか」を伝えるだけで大丈夫。実際に作りながら学んでいこう。

AIに指示する際のプロンプトのコツ

見出しの場合は、どんなことを意識すればいいんですか？

見出しは、ボタンと違って状態変化が少ないから、プロンプトもシンプルでいいんだ。基本的には「どこに装飾を付けるか」を伝えるだけで十分だよ。

基本的なプロンプトの書き方

見出しのプロンプトは、最初の一文で全体の印象を伝え、必要に応じて色や配置を補足するだけでOKです。

プロンプト例

最小限のプロンプト:

左に線を入れた見出しを作成してください。線の色は青でお願いします。

少し詳しいプロンプト:

下に横線を引いた見出しを作成してください。

- 線は見出しの全幅に引く
- 線の色は青色
- シンプルで読みやすいデザイン

装飾が複雑な場合:

リボンのような見出しを作成してください。

- 背景は青色
- 右端に三角形の装飾を疑似要素で付ける
- 文字は白色
- 見出しの幅は内容に合わせて調整

思ったよりシンプルでいいんですね！

そうなんだ。見出しは静的な要素だから、「どこに何を付けるか」を簡潔に伝えれば、AIが適切なコードを生成してくれるよ。

プロンプトに含めるべき要素

シンプルなプロンプトでも、以下の要素を意識すると、より正確なデザインが生成されます。

装飾の位置 「左に」「下に」「背景に」「囲むように」など
装飾の種類 「線」「枠」「背景色」「アイコン」「影」など
色の指定 「青色」「濃い青」「明るい色」など自然な表現で
実装のヒント（知っている場合）「疑似要素で」「flexboxで」「グラデーションで」など
全体の印象（任意）「シンプル」「華やか」「クラシック」など

実装方法を知っていれば、それもヒントとして伝えるといいんですね。

そうだね。「疑似要素で」「グラデーションで」など、技術的なヒントがあると、より意図したデザインに近づくよ。もちろん知らなければ「リボン風」など見た目で伝えるだけでも大丈夫。

プロンプト作成時の注意点

装飾の位置を明確に 「線を付ける」だけでなく「左に線を付ける」と具体的に
一度に詰め込みすぎない 複雑な装飾は段階的に追加する

シンプルで分かりやすいですね。これなら私にもできそうです。

そうだね。それじゃあ、実際に10種類の見出しを作ってみよう。シンプルなデザインから徐々に装飾的なデザインへと進んでいくよ。

作成する見出しパーツ

今回は、よく使われる見出しデザインを10種類作成します。シンプルな装飾から徐々に複雑な表現へと進んでいくことで、見出しデザインの基礎から応用まで段階的に学べます。

1. 左ボーダー見出し

見出しの左側に縦線を配置したシンプルなデザインです。

HTML

<h2 class="heading-left-border">CSS見出しデザイン</h2>

CSS

.heading-left-border {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    padding-left: 1rem;
    border-left: 4px solid #2d3748;
    margin: 1rem 0;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、左側に太い縦線を付けた見出しを作成してください。

- 濃いグレーの太い縦線を左側に配置
- 線と文字の間に適度な余白

この見出しの特徴

左側の縦線 シンプルな装飾で視認性を確保
ミニマルデザイン 余計な装飾を省いたモダンな見た目
汎用性が高い 様々なコンテンツに適応しやすい

コードのポイント

CSS

.heading-left-border {
    border-left: 4px solid #2d3748; /* 左側に4pxの縦線 */
    padding-left: 1rem; /* 線と文字の間に余白 */
}

border-leftで左側にのみ線を配置
padding-leftで線と文字の間にスペースを確保
シンプルながら視覚的に区切りを明確化

2. 下線付き見出し

見出しの下に横線を配置したデザインです。

HTML

<h2 class="heading-underline">CSS見出しデザイン</h2>

CSS

.heading-underline {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #2d3748;
    margin: 1rem 0;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、下に横線を引いた見出しを作成してください。

- 濃いグレーの横線を下側に配置
- 線と文字の間に適度な余白

この見出しの特徴

下線の強調 見出しとコンテンツの境界を明確化
スタンダードデザイン 多くのサイトで採用される定番スタイル
視認性が高い 横線により見出しが際立つ

コードのポイント

CSS

.heading-underline {
    border-bottom: 3px solid #2d3748; /* 下に3pxの横線 */
    padding-bottom: 0.5rem; /* 線と文字の間に余白 */
}

border-bottomで下側にのみ線を配置
padding-bottomで文字と線の間にスペースを確保
セクションの区切りを視覚的に明示

3. 背景色付き見出し

見出し全体に背景色を敷いたデザインです。

HTML

<h2 class="heading-background">CSS見出しデザイン</h2>

CSS

.heading-background {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    background-color: #e2e8f0;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、柔らかく目立つ見出しを作成してください。

- 薄いグレー色の背景
- 濃いグレーの文字
- 適度な内側の余白
- 軽い角丸で柔らかい印象

この見出しの特徴

背景で強調 色面で見出しを目立たせる
読みやすさ 柔らかい背景色で目に優しい
汎用性 様々なコンテンツに馴染みやすい

コードのポイント

CSS

.heading-background {
    background-color: #e2e8f0; /* 薄いグレーの背景 */
    padding: 0.75rem 1rem; /* 内側に余白 */
    border-radius: 4px; /* 軽い角丸 */
}

background-colorで背景色を設定
paddingで文字と背景の間にスペースを確保
border-radiusで角を丸めて柔らかい印象に

4. グラデーション背景見出し

背景にグラデーションを適用した華やかなデザインです。

HTML

<h2 class="heading-gradient">CSS見出しデザイン</h2>

CSS

.heading-gradient {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #22c55e 0%, #06b6d4 100%);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、グラデーション背景の見出しを作成してください。

- 緑色から水色へのグラデーション背景
- 文字は白色
- 適度な内側の余白
- 軽い角丸で柔らかい印象

この見出しの特徴

華やかな印象 グラデーションで目を引くデザイン
モダンな表現 単色よりも動きと深みを演出
強い存在感 重要なセクションの見出しに最適

コードのポイント

CSS

.heading-gradient {
    background: linear-gradient(135deg, #22c55e 0%, #06b6d4 100%); /* グラデーション背景 */
    color: white; /* 背景が濃いので白文字 */
    padding: 0.75rem 1rem; /* 内側に余白 */
    border-radius: 4px; /* 軽い角丸 */
}

linear-gradientで斜めのグラデーションを作成（135deg）
開始色と終了色をパーセンテージで指定
color: whiteで文字を見やすく

5. 囲み枠見出し

見出しを枠線で囲んだデザインです。

HTML

<h2 class="heading-border">CSS見出しデザイン</h2>

CSS

.heading-border {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    border: 2px solid #2d3748;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、四方を枠線で囲った見出しを作成してください。

- 濃いグレーの枠線で囲む
- 内側に適度な余白
- 軽い角丸で柔らかい印象

この見出しの特徴

明確な区切り 見出し周りを枠で囲むことでセクションの独立性を示す
堅牢な見た目 ボックスで情報をまとめる用途に適する
カスタマイズしやすい 枠の色や角丸で印象を調整可能

コードのポイント

CSS

.heading-border {
  border: 2px solid #2d3748; /* 枠線の太さと色 */
  padding: 0.75rem 1rem; /* 内側の余白 */
  border-radius: 4px; /* 角丸 */
}

borderで枠全体を作る
paddingでテキストと枠の距離を調整
border-radiusで柔らかさを出せる

6. 二重線見出し

上下に二重線を配置したクラシックなデザインです。

HTML

<h2 class="heading-double-line">CSS見出しデザイン</h2>

CSS

.heading-double-line {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    padding: 0.75rem 0;
    margin: 1rem 0;
    border-top: 3px double #2d3748;
    border-bottom: 3px double #2d3748;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、上下に二重線を引いた見出しを作成してください。

- 濃いグレーの二重線を上下に配置
- 文字と線の間に適度な余白

この見出しの特徴

クラシックな印象 二重線は伝統的で落ち着いた雰囲気を与える
セクションの強い区切り 重要な見出しや章見出しに適する
読み手の注目を集める 上下の線が視線を中央に集める

コードのポイント

CSS

.heading-double-line {
  border-top: 3px double #2d3748;
  border-bottom: 3px double #2d3748;
  padding: 0.75rem 0;
}

border-top / border-bottom に doubleスタイルを指定
線の太さと色で強さを調整
高さを一定にしたい場合はline-heightを明示しておくとよい

7. アイコン付き見出し

左側にアイコンを配置した親しみやすいデザインです。

外部ライブラリ（headタグ内に追加）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

HTML

<h2 class="heading-icon">
    <i class="fas fa-ribbon"></i>
    CSS見出しデザイン
</h2>

CSS

.heading-icon {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.heading-icon i {
    color: #2d3748;
    font-size: 1.25rem;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、左側にアイコンを付けた見出しを作成してください。

- fontawesomeのリボンアイコンを使用
- アイコンと文字を横並びに
- アイコンは濃いグレー色

この見出しの特徴

視覚的な先導 アイコンがテキストへの注目を促す
親しみやすさ 情報の入り口としてアイコンが目印になる
簡単な拡張性 アイコンを色やサイズで調整可能

コードのポイント

CSS

.heading-icon {
  display: flex;
  align-items: center; /* テキストとアイコンを垂直中央揃え */
  gap: 0.5rem;
}

.heading-icon i {
  color: #2d3748;
  font-size: 1.25rem;
}

display:flexとalign-items:centerで縦中央揃え
gapでアイコンとテキストの間隔を調整
FontAwesomeのCDNをexternalLibsで読み込む（プレビュー用）

8. リボン風見出し

リボンのような立体的なデザインです。

HTML

<h2 class="heading-ribbon">CSS見出しデザイン</h2>

CSS

.heading-ribbon {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    background-color: #2d3748;
    padding: 0.75rem 1.5rem;
    margin: 1rem 0;
    position: relative;
    display: inline-block;
}

.heading-ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    width: 0;
    height: 100%;
    border-style: solid;
    border-width: 0 0 0 20px;
    border-color: transparent transparent transparent #2d3748;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、リボンのような見出しを作成してください。

- 背景は濃いグレー、文字は白色
- 疑似要素で右端に右向きの三角形の装飾を付ける
- 適度な内側の余白

この見出しの特徴

立体的な見た目 リボン風の装飾で目を引くデザイン
アクセントに最適 重要な見出しや注目させたいセクションに使える
疑似要素の応用 ::afterとclip-pathの組み合わせで実装

コードのポイント

CSS

.heading-ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    width: 0;
    height: 100%;
    border-style: solid;
    border-width: 0 0 0 20px;
    border-color: transparent transparent transparent #2d3748;
    clip-path: polygon(0 0, 0 100%, 100% 50%); /* 三角形を描画 */
}

::after疑似要素でリボンの右端三角形を作成
clip-pathでpolygonを使い三角形に成形
height: 100%で親要素の高さに追随

9. 影付き見出し

テキストに影を付けて立体感を出したデザインです。

HTML

<h2 class="heading-shadow">CSS見出しデザイン</h2>

CSS

.heading-shadow {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2d3748;
    margin: 1rem 0;
    text-shadow: 2px 2px 4px rgba(45, 55, 72, 0.3);
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、文字に薄く柔らかい影を付けた見出しを作成してください。

- 影は文字の右下に配置
- 影の色は薄いグレーで自然な感じに

この見出しの特徴

軽い立体感 シンプルながら奥行きを演出
背景に干渉しない 装飾が最小限で背景の邪魔にならない
実装が簡単 text-shadowプロパティのみで完結

コードのポイント

CSS

.heading-shadow {
    text-shadow: 2px 2px 4px rgba(45, 55, 72, 0.3);
}

text-shadowで影を付ける（X軸 Y軸ぼかし色）
rgbaで透明度を調整し、自然な影に
複数の影を指定して強調することも可能

10. グラデーション下線見出し

下線にグラデーションを適用した華やかなデザインです。

HTML

<h2 class="heading-gradient-underline">CSS見出しデザイン</h2>

CSS

.heading-gradient-underline {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1f2937;
    padding-bottom: 0.5rem;
    margin: 1rem 0;
    position: relative;
}

.heading-gradient-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #22c55e 0%, #06b6d4 100%);
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

h2要素を使用して、下にグラデーションの線を引いた見出しを作成してください。

- 緑色から水色へのグラデーション
- 線は見出しの全幅に配置

この見出しの特徴

カラフルなアクセント グラデーションで華やかさを演出
モダンな印象 単色の線よりも動きのある表現
疑似要素の活用 ::afterで本体とは独立した装飾を実現

コードのポイント

CSS

.heading-gradient-underline {
    position: relative; /* 疑似要素の基準点 */
    padding-bottom: 0.5rem; /* 線との余白 */
}

.heading-gradient-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* 親要素の幅いっぱい */
    height: 8px;
    background: linear-gradient(90deg, #22c55e 0%, #06b6d4 100%);
}

position: relativeで疑似要素の配置基準を設定
::afterで見出し本体とは独立した線を作成
linear-gradient(90deg, ...)で左から右へのグラデーションを指定

まとめ

見出しのプロンプトは、装飾の位置や種類を明確に伝えることが大切だと分かりました。

そうだね。見出しは静的な要素だから、「どこに」「何を」「どのように」配置するかを具体的に伝えることが重要なんだ。

ボタンとは違って、状態変化じゃなくて装飾に焦点を当てるんですね。

その通り。そして、見出しデザインも、最初から完璧なプロンプトを作る必要はない。まずは大枠の装飾をAIに伝えて生成してもらい、細かい余白や色の調整は自分でコードを編集していく方が効率的だよ。

見出しデザインと効果的なプロンプトのポイント

プロンプトの4段階構造 要素と印象の宣言 → テキストスタイル → 装飾要素 → 色使いとバランス
装飾の位置を明確に 「左側に縦線」「下に横線」など、配置を具体的に指定
視覚的要素を具体的に 線の太さ、余白、色の組み合わせを自然な日本語で表現
段階的に学ぶ シンプルなデザインから始めて、徐々に装飾的な表現へ
コードを理解する 生成されたコードの仕組みを読み解き、カスタマイズに活かす
用途に応じて使い分ける メインコンテンツには目立つ見出し、サブセクションにはシンプルな見出しを選ぶ

次回は、ナビゲーション要素の作成について学習します。

AIに指示する際のプロンプトのコツ

基本的なプロンプトの書き方

プロンプト例

最小限のプロンプト:

少し詳しいプロンプト:

装飾が複雑な場合:

プロンプトに含めるべき要素

プロンプト作成時の注意点

作成する見出しパーツ

1. 左ボーダー見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

2. 下線付き見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

3. 背景色付き見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

4. グラデーション背景見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

5. 囲み枠見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

6. 二重線見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

7. アイコン付き見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

8. リボン風見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

9. 影付き見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

10. グラデーション下線見出し

AIへのプロンプト例

この見出しの特徴

コードのポイント

まとめ

学習チェック