AIと作る10種類のボタンデザイン

Webサイトでよく見かける、色が付いたボタンとか、枠線だけのボタンとか、ああいうのって自分で作れるんですか？

もちろんだよ。実は、それらは「基本的なデザイン」として、多くのWebサイトで使われているんだ。今日は、AIの力を借りて、ボタンスタイルを実際に作ってみよう。

AIを使えば、デザインの知識がなくても作れるんですか？

そうだね。AIに「どんなボタンを作りたいか」を具体的に伝えれば、HTMLとCSSのコードを生成してくれる。大切なのは、プロンプト（指示）を明確に出すことなんだ。

でも、プロンプトって何を書けばいいのか分からなくて…

それじゃあ、まず最初に「効果的なプロンプトの書き方」を理解してから、実際にボタンを作っていこう。この基本を押さえれば、どんなデザインも思い通りに作れるようになるよ。

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

AIに指示するとき、どんなことを意識すればいいんですか？

いい質問だね。これから10種類のボタンを作っていくけど、その前に効果的なプロンプトの書き方を理解しておこう。この基本パターンを覚えれば、どんなボタンも思い通りに作れるようになるよ。

効果的なプロンプトの構造

ボタンを正確に生成してもらうには、4段階の構造化された指示が効果的です。

プロンプトの基本構造

1. 要素と全体の印象を宣言
2. 初期状態の視覚的説明
3. ホバー時の変化
4. クリック時の変化（必要に応じて）

全体の印象を最初に伝えて、それから状態ごとに説明するんですね。

その通り。この順序で伝えることで、AIは一貫性のあるデザインを生成しやすくなるんだ。実際の例を見てみよう。

良いプロンプト例

button要素を使用して、カジュアルで親しみやすい雰囲気のボタンを作成してください。

## 初期状態
- 破線スタイルの青色の枠線
- 白い背景に青色の文字

## ホバー時
- 破線が実線に変化
- 背景が白から薄い青に変化

## クリック時
- 背景がさらに少し濃い青に変化

状態ごとに分けて書くと、確かに分かりやすいですね！

そうだね。この構造なら、AIも各状態での見た目を正確に理解できる。さらに具体的に見ていこう。

各段階で伝えるべき内容

1. 要素と全体の印象（最初に宣言）

要素の指定 「button要素を使用して」
デザインの方向性 「モダン」「クラシック」「ポップ」「洗練された」
使用感 「カジュアル」「フォーマル」「親しみやすい」「プレミアム」

2. 初期状態の視覚的説明

背景の色と質感 「鮮やかな青色の背景」「半透明な背景」
文字の色 「白い文字」「青色の文字」
枠線の有無と種類 「枠線なし」「青色の実線」「破線スタイル」
影の有無 「影なし」「柔らかい影を下に」「硬い影を右下にずらして」
形状「適度な角丸」「完全に丸いカプセル型」「四角いまま」

3. ホバー時の変化

色の変化 「背景が少し濃い青に」「透明から青色に」
影の変化 「影が強くなる」「影が大きくなる」「影が小さくなる」
位置の変化 「上に浮き上がる」「右下に移動する」
形状の変化 「少し拡大する」「枠線が実線に変化」

4. クリック時の変化（必要に応じて）

押し込む表現 「影が小さくなる」「少し下に移動」
色の深化 「さらに濃い色に」
一時的な変化 「一瞬縮む」

なるほど。各状態で「何がどう見えるか」「どう変化するか」を具体的に伝えればいいんですね。

そういうこと。この構造を使えば、AIは各状態を正確に理解して、期待通りのボタンを生成してくれる。

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

曖昧な表現のみ 「かっこいいボタン」だけでは情報不足
矛盾した指示 「シンプルで、かつ複雑で華やか」など相反する要求
状態の混在 初期状態とホバー時の説明を混ぜない
一度に詰め込みすぎ 複雑なデザインは段階的に調整

構造化して、状態ごとに明確に伝える。これなら僕にもできそうです！

その通り。それじゃあ、この基本パターンを使って、実際に10種類のボタンを作ってみよう。シンプルなものから徐々に複雑なデザインへと進んでいくから、自然と理解が深まるよ。

