Webデザイナーにおすすめ、お気に入りのWebサイトをストックしておくツール4つ

こんにちは!みなさんは普段Webを見ていて、きれいなデザインや参考にしたいサイトを見つけた時、どうしていますか?
スクリーンショット撮ったり、ブックマークしたりといくつかの方法があると思いますが、
今日のブログではWebデザイナーの方におすすめしたい、Webサイトのデザインのストック方法を4つご紹介したいと思います!

1, Webblaを使う

気に入ったデザインのWebサイトをブックマークして、後で見ることはできますが、
デザインが気に入って保存したのであれば、デザインからブックマークを選びたいですよね。
それができるアプリがWebblaです。

上がアプリの画面です。
iPhotoに似たシンプルなデザインなのでとても使いやすいです。
ブックマークの方法は、URLを直接入力(⌘ Nで入力)/配布されているブックマークレットを使う(Preferences>control にブックマークレットがあります)/拡張機能を使う(safariのみ)があります。
保存をすると「All Bookmarks」にブックマークがサムネイル表示されます。

さらにアプリ内でフォルダ分けすることができます!
(COLLECTIONS、⌘ shift Nで新規フォルダ)
これを使うことで、自分でジャンル分けや整理することができます。

お気に入りデザインのサイトに頻繁に訪れたい人オススメ!

 

2, Sparkboxを使う

これはWebサイトのスクリーンショット&パーツのストックができるアプリです。
実際に触ってみて、使い方としては
いいなーと思ったサイトやパーツを後で参考にする為にストックしていく感じだと思いました。
このアプリはChrome, Firefox, Safariの拡張機能(アドオン)が使えます。
スクリーンショットを撮りたい/パーツをストックしたいページをブラウザで任意のブラウザで開き、拡張機能を使うとそのページがSparkbox内のブラウザで開かれます。

(↑ MEMOPATCHを開いてみました)

 

右上のカメラマークを押すと全体のスクリーンショットが撮れます。
そしてその左の “thumb” ってボタンを押すとそのWebサイトで使われている写真パーツ一覧が表示され、下のような画面になります。

ここでストックしたいパーツを選択し、インポートします。
インポートしたパーツやスクリーンショットにはタグとコメントをつけ、後で検索することができます!

お気に入りのWebサイトをパーツごとに細かく管理したい人オススメ!

 

3, LittleSnapperを使う

LittleSnapperは画面キャプチャ&管理アプリです。
サイト全体のスクリーンショットをとる、自動的にURLを保存する、Webアーカイブとして保存する(万が一サイトが閉鎖したとしても後で確認出来る)
ことができます。
キャプチャを撮る方法は、メニューバーに追加されるアイコンを押す/ショートカットキー/little snapper内のブラウザから撮る/があります。

↑が管理画面です。ここから簡単なコメント付け、タグ分けやURLの確認ができます。

Webサイトを全体的にストックしておきたい人オススメ!

 

4, Paparazzi!とEvernoteを使う

 

上記3つは使い方が異なるアプリですが、どれも上手く使いこなせば強い味方になりそうなアプリです。
しかし、アプリ自体は地味に高い…。

そこでオススメな無料アプリ+使い方があります!

それがこのPaparazzi!です。

このアプリはURLを入力すれば、Webサイトのページを丸ごと撮影できるアプリです。
任意のサイズのスクリーンショットを撮影することができます。
ここでできたスクリーンショットとWebサイトのURLをevernoteに保存すれば、webblaやlittlesnapperみたいな使い方ができるのではないでしょうか!

↑ やってみた

 

この方法をもっと使いやすくするには上のように「Webデザイン」みたいな名前のノートブックを作成し、タグでWebサイトのジャンルやカテゴリーをつけて管理するいいのではないかなーと思います!

お金かけずにやってみたい人オススメ!

 

以上です!
ちなみに僕はWebblaを使っています!
chromeにブックマークレットを入れているのできれいなサイトなどを見つけては保存しています!
みなさんもぜひ、これらのアプリを使ってみてください!

ABOUTこの記事をかいた人

小川大樹

プロジェクトマネージャー/ UXデザイナー 受託事業を担当し、新規事業案件やリニューアル案件、数値改善プロジェクトなど様々な案件に携わる。