---
title: "Smart Tiles: ソリューションの概要"
description: "Vitextra Smart Tiles Web パーツの概要と機能を説明します。6 種類のアイコン ソース、テーマ カラーと定義済みカラー、背景画像、説明、ホバー効果、対象ユーザーの指定、タイルのインポートとエクスポート、44 言語への対応を備えた、SharePoint Online ページ向けのタイル型ナビゲーションです。"
url: https://vitextra.com/ja/support/kb/10240
language: ja
published: 2026-10-13
modified: 2026-10-13
products:
  - "Smart Tiles"
author: "Vitālijs Kalniņš"
tags: ["Vitextra Smart Tiles", "SharePoint Online タイル ナビゲーション", "SharePoint タイル Web パーツ", "ナビゲーション タイル", "クイック リンク 代替", "SharePoint Framework Web パーツ", "対象ユーザー タイル", "タイル アイコン Microsoft 365", "SharePoint イントラネット ナビゲーション", "Smart Tiles 概要"]
---

# Smart Tiles: ソリューションの概要

Vitextra Smart Tiles Web パーツの概要と機能を説明します。6 種類のアイコン ソース、テーマ カラーと定義済みカラー、背景画像、説明、ホバー効果、対象ユーザーの指定、タイルのインポートとエクスポート、44 言語への対応を備えた、SharePoint Online ページ向けのタイル型ナビゲーションです。

## はじめに

