SharePoint Online（以下SPO）で部門ポータルやニュースページを作成する際、次のような “よくある悩み” に直面することはないでしょうか。
- 情報を詰め込むとレイアウトが崩れて見える
- 画像やテキストの配置に制約が多く、思ったようにデザインできない
- トップページで目的の情報にスムーズにアクセスできるようにしたい
2025 年に登場した 「柔軟セクション（Flexible Section）」は、こうした課題を解決する大きなアップデートです。これまでの SPO モダンページでは実現できなかった“自由度の高いデザイン”が可能になりました。
本記事では、その特徴と使い方を紹介します。
柔軟セクションとは
柔軟セクションは、ページ上に “グリッド状の編集領域” を追加し、その上で Web パーツを自由に移動・配置できるレイアウト機能です。
従来の「列の幅に制限される」レイアウトと比較して位置調整の自由度が高く、オブジェクト（Web パーツ）の重ね配置が可能なことや、画像加工のバリエーションが増加するなど、デザインの幅が大きく広がっています。
柔軟セクションの主な特徴3点
グリッド上で自由配置
Webパーツをグリッドに沿ってドラッグ操作で配置できます。PowerPointに近い操作感で、細かい位置調整が可能です。
セクションの高さを柔軟に調整可能
セクション右下のハンドルを上下に動かすだけで、縦の高さを自由に変更できます。
Webパーツは右側ペインから追加
柔軟セクションではセクション内に＋ボタンが表示されないため、右側の「Webパーツツールボックス」から追加します。
柔軟セクションの追加手順
（１）ページ右上の「編集」をクリックします。
（２）セクション境界線付近の「＋セクション」を選択します。
（３）セクション種類から「柔軟」を選択します。
（４）右ペインからWebパーツをドラッグアンドドロップで追加して配置します。
柔軟セクションの活用ポイント
柔軟セクションは、情報の見せ方にメリハリをつけたい場面で特に効果を発揮します。たとえば、画像やニュースなど「読者にまず見て欲しい要素」を中央に大きく配置することで、視線誘導がしやすくなります。
また、トップページでよく利用される「メイン画像・新着ニュース・よく使うリンク」といった導線も、”見せたい順番”に合わせて整理しやすくなります。
一方で、自由に配置できる分、モバイル表示では要素の順序が変わる場合があります。公開前にブラウザ幅を変え、スマートフォン上での表示を確認しておくことをおすすめします。
柔軟セクション×画像で使えるデザイン機能
柔軟セクションと組み合わせることで、画像表現の幅も大きく広がります。
画像の図形切り取り（シェイプ）
利用できる図形は以下の通りです。
- オリジナル（既定の形）
- 円
- 三角形
- 正方形
- 六角形
- 小石
- ティアドロップ
※図形の例
画像スタイル
次のような細かな調整が可能です。
- トリミング
- 色調整
- フィルターの適用
レイヤー（重ね順）・グループ化
今回のアップデートに伴い、レイヤー調整やグループ化にも対応しました。
- 重ね合わせて配置
- 最前面/最背面への切り替え
- グループ化/グループ化解除
セクション背景デザイン
既定の色や任意画像の設定は従来通り利用できます。背景画像は細かな画像編集（調整、フィルター適用など）が可能になりました。
- 単色
- グラデーション
- 背景画像
※画像編集の様子
柔軟セクションを使ったレイアウト例
今回は、デザインアイデアとして表示されるテンプレートを活用して作成しました。
レイヤー機能や画像サイズを自由に調整できるようになったことで、よりデザイン性のあるサイトを簡単に作れるようになったと感じています。
おわりに
柔軟セクションは、「見せたい情報を、見せたい形で表現できる」レイアウト機能です。一方で、自由度が上がるほど”要素の詰め込みすぎ”や”レイアウトのばらつき”、”モバイルでの崩れ”など、デザイン面での判断も求められます。
情報の優先順位を整理し、ユーザーが迷わない構成を意識することが成功のポイントです。
柔軟セクションを活用しながら、見やすくデザイン性のあるサイト作りにぜひ取り組んでみてください。
曽我 美帆（日本ビジネスシステムズ株式会社）
プロセストランスフォーメーション部所属。最近はSharePointやPower Automateを扱うことが多いですが、デザイン系も興味があります。趣味はサウナ、ゆるいキャラもの収集、好きな芸人はかまいたちさんです。
担当記事一覧