Smart Tiles のタイル サイズとレイアウト

はじめに

Smart Tiles のパネルは、固定されたグリッドではありません。タイルは、単語が行に流れ込むように行へ配置されます。各タイルは Size (サイズ) に応じて行の一定の割合を要求し、行は左から右へ埋められ、収まらないものは次の行から始まります。この仕組みを理解することで、たまたま 1 つの画面で見栄えがするパネルではなく、どの画面でも意図したとおりに見えるパネルを作成できます。この記事では、タイルのサイズ、インデント、高さについて説明し、いくつかのレイアウト例を紹介します。

6 つのサイズ

タイルのサイズとは、行に対する割合で表したタイルの幅のことです。タイルのコンテキスト メニューで選択します。… ボタンをクリックして Size をポイントし、6 つの項目のいずれかを選択します。現在のサイズにはチェック マークが付きます。

新しいタイルは Small になります。

行の埋まり方

全体像を把握するために、次の 2 つのルールがあります。

1. タイルは行を埋めるように拡大されます。 表の割合は最小値です。行に空きがある場合 (たとえば、行に Small タイルが 2 つだけの場合)、タイルは空きを埋めるように拡大し、大きいサイズほど速く拡大します。そのため、行は常に埋まり、右端がそろわないことはありません。
2. 収まらないタイルは次の行に移動します。 Small タイル 3 つで 1 行が埋まり、4 つ目は新しい行から始まります。Small タイル 2 つの後の Medium タイルは、残りの 40 % に収まらないため新しい行から始まり、後に続くタイルがなければ全幅に拡大されます。

驚くのは 2 つ目のルールです。パネルの最後にある 1 つだけの Small タイルは、Full Width タイルに拡大されます。各行の割合を数えて、合計が約 90～100 % になるようにするか、行をちょうど埋めるタイルでパネルを終えてください。

高さ

タイルの高さは直接設定しません。高さは、コンテンツ (Icon size のアイコン、Font Size (フォント サイズ) のタイトル、表示している場合は説明) と、コンテンツの上下の Internal Indent の合計です。1 行内のすべてのタイルは、最も高いタイルと同じ高さになります。

アイコンやテキストを大きくせずにタイルを高くするには、Internal Indent を大きくします。正方形に近づけるには、大きな Internal Indent と Small または Extra Small のタイルを組み合わせます。

3 つのインデント

プロパティ ペインの Appearance (外観) グループには、0 から 30 ピクセルまでの 3 つの間隔設定があります。

レイアウト例

クイック リンク バー。 Extra Small タイル 6 つ、External Indent 4、Internal Indent 8、タイトルは表示、説明は非表示。ホーム ページのヒーローの下に、コンパクトなボタンが 1 行に並びます。

部署パネル。 パネルの見出しとして、写真の背景と部署名を表示した Full Width タイルを配置し、その下に部署のサービスを表す Small タイル 3 つの行を並べます。External Indent は 8。

注目リンクとリスト。 背景画像と説明を設定した Large タイル 1 つと、その横に Small タイル 1 つ。その下に、Small タイル 3 つの行を 2 行。Large タイルによって、最も重要なリンクに視線が集まります。

モザイク。 Extra Small と Small のタイルを混在させ、External Indent を 0 にして、すべてアクセント カラーにし、アイコンのみ (タイトルは非表示) にします。コミュニケーション サイトの全幅セクションで最も効果的に見えます。