SharePoint Online でページを作成するときには、ちょっと工夫することでグッと見た目がよくなります。前回は、ページに配置した画像は、大きさをきちんと整えて配置しようというコツを書きました。今回は、分割バーやスペーサーの使い方です。
ページ上のコンテンツを塊（かたまり）で考えよう
SharePoint でページを作るときに、ササッといろんな情報をひとつのページにまとめていくわけですが、それぞれのコンテンツのつながりや関連を意識してみましょう。例えば、つぎのようなページを作成したとします。
実はこのページに含まれるコンテンツは、3 つに分類できます。ひとつめは、SharePoint に関して述べているコンテンツ、ふたつめは、Yammer に関して述べているコンテンツ、3 つめは、画像を並べているコンテンツです。それぞれ別のことについて言及しているものです。
まずはこんな感じで、ひとつのページであっても、意味的に分割できるものがないかを考えてみましょう。
分割バーやスペーサーで塊を明確にする
それぞれの塊が異なることについて書かれているのは、書いてあることを読めば分かります。しかし、読まなければ分かりません。読まなくてもなんとなく分かるようにするために、区切りを明確にしてみましょう。そこで利用できるのが、分割バーやスペーサーといった Web パーツです。
まずは、分割バー Web パーツを挿入してみましょう。ただ挿入するだけです。
分割バーがあるおかげで、意味的な切れ目が少し明確になりました。
さらに分割バーだけよりも、スペーサー Web パーツで空白を作ったほうが分かりやすくなります。分割バーの上下にスペーサー Web パーツを挿入し、それぞれの高さを最小の 16 ピクセルにしましょう。
どうでしょうか、さらに見易くなった気がしませんか？それぞれのコンテンツがきちんと分離されて読み取ることができます。
コンテンツと分割バーの間が広くなり、窮屈さも解消されましたね。さらに、ページ内に空白ができることで、清潔感も感じられるようになった気がします。
さいごに
あまり積極的に使われる機会も少ない分割バー Web パーツやスペーサー Web パーツですが、ページのレイアウトに役立つ Web パーツです。ページ内のコンテンツの意味の切れ目に挿入することで、見易さに大きく影響します。特に、スペーサー Web パーツの利用は大切だと思います。
