ページ余白幅：標準指定時の「カラムレイアウト」部分の横幅指定を個別に調整出来るようになりました #notion

データアナリティクス事業本部 サービスソリューション部 サービス開発チームの しんや です。

Notionではページレイアウトにおいて『ページ左右の余白を縮小させるか否か』の2パターンをページ毎に取る事が可能です。

直近リリースされたアップデートでは、『ページ左右の余白を縮小させない』場合のページレイアウトでちょっとした改善が反映されていました。それが下記内容(のツイート)です。

Wider columns = more creative layouts!

On any standard-width page, drag to expand your columns, creating a bolder display ? pic.twitter.com/WS9S03BZCU

— Notion (@NotionHQ) September 15, 2022

当エントリではこの内容について実際に試したものを紹介したいと思います。

標準余白幅レイアウトでカラム幅の調整が出来るようになった

まずページの設定から見ていきます。通常、ページを作成した際はページ右上の三点メニューから展開出来る以下の部分(左右の余白を縮小)は無効になっています。

この状態で、ツイートにあったようなデザインを真似て作ってみます。幾つかのテキストの下にYouTube動画を埋め込み表示して、

その下に/calloutブロックでメモ書きを用意。

メモ書きブロックをドラッグアンドドロップして動画の横に配置します。

配置出来ました。現状では上部にあるテキストなどと同様の余白幅となっています。

ここからが新しくなった部分。複数カラム列になった部分の横部分を摘んで左右に動かすと幅の調整がページ余白幅設定を超える形で設定出来るようになりました！明らかに余白幅のサイズが変わっていることが確認出来ると思います。

ちなみにページの『左右の余白幅を縮小』を有効にした状態で同様の操作を試してみましたが、2カラム配置にした時点で「余白を最大現活用する形」での配置となり、横をつまんでサイズ調整することは出来ないようになっていました。ページの余白幅が通常の場合にのみ行える操作、ということですね。

まとめ

という訳で、Notionのページ余白幅が標準の場合に実践出来る「ちょっとしたページレイアウトの自由度が上がった」内容の紹介でした。該当する状況でのページコンテンツの配置やデザインを検討するような場合に思い出してもらえますと幸いです。

• Notion の記事一覧 | DevelopersIO