Evernote Web クリッパーでWebサイトを自由に切り取ってシェア（Chrome機能拡張）

こんにちは、波塚です。
今回はGoogleChromeの拡張機能である「Evernote Web クリッパー」ご紹介します。

メモツールの代表格として有名な「Evernote」ですが、GoogleChromeの拡張機能で連携することでもっと便利に活用することができます。
とっても便利なツールなのですが、使うにはEvernoteのアカウントが必要になりますので、Evernoteのアカウントをまだ持っていない方は、下の記事もご参考にしてみてください(-ω☆)
無料のEVERNOTE（エバーノート）ってなんですか？
https://www.infact1.co.jp/staff_blog/webmarketing/732/

【入門編】EVERNOTE(エバーノート）の便利な使い方①
https://www.infact1.co.jp/staff_blog/webmarketing/758/

Evernote Web クリッパーを追加する

まずはGoogleChromeにEvernote Web クリッパーの拡張機能を追加します。

以下のリンクをクリックして、右上の「CHROMEに追加」を押しましょう。
https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc

追加されれば右上のバーにEvernote Web クリッパーが表示されます。

Evernote Web クリッパーでWebページを保存する

Evernote Web クリッパーではWebページを保存できるのですが、この機能がなかなか面白いんです。

使い方は簡単で、右上の「Evernote Web クリッパー」のアイコンをクリック。
①クリップ-保存形式の方法を選択
②保存先-保存先の指定、タグの追加、コメントを追加
※オプションではショートカットなどのカスタムができますが、特にこだわりがなければ放置で大丈夫です。

Evernote Web クリッパーの大きな特徴として、Webページを保存するときの種類が5つあり、用途によって使い分けることができます。
クリップの種類はアプリのEvernoteと連携したときの見た目や使用用途によって使い分けることをオススメします。

• 記事
• 簡易版の記事
• ページ全体
• ブックマーク
• スクリーンショット

以上のように5つの種類がありますが、文字だけではどう保存されるのかわからづらいので、使える項目だけそれぞれ画像を踏まえて説明していきます。

「記事」でWebページを保存する

ブログ記事を開いた状態で「記事」で保存をすると、記事の部分だけ自動的に保存してくれます。

記事のリンクなどがクリックできテキストも選択できます。Webページの記事の部分だけ切り抜いて保存したイメージです。

「簡易版の記事」でWebページを保存する

先ほどの「記事」で保存をより簡易的にしたバージョンです。装飾などが省かれるので、少しスッキリとした印象です。
画像をみる通り、そこまで大きな差はありません。

「ページ全体」でWebページを保存する

「ページ全体」で保存をすると、Webページ全体がそのまま保存されます。

「記事」や「簡易版の記事」と同じくWebページのリンクなどもクリックできます。一部画像が表示されていなかったりテキストの色が違っていたりします。
リンクをクリックするとブラウザでページが表示されるので、ページをそのまま保存したような感覚です。

「ブックマーク」でWebページを保存する

先ほどまでのWebページを丸々保存したようなイメージとは違って、簡単なサイト情報とリンクのみが保存されます。
気になったサイトなどをメモしておきたいときに便利です。

Evernote Web クリッパーでスクリーンショットを編集する

画面のスクリーンショットを撮って、それを自由にトリミングしたり、○や□矢印などのオブジェクトを配置して、さらにテキストで補足を入れたりする事ができます。
すべてブラウザ上でサクサクと作業が出来てしまうので本当にお手軽で便利なんです!

ブラウザ上で「Skitch」を使っているような感覚です。
そしてシェアボタンを押すと、そのまますぐにEvernoteにアップされ、共有リンクが自動的にクリップボードにコピーされるのもよく考えられてます。

スクリーンショットを編集する方法

右上の「Evernote Web クリッパー」のアイコンをクリック。クリップの「スクリーンショット」を選択。

画面をそのまま撮りたい場合はクリック、ドラッグしながら撮る範囲を選択することもできます。
とりあえずクリックして全画面をキャプチャして、あとでトリミングしてもOK

①画像マーカー
②図形ツール
③ペンツール
④切り取り（トリミング）
⑤拡大、縮小
⑥スタンプツール
⑦タイプツール（テキスト入力）
⑧モザイクツール
⑨カラー

それぞれのツールの意味がわかれば、直感で編集ができるかと思います。ぜひ挑戦してみてください！

保存したノートを共有する

保存したノートを共有したい場合はアプリのノートの右上の「共有」をクリック。

①ノートを共有

共有したいユーザーの名前、またはメールアドレスを追加して共有します。
「ノートブックを共有」はノートブック内のノート全てが共有されます。

②公開リンクをコピー

ノートを公開し、そのリンクをコピーします。
公開範囲は、URLを知っている人だけの限定公開となります。また、アカウントを持っていない人でも見ることはできます。

その他便利なツール（連携も可）

FireShot
スクリーンショット撮影ツール。スクロールが入る長いページも１回で一番下までのスクリーンショットを１ファイルで保存できます。
https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg

Skitch
Webクリッパーのデスクトップ版。ブラウザだけでなくパソコンの画面やファイルを開いて編集が出来ます。
http://evernote.com/intl/jp/skitch/

まとめ

今日ご紹介したスクリーンショット＆編集ツールは「ディレクターズツールの３種の神器の中の１つ」などと自分で勝手に決めておりますが、Web制作の現場では、デザイナーさんに修正指示を出したり、お客様に画面の確認や説明の補足資料として使ったり、毎日何度も使う超便利アイテムです。
お時間あるときにでもお試しいただければ、きっと便利さが分かってもらえると思います。