最新情報から便利な使い方まで。Notion 情報に特化した Web メディア。

Notionをオシャレに使うコツとデザインのポイントを解説します【Notion大学座談会】

author-icon

Notion はなんだか便利でオシャレそう。でもいざ自分が使ってみるとなんか違う…。そんな経験はないでしょうか。Notion をオシャレに使いこなすにはデザイン力が必須、ということで、今回は Notion 大学内でデザインにこだわりがあるメンバーを集めて座談会形式でイベントを開催しました。

  • Notion をオシャレに見せる際に意識していること
  • デザインをする際のマイルール
  • オススメのインプット方法

など、非常に興味深い話題が盛りだくさんとなりました。

座談会参加メンバー

🙋‍♂️

進行役：まるこ（𝕏： @marco_174cm ）
Notion 歴半年。YouTube 動画編集者。
Notion活用法：マニュアル共有、タスク管理、など

🙍‍♂️

よこきみ（𝕏： @yokokimi7 ）

地方公務員。Notion 歴4年目。デザイン歴：3年半。Notion 大学では古株に。
Notion 活用方法：タスク管理、スケジュール管理

🙍‍♀️

つぶあん（𝕏： @tsubuan_sun ）

Notion 歴1年半。デザイン歴：2〜3年。

🙍‍♀️

ume（𝕏： @ume_life_ ）

Notion 歴3年目。デザイン歴：半年。

🙍‍♀️

Erina（Instagram： @erina_notion ）

Notion 歴3年。デザイン歴：2年。

デザインにハマったきっかけは？

デザイン座談会参加メンバーのみなさま
❓

まるこ：まず、Notion に限らず、デザインにハマったきっかけを教えてもらえますか？

ume ： Notion は続けることができてこそ進化を発揮するもの だと思うので、自分が使いやすくて気軽に続けることができる形を求めていたら、気付いたらデザインにこだわるようになっていました。

つぶあん ：大学時代から造形をしていたり、Instagram の投稿作成をしたりと、元々デザインに触れる機会が多かったです。3年前にXを始めてからは、X のヘッダーやサムネイルを制作するお仕事を始め、デザイナーとして活動していました。

Notion を始めてからは、 Notion と自分の好きなデザインを掛け合わせて何かできないか …と考えてデザインにこだわった Notion を作成しています。

Erina ：私は、元々手帳が好きで。高校生の頃、プリクラ帳に1ページずつ絵を描いたり、スケジュール帳も既存のものではなく自分でノートに手書きで作ったりと、自分の好きなワールドを作るのが好きなんです。

Notion を使うようになってからも、同じように 自分の好きなワールドを作りたくてデザインにこだわっています。

Erina さんの Notion のスクリーンショット

よこきみ ：元々 Evernote を使用していたこともあり、無駄におしゃれにすることに抵抗がありました。

ただ色んな方の Notion ページを見ていると、デザインからその人の雰囲気を感じられて、自分なりのものを作れるのが Notion の良さだよな、と思ったんです。そこからは「 このページにはこんな雰囲気を持たせたい、こんな色味にしたい」 という欲求が出てきて、どんどんデザインにこだわるようになりました。

よこきみさんのページのスクリーンショット

Notion でデザインをする時のこだわりは？

❓

まるこ：Notion でデザインをされる際のこだわりを教えてもらえますか？

よこきみ ：僕は 色と写真から作り始めます 。Notion の構成よりも先に、イメージから色や雰囲気を自分の中で決めて、Notion のカバー画像設定画面にある Unsplash に、合いそうな単語を入れて検索…を繰り返してカバー画像を決めていきます。

Notionのカバー画像設定画面からUnsplashで画像検索が可能

カバー画像が決まったら、その画像に合う色を 原色大辞典 を見て探していきます。

原色大辞典：https://www.colordic.org/

まるこ ：デザインにこだわってない僕は、 Unsplash は触ったことがない箇所でした…。

つぶあん ：私も色からデザインを決めていきます。

カバー画像を選ぶとき、 Unsplash に使いたい色の英単語を2色入れて検索すると、その色を使ったエモい画像が出てきてくれるんです。 その画像から色を抽出し、デザインに落とし込んでいます。

