サムネイルと背景の使い分け – ZenBlocks buttonBasic
結論
**サムネイル**はボタン内に独立した画像枠として表示され、**背景**はボタン全体の下地として敷かれます。「画像を見せたい」ならサムネイル、「雰囲気を作りたい」なら背景を使ってください。
—
違いの比較
| 比較項目 | サムネイル | 背景画像 |
|—|—|—|
| 表示位置 | ボタン内に独立した画像枠 | ボタン全体の背景 |
| テキストとの関係 | テキストと横並び or 上下配置 | テキストの下に敷かれる |
| サイズ制御 | Width / Height で個別指定 | Background Size（cover / contain 等） |
| ホバー対応 | サイズ・位置のホバー変化あり | オーバーレイ変化で対応 |
| 動画対応 | なし（静止画のみ） | 動画背景対応 |
| オーバーレイ | なし | オーバーレイ対応 |
| 角丸 | サムネイル独自の角丸設定 | ボタン本体の角丸に従う |
| レスポンシブ | サイズ・位置がデバイス別設定可能 | デバイス別設定可能 |—
使い分けの判断基準
### サムネイルが適しているケース
1. **商品画像やロゴを見せたい**: 画像自体が情報として重要な場合
2. **テキストと画像を横並びにしたい**: レイアウト設定でフレキシブルに配置可能
3. **画像に角丸やボーダーをつけたい**: サムネイル独自の装飾設定が使える
4. **ホバーで画像を拡大したい**: サイズ変化のホバー設定が可能**具体例:**
– 「製品A の詳細を見る」ボタンに製品画像を添える
– 「著者プロフィール」ボタンにアバター画像を配置
– 「カタログダウンロード」ボタンにカタログ表紙を表示### 背景画像が適しているケース
1. **ボタン全体の雰囲気を作りたい**: テクスチャやパターンで装飾感を出す
2. **写真の上にテキストを配置したい**: オーバーレイで可読性を確保できる
3. **動画を使いたい**: 背景のみ動画に対応
4. **ホバーで背景を切り替えたい**: Default / Hover で異なる背景を設定可能**具体例:**
– セールバナー風のボタンに季節画像を敷く
– ブランドイメージのテクスチャを背景に使う
– 短い動画ループで視線を引くCTAボタン### 両方を同時に使うケース
背景画像の上にサムネイルを配置することも可能です。この場合:
– 背景: 雰囲気を作る（パターン・グラデーション・薄い画像 + オーバーレイ）
– サムネイル: 商品やアイコンとして具体的な画像を表示
– テキスト: CTAテキストをサムネイルと横並びに配置—
注意点
サムネイル画像は `object-fit` で表示を制御します。アスペクト比が合わない場合はトリミングされる可能性があります。
背景画像 + オーバーレイの組み合わせでは、オーバーレイの Alpha を適切に設定しないと画像が見えなくなります。
サムネイルと背景画像の両方に大きな画像を設定すると、ページ速度に影響します。