スタイル設定

テキストカラー

ポイント:
文字色と透明度を設定します。背景とのコントラスト確保に直結する最重要項目です。

この設定で変わること:
可読性が不足すると、デザインが良くてもクリックされにくくなります。

調整のコツ:
WCAGの観点ではコントラスト比を意識し、特に小さい文字は明度差を強めに確保してください。

設定項目

• Text Color: 文字色を設定し、背景とのコントラストを最適化します。
• Alpha（透明度）: 文字色の透明度を調整し、主張の強さをコントロールします。値は 0（完全透明）〜 1（不透明）の範囲です。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、端末ごとの背景差に対応できます。

ホバー状態の文字色も個別に設定可能です。ホバー時の色変化はスタイルトランジションの Duration に従って滑らかに遷移します。WCAG 2.1 では通常テキストのコントラスト比 4.5:1 以上、大きなテキストでは 3:1 以上が推奨されています。

テキストシャドウ

ポイント:
文字の影を設定します。背景画像上の可読性を補強したい場面で有効です。

この設定で変わること:
影の強さで視認性と装飾感のバランスが変わります。

調整のコツ:
まずは Blur を小さめ、Alpha も低めで始め、必要な分だけ段階的に足すのが安全です。

設定項目

• Text Shadow（ON/OFF）: 文字影の有効/無効を切り替え、可読性補助の有無を決めます。
• Color: 色を設定し、要素の視認性とデザイン整合を調整します。
• Blur + 単位: ぼかし量を設定し、影や発光の広がりを調整します。
• Horizontal + 単位: 横方向のずれ量を設定し、影の方向感を調整します。
• Vertical + 単位: 縦方向のずれ量を設定し、自然な立体感を作ります。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

テキストシャドウはホバー状態でも個別に設定可能です。背景画像の上に文字を配置する場合、影の色は画像と逆の明度（暗い背景なら白系、明るい背景なら暗色系）を選ぶと可読性が向上します。

ボーダー

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

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

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

設定項目

• Border（ON/OFF）: 枠線の有効/無効を切り替え、輪郭の強調有無を決めます。
• Color + Alpha: 色と透明度を同時に設定し、視認性と主張を調整します。
• Width: 幅を設定し、表示領域の広さを調整します。
• Style（none / solid / dashed / dotted）: 線種を選択し、装飾トーンを調整します。
• Box Sizing（border-box / content-box）: サイズ計算方式を切り替え、レイアウト崩れを防ぎます。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

border-box を選択すると、枠線の太さが要素の幅・高さに含まれるため、枠線を追加してもレイアウトが変動しません。content-box では枠線の太さ分だけ要素全体が大きくなります。ホバー状態のボーダーも個別に設定可能です。

角丸

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

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

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

設定項目

• Use Individual Settings: 一括値ではなく上下左右の個別値で詳細調整できるようにします。
• 一括: Border Radius + 単位: 4角へ同じ角丸を適用し、短時間で統一感を作ります。
• 個別: Border Radius Top Left / Top Right / Bottom Right / Bottom Left + 単位: 角ごとに丸みを変え、意図的な形状アクセントを作れます。
• 単位: px / % / em / rem から選択できます。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

50% を設定すると正円（要素が正方形の場合）または楕円形になります。ホバー状態の角丸も個別に設定可能で、ホバー時に形状を変化させる演出に使えます。

インナーシャドウ

ポイント:
内側の影を設定します。押し込み感や奥行き表現を作るための設定です。

この設定で変わること:
フラットデザインに少しだけ立体感を足したいときに有効です。

調整のコツ:
強くしすぎると古いUIに見えやすいため、Blur と Alpha は弱めを基本にしてください。

設定項目

• Inner Shadow（ON/OFF）: 内側影の有効/無効を切り替え、押し込み感を調整します。
• Color: 色を設定し、要素の視認性とデザイン整合を調整します。
• Blur: ぼかし量を調整し、影の強さと広がりを制御します。
• Horizontal: 横方向の移動量を調整し、影や要素の方向感を作ります。
• Vertical: 縦方向の移動量を調整し、自然な奥行き表現を作ります。
• Spread: 影の拡大量を設定し、輪郭の広がりを調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

インナーシャドウは CSS の box-shadow: inset として出力されます。ホバー状態のインナーシャドウも個別に設定可能で、押下感の演出に適しています。インナーシャドウはボタン内側に ::after 疑似要素として描画されるため、角丸設定と連動して正しい形状でクリップされます。

シャドウ

ポイント:
外側の影を設定します。背景からボタンを浮かせ、視線誘導を強める設定です。

この設定で変わること:
影の方向と距離で、要素の前後感が決まります。

調整のコツ:
スマホでは影が強く見えやすいため、SPタブで1段階弱くする運用がおすすめです。

設定項目

• Shadow（ON/OFF）: 外側影の有効/無効を切り替え、浮き上がり感を調整します。
• Color + Alpha: 色と透明度を同時に設定し、視認性と主張を調整します。
• Blur: ぼかし量を調整し、影の強さと広がりを制御します。
• Horizontal: 横方向の移動量を調整し、影や要素の方向感を作ります。
• Vertical: 縦方向の移動量を調整し、自然な奥行き表現を作ります。
• Spread: 影の拡大量を設定し、輪郭の広がりを調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

透明度

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

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

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

設定項目

• Opacity: 不透明度を設定し、要素全体の見え方を調整します。
• Mix Blend Mode: 合成モードを設定し、背景との重なり方を調整します。代表的な値: normal（通常）/ multiply（乗算）/ screen（スクリーン）/ overlay（オーバーレイ）。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

Opacity を下げると子要素（テキスト・アイコン等）すべてに影響します。テキストの可読性を維持しつつ背景を透過させたい場合は、ボタン自体の Opacity ではなく背景設定の Alpha を調整する方が効果的です。ホバー状態の透明度も個別に設定可能です。

Blend Mode の制限:
複数のレイヤー（背景・サムネイル・バンド）でそれぞれ Blend Mode を設定した場合、ブラウザの合成順序によっては意図しない色味になることがあります。Blend Mode を使用する際は、1箇所ずつ確認しながら設定することを推奨します。

トランジション

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

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

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

設定項目

• Duration (ms): 変化にかける時間を設定し、反応の速さを調整します。
• Delay (ms): 変化開始までの待機時間を設定し、演出タイミングを調整します。
• Easing: 速度変化のカーブを設定し、動きの印象を整えます。選択肢: ease / ease-in / ease-out / ease-in-out / linear / Custom。
• Custom Value: カスタムイージング値（CSS cubic-bezier 形式）を指定し、ホバー変化の体感速度を細かく調整します。
• Reset: このセクションの設定を初期状態へ戻します。
• テキストアニメーション有効時の注意表示: テキストアニメーション併用時の注意点を確認し、競合を回避します。

このトランジションは、テキストカラー・ボーダー・角丸・シャドウ・インナーシャドウ・透明度など、スタイル設定パネル内の各プロパティのホバー遷移に適用されます。背景やアイコンのトランジションは、それぞれのパネル内で個別に設定できます。テキストアニメーションを併用する場合、トランジション同士が干渉する可能性があるため、Duration と Delay の調整に注意してください。

トランジション対象プロパティの制限:
内部的に color・text-shadow・border・border-radius・box-shadow・opacity のみがトランジション対象です。background（背景色・グラデーション）や transform（変形）はこのトランジションの対象外であり、それぞれ専用のトランジション設定で制御されます。width / height の変化もこのトランジションでは遷移しません。

関連FAQ

• ホバー時のスタイルが反映されない
• アニメーションが動かない・再生されない