帯設定

オーバーレイ

実際と少し異なる場合があります。

ポイント:
背景要素の上に重ねる色レイヤーを設定します。写真や動画上の可読性調整に有効です。

この設定で変わること:
被写体の明暗差を均して、文字を読みやすくできます。

調整のコツ:
まず単色で濃度を決め、必要な場合のみグラデーションに展開すると破綻しにくいです。

設定項目

• Color / Gradient: 単色またはグラデーションを設定し、背景表現を調整します。
• Opacity: 不透明度を設定し、要素全体の見え方を調整します。
• Mix Blend Mode: 合成モードを設定し、背景との重なり方を調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

パターン

実際と少し異なる場合があります。

ポイント:
背景パターンの種類と強度を設定します。情報量を増やしつつ単調さを避けられます。

この設定で変わること:
テクスチャ感が追加され、無地より表情が出ます。

調整のコツ:
主役はあくまで文言なので、パターンのコントラストは控えめにすると実運用で安定します。

設定項目

• Pattern Type: パターン種類を選択し、背景の質感を決めます。
• Pattern Color: パターン色を設定し、背景とのコントラストを調整します。
• Pattern Size: パターンの大きさを設定し、密度感を調整します。
• Pattern Opacity: パターン透明度を設定し、装飾の主張を調整します。
• Blend Mode: 合成モードを選択し、背景と文字の重なり方を最適化します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

イメージ

実際と少し異なる場合があります。

ポイント:
画像や動画の表示方法を設定します。フィット、位置、反復で見え方が大きく変わります。

この設定で変わること:
同じ素材でも設定次第で訴求力が大きく変化します。

調整のコツ:
まず Fit を決めてから位置調整し、最後にOpacityやOverlayで可読性を仕上げる順序が効率的です。

設定項目

• メディア種別（画像 / 動画）: 背景に使用するメディア種類を選択します。
• 画像: Repeat、Fit Method、Rotation (deg)、Opacity: 帯背景の画像表示を調整し、装飾の強さをコントロールします。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

PRO機能（動画）:
帯の動画設定は有料版（ZenBlocks PRO）で利用できます。動画URLや動画表示位置を使う場合はPRO版が必要です。

カラー

実際と少し異なる場合があります。

ポイント:
ベースカラーを設定します。レイヤー構成の土台になる色です。

この設定で変わること:
オーバーレイや文字色との関係で最終印象が決まります。

調整のコツ:
単体で映える色より、文字と背景の組み合わせで読める色を優先してください。

設定項目

• ベース Color: ベースカラーを設定し、要素の土台色を決めます。
• Opacity: 不透明度を設定し、要素全体の見え方を調整します。
• Blend Mode: 合成モードを選択し、背景と文字の重なり方を最適化します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

ホバー時のカラートランジション:
バンドカラーのホバー遷移は、内部的にクロスフェード方式（通常状態とホバー状態を別レイヤーで重ね、opacity で切り替える）で実装されています。そのため、通常＝単色 → ホバー＝グラデーション（またはその逆）の切り替えでもトランジションが滑らかに動作します。

サイズ

実際と少し異なる場合があります。

ポイント:
要素の幅・高さなど表示サイズを設定します。デバイスごとの見え方最適化に使います。

この設定で変わること:
同じ内容量でもサイズ設定で視認性と印象が変わります。

調整のコツ:
PCで整えた後にSPを個別確認し、折返しや余白不足がないか必ずチェックしてください。

設定項目

• Width: 幅を設定し、表示領域の広さを調整します。
• Height: 高さを設定し、要素の密度感と視認性を調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

ボーダー

実際と少し異なる場合があります。

ポイント:
枠線の色・太さ・線種を設定します。ボタンの輪郭を明確にし、クリック可能要素として認識させます。

この設定で変わること:
背景色が薄いデザインでも、境界をはっきり見せる効果があります。

調整のコツ:
太すぎる枠線は文字の主張を弱めるため、まず1px前後から調整するのが扱いやすいです。

設定項目