作成するボタンパーツ

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

1. 基本の色付きボタン

最もシンプルな単色背景のボタンです。影なし、フラットなデザインで、ホバー時に色が少し濃くなります。

HTML

<button class="btn-basic">BUTTON</button>

CSS

.btn-basic {
    background: #3b82f6;
    color: white;
    padding: 12px 32px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-basic:hover {
    background: #2563eb;
}

.btn-basic:active {
    background: #1d4ed8;
}

AIへのプロンプト例

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

button要素を使用して、シンプルでモダンなボタンを作成してください。

## 初期状態
- 鮮やかな青色の単色背景
- 白い文字
- 影なしのフラットなデザイン
- 適度な角丸

## ホバー時
- 背景色が少し濃い青に変化

## クリック時
- 背景色がさらに濃い青に変化

このボタンの特徴

単色背景 シンプルな青色を使用し、視認性を確保
フラットデザイン 影を付けず、モダンでシンプルな見た目
ホバー効果 マウスを乗せると色が濃くなり、クリック可能であることを示す

コードのポイント

状態変化の仕組み:

CSS

.btn-basic {
    transition: background 0.3s ease; /* 色の変化を0.3秒かけて滑らかに */
}

.btn-basic:hover {
    background: #2563eb; /* ホバー時に濃い青に変化 */
}

.btn-basic:active {
    background: #1d4ed8; /* クリック時にさらに濃い青に */
}

transitionプロパティで色の変化を滑らかにアニメーション
:hover擬似クラスでマウスオーバー時のスタイルを指定
:active擬似クラスでクリック時のスタイルを指定

2. 影付きボタン

単色背景に控えめな影を追加したボタンです。立体感を出して押せることを明示し、ホバー時に影が少し強くなります。

HTML

<button class="btn-shadow">BUTTON</button>

CSS

.btn-shadow {
    background: #3b82f6;
    color: white;
    padding: 12px 32px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.btn-shadow:hover {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-shadow:active {
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}

AIへのプロンプト例

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

button要素を使用して、立体感のあるボタンを作成してください。

## 初期状態
- 青色の背景
- 白い文字
- 青系の柔らかくぼかした影を下方向に配置

## ホバー時
- 影が少し強くなり、ボタンが浮き上がって見える

## クリック時
- 影が小さくなり、押し込まれた感じを表現

このボタンの特徴

立体的な影 柔らかい影で奥行きを表現し、押せることを示す
段階的な変化 ホバー時は影が強く、クリック時は影が弱くなる
視覚的フィードバック ユーザーの操作に応じて見た目が変わる

コードのポイント

影の段階的な変化:

CSS

.btn-shadow {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); /* 初期状態: 下に2px、ぼかし8px */
    transition: all 0.3s ease; /* すべての変化を滑らかに */
}

.btn-shadow:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); /* ホバー: 影が強く大きく */
}

.btn-shadow:active {
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3); /* クリック: 影が小さく押し込まれた感じ */
}

box-shadowの値: オフセットX オフセットY ぼかし色
ホバー時は影のオフセットとぼかしを大きく → 浮き上がる印象
クリック時は影を小さく → 押し込まれる印象
rgba()で透明度を指定し、背景に自然に馴染む影を作成

3. 枠線ボタン

背景は透明で、枠線のみで表現したボタンです。サブアクション用に適しており、ホバー時に背景色が付きます。

HTML

<button class="btn-outline">BUTTON</button>

CSS

.btn-outline {
    background: transparent;
    color: #3b82f6;
    padding: 12px 32px;
    border: 2px solid #3b82f6;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #3b82f6;
    color: white;
}

.btn-outline:active {
    background: #2563eb;
    border-color: #2563eb;
}

AIへのプロンプト例

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

button要素を使用して、サブアクション用の控えめで洗練されたボタンを作成してください。

## 初期状態
- 背景は完全に透明
- 青色の枠線のみで輪郭を表現
- 文字色も枠線と同じ青色

## ホバー時
- 背景が青色で塗りつぶされる
- 文字色が白に反転

## クリック時
- 背景色がさらに濃い青に変化
- 枠線の色も濃い青に変化

このボタンの特徴