デザイン4原則(※)も大切にしていて、4つのポイントを抑えてデザインするようにしています。

また使いやすさ、という意味でのデザインにもこだわっていて、自分が一番見る場所に押すボタンを置いたり、データベースはフィルターをかけて必要な情報だけが表示されるようになるべく小さくするなど徹底しています。

📝

※デザイン4原則：「近接」「整列」「強弱」「反復」という、デザインする上で抑えると良い4つのポイントのこと。（参考： ノンデザイナーズ・デザインブック ）

Erina ：私は、コールアウトを使用して見やすく区切ったり、目的に合わせてリンクドビューを配置して、 自分が心地いいと感じる雰囲気や見やすさを大切にしています。
背景色を設定したコールアウトの中にギャラリービューを配置するのも好きでよくしています。

また、アパレルの経験から配色には気を遣っていて、 好きな色は2色まで、3色目以降はグレーやブラウンなど合わせやすい色を使用する。 と決めています。
セレクトプロパティのタグも、無意味にカラフルにするのではなく、全てグレーにしたりして、 目立たせたい部分と目立たなくても良い部分のメリハリを意識してデザインしています。

ume ：私は、使いやすくて可愛いと感じるデザインになるようこだわっています。
左上にボタンを配置して使いやすいようにしたり、ノートパソコンで見た時に見やすいサイズで作成するようにしています。
また、 カラムは2カラムまで。 と決めています。3カラム以上になると少し小さくて見づらくなるんです。

ume さんのホーム画面

つぶあん ：自分がパソコンで Notion を使用する時は3カラムでも好きだったりするんですけど、iPad で見ると見づらくなったり、またテンプレートを作成する時、複製して使用してもらうことを考えると、やはり2カラムまでが良いかなと感じますよね。スマートフォンまで配慮したデザインはなかなか難しいですけどね(笑)

❓

まるこ：ちなみに、「フォントを縮小」や「左右の余白を縮小」の設定は皆さんどうされていますか？

Notion はフォントと左右の余白を縮小できる

Erina ：私は、「フォントを縮小」は必ずオンにしています。
文字を小さくすると、情報量が多くても1画面でたくさんの文字数が入るようになる ので、無駄にスクロールすることが減るんです。

ume ：私は、「フォントを縮小」も「左右の余白を縮小」もどちらも必ずオンにしています。縦に長くなるページよりも、1画面に収めたいので画面いっぱいに使いたいです。

よこきみ ：僕は、「フォントを縮小」はオフのままです。
また、「左右の余白を縮小」は基本的にはオンにするんですが、色味を使わないシンプルなページを作る時は、左右に余白があった方が映えるなと感じて「左右の余白を縮小」もオフにしています。

つぶあん ：私は、 データベースなどを入れたページなのか、テキストだけのページなのか、で使い分けています。
データベースなど様々なブロックを使用しているページでは「左右の余白を縮小」をオンにして画面を広く使いますが、テキストだけのページでは「左右の余白を縮小」をオフにして画面幅を狭くすることで目線が左右に動かないようにしています。

❓

まるこ：最近、画像がトリミングできる機能が追加されましたが、活用されてる方はいらっしゃいますか？

つぶあん ：とても活用しています。 カバー画像と同じ画像を丸くトリミングして配置するというデザインをよくしています。

カバー画像と同じ画像を丸くトリミングすることで一体感が出る


カバー画像を Unsplash で選定 → その後ページ内で画像ブロックを挿入 → カバー画像と同じ画像を選択 → 画像をダウンロード → ダウンロードした画像を Notion へ貼り付け…という手順をとると、カバー画像と同じ画像を丸くトリミングすることができます。

トリミングの方法（参考動画）

デザインする際に便利なツールは？

❓

まるこ： Notion でデザインをされる際に使用されている便利なツールやサイトはありますか？

ume ： Pinterest は毎日見ています。

Pinterest：https://www.pinterest.jp/

また、Notion に限らずなんですがダッシュボードデザインが好きでよく見ていて、Notion に似ているアプリの xTiles のダッシュボードデザインも参考にしています。

