WEBデザインの収集、スクショをするなら「Clipular」が便利!
ここ1年はWEBサイトのデザイン収集に「Clipular」を使っています。もうこのサービスなしでは生きていけません。
さて、今回はWEBサイトのデザイン収集に役立つこと間違いなしの「Clipular」の使い方についてです。ブラウザのスクリーンショットをオンラインで保存しておけるツールで、Chromeの拡張機能として利用できます。
スクショでデザインの収集ができるので、あとで探すときに見つけやすい!!ビジュアル化!
目次
- WEBサイトデザイン収集に便利な「Clipular」とは?
- 「Clipular」を登録する方法
- 「Clipular」の使い方
- まとめ
WEBサイトデザイン収集に便利な「Clipular」とは?
「Clipular」はWEBサイトのスクショをオンラインでコレクションできるツール。
サイトに登録→Chrome拡張機能を入れる→ボタンポチで保存されます。
https://www.clipular.com/welcome
「Clipular」に登録して、実際にデザインを収集する時はChromeの拡張機能と連携して使う形です。
とても手軽にWEBサイトのデザインを収集できるのでオススメです!
「Clipular」を使うメリット
メリットは、サイトをビジュアルで保存しておけることです。
ブックマークだとどこサイトがどれだったかわからなくなるので、「Clipular」を使わない選択肢はないと思ってます。
また、登録したサイトはタグ付けでき、カテゴリ分けできることに加え、タグごとのまとめページも作成できます。
- Chromeの拡張機能として手軽に使える
- パーツごとのデザインを集めるのに適している
- 保存したスクショを簡単に共有できる
- 保存したスクショをタグで管理できる
- 保存したスクショはpngで出力できる
- タグ分けでき、タグでまとめページを作れる
「Clipular」を登録する方法
「Clipular」のサイトに登録する
「Clipular」のサイトを開いたら、「GET STARTED」を押してユーザー登録をしてください。
登録はFacebookまたはGoogleアカウント、メールアドレスでも可能です。
chromeの拡張機能が必要なので、Googleアカウントがオススメ。
「Clipular」のChrome拡張機能を入れる
実際にスクリーンショットを保存するためにChromeウェブストアから拡張機能をダウンロードします。
拡張機能ダウンロードはこちら↓
https://chrome.google.com/webstore/detail/screen-capture-screenshot/cjbjepchlgclmpinlbbeinajphohgfod
これで使う準備は完了です。
「Clipular」の使い方
使い方は簡単で「クリップを保存する」「管理する」の2つのみです。
選択した部分だけをクリップ保存する
拡張機能ボタンから「選択アイコン」をクリックすると選択した部分をクリップすることができます。
好きなパーツだけを保存する時に使います。
見えている部分をクリップ保存する
「ブラウザのようなアイコン」をクリックすると、今表示されているブラウザ画面をクリップ保存できます。
個人的にはこれをよく使うかなと思います。
サイト全体を保存する
これは最近できた新機能です。
サイト全体のスクショを保存することもできるようになりました。
一覧では少し縦長に、クリック後のポップアップでサイト全体のスクショがスクロールして確認できます。
サイト全体をパッと見たい場合にはこちらがオススメ。pngで出力もできます。
その他ボタンの機能
①保存したサイトのurlをコピー
②保存したスクショをpng出力
③保存したサイトの一覧を見る
タグ付けのコツ
保存サイトが増えてくると結構探すのが大変になってきます。必ずこまめにタグ付けすることをオススメします。
あらかじめカテゴリわけを決めて置いて、統一性も重視するべきです。
カテゴリについては大手のギャラリーサイトなどを参考にしています。
タグは一括でつけることもできます。
左上の「group」ボタンを押して複数選択してみてください!
ステキな共有機能
共有機能も兼ね備えた「clipular」は至れり尽くせり。
保存したスクショのurl共有が可能
保存したサイトの共有ボタンをクリックで、スクショのurlをコピーできます。
ツールとしての安定性は?
肝心になるのがツールとしての安定性。私が1年以上使った時点では、一度数日サイトが落ちていたことがありましたが、それ以外は特に不具合はありません。
機能も追加されたりと今後にも期待できます。
まとめ
デザインを収集するツールは様々ですが「Clipular」はWEBの保存に特化しているように感じます。
特にWEBサイトをパーツごとにストックする際にとても重宝するツールなのでこれからも活用していこうと思います。
波塚浩平
最新記事 by 波塚浩平 (全て見る)
- 【2022年最新版】カラーパレットの作成方法|Coolors - 2022年3月16日
- Macのデフォルトアプリでpdfを結合する方法|Automator活用 - 2020年5月26日
- 簡単に美しいグラデーションを作れる便利サイト4選 - 2020年5月12日