透明背景 下の要素が透けて見える軽やかな印象
枠線のみ 輪郭だけで表現し、主張を抑えたデザイン
反転効果 ホバー時に背景と文字色が入れ替わる
用途主要なボタンの隣に配置するサブボタンに最適

コードのポイント

背景と文字色の反転:

CSS

.btn-outline {
    background: transparent; /* 透明背景 */
    color: #3b82f6; /* 青色の文字 */
    border: 2px solid #3b82f6; /* 青色の枠線 */
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: #3b82f6; /* 背景を青色に */
    color: white; /* 文字を白に反転 */
}

初期状態はtransparentで透明背景
ホバー時にbackgroundとcolorを同時に変更して反転効果
transition: allですべてのプロパティ変化を滑らかに
枠線色は変更せず、背景と文字だけが変化

4. 破線の枠線ボタン

枠線を破線（dashed）にしたデザインのボタンです。カジュアルで柔らかい印象を与え、ホバー時に実線に変化します。

HTML

<button class="btn-dashed">BUTTON</button>

CSS

.btn-dashed {
    background: white;
    color: #3b82f6;
    padding: 12px 32px;
    border: 2px dashed #3b82f6;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-dashed:hover {
    border-style: solid;
    background: #eff6ff;
}

.btn-dashed:active {
    background: #dbeafe;
}

AIへのプロンプト例

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

button要素を使用して、カジュアルで親しみやすいボタンを作成してください。

## 初期状態
- 青色の破線スタイルの枠線
- 白い背景
- 青色の文字

## ホバー時
- 破線が実線に変化
- 背景が白から薄い青に変化

## クリック時
- 背景がさらに少し濃い青に変化

このボタンの特徴

破線スタイル カジュアルで柔らかい印象の枠線
動的な変化 ホバー時に破線が実線に変わる
柔らかい背景 白から薄い青へと変化し、視認性を保つ
用途フォーマルすぎない、親しみやすいデザインに最適

コードのポイント

枠線スタイルと背景の同時変化:

CSS

.btn-dashed {
    border: 2px dashed #3b82f6; /* 破線スタイルの枠線 */
    background: white;
    transition: all 0.3s ease;
}

.btn-dashed:hover {
    border-style: solid; /* 破線が実線に変化 */
    background: #eff6ff; /* 背景が薄い青に */
}

border-style: dashedで破線の枠線を作成
ホバー時にborder-style: solidで実線に変化
背景色も同時に変化させて、より明確な状態変化を表現
枠線の太さや色は変えず、スタイルのみ変更

5. 二重枠線ボタン

内側と外側に2つの枠線を持つボタンです。シンプルながら個性的なデザインで、枠線の間隔で印象を調整できます。

HTML

<button class="btn-double">BUTTON</button>

CSS

.btn-double {
    background: white;
    color: #3b82f6;
    padding: 12px 32px;
    border: 3px double #3b82f6;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-double:hover {
    background: #3b82f6;
    color: white;
}

.btn-double:active {
    background: #2563eb;
}

AIへのプロンプト例

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

button要素を使用して、シンプルながら個性的でクラシックな印象のボタンを作成してください。

## 初期状態
- 青色の二重線スタイルの枠線（少し太めに）
- 白い背景
- 青色の文字

## ホバー時
- 背景が青色で塗りつぶされる
- 文字色が白に反転

## クリック時
- 背景色がさらに濃い青に変化

このボタンの特徴

二重枠線 2本の線で個性的な印象を演出
クラシックな雰囲気 シンプルながら他と差別化できるデザイン
反転効果 ホバー時に背景と文字色が入れ替わる
用途フォーマルで上品な印象を与えたい場合に最適

コードのポイント

二重枠線と反転効果:

CSS

.btn-double {
    border: 3px double #3b82f6; /* 二重線スタイルの枠線 */
    background: white;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.btn-double:hover {
    background: #3b82f6; /* 背景を青色に */
    color: white; /* 文字を白に反転 */
}

border-style: doubleで二重線を作成
枠線の太さは3px以上にすることで二重線が明確に見える
ホバー時は枠線ボタンと同じく背景と文字色を反転
枠線自体は変化させず、中の色だけを変える

6. ズラシボタン（影のズレ）

背景と影を少しずらして配置したボタンです。立体的でモダンな印象を与え、ホバー時に影が移動します。

HTML

<button class="btn-offset">BUTTON</button>

CSS

.btn-offset {
    background: #fef08a;
    color: #1f2937;
    padding: 12px 32px;
    border: 2px solid #1f2937;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 4px 4px 0 #1f2937;
    transition: all 0.2s ease;
    position: relative;
}

.btn-offset:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #1f2937;
}