xTiles：https://xtiles.app/en

アイコンは phosphoricons のものを使用することが多いです。どんなデザインの Notion にも合うアイコンがたくさんあります。

phosphoricons：https://phosphoricons.com/

まるこ ：どこでこのようなアプリを発掘されているんですか？

ume ：海外の方の YouTube を参考にしています。よく見ているのは maisyleigh さんとかですね。

maisyleigh
📚

Maisy Leigh

登録者65万人超えの YouTuber。デザイナー兼フロントエンドエンジニア。洗練されたライフスタイルを提案している。

Erina ：私は外部ツールはあまり使用しないんですが、 Pinterest はよく見ています。 自分の好きな傾向の画像をおすすめしてくれるので、好きな画像を見つけやすいんです。

あとは使用したい画像の色味に統一感がない時は、 Canva を使用して画像にフィルターをかけて統一感を出しています。

画像に同系色のフィルタをかけ全体の統一感を出している

よこきみ ：僕は、 Notion 公式のテンプレートギャラリー をよく見ています。

Notion 公式のテンプレートギャラリー。 高品質なテンプレートが揃っている：https://www.notion.so/ja-jp/templates

つぶあん ：私は、デザインのこだわり部分でお話した通り、カバー画像の色を2色抽出してデザインに落とし込むのですが、Chrome 拡張機能の カラーピッカー を使用してカバー画像から色を抽出し、 ダミー画像ジェネレーター で抽出した色を使用し、好きな形の画像を作成して、Notion 内の罫線や見出しなどに使用しています。

カラーピッカー＆アイドロッパーツール：https://chromewebstore.google.com/detail/カラーピッカー＆アイドロッパーツール/phillbeieoddghchonmfebjhclflpoaj?hl=ja
ダミー画像ジェネレーター：https://www.websiteplanet.com/ja/webtools/dummy-images-generator/

配色は NIPPON COLORS の色味も好きで、よく参考にしています。

NIPPON COLORS：https://nipponcolors.com/

また、他のデバイスでの見え方を確認する時は、Chrome 拡張機能の モバイルシミュレーター を使用しています。

モバイルシミュレーター：https://chromewebstore.google.com/detail/モバイルシミュレーター-レスポンシブテストツール/ckejmhbmlajgoklhgbapkiccekfoccmk?hl=ja

まるこ ：皆さん、本当に色んなツールやサイトを使用してデザインされているんですね。すごく参考になりました。

デザイン座談会まとめ

今回は「デザイン」というテーマで開催された Notion 大学内の座談会のようすをまとめました。Notion をお気に入りの場所にする為に、デザインにこだわってみるのはとてもおすすめです。みなさまもぜひチャレンジしてみてください。

Notion 大学では座談会のアーカイブ動画も公開しています。興味ある方はぜひご入会ください。→ Notion 大学とは？特徴・料金・参加方法について解説します

アーカイブ動画を公開中

もっと Notion を学びたい方へ

初学者からでも安心して Notion を学べるオンラインコミュニティ「Notion 大学」を運営しています。会員数は現在300名以上。

  • 分からないことは24時間チャットツールでいつでも質問できる
  • コミュニティ内の限定勉強会でタスク管理や知識管理術が学べる
  • 1から学べる Notion 学習ロードマップで初心者からでも学習可能
  • Notion 大学限定の学習動画が100本以上
  • 定期的に開催している有料セミナーへの無料参加券
  • 過去の有料記事・有料テンプレートが全て閲覧可能
コンテンツや特典盛りだくさんです。参加方法は下記の記事をご覧ください。

Notion大学について知る

この記事の執筆者

TEMP編集部のアイコン画像

TEMP編集部

この記事の監修者

円谷のアイコン画像

円谷

Notion 公式アンバサダー（2021年〜 / 日本で7人目）。アンバサダーとして YouTube や Twitter で発信活動をおこなっている。本業は Web エンジニア。個人で Notion API を使ったアプリケーションを開発中。代表作は Fast Notion。株式会社 TEMP 代表取締役。

Twitter / YouTube