タイルのホバー効果を構成する

はじめに

ポインターが重なったときに反応するタイルは、クリックする前に、訪問者に「これはボタンです」と伝えます。Smart Tiles には、わずかに暗くなる効果から色の完全な反転まで、こうした反応が 9 種類あり、それぞれ強さとトランジション時間を調整できます。この記事では、設定項目、各効果の内容、相性のよい組み合わせについて説明します。

効果の有効化

1. ページを編集モードで開き、Web パーツの編集をクリックしてプロパティ ウィンドウを開きます。
2. Appearance（外観）グループで、Hover Effect（ホバー効果）をオンにします。トグルの下に、さらに 3 つのコントロールが表示されます。
3. Effect（効果）の一覧から効果を選択します。
4. 一覧の下のスライダーで強さを設定します。ラベルは、効果に応じて Percentage (%)、degrees、pixels のいずれかになります。
5. トランジションの Duration（継続時間）を、0 秒から 5 秒まで 0.1 秒刻みで設定します。

ページ上のタイルにポインターを重ねると結果を確認できます。設定はすぐに適用されます。

9 種類の効果

効果は、ブラウザーの画像フィルターをタイル全体 (背景、アイコン、テキストをまとめて) に適用したものです。強さの意味によって、2 つのグループに分かれます。

100 % が元の状態になる効果。 値を下げるとそのプロパティが弱まり、ポインターが離れるとタイルは元に戻ります。

0 % が元の状態になる効果。 値を上げると効果が強くなります。

その他の単位を使用する効果。

強さは単位ごとに個別に記憶されます。Brightness を 70 % に設定してから Hue Rotate に切り替え、再び戻すと、70 % が復元されます。

Duration

Duration は、タイルが通常の見た目から効果の見た目に変わるまでの時間であり、ポインターが離れたときに元に戻るまでの時間でもあります。0 では瞬時に切り替わります。0.2～0.4 秒は反応がよく感じられ、1 秒を超えるとナビゲーションとしては遅く感じられます。トランジションは両方向で実行されるため、タイルが突然「パッと」元に戻ることはありません。

キーボードとアクセシビリティ

効果は、ポインターが重なったときだけでなく、タイルにキーボード フォーカスが移ったときにも適用されます。そのため、Tab キーで移動する訪問者も、マウスを使用する訪問者と同じフィードバックを得られます。

オペレーティング システムが視覚効果を減らす設定になっている場合 (macOS と iOS の「視差効果を減らす」、Windows の「アニメーション効果」がオフ) は、トランジションがスキップされます。効果は表示されますが、アニメーションなしで瞬時に切り替わります。

推奨設定

• 標準的な選択: Brightness 80 %、Duration 0.2 秒。色付きのタイル、写真、ダーク テーマで効果的です。
• 控えめな効果 (モノクロのパネル向け): Contrast 60 % または Saturation 40 %、Duration 0.3 秒。ホバーしたタイルは、色を変えずにやわらかくなります。
• 遊び心のある効果: Hue Rotate 20°、Duration 0.4 秒。タイルが隣接する色相に変わり、元に戻ります。
• 写真のタイル: Opacity 85 % または Brightness 75 %。Blur 1 px では、レンズのピントが変わるような効果になります。
• 避けたほうがよい設定: ブランド カラーのタイルでは、Color Inverting と、高い値の Hue Rotate は避けてください。ホバーしたタイルに、ブランドとは異なる色が表示されてしまいます。