.btn-offset:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 #1f2937;
}

AIへのプロンプト例

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

button要素を使用して、ポップでモダンなボタンを作成してください。

## 初期状態
- 黄色い背景
- 黒い文字と黒の枠線
- ぼかしのない硬い影を右下にずらして配置
- 角を丸めず四角いまま

## ホバー時
- ボタン本体が右下に少し移動
- 影も小さくなる（押し込まれる感じ）

## クリック時
- ボタン本体がさらに右下に移動
- 影が完全に消える（ボタンと影が重なって完全に押し込まれた状態）

このボタンの特徴

硬い影 ぼかしのないシャープな影で立体感を強調
ズレの表現 影を右下にずらして浮いているように見せる
押し込む動き ホバー時にボタンが影に近づく
視覚的インパクト 角丸なしで、モダンでポップな印象

コードのポイント

影とボタンの位置を連動:

CSS

.btn-offset {
    box-shadow: 4px 4px 0 #1f2937; /* 右4px 下4px ぼかし0の硬い影 */
    transition: all 0.2s ease;
}

.btn-offset:hover {
    transform: translate(2px, 2px); /* ボタンを右下に2px移動 */
    box-shadow: 2px 2px 0 #1f2937; /* 影も小さく(2px, 2px)に */
}

.btn-offset:active {
    transform: translate(4px, 4px); /* さらに右下に */
    box-shadow: 0 0 0 #1f2937; /* 影が完全に消える */
}

box-shadowの3番目の値を0にして、ぼかしのない硬い影を作成
transform: translate()でボタン本体を移動
影のオフセット値を小さくすることで、ボタンが影に近づく
クリック時は影が完全に消えて、完全に押し込まれた状態を表現

7. 角丸ボタン

単色背景で角を大きく丸めたボタンです。柔らかく親しみやすい印象を与え、モダンなデザインに適しています。

HTML

<button class="btn-rounded">BUTTON</button>

CSS

.btn-rounded {
    background: #3b82f6;
    color: white;
    padding: 12px 32px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-rounded:hover {
    background: #2563eb;
    transform: scale(1.05);
}

.btn-rounded:active {
    transform: scale(0.98);
}

AIへのプロンプト例

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

button要素を使用して、親しみやすく柔らかい印象のモダンでカジュアルなボタンを作成してください。

## 初期状態
- 青色の背景
- 白い文字
- 角を完全に丸めて楕円形に近い形状（カプセル型）

## ホバー時
- 少し拡大してポップな動き

## クリック時
- 元のサイズより少し縮小する

このボタンの特徴

完全な角丸 楕円形に近いカプセル型の形状
拡大効果 ホバー時に少し拡大してポップな印象
柔らかい印象 角丸により親しみやすく優しい見た目
用途カジュアルなサイトやアプリに最適

コードのポイント

拡大縮小のアニメーション:

CSS

.btn-rounded {
    border-radius: 50px; /* 大きな値で完全なカプセル型に */
    transition: all 0.3s ease;
}

.btn-rounded:hover {
    transform: scale(1.05); /* 105%に拡大 */
}

.btn-rounded:active {
    transform: scale(0.98); /* クリック時は98%に縮小 */
}

border-radiusに大きな値(50px)を指定してカプセル型に
transform: scale()で全体のサイズを変更
ホバー時は1.05倍に拡大、クリック時は0.98倍に縮小
色の変化ではなく、サイズ変化で状態を表現

8. グラデーションボタン

2色以上のグラデーション背景を持つボタンです。華やかで目を引くデザインで、プレミアム感を演出します。

HTML

<button class="btn-gradient">BUTTON</button>

CSS

.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 32px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-gradient:active {
    transform: translateY(0);
}

AIへのプロンプト例

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

button要素を使用して、華やかでプレミアムな印象のボタンを作成してください。

## 初期状態
- 明るい紫から濃い紫への滑らかなグラデーション背景（斜め方向）
- 白い文字
- グラデーションと同系色の影を付けて立体感を演出

## ホバー時
- 少し上に浮き上がる動き
- 影がさらに強くなる

## クリック時
- 元の位置に戻る

このボタンの特徴

グラデーション背景 2色の滑らかな変化で華やかな印象
浮き上がる動き ホバー時に上方向に移動
影の連動 移動に合わせて影も強くなる
華やかさ 単色よりも視覚的に豊かで目を引く

コードのポイント

グラデーションと浮き上がり効果:

CSS

.btn-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* 135度の角度で、明るい紫から濃い紫へグラデーション */
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    transform: translateY(-2px); /* 上に2px移動 */
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); /* 影が強く大きく */
}

