---
title: "タイルのホバー効果を構成する"
description: "Vitextra Smart Tiles Web パーツでホバー効果を有効にして調整する方法を説明します。ぼかし、明るさ、コントラスト、グレースケール、色相の回転、色の反転、不透明度、彩度、セピアの 9 種類の効果、強さの単位、Duration の設定、キーボード フォーカス時と視覚効果を減らす設定での動作、推奨設定を解説します。"
url: https://vitextra.com/ja/support/kb/10248
language: ja
published: 2026-10-13
modified: 2026-10-13
products:
  - "Smart Tiles"
author: "Lidija Reising"
tags: ["タイル ホバー効果 SharePoint", "Smart Tiles ホバー", "マウス オーバー タイル アニメーション", "明るさ ホバー タイル", "グレースケール ホバー効果", "ぼかし効果 タイル", "ホバー 継続時間 トランジション", "キーボード フォーカス タイル", "視覚効果を減らす SharePoint Web パーツ", "Vitextra Smart Tiles 効果"]
---

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

Vitextra Smart Tiles Web パーツでホバー効果を有効にして調整する方法を説明します。ぼかし、明るさ、コントラスト、グレースケール、色相の回転、色の反転、不透明度、彩度、セピアの 9 種類の効果、強さの単位、Duration の設定、キーボード フォーカス時と視覚効果を減らす設定での動作、推奨設定を解説します。

## はじめに

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

## 効果の有効化

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

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

![ホバー効果の設定](https://static.vitextra.com/articles/10248/hover-effect-settings-ja.png)
*ホバー効果の設定*

## 9 種類の効果

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

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

|::効果::|::値が低い場合::|
|:---|:---|
|**Brightness**（明るさ）|タイルが暗くなります。70～85 % は、典型的な「押された」ような見た目です。0 % は黒になります。|
|**Contrast**（コントラスト）|色がグレーに近づいて平坦になります。50 % では、やわらかく色あせたタイルになります。|
|**Saturation**（彩度）|明るさを保ったまま、色がグレーに近づきます。0 % はモノクロのタイルになります。|
|**Opacity**（不透明度）|タイルが半透明になり、ページが透けて見えます。70～80 % はさりげない効果で、0 % ではタイルが消えます。|

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

|::効果::|::値が高い場合::|
|:---|:---|
|**Grayscale**（グレースケール）|色が取り除かれます。100 % は白黒のタイルになります。|
|**Sepia**（セピア）|タイルが温かみのある茶色がかった色調になります。100 % は完全なセピア調のタイルになります。|
|**Color Inverting**（色の反転）|色が反転します。100 % では、白いタイルは黒に、青はオレンジになります。20～30 % では、目立つものの不快ではない変化になります。|

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

|::効果::|::単位と動作::|
|:---|:---|
|**Hue Rotate**（色相の回転）|単位は度で、範囲は 0～360 です。タイルのすべての色を色相環に沿ってずらします。180° では青がオレンジに、緑がマゼンタになり、360° で元に戻ります。小さい値 (15～30°) では、元の色と同系統のまま、活気のある変化になります。|
|**Blur**（ぼかし）|単位はピクセルで、範囲は 0～20 です。タイルをぼかします。1～2 px はピントがわずかに変わる程度で、5 px 以上ではタイトルが読めなくなります。|

![一般的な強さでの 9 種類の効果](https://static.vitextra.com/articles/10248/nine-effects-ja.png)
*一般的な強さでの 9 種類の効果*

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

## Duration

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

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

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

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

📝 **注**  
効果は Web パーツごとに設定します。同じページにある 2 つの Smart Tiles Web パーツで、それぞれ異なる効果を使用したり、一方だけ効果を使用しないようにしたりできます。

## 推奨設定

- **標準的な選択:** 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 は避けてください。ホバーしたタイルに、ブランドとは異なる色が表示されてしまいます。

❗ **重要**  
効果はテキストを含むタイル全体に適用されます。選択した強さでもタイトルが読みやすいことを確認してください。Brightness を 50 % 未満、または Opacity を 60 % 未満にすると、暗いタイル上の白い文字が、訪問者がクリックしようとしているまさにそのときに読みにくくなります。

💡 **ヒント**  
**Appearance** グループのその他の設定は、[KB10042. Smart Tiles Web パーツの追加と構成方法](https://vitextra.com/ja/support/kb/10042)で説明しています。