WEBクリッパーを使いたい人
でも、インストールの方法がよくわからないな。
Web Clipperのインストール方法をわかりやすく教えてよ。
はい、こんなNotionのWeb Clipperに関する悩みを解決します。
この記事では、NotionのWeb Clipperのインストール方法や使い方について説明しています。
※Notionの登録方法については、以前に記事を書いていますので、必要があれば参照ください。
この記事を読んだ結果は、以下です。
こんな感じで、バッチリ解決できます。
では、どうぞ。
おりゃー!パワー全開!気合をいれるぜ!
【目次】
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(リンク)
- 内容
このとき、Webページの中身もNotionに保存されます。
- タイトル部分にカーソルを合わせて、「開く」をクリックすれば、
- Notionに保存されたページの中身が表示される
注意事項
保存できる内容(中身)は、対象となるWebページの設計(作られ方)に依存します。
(そのため、ページによっては、中身がほとんど保存されない場合もあり)
★ Notion内に、Webページの情報を保存した後は、つぎのようなことが可能です。
- コメントやタグを追加して管理する
- ページにテーブルを埋め込んでつかう など
- タグを追加する
- コメントを追加する
- ページにテーブルを埋め込んでつかう
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に追加」をクリックします。
手順3. 「拡張機能を追加」をクリックします。
手順4. 「×」ボタンをクリックします。
手順5. はい、これで、Notion Web Clipperがインストールできました。
手順6. Notion Web Clipperをツールバーに表示させます。①ツールバー上にある拡張機能ボタンをクリックし、②Notion Web Clipperの横にある固定ボタンをクリック。
手順7. Notion Web Clipperのアイコンがツールバーに表示されました。
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上で、新しいページを追加し、「テーブル」をクリックします。
その2. データソースを選択するメニューから、「+ 新規データベース」をクリックします。
その3. ①データベースが作成されるので、②適当なタイトルを入力します。
はい、これで、事前準備は完了です。
【Webページを保存する手順】 ※Google Chrome
つぎに、Notion上のデータベースに、Webページを保存します。
手順1. Chromeを起動し、①Notionに保存したいWebページを表示している状態で、②Notion Web Clipperアイコンをクリックします。
手順2. Notion Web Clipperのウィンドウが表示されます。必要に応じて、保存するページのタイトルを変更します。
手順3. Webページの保存先を選択します。①追加先の選択欄をクリックし、②作成しておいたデータベースをクリック。
メモ
作成したデータベースが表示されない場合、検索窓からタイトルを入力し、検索してください。
検索しても出てこない場合、ブラウザを起動しなおすと表示される場合あり。
手順4. 設定が終われば、「ページを保存」をクリックします。
手順5. これで、Webページが保存されました。「Notionアプリで開く」をクリックすれば、確認できます。
次のような形で、Notionのデータベースに保存されています。
はい、これで、Google Chromeで、Notion Web Clipperを使う方法の説明はおわりです。
2-2. iPhoneにインストールする方法 & 使い方
★ iPhoneの場合はパソコンと異なり、ブラウザに拡張機能をインストールする必要がありません。
iPhone用のNotionアプリがインストールされていれば、Webページを保存できます。
★ この項では、iPhoneアプリのインストール方法を説明し、次に、使いかたを説明します。
2-2-1. Notionアプリのインストール方法 ※iPhone
iPhoneにNotionアプリがインストールされていない場合、次の手順でインストールしてください。
(既にインストールされている場合は、不要です。)
手順1. iPhone上から、App Storeを起動します。
手順2. App Storeを起動したら、下段のメニューから、「検索」アイコンを押します。
手順3. 検索窓に、「notion」と入力します。
手順4. Notionアプリが表示されるので、ダウンロードボタンを押します。
ダウンロードが始まります
手順5. ダウンロードが終われば、「開く」を押す。
手順6. Notionアプリが起動するので、「メールアドレスでログイン」を押します。
※GoogleアカウントやAppleアカウントを使っている場合は、以下をクリックしてください。
- Googleアカウントでログインする
- Appleアカウントでログインする
手順7. ①メールアドレスを入力し、②「メールアドレスでログインする」を押します。
手順8. ①パスワードを入力し、②「ログイン」を押します。
手順9. 通知の許可を求めてきた場合、「許可」を押します。
手順10. 操作方法の説明が表示された場合、「次へ」を3回押して、「始める」を押します。
手順11. Notionにログインできました。
※「<」を押せば、メニューを表示できます。
これで、Notionアプリのインストールは完了です。
2-2-2. 使いかた(Webページを保存する方法) ※iPhone
★ 以下のブラウザを使ったケースで、Webページを保存する方法を説明します。
Safariの場合
★ Safariを使って、Webページを保存する方法を説明します。
★ 以下の流れで、手順の説明を行います。
- Notion上に、データベースを作成(事前準備)
- Safariで、保存したいWebページを表示
- Notionに、Webページを保存
メモ
ここでは説明のため、新規のデータベースを作成しています。
実際には、新規で作成しなくとも、既存のデータベースなどを利用できます。
【事前準備】Notion上にWeb Clipper用のデータベースを作成します。
以下の手順でデータベースを作成してください。
※すでに作成している場合は、不要です。
その1. Notion上で、新しいページを追加し、「テーブル」をクリックします。
その2. データソースを選択するメニューから、「+ 新規データベース」をクリックします。
その3. ①データベースが作成されるので、②適当なタイトルを入力します。
これで、事前準備は完了です。
【Webページを保存する手順】 ※iPhone・Safari
つぎに、Notion上のデータベースに、Webページを保存します。
手順1. iPhone上で、Safariを起動し、①Notionに保存したいWebページを表示している状態で、②共有ボタン(↑ボタン)を押します。
手順2. アプリの選択欄から、Notionアイコンを押します。
手順3. 必要に応じて、保存するページのタイトルを変更します。
手順4. Webページの保存先を選択します。①追加先の選択欄を押し、②作成しておいたデータベースを押す。
メモ
作成したデータベースが表示されない場合、検索窓からタイトルを入力し、検索してください。
検索しても出てこない場合、ブラウザを起動しなおすと表示される場合あり。
手順5. 設定が終われば、「保存」を押します。
手順6. これで、Webページが保存されました。
Notion上の、さきほど選択したデータベースに、Webページが保存されています。
Chromeアプリの場合
★ Chromeアプリを使って、Webページを保存する方法を説明します。
★ 以下の流れで、手順の説明を行います。
- Notion上に、データベースを作成(事前準備)
- Chromeで、保存したいWebページを表示
- Notionに、Webページを保存
メモ
ここでは説明のため、新規のデータベースを作成しています。
実際には、新規で作成しなくとも、既存のデータベースなどを利用できます。
【事前準備】Notion上にWeb Clipper用のデータベースを作成します。
以下の手順でデータベースを作成してください。
※すでに作成している場合は、不要です。
その1. Notion上で、新しいページを追加し、データベース欄の「テーブル」をクリックします。
その2. データソースを選択するメニューから、「+ 新規データベース」をクリックします。
その3. ①データベースが作成されるので、②適当なタイトルを入力します。
これで、事前準備は完了です。
【Webページを保存する手順】 ※iPhone・Chrome
つぎに、Notion上のデータベースに、Webページを保存します。
手順1. iPhone上で、Chromeを起動し、①Notionに保存したいWebページを表示している状態で、②共有ボタン(↑ボタン)を押します。
手順2. アプリの選択欄から、Notionアイコンを押します。
手順3. 必要に応じて、保存するページのタイトルを変更します。
手順4. Webページの保存先を選択します。①追加先の選択欄を押し、②作成しておいたデータベースを押す。
メモ
作成したデータベースが表示されない場合、検索窓からタイトルを入力し、検索してください。
検索しても出てこない場合、ブラウザを起動しなおすと表示される場合あり。
手順5. 設定が終われば、「保存」を押します。
手順6. これで、Webページが保存されました。
Notion上の、さきほど選択したデータベースに、Webページが保存されています。
はい、これで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へ追加」をクリックします。
手順3. 「追加(A)」ボタンをクリックします。
手順4. 「OK(O)」ボタンをクリックします。
手順5. Notion Web ClipperアイコンがFirefoxに追加されました。
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上で、新しいページを追加し、「テーブル」をクリックします。
その2. データソースを選択するメニューから、「+ 新規データベース」をクリックします。
その3. ①データベースが作成されるので、②適当なタイトルを入力します。
これで、事前準備は完了です。
【Webページを保存する手順】※Firefox
つぎに、Notion上のデータベースに、Webページを保存します。
手順1. Firefoxを起動し、①Notionに保存したいWebページを表示している状態で、②Notion Web Clipperアイコンをクリックします。
手順2. 以下のメッセージが表示された場合、「Agree」ボタンをクリックします。
手順3. つぎのメッセージが表示された場合は、「Log in」ボタンをクリックし、Notionにログインします。
手順4. Notion Web Clipperのウィンドウが表示されます。必要に応じて、保存するページのタイトルを変更します。
手順5. Webページの保存先を選択します。①追加先の選択欄をクリックし、②作成しておいたデータベースをクリック。
メモ
作成したデータベースが表示されない場合、検索窓からタイトルを入力し、検索してください。
検索しても出てこない場合、ブラウザを起動しなおすと表示される場合あり。
手順6. 設定が終われば、「Save page」をクリックします。
手順7. これで、Webページが保存されました。「Open in Notion」をクリックすれば、確認できます。
次のような形で、Notion上のデータベースに保存されています。
はい、これで、Firefoxに、Notion Web Clipperをインストールする方法と、使いかたの説明はおわりです。
3.【補足1】ページ内や、ページ内のデータベースにWebページを保存する方法
★ ここまでの説明では、データベースにWebページを保存してきました。
しかし、データベースに保存する以外にも、ページ内や、ページ内にあるデータベースに、Webページを保存できます。
- ページ内に保存した場合
- ページ内にあるデータベースに保存した場合
★ ここでは、補足として、ページや、ページ内にあるデータベースにWebページを保存する方法を説明します。
3-1. Notionのページ内に、Webページを保存する方法
★ Notion Web Clipperを使って、Notionのページ内に、Webページを保存する方法を説明します。
★ 以下の流れで、手順の説明を行います。
※例として、WinPCのGoogle Chromeで説明
- Notion上に、ページを作成(事前準備)
- Chromeで、保存したいWebページを表示
- Notion Web Clipperの機能で、Webページを保存
メモ
ここでは説明のため、新規のページを作成しています。
実際には、新規で作成しなくとも、既存のページを利用できます。
【事前準備】Notion上に空のページを作成します。
以下の手順で空のページを作成してください。
その1. Notion上で、新しいページを追加し、「空のページ」をクリックしてください。
その2. ①ページが作成されるので、②適当なタイトルを入力します。
これで、事前準備は完了です。
【Notionのページに、Webページを保存する手順】
つぎに、Notion上のページに、Webページを保存します。
手順1. Chromeを起動し、①Notionに保存したいWebページを表示している状態で、②Notion Web Clipperアイコンをクリックします。
手順2. Notion Web Clipperのウィンドウが表示されます。必要に応じて、保存するページのタイトルを変更します。
手順3. Webページの保存先を選択します。①追加先の選択欄をクリックし、②作成しておいたページをクリック。
手順4. 設定が終われば、「ページを保存」をクリックします。
手順5. これで、Webページが保存されました。「Notionアプリで開く」をクリックすれば、確認できます。
次のような形で、Notionのページに保存されています。
はい、これで、Notionのページ内に、Webページを保存する方法の説明はおわりです。
3-2. Notionのページ内にあるデータベースに、Webページを保存する方法
★ Notion Web Clipperを使って、Webページを、Notionのページ内にあるデータベースに保存する方法を説明します。
★ 以下の流れで、手順の説明を行います。
※例として、WinPCのGoogle Chromeを使用
- Notion上に、ページを作成(事前準備)
- ページ内にデータベースを作成(事前準備)
- Chromeで、保存したいWebページを表示
- Notion Web Clipperの機能で、Webページを保存
メモ
ここでは説明のため、新規のページやデータベースを作成しています。
実際には、新規で作成しなくとも、既存のページ・データベースを利用できます。
【事前準備】Notion上に空のページを作成し、ページ内にデータベースを追加します。
以下の手順で空のページと、データベースを作成してください。
その1. Notion上で、新しいページを追加し、「空のページ」をクリックしてください。
その2. ①ページが作成されるので、②適当なタイトルを入力します。
その3. つぎにページ内にデータベースを作成します。①どこか適当なところで「+」ボタンを押して、データベース欄からテーブルビューをクリック。
その4. 表示されたデータソースの選択メニューから、「新規データベース」をクリックします。
その5. ページ内にデータベースが作成できました。
その6. データベースのタイトルを入力します。
これで、事前準備は完了です。
【Notionのページ内データベースに、Webページを保存する手順】
つぎに、Notion上のページ内データベースに、Webページを保存します。
手順1. Chromeを起動し、①Notionに保存したいWebページを表示している状態で、②Notion Web Clipperアイコンをクリックします。
手順2. Notion Web Clipperのウィンドウが表示されます。必要に応じて、保存するページのタイトルを変更します。
手順3. Webページの保存先を選択します。①追加先の選択欄をクリックし、②検索窓にデータベースのタイトルを入力。
※ページ内に新規で作成したデータベースの場合、検索しないとでてきません。
手順4. 作成しておいたデータベースをクリックします。
手順5. 設定が終われば、「ページを保存」をクリックします。
手順6. これで、Webページが保存されました。「Notionアプリで開く」をクリックすれば、確認できます。
次のような形で、Notionのページ内データベースに保存されています。
はい、これで、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のインストール方法と使い方」 はこれで終わりです。
コメント