linear-gradient(角度, 開始色位置, 終了色位置)でグラデーション作成
135度の角度で斜め方向のグラデーション
translateY()で上方向に移動して浮き上がる効果
影も同時に強くすることで、より高く浮いている印象を演出

9. 浮き上がるボタン

ホバー時に上に移動するアニメーションを持つボタンです。影と移動で立体的な動きを表現し、インタラクティブな印象を与えます。

HTML

<button class="btn-float">BUTTON</button>

CSS

.btn-float {
    background: #10b981;
    color: white;
    padding: 12px 32px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-float:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px rgba(16, 185, 129, 0.4);
}

.btn-float:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

AIへのプロンプト例

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

button要素を使用して、インタラクティブで楽しい印象のボタンを作成してください。

## 初期状態
- 鮮やかな緑色の背景
- 白い文字
- 下方向に緑系の柔らかい影が付いている

## ホバー時
- 上方向に大きく移動
- 影も連動して大きく強くなる
- 滑らかで自然な動きのアニメーション

## クリック時
- 元の位置近くに戻る
- 影も小さくなる

このボタンの特徴

大きな移動 8pxの移動で明確な浮き上がり効果
連動する影 移動に合わせて影も変化し、距離感を表現
自然な動き イージング関数で加速・減速を制御
視覚的フィードバック ユーザーの操作に応じた動的な反応

コードのポイント

大きな移動と影の連動:

CSS

.btn-float {
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3); /* 初期の影 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 自然な動きのイージング */
}

.btn-float:hover {
    transform: translateY(-8px); /* 上に8px大きく移動 */
    box-shadow: 0 12px 20px rgba(16, 185, 129, 0.4); /* 影も大きく強く */
}

.btn-float:active {
    transform: translateY(-2px); /* クリック時は少し戻る */
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3); /* 影も小さく */
}

-8pxの大きな移動で明確な浮き上がりを表現
影のY軸オフセットを4px→12pxに大きくして距離感を演出
cubic-bezier(0.4, 0, 0.2, 1)で加速・減速の自然な動き
クリック時は元の位置に近づけて、押し込まれた感じを表現

10. 下線アニメーションボタン

ホバー時に下線が左から右へアニメーションで表示されるボタンです。シンプルながら洗練された印象を与え、テキストリンクのような軽やかさを持ちます。

HTML

<button class="btn-underline">BUTTON</button>

CSS

.btn-underline {
    background: #eff6ff;
    color: #3b82f6;
    padding: 12px 32px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.btn-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #3b82f6;
    transition: width 0.3s ease;
}

.btn-underline:hover {
    background: #dbeafe;
    color: #2563eb;
}

.btn-underline:hover::after {
    width: 100%;
}

.btn-underline:active {
    background: #bfdbfe;
    color: #1e40af;
}

AIへのプロンプト例

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

button要素を使用して、シンプルで洗練された印象のボタンを作成してください。

## 初期状態
- 薄い青色の背景
- 青色の文字
- 枠線なし
- 下線は表示されていない

## ホバー時
- 背景が少し濃い青に変化
- 文字色も少し濃い青に変化
- ボタンの下に青い線が左から右へスライドして表示される

## クリック時
- 背景がさらに濃い青に変化
- 文字色もさらに濃い青に変化