• Border（ON/OFF）: 枠線の有効/無効を切り替え、輪郭の強調有無を決めます。
• Color: 色を設定し、要素の視認性とデザイン整合を調整します。
• Width: 幅を設定し、表示領域の広さを調整します。
• Style: スタイルを選択し、線や装飾の見え方を調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

角丸

実際と少し異なる場合があります。

ポイント:
要素の角の丸みを設定します。ブランドトーン（堅い/柔らかい）を印象レベルで調整できます。

この設定で変わること:
角丸の値はボタンサイズとの比率で見え方が変わります。

調整のコツ:
高さの約20〜35%を目安にすると、丸すぎず硬すぎないバランスになりやすいです。

設定項目

• Border Radius: 角丸半径を設定し、要素の印象を調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

ポジション

実際と少し異なる場合があります。

ポイント:
要素の配置位置を設定します。周辺要素との重なりや距離を制御できます。

この設定で変わること:
位置設定はレイアウト破綻の原因にもなるため影響範囲が広い項目です。

調整のコツ:
まず相対配置で成立させ、絶対配置は必要箇所だけに限定すると保守しやすくなります。

設定項目

• 水平方向（Left / Center / Right）: 水平方向の配置位置を設定し、レイアウトの重心を整えます。
• 垂直方向（Top / Center / Bottom）: 垂直方向の配置位置を設定し、上下バランスを最適化します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

透明度

実際と少し異なる場合があります。

ポイント:
要素全体の不透明度と合成モードを設定します。背景との重なり方をデザイン的に調整できます。

この設定で変わること:
同じ色でもOpacityとBlendで印象が大きく変化します。

調整のコツ:
可読性が下がる場合は、先に文字色と背景コントラストを補正してからOpacityを調整してください。

設定項目

• Opacity: 不透明度を設定し、要素全体の見え方を調整します。
• Mix Blend Mode: 合成モードを設定し、背景との重なり方を調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

トランスフォーム

実際と少し異なる場合があります。

ポイント:
回転や傾きなどの変形を設定します。視線誘導や装飾のアクセントに使えます。

この設定で変わること:
小さな変形でも印象変化は大きく、過剰だと可読性を損ないます。

調整のコツ:
まず0度付近から微調整し、実運用では強い変形を避けるのが無難です。

設定項目

• Skew X: X軸方向の傾きを設定し、装飾のアクセントを加えます。
• Skew Y: Y軸方向の傾きを設定し、要素の表情を調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

CSS の transform: skew() として出力されます。ホバー状態のトランスフォームも個別に設定可能です。傾き角度が大きいほどボタンからはみ出す可能性があるため、overflow: hidden の設定状況と併せて確認してください。

トランジション

実際と少し異なる場合があります。

ポイント:
通常状態からホバー状態への変化速度を設定します。操作時の「気持ちよさ」を決める項目です。

この設定で変わること:
速すぎると変化に気づかず、遅すぎると反応が鈍く感じられます。

調整のコツ:
まず Duration 200〜350ms を基準にし、演出が必要な箇所だけ遅延やカスタムイージングを追加します。

設定項目

• Duration (ms): 変化時間を設定し、演出の速さを調整します。
• Delay (ms): 遅延時間を設定し、アニメーション開始タイミングを調整します。
• Easing: 速度変化のカーブを設定し、動きの印象を整えます。
• Custom Value: カスタムイージング値（CSS cubic-bezier 形式）を指定し、変化の質感を調整します。
• Reset: このセクションの設定を初期状態へ戻します。

バンドのトランジションは、オーバーレイ・パターン・イメージ・カラー・透明度・トランスフォームすべてのホバー遷移に適用されます。ボタン本体のトランジションとは独立して動作します。

背景・サムネイルとの違い:
バンドは3つのビジュアルレイヤー（背景・サムネイル・バンド）の中で最も設定項目が豊富です。トランスフォーム（Skew）はバンドのみに用意されています。またパターンは背景とバンドにはありますが、サムネイルにはありません。背景設定にはサイズ・ボーダー・角丸・ポジション・トランスフォームがないため、位置や形状を個別制御したい装飾レイヤーにはバンドまたはサムネイルを使用してください。

関連FAQ

• バンド設定の活用ケース