はじめに

アイコンは、タイトルを読む前にタイルを識別できるようにするものです。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 版を開くリンク。
AzureAzure サービスのアイコン。IT チームや開発者向けのポータル。
VitextraVitextra 製品のアイコン。他の Vitextra Web パーツで構築されたページへのリンク。

標準アイコンはタイルの Font Color (フォントの色) で描画されるため、色を 1 回変更するだけで、青いタイルの白い標準アイコンを、白いタイルの青いアイコンに変えることができます。他の 4 つのセットはフルカラーの画像で、どの背景でも元の色が保たれます。

5 つのセットからそれぞれ 1 つずつ選んだアイコン

5 つのセットからそれぞれ 1 つずつ選んだアイコン

アイコンを選ぶ

  1. ページを編集モードで開き、タイルの … ボタンをクリックします。
  2. Tile Icon (タイル アイコン) をポイントし、セットを選択します: Standard icon、File type icon、App Icon、Azure、または Vitextra。
  3. 右側に開く Select icon (アイコンの選択) パネルで、アイコンをスクロールして探すか、検索ボックスに名前の一部 (mail、calendar、xlsx など) を入力します。
  4. アイコンをクリックし、続けて Apply (適用) をクリックします。

パネルを開くと、タイルで現在使用されているアイコンが強調表示されるため、同じセットから関連するアイコンを簡単に選べます。

検索を適用した Select icon パネル

検索を適用した Select icon パネル

📝 注
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 パーツに同梱されているため、追加のアクセス許可は不要です。カスタム画像は、指定したアドレスから読み込まれます。閲覧者はその場所への読み取りアクセス権を持っている必要があります。

注目の記事

My Tasks: ページング、行の制限、自動更新、即時読み込み

Vitextra My Tasks Web パーツで長いタスク一覧を扱う方法を説明します。ページ サイズのスライダー (5 ~ 50)、ページャー、ページングの有効化、コンパクト一覧、60 秒ごとの自動更新、即時読み込みのための 15 分間のセッション キャッシュ、SharePoint とプロジェクトの 100 件の上限がわかります。

2026/10/17
Smart Search で検索アプリ ページを作成する方法

SharePoint Online で Vitextra Smart Search Web パーツを使用して単一アプリ ページを作成し、サイトの検索結果ページとして設定して、事前に用意したクエリやタブへのリンクを作成するための、ステップ バイ ステップ ガイドです。

2026/10/13
My Tasks: ソリューションの概要

SharePoint Online と Microsoft Teams で使える Vitextra My Tasks の概要です。Planner、To Do、Outlook、SharePoint、Project Online、Azure DevOps、外部システムのタスクを 1 つの一覧にまとめる方法、主な機能、2 つの Web パーツ、セキュリティ、無料試用版について説明します。

2026/10/17

共有