解説動画
-
このページの学ぶ際のお願い
- 教科書を見ながら、ご自身でも手を動かしてみてください。
- サイドバーを隠して教科書を見てください。
- 画像はダブルクリックすることで、拡大することができます。
Notionのデザインを整えよう
優れたカスタマイズ性とデザイン性を持つNotion。
Notionを活用するためには、適切なデザインも必要です。
レイアウトや配色といった見やすさや、使いやすい配置に整えていきましょう。
ワークスペース（ページ）の設定
ページの設定を紹介します。
アイコン、背景画像の設定
各ページのページタイトルの上にある「アイコンを追加」、「カバー画像を追加」からアイコンと背景画像を設定することができます。
- アイコンは、Notion内の絵文字、アイコンの他、自分の画像をアップロードすることができます。
- また、背景画像は、Notion内でデフォルトで用意されている画像（絵画が多い）または、自分の画像をアップロードすることができます。
アイコンと背景画像
ページタイトル上から、アイコンとカバー画像（背景画像）を設定する
アイコンと背景画像はページタイトルの上に表示される
ダークモードにする上のサイドバーにある「設定」からワークスペースの表示モードを「ライドモード」、「ダークモード」、「システム設定を利用する」の3つから選ぶことができます。
システム設定を利用した場合は、画面に合わせて自動でライトモードとダークモードが切り替わります。
cmd/ctrl + shift + L で 切り替えることもできます。point
ダークモードで文字色など配色を設定した場合、ダークモードに合わせてみやすいよう、通常のライトモードに比べて僅かに色が変わっています。
フルワイド（左右の余白を縮小）
エディター右上の
「･･･」から出てくるメニューから、左右の余白を縮小することができます。ページ作成時のデフォルト設定では、左右に余白がある状態なので、フルワイドにすると画面全体にエディターが広がり、見やすくなります。
左右の余白を縮小した状態をデフォルトにする方法は現在（2023年10月）のところ実装されていません。
デフォルト（左右余白あり）ブロックの配置
ページのデザインをこだわる上では、ブロックの配置も大切になってきます。
おすすめのポイントとしては、
- ２列・３列ブロックを活用し、スクロール数を少なくする
- 情報は必要なものだけを表に表示する
ことです。
この部分はまた追ってコラムにて細かく書きますね！
各ブロックのおすすめ使い方
ブロック内の要素や、よく使うページ内パーツにおけるおすすめの使い方です。
Notion見出しのデザイン
見出しの構成要素
主な構成要素と、表示方法は主に以下の７つがあります。
文字のサイズ、フォントの変更
エディター右上の
「･･･」から変更できます。文字サイズの縮小のオンオフを切り替えることができます。
フォントは以下の３種類が選べます。
Default
デフォルトのフォントです。
フォント名は、sans-serif workhorseです。
Serif
記事やニュースを作成する時におすすめです。
Mono
下書きやメモをするのにおすすめです。
テキストのスタイル
テキストをドラッグで選択すると、スタイルの設定ができます。
設定できるスタイルは主に以下の7つです。括弧内は対応するショートカット。
- 太文字（
cmd/ctrl+B）
- 斜体（
cmd/ctrl+L）
- 下線（
cmd/ctrl+U）
取り消し線（command/crtl + shift + X）
コードとしてマーク（cmd/crtl + E）- 文字色、マーカーを適用することもできます。
- 文字色、マーカーを設定
- 直前に使用した文字色、マーカー色は
cmd/ctrl+shift+Hで設定することができます。複数箇所を同じスタイルにしたい時におすすめです。
コールアウトの活用
本来は文章を目立たせるためのコールアウトを見やすいデザインに活用することができます。
引用の活用
「/quote」または、「；引用」引用を挿入することができます。
ウィジェットの活用
Indifyというサイトにて、ウィジェットを様々な作ることができます。天気やカウントダウンなどポップな雰囲気になるものが簡単に。
好きなサイトを参考にしよう
どんなふうにして良いかわからないときは、好きなサイトをそのままマネしよう。Notionは全てブロックでできていますから。