どのイントラネット ページにも、他のどのリンクよりも頻繁に開かれる宛先がいくつかあります。たとえば、人事ポータル、勤務時間管理システム、チームのドキュメント ライブラリ、ヘルプ デスクなどです。[Smart Tiles](https://vitextra.com/ja/products/smart-tiles) は、こうした宛先を、アイコン付きの大きくカラフルなタイルのパネルに変えます。訪問者は一目で認識でき、1 回のクリックでアクセスできます。

Smart Tiles は、::SharePoint Online:: のモダン ページ向けの ::SharePoint Framework:: Web パーツです。ページの作成者はこの Web パーツをページに追加し、編集モードでページ上に直接タイルを作成して、発行します。リストや構成ファイルは不要です。この記事では、この Web パーツを紹介します。動作する場所、タイルで設定できる内容、パネル全体の外観を決める設定について説明します。

![SharePoint Online ページ上の Smart Tiles ナビゲーション パネル](https://static.vitextra.com/articles/10240/smart-tiles-overview-ja.png)
*SharePoint Online ページ上の Smart Tiles ナビゲーション パネル*

## Smart Tiles が動作する場所

Smart Tiles は、::アプリ カタログ::から 1 つのパッケージとして Microsoft 365 テナントに展開されます。展開後は、追加のアクティブ化なしで、テナントのすべてのサイトで Web パーツを使用できます。次の場所に配置できます。

- 任意のモダン ページ (サイト ページ、ニュース投稿、ホーム ページ)
- 通常のセクション、列を含むセクション、または::全幅セクション::。全幅セクションでは、タイルが画面全体に広がります。
- 1 つの Web パーツのみを配置する::アプリ ページ::。タイルがページの唯一のコンテンツになります。

Web パーツはサイトのテーマ (ダーク テーマやセクションのカラー バリエーションを含む) に従い、そのインターフェイスは 44 言語で利用でき、ユーザーの言語に応じて自動的に選択されます。

📝 **注**  
Smart Tiles はモダン ページのみに対応しています。クラシック ページには追加できません。

## タイルで設定できる内容

各タイルは、それぞれ独自の外観を持つリンクです。タイルのプロパティは 4 つのグループに分かれています。

**テキスト。** タイルにはタイトルと、省略可能な説明があります。説明はタイトルの下に小さい文字で表示され、タイルのツールヒントにも表示されます。コンパクトな外観にしたい場合は、パネル全体で説明を非表示にできます。

**リンク。** タイルでは、ページ、ドキュメント、または任意の Web アドレスを、同じウィンドウまたは新しいタブで開けます。通常のリンクのほか、タイルから電子メールの作成 (`mailto:`)、電話の発信 (`tel:`)、テキスト メッセージの送信 (`sms:`)、Microsoft Teams のチャットやチャネルの表示 (`msteams:`) を開始することもできます。YouTube 動画へのリンクは自動的に認識されます。タイルには動画のサムネイルを背景として表示でき、アイコンの代わりに再生ボタンが表示されます。

**外観。** 各タイルには背景色とフォントの色があり、サイト テーマの 6 つのアクセント カラー、定義済みカラーのパレット、黒、白から選択します。色の代わりに、背景画像をタイルに設定することもできます。URL で指定するか、サイトの::ドキュメント ライブラリ::から選択します。アイコンは 5 つのアイコン セット （Standard (Fluent UI)、File type、App (Microsoft 365)、Azure、Vitextra） のいずれかから選択するか、会社のロゴなどのカスタム画像に置き換えます。タイルのサイズは、Extra Small から Full Width までの 6 種類です。

**対象ユーザー。** タイルは、サイトの特定の SharePoint グループまたは ::Microsoft Entra ID::グループのメンバーにのみ表示できます。対象ユーザーを指定しないタイルは、全員に表示されます。

![編集モードでのタイルのコンテキスト メニュー](https://static.vitextra.com/articles/10240/tile-context-menu-ja.png)
*編集モードでのタイルのコンテキスト メニュー*

## パネル全体の外観を決める設定

Web パーツのプロパティ ウィンドウには、すべてのタイルに一括で適用される設定があります。

- **Font Size**（フォント サイズ）と **Icon size**（アイコン サイズ）: それぞれ 7 段階と 6 段階
- **Internal Indent**（内側の余白）、**Icon Indent**（アイコンの余白）、**External Indent**（外側の余白）: タイルの内側、アイコンの下、タイル間の余白
- **Shadow**（影）: アイコンの下に表示されるやわらかいドロップ シャドウ
- **Show Titles**（タイトルを表示）と **Show Descriptions**（説明を表示）: タイルに表示されるテキスト
- **Hover Effect**（ホバー効果）: 明るさ、ぼかし、グレースケールなど 9 種類の視覚効果から 1 つを選択します。ポインターがタイルの上にあるとき、またはタイルにキーボード フォーカスがあるときに適用され、強さと継続時間を調整できます。

![Web パーツの外観の設定](https://static.vitextra.com/articles/10240/appearance-settings-ja.png)
*Web パーツの外観の設定*

## ページ上での編集

すべての編集は、ページの編集モードで、タイル上で直接行います。

- **Add Tile**（タイルの追加）: パネルの末尾に新しいタイルを追加します。
- タイルのコンテキスト メニューでは、プロパティの表示、サイズ、色、アイコンの変更、タイルの削除ができます。
- タイルの順序は、ドラッグして変更します。
- **Export**（エクスポート）はタイルを JSON ファイルに保存し、**Import**（インポート）は別のページやサイトにタイルを読み込みます。既存のタイルを置き換えるか、追加するかを選択できます。

Web パーツは、タイルをページ自体のプロパティに保存します。サイトにリストは作成されず、テナントの外に出るデータもありません。タイルはページと一緒に発行され、ページのバージョンと承認フローに従います。

💡 **ヒント**  
一度作成したナビゲーション パネルは、すべての部門サイトで再利用できます。タイルをエクスポートし、別のサイトで Smart Tiles Web パーツを開いて、ファイルをインポートします。

## 訪問者

訪問者には、軽量なパネルが表示されます。編集ツールは編集モードでのみ読み込まれるため、発行されたページでは、タイルの表示に必要なものだけがダウンロードされます。タイルはスクリーン リーダーでリンクとして読み上げられ、キーボードで移動して操作でき、ホバー効果はオペレーティング システムの「視覚効果を減らす」設定に従います。新しいタブで開くリンクは、開く元のページから分離されます。

❗ **重要**  
対象ユーザーの指定は、選択したグループ以外のユーザーからタイルを非表示にするだけで、リンク先のコンテンツへのアクセスを制限するものではありません。そのコンテンツを保護するのは、リンク先のページ、ライブラリ、アプリケーションのアクセス許可だけです。

## ライセンス

Smart Tiles は、試用期間付きでインストールされます。プロパティ ウィンドウの **About**（バージョン情報）グループには、ライセンスの状態、Web パーツのバージョン、サブスクリプションの開始日、割り当てられているテナントが表示されます。試用期間が終了すると、サブスクリプションがアクティブ化されるまで、タイルの代わりに通知が表示されます。

💡 **ヒント**  
テナントに Web パーツを展開するには、[KB10035. クラウドベースの製品のインストール](https://vitextra.com/ja/support/kb/10035)を参照してください。ページでの最初の手順は、[KB10042. Smart Tiles Web パーツの追加と構成方法](https://vitextra.com/ja/support/kb/10042)で説明しています。