SharePoint Web パーツのアイコンの設計

Web パーツのアイコンは、Web パーツをシンプルに表し、象徴するように設計します。 すべてのアイコンは、最も重要な属性を表す必要最小限のスタイルに縮小します。 アイコンは、SharePoint ページ内のツールボックスに表示され、必要に応じてストアにも表示されます。 アイコンの図形の例としては、正方形、円、垂直、水平があります。

グリッド キーライン図形

Web パーツのアイコンは 32 x 32 ピクセルで表示されますが、2 倍のサイズ、つまり 64 x 64 ピクセルで設計します。 そのピクセルが正確になるように、100% でアイコンを作成します。

レイアウト

64 x 64 ピクセルのコンテナー領域内でアイコンを設計します。 これにより、アイコンが正しくレンダリングされます。

図形

すべてのアイコンやロゴが正方形で設計されるわけではありません。 この基本図形のガイドを使用すると、グリッド内でさまざまなアイコン図形を統一し、それらをふさわしいサイズで表示する方法を理解できます。 アイコンの図形に応じて、アイコンをグリッドの全体の幅または全体の高さまで拡大します。

ピクセルの見やすさ

アイコンの端を X 座標と Y 座標に合わせて、アイコンが歪まないようにします。 使用可能な場合は整数を使用します。

色と背景

アイコンは、Web パーツとその機能の視覚的な表現です。 アイコンにより、Web パーツの核となる概念をシンプルにはっきりと伝えることできます。

Web パーツのアイコンは、単色、またはフル カラーにすることができます。 ほとんどのアイコンは、簡略化された図形で、Office UI Fabric のアイコンと同様に細い 2 ピクセル線を使用する場合に最適に動作します。 場合によっては、フル カラーで会社のブランド アイコンやロゴを使用することが必要な場合があります。 単色バーションのアイコンが利用可能な場合は、このバージョンの使用を検討してください。

アイコンのエクスポート

アイコンは、64 × 64 ピクセルで SGV としてエクスポートし、背景は透明である必要があります。

アイコンのグリッドは、「SharePoint デザイン ツールキット」にあります。