サムネイル設定

オーバーレイ

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

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

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

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

設定項目

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

サムネイルのオーバーレイは、サムネイル画像の上にのみ適用されます（ボタン背景のオーバーレイとは独立）。ホバー状態のオーバーレイも個別に設定可能です。

イメージ

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

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

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

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

設定項目

• メディア種別（画像 / 動画）: 背景に使用するメディア種類を選択します。
• 画像: 画像選択、Repeat、Fit Method、Rotation (deg)、Opacity: サムネイル画像の見え方を調整し、訴求点を切り出します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

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

カラー

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

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

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

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

設定項目

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

ホバー時のカラートランジション制限:
サムネイルのカラーは background プロパティを直接トランジションする実装のため、通常＝単色 → ホバー＝グラデーション（またはその逆）に切り替えるとトランジションが効かず、瞬時に切り替わります。これは CSS の仕様上 background-color（単色）と background-image: linear-gradient()（グラデーション）が異なるプロパティであり、ブラウザが両者間をアニメーションできないためです。スムーズな遷移が必要な場合は、通常・ホバーともに単色同士、またはグラデーション同士に揃えてください。

サイズ

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

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

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

調整のコツ:
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: 合成モードを設定し、背景との重なり方を調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

トランジション

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

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

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

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

設定項目

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

サムネイルのトランジションは、オーバーレイ・イメージ・カラー・ボーダー・角丸・透明度すべてのホバー遷移に適用されます。ボタン本体やアイコンのトランジションとは独立して動作します。

背景・バンドとの違い:
サムネイルにはパターンとトランスフォーム（Skew）の設定がありません。パターン付きの装飾レイヤーが必要な場合はバンド設定を使用してください。一方、サムネイルにはサイズ・ボーダー・角丸・ポジション・透明度があり、背景設定にはこれらがありません。

関連FAQ

• 画像・動画が表示されない時のチェック
• サムネイルと背景の使い分け