バンド設定の活用ケース – ZenBlocks buttonBasic
結論
バンド設定は、ボタンに**斜めのリボンやラベル帯**を追加する機能です。「SALE」「NEW」「おすすめ」「期間限定」などの短い文言を目立たせたい場面で活用できます。ボタン本体のテキストとは独立した視覚要素として機能します。
—
バンドとは
バンドは、ボタンの角に斜めに重なる装飾帯（リボン）です。ECサイトの商品バッジや、不動産サイトの「NEW」ラベルのような演出をボタン上で実現できます。
### バンドの特徴
– ボタンの四隅のいずれかに配置可能
– 斜めの角度で表示される
– 背景色・テキスト色を個別に設定可能
– ボタン本体のテキストやアイコンとは独立して表示
– レスポンシブ対応（デバイスごとにサイズ調整可能）—
活用ケース
### ケース1: セール・キャンペーン表示
– バンドテキスト: 「SALE」「50%OFF」「期間限定」
– 配置: 左上または右上
– 色: 赤系の目立つ背景 + 白文字
– **用途**: ECサイトのセールボタン、キャンペーンCTA### ケース2: 新着・おすすめ表示
– バンドテキスト: 「NEW」「おすすめ」「人気」
– 配置: 右上
– 色: ブランドカラーの背景 + 白文字
– **用途**: 新機能の案内ボタン、おすすめプランの選択ボタン### ケース3: 限定・残りわずか表示
– バンドテキスト: 「残り3席」「限定10名」「あと2日」
– 配置: 左上
– 色: オレンジ系の背景 + 白文字
– **用途**: イベント申し込みボタン、数量限定商品の購入ボタン### ケース4: ステータスラベル
– バンドテキスト: 「FREE」「PRO」「Beta」
– 配置: 右上
– 色: グレー系またはブランドカラー
– **用途**: プラン比較のボタン、無料/有料の区別—
設定の手順
1. バンド設定パネルを開く
2. バンドテキストを入力する（短い文言推奨: 2〜6文字）
3. 配置（左上 / 右上 / 左下 / 右下）を選択する
4. 背景色とテキスト色を設定する
5. フォントサイズを調整する（ボタンサイズに合わせて）
6. フロントエンドでバランスを確認する—
注意点
バンドのテキストが長すぎると、斜めのリボンからはみ出して見た目が崩れます。**2〜6文字程度**の短い文言を推奨します。
バンドはボタンの角に重なるため、角丸（border-radius）が大きいボタンでは見た目のバランスに注意してください。
セール感が強い装飾になるため、ブランドイメージとの整合性を確認してください。コーポレートサイトには不向きな場合があります。
スマホ表示ではバンドが相対的に大きく見えるため、レスポンシブでフォントサイズを小さめに調整してください。