--- title: "タイルのアイコンを選ぶ: 標準、ファイルの種類、アプリ、Azure、Vitextra のアイコン セット" description: "Vitextra Smart Tiles Web パーツの 5 つのアイコン セット (Fluent UI 標準アイコン、ファイルの種類のアイコン、Microsoft 365 アプリのアイコン、Azure サービスのアイコン、Vitextra 製品のアイコン) と、アイコン パネルでのアイコンの選び方、アイコンの色・サイズ・インデント・影の仕組み、独自の画像を使用する場面について説明します。" url: https://vitextra.com/ja/support/kb/10243 language: ja published: 2026-10-13 modified: 2026-10-17 products: - "Smart Tiles" author: "Lidija Reising" tags: ["Smart Tiles アイコン", "Fluent UI アイコン SharePoint", "Microsoft 365 アプリ アイコン タイル", "Azure アイコン Web パーツ", "ファイルの種類 アイコン SharePoint", "アイコン ピッカー", "タイル アイコンの色", "アイコン サイズ SharePoint タイル", "Vitextra 製品アイコン", "SharePoint ナビゲーション アイコン"] --- # タイルのアイコンを選ぶ: 標準、ファイルの種類、アプリ、Azure、Vitextra のアイコン セット Vitextra Smart Tiles Web パーツの 5 つのアイコン セット (Fluent UI 標準アイコン、ファイルの種類のアイコン、Microsoft 365 アプリのアイコン、Azure サービスのアイコン、Vitextra 製品のアイコン) と、アイコン パネルでのアイコンの選び方、アイコンの色・サイズ・インデント・影の仕組み、独自の画像を使用する場面について説明します。 ## はじめに アイコンは、タイトルを読む前にタイルを識別できるようにするものです。Outlook のロゴ、PDF のシンボル、電話などがその例です。[Smart Tiles](https://vitextra.com/ja/products/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 つのセットはフルカラーの画像で、どの背景でも元の色が保たれます。 ![5 つのセットからそれぞれ 1 つずつ選んだアイコン](https://static.vitextra.com/articles/10243/icon-sets-ja.png) *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 パネル](https://static.vitextra.com/articles/10243/select-icon-panel-ja.png) *検索を適用した Select icon パネル* 📝 **注** YouTube 動画にリンクするタイルでは、アイコンの代わりに再生ボタンが表示されます。そのようなタイルに選択したアイコンは保持され、リンクを別のアドレスに変更すると再び表示されます。 ## 独自の画像 **Tile Icon** サブメニューの最後の項目である **Custom image** (カスタム画像) を使用すると、アイコンを独自の画像 (会社のロゴ、製品の写真、デザイナーが作成したアイコンなど) に置き換えることができます。画像は URL として入力するか、サイトのドキュメント ライブラリから選択します。その後、5 つのセットのいずれかからアイコンを選択すると、カスタム画像は再び削除されます。手順については、[KB10244. カスタム画像をタイル アイコンとして使用する](https://vitextra.com/ja/support/kb/10244)で説明しています。 ## Web パーツのアイコン設定 プロパティ ペインの **Appearance** (外観) グループにある 4 つの設定は、すべてのタイルのアイコンに適用されます。 |::設定::|::効果::| |:---|:---| |**Icon size** (アイコン サイズ)|6 段階: 20、24、32、40、48、64 px。サイズはすべてのセットとカスタム画像に等しく適用されます。| |**Icon Indent** (アイコンのインデント)|アイコンとタイトルの間の間隔 (0～30 px)。| |**Shadow** (影)|アイコンの下に付く柔らかいドロップ シャドウ。フラットな標準アイコンに奥行きを与え、フルカラーのアイコンを背景画像から浮かび上がらせます。| |**Show Titles** (タイトルを表示)|タイトルを非表示にすると、アイコンがタイルの中央に配置され、タイルの唯一のコンテンツになります。| ![アイコンのサイズと影](https://static.vitextra.com/articles/10243/icon-size-shadow-ja.png) *アイコンのサイズと影* 💡 **ヒント** 1 つのパネル内では、できるだけ 1 つのセットに統一してください。同じフォントの色の単色の標準アイコンが並んでいると、ひとまとまりに見えます。標準アイコン、アプリ アイコン、ファイルの種類のアイコンを混在させると、ごちゃごちゃした印象になり、タイトルよりもロゴに視線が向いてしまいます。 ❗ **重要** セットのアイコンは Web パーツに同梱されているため、追加のアクセス許可は不要です。カスタム画像は、指定したアドレスから読み込まれます。閲覧者はその場所への読み取りアクセス権を持っている必要があります。