アイコン設定

アイコン選択

ポイント:
表示するアイコンを選択します。文言だけでは伝わりにくい意味を補助できます。

この設定で変わること:
視線の停止点が増えるため、情報認知が早くなる効果があります。

調整のコツ:
文言と意味が重複しすぎない、または矛盾しないアイコンを選ぶと理解負荷が下がります。

設定項目

• アイコン選択: 表示するアイコンを選択し、意味の補助を行います。
• アイコンカラー（選択UI内）: アイコン色を選択し、文字や背景との統一感を保ちます。
• ストローク幅（線アイコン）: 線アイコンの太さを調整し、視認性を最適化します。デフォルト値は 1.75 です。値を 0 にするとアイコン本来の線幅で表示されます。
• レスポンシブ切り替え: デバイスごとに異なるアイコンを選択できます。SPで簡略なアイコンに切り替える運用が可能です。

ホバー状態で異なるアイコンに切り替えることも可能です。ホバーアイコンはデバイスごとに個別設定できます。

アイコン非表示の条件:
アイコン未選択かつアイコンフレームのサイズが0の場合、アイコン領域全体がHTML出力されません（DOM上に存在しない）。アイコンフレームにサイズや背景色が設定されている場合は、アイコン未選択でもフレームのみ表示されます。

レスポンシブアイコンの最適化:
デフォルトではPC用アイコンのみが出力され、MD/TB/SP用アイコンは省略されます。デバイスごとに異なるアイコンを使用するには「レスポンシブ切り替え」を有効にする必要があります。レスポンシブアイコン間の切り替えは display: none/flex で行われるため、トランジション（フェード）は適用されません。

アイコンカラー

ポイント:
アイコン色を設定します。文字・背景との調和を取りながら視認性を確保します。

この設定で変わること:
アイコンだけ浮くとノイズになり、弱すぎると存在感が消えます。

調整のコツ:
最初は文字色と揃え、必要な場面だけアクセント色へ分岐すると統一感を保てます。

設定項目

• Color: 色を設定し、要素の視認性とデザイン整合を調整します。
• Alpha: 透明度を設定し、重なりの強さを調整します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

アイコンサイズ

ポイント:
アイコンの大きさを設定します。情報補助として適切な主張量に調整します。

この設定で変わること:
サイズ差が大きいとボタンの重心バランスが崩れます。

調整のコツ:
本文文字サイズの0.9〜1.2倍を起点に、上下の揃いを見て微調整するのが有効です。

設定項目

• サイズ値: アイコンサイズの数値を設定し、主文言とのバランスを調整します。
• 単位（px / em / rem）: アイコンサイズの単位を指定し、相対/固定挙動を選択します。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

ホバー状態のアイコンサイズも個別に設定可能です。ホバー時にサイズを変化させるとアニメーション的な演出効果が得られます。em 単位を使用すると、フォントサイズと連動するためテキストとのバランスが自動で維持されます。

アイコンポジション

ポイント:
アイコンの位置とオフセットを設定します。文言との距離・整列を調整できます。

この設定で変わること:
配置次第で可読性とクリック意図の伝わり方が変わります。

調整のコツ:
まず中央揃えを基準にし、必要な場合だけX/Yを少量ずつ動かすと崩れにくいです。

設定項目

• X Position（left / center / right + 数値）: 水平方向の位置を設定し、テキストとの距離を調整します。
• Y Position（top / center / bottom + 数値）: 垂直方向の位置を設定し、上下バランスを整えます。
• 単位（px / % / vw）: 位置調整の単位を選択し、画面幅への追従性を決めます。
• レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。

アイコンフレーム

ポイント:
アイコンの背景枠を設定します。アイコンを独立した視覚要素として強調できます。

この設定で変わること:
情報階層を作りたいCTAで有効です。

調整のコツ:
フレームを強くした場合は、ボタン本体の装飾を1段弱めると全体バランスが整います。

設定項目

• サイズ > Set Width and Height Individually: 幅と高さを別管理に切り替えます。縦長/横長フレームを作る場合に使用します。
• サイズ > 一括サイズ + 単位: 正方形フレームを一括で調整します。まずここで基準サイズを決めると効率的です。
• サイズ > 個別 Width / Height + 単位: 個別寸法を設定し、アイコン比率や余白バランスを細かく調整します。
• サイズ > レスポンシブ切り替え: デバイスごとにフレーム寸法を調整し、SPでの窮屈さを防ぎます。
• カラー > Background Color: フレーム背景色を設定します。主ボタンと競合しない色を選ぶのが基本です。
• カラー > Alpha: 背景色の透明度を設定します。強すぎる場合は先にここを下げて調整します。
• カラー > Gradient: グラデーション背景に切り替え、立体感や装飾感を追加します。
• カラー > レスポンシブ切り替え: 端末ごとに色濃度を調整し、可読性を維持します。
• ボーダー > Display Position（T/R/B/L）: 枠線を表示する辺を指定し、部分的なアクセント表現を作ります。
• ボーダー > Style: 線種を選択し、フレームのトーン（硬い/軽い）を調整します。
• ボーダー > Color + Alpha: 枠線色と透明度を設定し、背景との境界を明確化します。
• ボーダー > Size: 線の太さを調整します。太すぎるとアイコンより枠が目立つため注意します。
• ボーダー > レスポンシブ切り替え: 端末別に線の太さや主張を最適化します。
• 角丸 > 半径: フレーム角の丸みを設定します。主ボタン形状との統一感を意識します。
• 角丸 > 単位（px / %）: 固定値か比率指定かを選び、異なるサイズでも同じ印象を維持します。
• 角丸 > レスポンシブ切り替え: デバイスごとに角丸を調整し、潰れた見え方を防ぎます。
• トランジション > Duration / Delay / Easing / Custom Value / Reset: ホバー時のフレーム変化速度を設定し、演出強度を制御します。

アイコンフレームはホバー状態でも個別設定が可能です。ホバー時にフレーム色や角丸を変化させることで、ボタン操作のフィードバック効果を強化できます。フレームトランジションはアイコン本体のトランジションとは独立して設定できます。

トランジション

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

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

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

設定項目

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

このトランジションはアイコンの色・サイズ・ポジションのホバー遷移に適用されます。アイコンフレームのトランジションとアイコンアニメーションのトランジションはそれぞれ独立した設定です。

関連FAQ

• アニメーションが動かない・再生されない