モバイルを意識した複数列レイアウト

概要

Notionページが複数列に分割されている場合、モバイルで表示されるとコンテンツは左上から下へ、次に右の列へ移り上から下へ、という順で表示されます。

そのため、デスクトップ / モバイルの両方で使用することが分かっている場合、表示崩れを防ぐ工夫が必要になります。

レイアウト例1：モバイルで崩れてしまうケース

ブロックを表示させたい順番が分かりやすいよう、色と番号を付けた例を紹介します。

このようにブロックが並んでいる場合、心理としてはモバイルでは上から1→2→3→4と並んでほしいところですが、仕様に従って以下の赤矢印の順番で並んでしまいます。

しかも、デスクトップで列の分かれ目になっている3と2の間には、モバイルでは妙な隙間が生じてしまいます。

レイアウト例2：回避策

モバイルでの表示崩れを防ぐためには、デスクトップで上段と下段の間に全幅（Full-width）の空白行または区切り線を入れます。これが全幅ではなく、ブロック分割された幅だと意味がありませんのでご注意ください。

こうすることでモバイルでも意図したとおりの順序でブロックが並ぶことに加え、デスクトップで列が分かれている場所に入る隙間の違和感も軽減されます。