Thumbnail vs achtergrond
Wanneer thumbnail?
– Productfoto of logo als zelfstandig element.
– Nauwkeurige controle over maat/positie/rand gewenst.
Wanneer achtergrond?
– Sfeerlaag achter de knop.
– Brede visuele context met overlay/patroon.
使い分けの判断基準
### サムネイルが適しているケース
1. **商品画像やロゴを見せたい**: 画像自体が情報として重要な場合
2. **テキストと画像を横並びにしたい**: レイアウト設定でフレキシブルに配置可能
3. **画像に角丸やボーダーをつけたい**: サムネイル独自の装飾設定が使える
4. **ホバーで画像を拡大したい**: サイズ変化のホバー設定が可能**具体例:**
– 「製品A の詳細を見る」ボタンに製品画像を添える
– 「著者プロフィール」ボタンにアバター画像を配置
– 「カタログダウンロード」ボタンにカタログ表紙を表示### 背景画像が適しているケース
1. **ボタン全体の雰囲気を作りたい**: テクスチャやパターンで装飾感を出す
2. **写真の上にテキストを配置したい**: オーバーレイで可読性を確保できる
3. **動画を使いたい**: 背景のみ動画に対応
4. **ホバーで背景を切り替えたい**: Default / Hover で異なる背景を設定可能**具体例:**
– セールバナー風のボタンに季節画像を敷く
– ブランドイメージのテクスチャを背景に使う
– 短い動画ループで視線を引くCTAボタン### 両方を同時に使うケース
背景画像の上にサムネイルを配置することも可能です。この場合:
– 背景: 雰囲気を作る（パターン・グラデーション・薄い画像 + オーバーレイ）
– サムネイル: 商品やアイコンとして具体的な画像を表示
– テキスト: CTAテキストをサムネイルと横並びに配置—
注意点
– サムネイル画像は `object-fit` で表示を制御します。アスペクト比が合わない場合はトリミングされる可能性があります。
– 背景画像 + オーバーレイの組み合わせでは、オーバーレイの Alpha を適切に設定しないと画像が見えなくなります。
– サムネイルと背景画像の両方に大きな画像を設定すると、ページ速度に影響します。—
関連設定
– [サムネイル設定](../thumbnail/) – サムネイル画像の配置・サイズ・装飾
– [背景設定](../background/) – 背景画像・動画・オーバーレイ
– [レイアウト設定](../layout/) – テキストとサムネイルの配置