はじめに

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

注目の記事

Announcements Carousel: SharePoint お知らせ Web パーツの利用開始

SharePoint Online 向け Vitextra Announcements Carousel Web パーツの概要です。主な機能、ページへの追加、お知らせリストの選択または作成、Microsoft Lists でのお知らせの管理と、Power Automate による自動化を紹介します。

1 2026/10/14
QR コードのデザインのカスタマイズ: 図形、色、グラデーション、コーナー

Vitextra QR Code Generator Web パーツのデザイン セクションのリファレンスです。6 種類のドットの図形、透過性を指定できるドットの色と背景色、線形および放射状のグラデーション、コーナーの四角形とコーナーのドットの形と色、誤り訂正レベル、デザインした QR コードを読み取りやすく保つための実践的なルールを説明します。

2026/10/14
QR コードが読み取れないのはなぜですか?

Vitextra QR Code Generator Web パーツで作成した QR コードのトラブルシューティング用チェックリストです。コントラスト不足と透明な背景、JPEG の黒い背景、大きすぎるロゴ、高密度すぎるコードや小さすぎる印刷、余白の不足、読み取り後の意図しない動作、無効になったボタン、コピー ボタン、再読み込み後に失われる変更を取り上げます。

2026/10/15

共有