株式会社TEMPのロゴ画像

【Save to Notion】NotionにWebページを保存する方法

Notion のデータベース機能はさまざまな情報を収集・管理するのに優れており、その中でも Web ページをブックマークして保存したい場面は多いのではないでしょうか。そんな時、Chrome 拡張機能を使うと簡単にWeb ページの情報を Notion のデータベースに保存することができます。

今回は Web クリップ用の Chrome 拡張機能の中でも特におすすめの「Save to Notion」をご紹介します。

この記事でわかること

  • Save to Notion で実現できること
  • Save to Notion の詳細な使用方法
  • スマホから Notion に Web クリップする方法

そもそも Notion とは

Notion(ノーション)は「ドキュメント管理」「タスク・プロジェクト管理」「Notion AI によるコンテンツ生成」など、さまざまな用途で使用できるクラウド型の Web サービスです。 2013年にリリースされて以来、ユーザー数は右肩上がりに推移し、2021年には日本語化にも対応しています。

Google トレンドで見た話題性の推移(青字:Notion / 赤字:Evernote)
Tsuburayaのアイコン

Notion 公式アンバサダー / 株式会社 TEMP 代表

Tsuburaya

Notion は、2021年頃までは一部のスタートアップ企業や IT 企業でのみ使われているという状況でしたが、現在ではトヨタやベネッセなどの日本を代表する大企業でも取り入れられるようになりました。

Save to Notion で実現できること

Save to Notion を利用することで、効率的にWeb ページの URL を Notion のデータベースの URL プロパティにブックマークでき、記事本文も Notion のページ内に保存することができます。

また、指定したカテゴリやタグなどのプロパティ情報も任意で保存できるので、Notion 上での管理がとてもやりやすいです。

画像もクリップしてくれるので、ギャラリービューなどで表示すると美しく、わかりやすいですね。

Save to Notion でクリップした Web ページをギャラリービューで表示

Notion Web Clipper について

「Notion Web Clipper」 という Notion 公式から出ている Chrome 拡張も存在します。

こちらもシンプルで使いやすいのですが、プロパティを保存できる Save to Notion が機能的に上位互換になっています。

📝

私の場合、普段のブックマークは Save to Notionで。
いつもと違うデータベースにサクッと保存したい場合はシンプルな Notion Web Clipper といった使い分けをしています。

Save to Notion の使用方法

では実際に Save to Notion の使い方・手順を説明していきます。

STEP 1. Chrome ウェブストアからインストール

以下のリンクから、「Chrome に追加」でインストールすることができます。

インストールができたら、すぐに使えるよう固定しておきましょう。

STEP 2. 保存用データベースを作成

Save to Notion で Web ページを保存するデータベースを Notionで作っておきましょう。

今回は「ブックマークテストDB」というデータベースを作りました。

ブックマーク用のデータベースを作成

STEP 3. Save to Notion のフォーム設定を行う

Save to Notion のアイコンをクリックすると、ポップアップが開きます。

「Add a Form」→「Select a Page or Database」と進み、先ほど作成した Web ページを保存するデータベースを選択しましょう。

保存先データベースを選択する

その後、フォーム設定の画面が開きます。

「Content」はデフォルトの「Empty」から「Webpage Content」に変更しておきましょう。

これで Web ページ内の情報(記事本文)も Notion に保存されるようになります。

「Webpage Content」に変更

あとはお好みですが、「Add New Field」からタグなどのプロパティを追加することもできます。
ここで特定のプロパティを入力しておくと、このフォームからページを保存するとき毎回そのプロパティで保存されるようになります。

「Add New Field」からプロパティを追加

ここでは「Notion」タグを選択し、Notion 関連の情報をブックマークする用のフォームにしてみます。

上部からフォームのタイトルも変更できるので、わかりやすいものにしましょう。

保存設定のタイトルを変更できます

「Save & Go Back」でフォームの設定が完了です。

📝

異なるフォーム(保存設定)を作りたい場合は、次の画面の「Add New Form」から作成できます。

STEP 4. 実際に Web クリップする

実際に保存したいページ上で Save to Notion アイコンをクリックし、作ったフォームを選びましょう。

Save to Notion フォーム選択画面

タイトル・画像・ページ内容が自動入力されていることがわかります。

これでよければ「Save Page」をクリック。

Save to Notion でページを保存

これで保存完了です。

このように、用意したデータベースに本文や URL プロパティも含め、保存できていることが確認できます。

Notion に保存されたページ

スマートフォンから Web クリップする方法

Save to Notion はChrome拡張機能なので、スマホでは使えません。

ですが、スマホ版 Notion アプリには Web クリッパーが組み込まれており、iOS や Androidなどの スマホからでも簡単にWeb ページを保存することができます

スマホでの Web クリップの手順

事前に Notion 公式アプリをインストールして、ログインしておきましょう。

ブラウザの共有画面に、Notion への保存メニューが追加されているので選択します。

追加先のページかデータベースを選んで「保存」をタップすると、本文も含め Notionに保存できます。

追加先を選択して保存するだけ
📝

Notion Web Clipper と同様、タグなどのプロパティは自動で保存出来ないので手動で入力する必要があります。

TEMP ブログでよく読まれている記事

もっと Notion を学びたい方へ

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

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

この記事の執筆者

ひのりくのアイコン画像

ひのりく

フリーランス。漫画・イラスト・ゲーム・3D モデリング・DTP など幅広いクリエイティブ業務を請け負う。Notion API を使うために覚えたプログラミングや Notion で個人の業務を効率化している。

Twitter

この記事の監修者

円谷のアイコン画像

円谷

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

Twitter / YouTube