スマホ観覧向けの快適なレイアウト作成Tips #Notion

先日スマホでNotionを検索する時のTipとした記事を掲載しました。

その後、検索は勿論のこと、ページ表示についても色々と試していましたが、PCで見た時と違って想定していないレイアウトになることがありました。

スマートフォンからの入力は大体がテキストブロックとリスト程度で収まっており、複雑なレイアウトにしていませんでした。故に、色々なブロックを駆使したページがスマートフォン上で大きく様変わりすることには大変な驚きがありました。

試した末に判ったPCとスマートフォン環境と大きく違いが出るブロック、見直すべきレイアウト、スマートフォン上でストレスを感じにくいオプション設定を記載しました。

違いがでるブロック

PC環境と表示で大きく差がでてくるブロック構成があります。それが複数列構成です。このブロック指定、実はPC環境専用のもので、スマートフォン環境からは指定不可能です。

NotionはMarkdownでエクスポート可能ですが、複数列構成の出力は以下のようになります。

<aside>
💡 1

</aside>
<aside>
💡 2

</aside>

スマートフォン環境上で表示すると以下の通り。PCで左から右に並んだ列はスマートフォンでは上から下に並ぶ仕組みです。

厄介なことに、PCブラウザ上でスマートフォン環境のシミュレーションを行うと横幅を凝縮してでも横並びにしてきます。実機での確認が必要不可欠といえます。

見直すべきレイアウト

複数列構成ブロックの仕様にて、スマートフォン環境では好ましくないレイアウトがあります。右サイドカラムに設置した目次です。

目次をサイドバーにしたい場合は左列に寄せましょう。右側に寄せた場合はスマートフォンでのアクセス及びMarkdownのエクスポート時にページ最下へ収まり、アクセスし難くなります。

直近のアップデートで見出しが複数あると右側をホバーにて表示される機能の活用も考えられますが、これはPC環境でのみ利用可能です。

推奨するオプション

データベースやコードブロック、いずれにも共通するオプションの「右端で折り返す」は有効にすることをおすすめします。

データベースの場合、「右端で折り返す」オプションがオフになっていると該当プロパティ上で1タップ必要ですが、オプションがオンになっていると最初から全体が表示されるようになります。

コードブロックの場合、全体を読むためにはフリックでのスクロール作業が発生しますが、オプションがオンになっていると最初から全体が表示されるようになります。

あとがき

PCとスマートフォンでレイアウト差異は実機アクセスで確認することをおすすめします。

セキュリティ管理都合でスマートフォンからのアクセスに制約がかかる場合は、先ずはスマートフォンで利用できない機能を使わない選択肢から初めてみましょう。今回はレイアウトで大きく違いがでる点で複数列ブロックを挙げましたが、他にもAIブロックが該当します。

バックアップを考えるとMarkdownとして必要十分なブロックのみで構成したくなりますが、埋込ブロックはエクスポート後も案外参照用途として優秀です。必要に応じて都度エクスポート確認も手です。