Notionはシンプルで直感的なインターフェースが魅力のツールであり、自分好みにカスタマイズできる点も大きな魅力となっています。背景画像を追加すると、ページごとの雰囲気を変えられたり、目的に応じたビジュアルを設定できたりするので活用しましょう。ただ画像を追加するだけではなく、作業効率アップにつながるデザインにすることもポイントです。
本記事では、Notion背景画像の設定方法とおすすめ活用アイデアを紹介します。背景画像を設定するメリットにも触れるのでご活用ください。
Notionに背景画像を設定するメリット
Notionに背景画像を設定するメリットは、主に以下の通りです。
- 視覚的なインパクトを当たられる
- ページごとに雰囲気を演出できる
- デザイン性が高まる
Notionのデフォルメデザインはシンプルであり、テキストベースでの情報整理が主な機能となっています。背景画像を追加することでページに視覚的なインパクトを与えやすくなるので、カラフルさや独自性を出したいときに活用しましょう。自分の好みや資料のテーマに合わせた画像を使えばページのデザインが一層引き立ち、記憶に残る資料を作れます。
また、各プロジェクトやタスクに関連した画像を設定することで、すぐにそのページの内容を認識できるようにするなど「効率化」を意識した背景画像にすることも可能です。視覚的に整理された資料にしたいときも、背景画像の活用を検討してみましょう。
Notionで背景画像を設定する基本手順
ここでは、Notionで背景画像を設定する基本手順を解説します。簡単な3ステップで完了するので、以下を試してみましょう。
【ステップ1】Googleドライブから画像URLを取得する
まずは好きな画像をGoogleドライブに保存し、画像URLを取得します。画像URLは、イラスト上でマウスの右クリック→「共有」→「リンクを知っている全員」→ウインドウ下部にある「リンクをコピー」から取得できます。
【ステップ2】Stylusをインストールする
「Stylus」とは、Webサイトのデザインを自由に変更するための拡張機能です。自分でCSSスタイルシートを作成・編集できるようになるため、Notionなどのコンテンツを自由にカスタマイズしたいときに役立ちます。
今使用しているブラウザに合わせて「Stylus」をインストールしておきましょう。
【ステップ3】CSSを設定する
.notion-frame > div {
/*↓{ID}の部分は書き換えてください*/
background-image: url(http://drive.google.com/uc?export=view&id={ID})!important;
background-repeat: no-repeat!important;
background-position: bottom right!important;
background-size: 20%!important;
background-color:rgba(255,255,255,0.7)!important;
background-blend-mode:lighten!important;
}
上記のCSSを使い、Notion上に指定した背景画像を加えていきます。「http://drive.google.com/uc?export=view&id={ID}」の「ID」の部分は、①で取得した画像URLを埋め込みましょう。IDがわからないときは、取得した画像URLの最後に記載されている「https://drive.google.com/open?id={ID}」の「ID」部分を参考にします。
その他、「background-size」（背景画像サイズ）や「background-color」（透過の有無）などもCSSから指定できます。
Notion背景画像の活用アイデア
ここでは、Notion背景画像の活用アイデアを解説します。背景画像の使い方はもちろん、画像関連の装飾全般について解説するのでご参考ください。
カバー画像も同時に設定する
Notionのカバー画像とは、コンテンツの上部に表示されるアイキャッチ画像のことです。例えば、プロジェクトページに関連する画像を設定することにより、ページを開いた瞬間にどのような内容が含まれているかが一目でわかるようになります。ページに独自のビジュアル要素を取り入れることもできるため、背景画像と併せて使ってみるのもよいでしょう。
画像を自作する
背景画像にこだわりたいときは、画像素材を使うだけでなく完全に自作する方法があります。「Canva」などを使えば、Photoshopやillustratorが使えなくても手軽に画像を自作できます。
「Canva」はオーストラリア発の無料オンラインデザインツールで、初心者でも簡単におしゃれなデザインを作成できることで知られているので活用してみましょう。
カレンダーやTo-Doリストなどのウィジェットを入れる
カレンダーやTo-Doリストなど、自分または社内用として使うコンテンツであれば、Notionのウィジェットを背景に追加するのもおすすめです。ウィジェットとは、アプリの一部機能を切り取って、ホーム画面やデスクトップに配置できる機能です。Notionなどのコンテンツにも追加できるので、その日の天気・気温・電車の遅延情報の他、カレンダーやタスクを表示させたいときにも便利です。
例えばカレンダーを表示させたい場合は、Notionで新しいページを作成し、「/calendar」と入力します。To-Doリストを追加したいときは「/todo」を入力し、毎日チェックする情報を一目で確認できるよう工夫してみましょう。
まとめ
Notionで背景画像を設定すると、ページの視認性やインパクトを上げられます。カバー画像やウィジェットの追加と併せて使うとより記憶に残りやすい他、ページの目的を明確に示すなど効率化にもつながるので活用してみましょう。
また、ページごとに異なる画像を設定することも可能です。作業内容に応じたカスタマイズができ、外部向けの資料から内部向けのコンテンツまで自由自在に作れます。作業を楽しくするコツとしても使えるので、画像の自作を検討してもよいでしょう。
Notion背景画像に関する重要用語
| 用語 | 説明 |
| Notion | 「The all-in-one workspace」を謳う多機能ワークスペースサービス。メモ・ドキュメント・タスク管理の他、プロジェクト管理・スケジュール管理・ガントチャートなど機能が多数搭載されています。 |
| Googleドライブ | Googleが提供するクラウドストレージサービス。画像・ドキュメント・動画などを格納できる。 |
| Stylus | Webサイトのデザインを自由に変更するための拡張機能。自分でCSSスタイルシートを作成・編集できるようになる。 |
| カバー画像 | コンテンツのトップ部分に表示されるアイキャッチ画像。 |
| CSS | Webページの見た目を装飾するためのプログラミング言語。Webページの要素（文字、画像、背景など）にデザイン性を追加できる。 |
| Canva | オーストラリア発の無料オンラインデザインツール。 |
| ウィジェット | アプリの一部機能を切り取って、ホーム画面やデスクトップに配置できる機能。 |
