![](https://osechi-tech.net/wp-content/uploads/2020/07/computer01_boy.png)
WEBクリッパーを使いたい人
でも、インストールの方法がよくわからないな。
Web Clipperのインストール方法をわかりやすく教えてよ。
はい、こんなNotionのWeb Clipperに関する悩みを解決します。
この記事では、NotionのWeb Clipperのインストール方法や使い方について説明しています。
※Notionの登録方法については、以前に記事を書いていますので、必要があれば参照ください。
この記事を読んだ結果は、以下です。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像1](https://osechi-tech.net/wp-content/uploads/2022/11/image-32.png)
こんな感じで、バッチリ解決できます。
では、どうぞ。
おりゃー!パワー全開!気合をいれるぜ!
【目次】
1.【Notion】Web Clipperのインストール方法と使い方(はじめに)
1-1. Notion Web Clipperとは
★ Notion Web Clipperは、インターネット上のWebページを、Notion上に保存するツールです。
気になったWebページなどを、カンタンにNotionに保存し、管理できます。
※以下のデバイスで使うことが可能
- PC(Windows・Mac)
- スマホ(iPhone・Android)
★ こんな感じで使います。
※WindowsPCの例
- Webページを表示している状態で、Notion Web Clipperアイコンをクリック
- 「ページを保存」をクリック
- Notion上にWebページの情報が保存される
- タイトル
- URL(リンク)
- 内容
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像2](https://osechi-tech.net/wp-content/uploads/2022/11/image-29.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像3](https://osechi-tech.net/wp-content/uploads/2022/11/image-30.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像4](https://osechi-tech.net/wp-content/uploads/2022/11/image-60.png)
このとき、Webページの中身もNotionに保存されます。
- タイトル部分にカーソルを合わせて、「開く」をクリックすれば、
- Notionに保存されたページの中身が表示される
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像5](https://osechi-tech.net/wp-content/uploads/2022/11/image-33.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像6](https://osechi-tech.net/wp-content/uploads/2022/11/image-34.png)
注意事項
保存できる内容(中身)は、対象となるWebページの設計(作られ方)に依存します。
(そのため、ページによっては、中身がほとんど保存されない場合もあり)
★ Notion内に、Webページの情報を保存した後は、つぎのようなことが可能です。
- コメントやタグを追加して管理する
- ページにテーブルを埋め込んでつかう など
- タグを追加する
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像7](https://osechi-tech.net/wp-content/uploads/2022/11/image-35.png)
- コメントを追加する
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像8](https://osechi-tech.net/wp-content/uploads/2022/11/image-36.png)
- ページにテーブルを埋め込んでつかう
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像9](https://osechi-tech.net/wp-content/uploads/2022/11/image-38.png)
1-2. 記事の内容
★ この記事の説明している内容は以下です。
★ 興味のあるところだけみて、興味のないところは流し読みって感じで大丈夫です。
2. Notion Web Clipperのインストール方法と使い方
★ Notion Web Clipperのインストール方法と使い方を説明します。
★ 説明するのは以下の内容です。
※1. WindowsPCの場合、つぎのいずれかのブラウザに、拡張機能として、Notion Web Clipperをインストールします。
- Google Chrome
- Firefox
※2. iPhoneの場合は、iPhone用のNotionアプリが入っていれば、Web Clipperを使うことができます。
2-1. Google Chromeにインストールする方法 & 使い方(WindowsPC)
★ Google Chromeに、Notion Web Clipperをインストールする方法、および使いかたを説明します。
※対象は、WindowsPCとなります。
2-1-1. Notion Web Clipperのインストール方法 ※Google Chrome
★ まず、Google Chromeに、Notion Web Clipperを拡張機能としてインストールします。
★ インストール方法は以下。
手順1. chrome ウェブストアにアクセスします。
以下のリンクをクリックしてください。
手順2. chrome ウェブストアの画面が表示されるので、「Chromeに追加」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像10](https://osechi-tech.net/wp-content/uploads/2022/10/image-165.png)
手順3. 「拡張機能を追加」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像11](https://osechi-tech.net/wp-content/uploads/2022/10/image-163.png)
手順4. 「×」ボタンをクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像12](https://osechi-tech.net/wp-content/uploads/2022/10/image-164.png)
手順5. はい、これで、Notion Web Clipperがインストールできました。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像13](https://osechi-tech.net/wp-content/uploads/2022/10/image-166.png)
手順6. Notion Web Clipperをツールバーに表示させます。①ツールバー上にある拡張機能ボタンをクリックし、②Notion Web Clipperの横にある固定ボタンをクリック。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像14](https://osechi-tech.net/wp-content/uploads/2022/10/image-167.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像15](https://osechi-tech.net/wp-content/uploads/2022/10/image-168.png)
手順7. Notion Web Clipperのアイコンがツールバーに表示されました。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像16](https://osechi-tech.net/wp-content/uploads/2022/10/image-169.png)
ChromeにNotion Web Clipperが追加できました。
これで、Notion Web Clipperのインストール方法の説明は終わりです。
2-1-2. Notion Web Clipperの使い方 ※Google Chrome
★ ChromeにインストールしたNotion Web Clipperを使って、Webページを保存する方法を説明します。
※以下の流れで、手順の説明を行います。
- Notion上に、データベースを作成(事前準備)
- Chromeで、保存したいWebページを表示
- Notion Web Clipperの機能で、Webページを保存
メモ
ここでは説明のため、新規のデータベースを作成しています。
実際には、新規で作成しなくとも、既存のデータベースなどを利用できます。
【事前準備】まず、Notion上に、Webページの情報を保存するためのデータベースを作成します。
以下の手順でデータベースを作成してください。
その1. Notion上で、新しいページを追加し、「テーブル」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像17](https://osechi-tech.net/wp-content/uploads/2023/03/image-123.png)
その2. データソースを選択するメニューから、「+ 新規データベース」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像18](https://osechi-tech.net/wp-content/uploads/2022/10/image-113.png)
その3. ①データベースが作成されるので、②適当なタイトルを入力します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像19](https://osechi-tech.net/wp-content/uploads/2022/10/image-172.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像20](https://osechi-tech.net/wp-content/uploads/2022/10/image-173.png)
はい、これで、事前準備は完了です。
【Webページを保存する手順】 ※Google Chrome
つぎに、Notion上のデータベースに、Webページを保存します。
手順1. Chromeを起動し、①Notionに保存したいWebページを表示している状態で、②Notion Web Clipperアイコンをクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像21](https://osechi-tech.net/wp-content/uploads/2022/10/image-189.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像22](https://osechi-tech.net/wp-content/uploads/2022/10/image-190.png)
手順2. Notion Web Clipperのウィンドウが表示されます。必要に応じて、保存するページのタイトルを変更します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像23](https://osechi-tech.net/wp-content/uploads/2022/10/image-176.png)
手順3. Webページの保存先を選択します。①追加先の選択欄をクリックし、②作成しておいたデータベースをクリック。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像24](https://osechi-tech.net/wp-content/uploads/2022/10/image-177.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像25](https://osechi-tech.net/wp-content/uploads/2022/10/image-178.png)
メモ
作成したデータベースが表示されない場合、検索窓からタイトルを入力し、検索してください。
検索しても出てこない場合、ブラウザを起動しなおすと表示される場合あり。
手順4. 設定が終われば、「ページを保存」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像26](https://osechi-tech.net/wp-content/uploads/2022/10/image-180.png)
手順5. これで、Webページが保存されました。「Notionアプリで開く」をクリックすれば、確認できます。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像27](https://osechi-tech.net/wp-content/uploads/2022/11/image-39.png)
次のような形で、Notionのデータベースに保存されています。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像28](https://osechi-tech.net/wp-content/uploads/2022/11/image-41.png)
はい、これで、Google Chromeで、Notion Web Clipperを使う方法の説明はおわりです。
2-2. iPhoneにインストールする方法 & 使い方
★ iPhoneの場合はパソコンと異なり、ブラウザに拡張機能をインストールする必要がありません。
iPhone用のNotionアプリがインストールされていれば、Webページを保存できます。
★ この項では、iPhoneアプリのインストール方法を説明し、次に、使いかたを説明します。
2-2-1. Notionアプリのインストール方法 ※iPhone
iPhoneにNotionアプリがインストールされていない場合、次の手順でインストールしてください。
(既にインストールされている場合は、不要です。)
手順1. iPhone上から、App Storeを起動します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像29](https://osechi-tech.net/wp-content/uploads/2022/09/image-293.png)
手順2. App Storeを起動したら、下段のメニューから、「検索」アイコンを押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像30](https://osechi-tech.net/wp-content/uploads/2022/09/image-294.png)
手順3. 検索窓に、「notion」と入力します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像31](https://osechi-tech.net/wp-content/uploads/2022/09/image-296.png)
手順4. Notionアプリが表示されるので、ダウンロードボタンを押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像32](https://osechi-tech.net/wp-content/uploads/2022/09/image-297.png)
ダウンロードが始まります
手順5. ダウンロードが終われば、「開く」を押す。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像33](https://osechi-tech.net/wp-content/uploads/2022/09/image-299.png)
手順6. Notionアプリが起動するので、「メールアドレスでログイン」を押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像34](https://osechi-tech.net/wp-content/uploads/2022/09/image-300.png)
※GoogleアカウントやAppleアカウントを使っている場合は、以下をクリックしてください。
- Googleアカウントでログインする
- Appleアカウントでログインする
手順7. ①メールアドレスを入力し、②「メールアドレスでログインする」を押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像35](https://osechi-tech.net/wp-content/uploads/2022/09/image-331.png)
手順8. ①パスワードを入力し、②「ログイン」を押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像36](https://osechi-tech.net/wp-content/uploads/2022/09/image-332.png)
手順9. 通知の許可を求めてきた場合、「許可」を押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像37](https://osechi-tech.net/wp-content/uploads/2022/09/image-311.png)
手順10. 操作方法の説明が表示された場合、「次へ」を3回押して、「始める」を押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像38](https://osechi-tech.net/wp-content/uploads/2022/09/image-305.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像39](https://osechi-tech.net/wp-content/uploads/2022/09/image-306.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像40](https://osechi-tech.net/wp-content/uploads/2022/09/image-307.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像41](https://osechi-tech.net/wp-content/uploads/2022/09/image-308.png)
手順11. Notionにログインできました。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像42](https://osechi-tech.net/wp-content/uploads/2022/09/image-309.png)
※「<」を押せば、メニューを表示できます。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像43](https://osechi-tech.net/wp-content/uploads/2022/09/image-310.png)
これで、Notionアプリのインストールは完了です。
2-2-2. 使いかた(Webページを保存する方法) ※iPhone
★ 以下のブラウザを使ったケースで、Webページを保存する方法を説明します。
Safariの場合
★ Safariを使って、Webページを保存する方法を説明します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像44](https://osechi-tech.net/wp-content/uploads/2022/11/image-58.png)
★ 以下の流れで、手順の説明を行います。
- Notion上に、データベースを作成(事前準備)
- Safariで、保存したいWebページを表示
- Notionに、Webページを保存
メモ
ここでは説明のため、新規のデータベースを作成しています。
実際には、新規で作成しなくとも、既存のデータベースなどを利用できます。
【事前準備】Notion上にWeb Clipper用のデータベースを作成します。
以下の手順でデータベースを作成してください。
※すでに作成している場合は、不要です。
その1. Notion上で、新しいページを追加し、「テーブル」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像45](https://osechi-tech.net/wp-content/uploads/2023/03/image-124.png)
その2. データソースを選択するメニューから、「+ 新規データベース」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像46](https://osechi-tech.net/wp-content/uploads/2022/10/image-113.png)
その3. ①データベースが作成されるので、②適当なタイトルを入力します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像47](https://osechi-tech.net/wp-content/uploads/2022/10/image-172.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像48](https://osechi-tech.net/wp-content/uploads/2022/10/image-173.png)
これで、事前準備は完了です。
【Webページを保存する手順】 ※iPhone・Safari
つぎに、Notion上のデータベースに、Webページを保存します。
手順1. iPhone上で、Safariを起動し、①Notionに保存したいWebページを表示している状態で、②共有ボタン(↑ボタン)を押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像49](https://osechi-tech.net/wp-content/uploads/2022/10/image-201.png)
手順2. アプリの選択欄から、Notionアイコンを押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像50](https://osechi-tech.net/wp-content/uploads/2022/10/image-202.png)
手順3. 必要に応じて、保存するページのタイトルを変更します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像51](https://osechi-tech.net/wp-content/uploads/2022/10/image-193.png)
手順4. Webページの保存先を選択します。①追加先の選択欄を押し、②作成しておいたデータベースを押す。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像52](https://osechi-tech.net/wp-content/uploads/2022/10/image-194.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像53](https://osechi-tech.net/wp-content/uploads/2022/10/image-195.png)
メモ
作成したデータベースが表示されない場合、検索窓からタイトルを入力し、検索してください。
検索しても出てこない場合、ブラウザを起動しなおすと表示される場合あり。
手順5. 設定が終われば、「保存」を押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像54](https://osechi-tech.net/wp-content/uploads/2022/10/image-196.png)
手順6. これで、Webページが保存されました。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像55](https://osechi-tech.net/wp-content/uploads/2022/10/image-203.png)
Notion上の、さきほど選択したデータベースに、Webページが保存されています。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像56](https://osechi-tech.net/wp-content/uploads/2022/10/image-198.png)
Chromeアプリの場合
★ Chromeアプリを使って、Webページを保存する方法を説明します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像57](https://osechi-tech.net/wp-content/uploads/2022/11/image-59.png)
★ 以下の流れで、手順の説明を行います。
- Notion上に、データベースを作成(事前準備)
- Chromeで、保存したいWebページを表示
- Notionに、Webページを保存
メモ
ここでは説明のため、新規のデータベースを作成しています。
実際には、新規で作成しなくとも、既存のデータベースなどを利用できます。
【事前準備】Notion上にWeb Clipper用のデータベースを作成します。
以下の手順でデータベースを作成してください。
※すでに作成している場合は、不要です。
その1. Notion上で、新しいページを追加し、データベース欄の「テーブル」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像58](https://osechi-tech.net/wp-content/uploads/2023/03/image-125.png)
その2. データソースを選択するメニューから、「+ 新規データベース」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像59](https://osechi-tech.net/wp-content/uploads/2022/10/image-113.png)
その3. ①データベースが作成されるので、②適当なタイトルを入力します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像60](https://osechi-tech.net/wp-content/uploads/2022/10/image-172.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像61](https://osechi-tech.net/wp-content/uploads/2022/10/image-173.png)
これで、事前準備は完了です。
【Webページを保存する手順】 ※iPhone・Chrome
つぎに、Notion上のデータベースに、Webページを保存します。
手順1. iPhone上で、Chromeを起動し、①Notionに保存したいWebページを表示している状態で、②共有ボタン(↑ボタン)を押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像62](https://osechi-tech.net/wp-content/uploads/2022/10/image-199.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像63](https://osechi-tech.net/wp-content/uploads/2022/10/image-200.png)
手順2. アプリの選択欄から、Notionアイコンを押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像64](https://osechi-tech.net/wp-content/uploads/2022/10/image-191.png)
手順3. 必要に応じて、保存するページのタイトルを変更します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像65](https://osechi-tech.net/wp-content/uploads/2022/10/image-193.png)
手順4. Webページの保存先を選択します。①追加先の選択欄を押し、②作成しておいたデータベースを押す。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像66](https://osechi-tech.net/wp-content/uploads/2022/10/image-194.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像67](https://osechi-tech.net/wp-content/uploads/2022/10/image-195.png)
メモ
作成したデータベースが表示されない場合、検索窓からタイトルを入力し、検索してください。
検索しても出てこない場合、ブラウザを起動しなおすと表示される場合あり。
手順5. 設定が終われば、「保存」を押します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像68](https://osechi-tech.net/wp-content/uploads/2022/10/image-196.png)
手順6. これで、Webページが保存されました。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像69](https://osechi-tech.net/wp-content/uploads/2022/10/image-197.png)
Notion上の、さきほど選択したデータベースに、Webページが保存されています。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像70](https://osechi-tech.net/wp-content/uploads/2022/10/image-198.png)
はい、これでiPhoneにNotion Web Clipperをインストールする方法と、使い方の説明はおわりです。
2-3. Firefoxにインストールする方法 & 使い方(WindowsPC)
★ Firefoxに、Notion Web Clipperをインストールする方法、および使いかたを説明します。
※対象は、WindowsPCとなります。
2-3-1. Notion Web Clipperのインストール方法 ※Firefox
★ Firefoxに、Notion Web Clipperを拡張機能としてインストールします。
※Firefox用のNotion Web Clipperは、英語版になります。日本語版はありません。
★ インストール方法は以下。
手順1. まず、Firefoxのアドオンをダウンロードします。
以下のサイトにアクセスします。
手順2. 「Firefoxへ追加」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像71](https://osechi-tech.net/wp-content/uploads/2022/10/image-204.png)
手順3. 「追加(A)」ボタンをクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像72](https://osechi-tech.net/wp-content/uploads/2022/10/image-205.png)
手順4. 「OK(O)」ボタンをクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像73](https://osechi-tech.net/wp-content/uploads/2022/10/image-207.png)
手順5. Notion Web ClipperアイコンがFirefoxに追加されました。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像74](https://osechi-tech.net/wp-content/uploads/2022/10/image-208.png)
FirefoxにNotion Web Clipperが追加できました。
これで、Notion Web Clipperのインストール方法の説明は終わりです。
2-3-2. Notion Web Clipperの使い方 ※Firefox
★ FirefoxにインストールしたNotion Web Clipperを使って、Webページを保存する方法を説明します。
※以下の流れで、手順の説明を行います。
- Notion上に、データベースを作成(事前準備)
- Firefoxで、保存したいWebページを表示
- Notion Web Clipperの機能で、Webページを保存
メモ
ここでは説明のため、新規のデータベースを作成しています。
実際には、新規で作成しなくとも、既存のデータベースなどを利用できます。
【事前準備】Notion上にWeb Clipper用のデータベースを作成します。
以下の手順でデータベースを作成してください。
※すでに作成している場合は、不要です。
その1. Notion上で、新しいページを追加し、「テーブル」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像75](https://osechi-tech.net/wp-content/uploads/2023/03/image-126.png)
その2. データソースを選択するメニューから、「+ 新規データベース」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像76](https://osechi-tech.net/wp-content/uploads/2022/10/image-113.png)
その3. ①データベースが作成されるので、②適当なタイトルを入力します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像77](https://osechi-tech.net/wp-content/uploads/2022/10/image-172.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像78](https://osechi-tech.net/wp-content/uploads/2022/10/image-173.png)
これで、事前準備は完了です。
【Webページを保存する手順】※Firefox
つぎに、Notion上のデータベースに、Webページを保存します。
手順1. Firefoxを起動し、①Notionに保存したいWebページを表示している状態で、②Notion Web Clipperアイコンをクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像79](https://osechi-tech.net/wp-content/uploads/2022/10/image-209.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像80](https://osechi-tech.net/wp-content/uploads/2022/10/image-212.png)
手順2. 以下のメッセージが表示された場合、「Agree」ボタンをクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像81](https://osechi-tech.net/wp-content/uploads/2022/10/image-213.png)
手順3. つぎのメッセージが表示された場合は、「Log in」ボタンをクリックし、Notionにログインします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像82](https://osechi-tech.net/wp-content/uploads/2022/10/image-215.png)
手順4. Notion Web Clipperのウィンドウが表示されます。必要に応じて、保存するページのタイトルを変更します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像83](https://osechi-tech.net/wp-content/uploads/2022/10/image-216.png)
手順5. Webページの保存先を選択します。①追加先の選択欄をクリックし、②作成しておいたデータベースをクリック。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像84](https://osechi-tech.net/wp-content/uploads/2022/10/image-217.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像85](https://osechi-tech.net/wp-content/uploads/2022/11/image-62.png)
メモ
作成したデータベースが表示されない場合、検索窓からタイトルを入力し、検索してください。
検索しても出てこない場合、ブラウザを起動しなおすと表示される場合あり。
手順6. 設定が終われば、「Save page」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像86](https://osechi-tech.net/wp-content/uploads/2022/10/image-220.png)
手順7. これで、Webページが保存されました。「Open in Notion」をクリックすれば、確認できます。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像87](https://osechi-tech.net/wp-content/uploads/2022/11/image-64.png)
次のような形で、Notion上のデータベースに保存されています。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像88](https://osechi-tech.net/wp-content/uploads/2022/11/image-43.png)
はい、これで、Firefoxに、Notion Web Clipperをインストールする方法と、使いかたの説明はおわりです。
3.【補足1】ページ内や、ページ内のデータベースにWebページを保存する方法
★ ここまでの説明では、データベースにWebページを保存してきました。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像89](https://osechi-tech.net/wp-content/uploads/2022/11/image-63.png)
しかし、データベースに保存する以外にも、ページ内や、ページ内にあるデータベースに、Webページを保存できます。
- ページ内に保存した場合
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像90](https://osechi-tech.net/wp-content/uploads/2022/11/image-46.png)
- ページ内にあるデータベースに保存した場合
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像91](https://osechi-tech.net/wp-content/uploads/2022/11/image-47.png)
★ ここでは、補足として、ページや、ページ内にあるデータベースにWebページを保存する方法を説明します。
3-1. Notionのページ内に、Webページを保存する方法
★ Notion Web Clipperを使って、Notionのページ内に、Webページを保存する方法を説明します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像92](https://osechi-tech.net/wp-content/uploads/2022/11/image-48.png)
★ 以下の流れで、手順の説明を行います。
※例として、WinPCのGoogle Chromeで説明
- Notion上に、ページを作成(事前準備)
- Chromeで、保存したいWebページを表示
- Notion Web Clipperの機能で、Webページを保存
メモ
ここでは説明のため、新規のページを作成しています。
実際には、新規で作成しなくとも、既存のページを利用できます。
【事前準備】Notion上に空のページを作成します。
以下の手順で空のページを作成してください。
その1. Notion上で、新しいページを追加し、「空のページ」をクリックしてください。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像93](https://osechi-tech.net/wp-content/uploads/2023/03/image-127.png)
その2. ①ページが作成されるので、②適当なタイトルを入力します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像94](https://osechi-tech.net/wp-content/uploads/2022/11/image.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像95](https://osechi-tech.net/wp-content/uploads/2022/11/image-1.png)
これで、事前準備は完了です。
【Notionのページに、Webページを保存する手順】
つぎに、Notion上のページに、Webページを保存します。
手順1. Chromeを起動し、①Notionに保存したいWebページを表示している状態で、②Notion Web Clipperアイコンをクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像96](https://osechi-tech.net/wp-content/uploads/2022/10/image-189.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像97](https://osechi-tech.net/wp-content/uploads/2022/10/image-190.png)
手順2. Notion Web Clipperのウィンドウが表示されます。必要に応じて、保存するページのタイトルを変更します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像98](https://osechi-tech.net/wp-content/uploads/2022/10/image-176.png)
手順3. Webページの保存先を選択します。①追加先の選択欄をクリックし、②作成しておいたページをクリック。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像99](https://osechi-tech.net/wp-content/uploads/2022/11/image-3.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像100](https://osechi-tech.net/wp-content/uploads/2022/11/image-52.png)
手順4. 設定が終われば、「ページを保存」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像101](https://osechi-tech.net/wp-content/uploads/2022/11/image-5.png)
手順5. これで、Webページが保存されました。「Notionアプリで開く」をクリックすれば、確認できます。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像102](https://osechi-tech.net/wp-content/uploads/2022/11/image-53.png)
次のような形で、Notionのページに保存されています。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像103](https://osechi-tech.net/wp-content/uploads/2022/11/image-54.png)
はい、これで、Notionのページ内に、Webページを保存する方法の説明はおわりです。
3-2. Notionのページ内にあるデータベースに、Webページを保存する方法
★ Notion Web Clipperを使って、Webページを、Notionのページ内にあるデータベースに保存する方法を説明します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像104](https://osechi-tech.net/wp-content/uploads/2022/11/image-55.png)
★ 以下の流れで、手順の説明を行います。
※例として、WinPCのGoogle Chromeを使用
- Notion上に、ページを作成(事前準備)
- ページ内にデータベースを作成(事前準備)
- Chromeで、保存したいWebページを表示
- Notion Web Clipperの機能で、Webページを保存
メモ
ここでは説明のため、新規のページやデータベースを作成しています。
実際には、新規で作成しなくとも、既存のページ・データベースを利用できます。
【事前準備】Notion上に空のページを作成し、ページ内にデータベースを追加します。
以下の手順で空のページと、データベースを作成してください。
その1. Notion上で、新しいページを追加し、「空のページ」をクリックしてください。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像105](https://osechi-tech.net/wp-content/uploads/2023/03/image-128.png)
その2. ①ページが作成されるので、②適当なタイトルを入力します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像106](https://osechi-tech.net/wp-content/uploads/2022/11/image.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像107](https://osechi-tech.net/wp-content/uploads/2022/11/image-8.png)
その3. つぎにページ内にデータベースを作成します。①どこか適当なところで「+」ボタンを押して、データベース欄からテーブルビューをクリック。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像108](https://osechi-tech.net/wp-content/uploads/2022/11/image-9.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像109](https://osechi-tech.net/wp-content/uploads/2022/11/image-10.png)
その4. 表示されたデータソースの選択メニューから、「新規データベース」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像110](https://osechi-tech.net/wp-content/uploads/2022/11/image-11.png)
その5. ページ内にデータベースが作成できました。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像111](https://osechi-tech.net/wp-content/uploads/2022/11/image-13.png)
その6. データベースのタイトルを入力します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像112](https://osechi-tech.net/wp-content/uploads/2022/11/image-21.png)
これで、事前準備は完了です。
【Notionのページ内データベースに、Webページを保存する手順】
つぎに、Notion上のページ内データベースに、Webページを保存します。
手順1. Chromeを起動し、①Notionに保存したいWebページを表示している状態で、②Notion Web Clipperアイコンをクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像113](https://osechi-tech.net/wp-content/uploads/2022/10/image-189.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像114](https://osechi-tech.net/wp-content/uploads/2022/10/image-190.png)
手順2. Notion Web Clipperのウィンドウが表示されます。必要に応じて、保存するページのタイトルを変更します。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像115](https://osechi-tech.net/wp-content/uploads/2022/10/image-176.png)
手順3. Webページの保存先を選択します。①追加先の選択欄をクリックし、②検索窓にデータベースのタイトルを入力。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像116](https://osechi-tech.net/wp-content/uploads/2022/11/image-18.png)
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像117](https://osechi-tech.net/wp-content/uploads/2022/11/image-19.png)
※ページ内に新規で作成したデータベースの場合、検索しないとでてきません。
手順4. 作成しておいたデータベースをクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像118](https://osechi-tech.net/wp-content/uploads/2022/11/image-22.png)
手順5. 設定が終われば、「ページを保存」をクリックします。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像119](https://osechi-tech.net/wp-content/uploads/2022/11/image-5.png)
手順6. これで、Webページが保存されました。「Notionアプリで開く」をクリックすれば、確認できます。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像120](https://osechi-tech.net/wp-content/uploads/2022/11/image-56.png)
次のような形で、Notionのページ内データベースに保存されています。
![「【Notion】Web Clipperのインストール方法と使い方」説明用画像121](https://osechi-tech.net/wp-content/uploads/2022/11/image-57.png)
はい、これで、Notionのページ内にあるデータベースに、Webページを保存する方法の説明はおわりです。
4.【補足2】無料ツール「Save to Notion」の紹介
★ 最後に公式ツールである「Notion Web Clipper」以外の無料ツールについて、説明しておきます。
公式ツール「Notion Web Clipper」以外にも、有志の人が開発した同じような用途の無料ツールがあります。
こうした無料ツールの中でも「Save to Notion」というツールが有名です。(作成者:Anis Gadさん)
★ 「Save to Notion」は、以下のような機能があり、便利です。
- Webページを保存するタイミングで、コメントなどを付加できる。
- 重要な記述だけを抽出してハイライト表示できる
公式ツールだと、少し機能が不十分だと感じる人は、試してみるのもアリです。
(ただし、公式ツールに比べると安定性はすこし劣るかなと思います。)
★「Save to Notion」は、Google ChromeとFirefoxで使用できます。(PC用のみ)
5.【Notion】Web Clipperのインストール方法と使い方(まとめ)
★ 今回は、紹介した内容は以下でした。
★ その他の、Notion関連の記事に興味があるかたは、以下を参照ください。
★ 今回の内容が、少しでも役に立った、解決したという方がいれば幸いです。
「【Notion】Web Clipperのインストール方法と使い方」 はこれで終わりです。
コメント