Gebruik van band
Geschikte gevallen
– Labels zoals `SALE`, `NEW`, `AANBEVOLEN`.
– Korte opvallende aanduidingen bij CTA’s.
Tips
1. Houd tekst kort (ongeveer 2-6 tekens).
2. Controleer overlap met hoofdtekst.
3. Stel op mobiel eventueel kleinere lettergrootte in.
活用ケース
### ケース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）が大きいボタンでは見た目のバランスに注意してください。
– セール感が強い装飾になるため、ブランドイメージとの整合性を確認してください。コーポレートサイトには不向きな場合があります。
– スマホ表示ではバンドが相対的に大きく見えるため、レスポンシブでフォントサイズを小さめに調整してください。—
関連設定
– [バンド設定](../band/) – バンド詳細設定
– [スタイル設定](../style/) – ボタン本体の色・角丸
– [レイアウト設定](../layout/) – ボタンサイズ・余白