はじめに
アイコンは、タイトルを読む前にタイルを識別できるようにするものです。Outlook のロゴ、PDF のシンボル、電話などがその例です。Smart Tiles には、イントラネットでよく使われる用途をカバーする 5 つのアイコン セット (汎用シンボル、ドキュメントの種類、Microsoft 365 アプリケーション、Azure サービス、Vitextra 製品) が付属しており、これらで足りない場合は独自の画像も使用できます。この記事では、各アイコン セット、アイコン パネル、およびアイコンの描画方法を制御する設定について説明します。
アイコン セット
| セット | 内容 | 主な用途 |
|---|---|---|
| Standard icon (標準アイコン) | Microsoft 365 全体で使用されている Fluent UI アイコン フォント。人、ドキュメント、予定表、設定、矢印など、1,000 以上の単色シンボルが含まれます。 | 汎用的なリンク先: Help Desk、Holidays、Policies。 |
| File type icon (ファイルの種類のアイコン) | SharePoint のカラーのファイルの種類のアイコン。Word、Excel、PowerPoint、PDF、画像、アーカイブなどの形式があります。 | 特定のドキュメントやテンプレートへのリンク。 |
| App Icon (アプリ アイコン) | Microsoft 365 アプリケーションの製品ロゴ。Outlook、Teams、OneDrive、Planner、Forms、Power BI などがあります。 | アプリケーションまたはその Web 版を開くリンク。 |
| Azure | Azure サービスのアイコン。 | IT チームや開発者向けのポータル。 |
| Vitextra | Vitextra 製品のアイコン。 | 他の Vitextra Web パーツで構築されたページへのリンク。 |
標準アイコンはタイルの Font Color (フォントの色) で描画されるため、色を 1 回変更するだけで、青いタイルの白い標準アイコンを、白いタイルの青いアイコンに変えることができます。他の 4 つのセットはフルカラーの画像で、どの背景でも元の色が保たれます。

アイコンを選ぶ
- ページを編集モードで開き、タイルの … ボタンをクリックします。
- Tile Icon (タイル アイコン) をポイントし、セットを選択します: Standard icon、File type icon、App Icon、Azure、または Vitextra。
- 右側に開く Select icon (アイコンの選択) パネルで、アイコンをスクロールして探すか、検索ボックスに名前の一部 (mail、calendar、xlsx など) を入力します。
- アイコンをクリックし、続けて Apply (適用) をクリックします。
パネルを開くと、タイルで現在使用されているアイコンが強調表示されるため、同じセットから関連するアイコンを簡単に選べます。

📝 注
YouTube 動画にリンクするタイルでは、アイコンの代わりに再生ボタンが表示されます。そのようなタイルに選択したアイコンは保持され、リンクを別のアドレスに変更すると再び表示されます。
独自の画像
Tile Icon サブメニューの最後の項目である Custom image (カスタム画像) を使用すると、アイコンを独自の画像 (会社のロゴ、製品の写真、デザイナーが作成したアイコンなど) に置き換えることができます。画像は URL として入力するか、サイトのドキュメント ライブラリから選択します。その後、5 つのセットのいずれかからアイコンを選択すると、カスタム画像は再び削除されます。手順については、KB10244. カスタム画像をタイル アイコンとして使用するで説明しています。
Web パーツのアイコン設定
プロパティ ペインの Appearance (外観) グループにある 4 つの設定は、すべてのタイルのアイコンに適用されます。
| 設定 | 効果 |
|---|---|
| Icon size (アイコン サイズ) | 6 段階: 20、24、32、40、48、64 px。サイズはすべてのセットとカスタム画像に等しく適用されます。 |
| Icon Indent (アイコンのインデント) | アイコンとタイトルの間の間隔 (0~30 px)。 |
| Shadow (影) | アイコンの下に付く柔らかいドロップ シャドウ。フラットな標準アイコンに奥行きを与え、フルカラーのアイコンを背景画像から浮かび上がらせます。 |
| Show Titles (タイトルを表示) | タイトルを非表示にすると、アイコンがタイルの中央に配置され、タイルの唯一のコンテンツになります。 |

💡 ヒント
1 つのパネル内では、できるだけ 1 つのセットに統一してください。同じフォントの色の単色の標準アイコンが並んでいると、ひとまとまりに見えます。標準アイコン、アプリ アイコン、ファイルの種類のアイコンを混在させると、ごちゃごちゃした印象になり、タイトルよりもロゴに視線が向いてしまいます。
❗ 重要
セットのアイコンは Web パーツに同梱されているため、追加のアクセス許可は不要です。カスタム画像は、指定したアドレスから読み込まれます。閲覧者はその場所への読み取りアクセス権を持っている必要があります。