このボタンの特徴

柔らかい背景 薄い青色の背景で視認性を確保
アニメーション効果 下線が左から右へスムーズに表示
段階的な変化 ホバー・クリック時に背景と文字色が連動して変化
用途ミニマルなデザインやテキストベースのナビゲーションに最適

コードのポイント

疑似要素による下線アニメーション:

CSS

.btn-underline {
    position: relative; /* 疑似要素の基準位置 */
    background: #eff6ff; /* 薄い青色の背景 */
    transition: all 0.3s ease; /* 全ての変化を滑らかに */
}

.btn-underline::after {
    content: ''; /* 空の疑似要素 */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* 初期状態は幅0 */
    height: 2px;
    background: #3b82f6;
    transition: width 0.3s ease; /* 幅の変化をアニメーション */
}

.btn-underline:hover {
    background: #dbeafe; /* ホバー時に少し濃い青に */
}

.btn-underline:hover::after {
    width: 100%; /* ホバー時に幅100%に */
}

::after疑似要素で下線を作成
初期状態はwidth: 0で非表示
ホバー時にwidth: 100%にして左から右へ伸びるアニメーション
背景色も段階的に変化して視覚的フィードバックを強化
transition: allで背景・文字・下線の全ての変化を滑らかに実現

まとめ

最初にプロンプトの書き方を学んでから実際に作ってみたので、各ボタンのプロンプトの意味がよく理解できました！

そうだね。効果的なプロンプトの構造を理解してから実践すると、なぜそう書くのか、どう指示すれば思い通りになるかが見えてくるよね。

これで自分のサイトに合ったボタンを、AIの力を借りて作れそうです！

その調子だよ。ただし、最初から完璧なプロンプトを作ろうと考えすぎる必要はないんだ。まずは大枠のデザインをAIに伝えて生成してもらい、細かい色の調整や余白の微調整は自分でコードを編集していく方が効率的だよ。

確かに、細かい数値までプロンプトで指定するより、生成されたコードを見ながら調整した方が早そうですね。

そうなんだ。AIは大枠を素早く作るのが得意で、人間は細部の微調整が得意。この役割分担を意識すると、効率よく理想のデザインに近づけるよ。今日学んだプロンプトの書き方を基礎にして、色や形を変えたり、複数のテクニックを組み合わせたりすれば、オリジナルのボタンがどんどん作れるようになる。生成されたコードを読んで理解することも忘れずにね。

ボタンデザインと効果的なプロンプトのポイント

プロンプトの4段階構造 要素と印象の宣言 → 初期状態 → ホバー時 → クリック時（必要に応じて）
状態ごとに明確に指示 初期状態、ホバー時、クリック時を分けて具体的に説明
視覚的要素を具体的に 色、質感、影、形状などを日本語で分かりやすく表現
段階的に学ぶ シンプルなデザインから始めて、徐々に複雑な表現へ
コードを理解する 生成されたコードの仕組みを読み解き、カスタマイズに活かす
用途に応じて使い分ける 主要なアクションには目立つボタン、サブアクションには控えめなボタンを選ぶ

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

効果的なプロンプトの構造

プロンプトの基本構造

良いプロンプト例

各段階で伝えるべき内容

1. 要素と全体の印象（最初に宣言）

2. 初期状態の視覚的説明

3. ホバー時の変化

4. クリック時の変化（必要に応じて）

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

作成するボタンパーツ

1. 基本の色付きボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

状態変化の仕組み:

2. 影付きボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

影の段階的な変化:

3. 枠線ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

背景と文字色の反転:

4. 破線の枠線ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

枠線スタイルと背景の同時変化:

5. 二重枠線ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

二重枠線と反転効果:

6. ズラシボタン（影のズレ）

AIへのプロンプト例

このボタンの特徴

コードのポイント

影とボタンの位置を連動:

7. 角丸ボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

拡大縮小のアニメーション:

8. グラデーションボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

グラデーションと浮き上がり効果:

9. 浮き上がるボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

大きな移動と影の連動:

10. 下線アニメーションボタン

AIへのプロンプト例

このボタンの特徴

コードのポイント

疑似要素による下線アニメーション:

まとめ

学習チェック