Webデザインのキャプチャを管理・共有できるツール「Clipular」

こんにちは。WEBデザイナー歴4年目の西田です。

駆け出しWEBデザイナーの人や、これからWEBデザイナーを目指している人が最初に直面する壁は「どうすればデザインのスキルが上がるのか？」だと思います。

では「デザインのスキル」とはどのようなことでしょう。デザインの４原則を理解していることでしょうか、それとも色の選択が的確にできることでしょうか。

もちろん4原則も色もデザインにおいて重要だと思います。しかし、最も重要なのは「デザインを考える力」です。いくら技術を持っていても、デザインを考えて表現できなければ意味がありません。

デザインを考える力を身につけるには、良いデザインを見て勉強するのが一番効果的です。

良いデザインのWEBサイトがまとめられているギャラリーサイトを見て、お気に入りのデザインを見つけたときみなさんどうしてますか？

今回は簡単にキャプチャが取れるClipularをご紹介します！

Clipularとは？

Clipular

URL:https://www.clipular.com/welcome

「Clipular」は、WEB上の良いなと思ったバナーやメインビジュアルを簡単にクリップ保存する事が出来るツールです。

WEBデザイナーは、デザインをするうえでデザインの引き出しを沢山用意しておく必要があります。参考サイトを全く見ずにデザインする事は非常に難しいです。

色んなWEBサイトを見て自分の中に蓄積していき、デザインに落とし込んでいくというのが大半の流れになるかと思います。

「Clipular」はデザインを蓄積するツールとして、非常に役立ちます。

使い方もとっても簡単、chromeやFirefoxにアドオンをインストールしておけば、気になったバナーなどをスライスするだけで、Clipularのクラウドに保存されます。

保存したバナーなどにコメントを付ける事が出来るので、後で見返しても分かりやすくなっています。

Clipularのメリットは？

これからWEBデザイナーを目指していく中で、本当に沢山のWEBツールと出会うことになると思います。WEBツールは星の数ほど種類があり、年々増加しています。

どれも高機能でツールのデザインもキレイ。思わず使ってみたくなるものばかりです。

しかし、いざ使ってみると機能が多すぎて使いこなせなかったり、導入に時間が掛かり過ぎてしまったりと、本来WEBデザインの勉強をしないといけないのに、便利ツールにスケジュールを埋められたら本末転倒です。

新しいWEBツールは試してみて、合わなければすぐやめるといった割り切りが肝心です。

Clipularは、お世辞にも高機能とはいえません。WEBサイトのバナーやメインビジュアルをクリップするだけのツールです。

しかし単純操作だから簡単に導入することが出来、尚且つ長く使うことができます。

前にも言いましたが、デザインをする上で他のデザインを必ず参考にします。「Clipular」にどんどんクリップしていけば、いざデザインするときにクリップした分だけデザインの引き出しを持っていることになります。

そのため、クライアントのイメージに近いものをより最短で作り上げることが可能です。

WEBデザインはどんどん新しくなり、時期によってデザインの流行りも変わってきます。

日々WEBデザインをクリップしていくことで、流行りにも敏感になり、常に新しいデザインを作ることが可能です。

Clipularの登録方法

Clipularの登録方法をご紹介します。登録は「Facebook」「Googleアカウント」「オリジナルアカウント」の３つから選択可能です。

facebookでの登録方法

１、Clipularのサイトにアクセスします。

 

２、緑のボタン「GET STARTED」をクリックします。すると、右側にメニューが表示されます。

 

３、「CONNECT facebook」のボタンをクリックします。

４、facebookの認証画面が表示されますので、メールアドレスとパスワードを入力して「ログイン」ボタンを押してください。

 

５、以上でFacebookでのClipularの登録は完了になります。

Googleアカウントでの登録方法

１、Clipularのサイトにアクセスします。

 

２、緑のボタン「GET STARTED」をクリックします。すると、右側にメニューが表示されます。

 

３、「CONNECT Google」のボタンをクリックします。

４、Googleアカウントの認証画面が表示されますので、メールアドレスとパスワードを入力して「ログイン」ボタンを押してください。

 

５、以上でGoogleアカウントでのClipularの登録は完了になります。

オリジナルアカウントでの登録方法

１、Clipularのサイトにアクセスします。

 

２、緑のボタン「GET STARTED」をクリックします。すると、右側にメニューが表示されます。

 

３、「Feel like doing it yourself? Create Account」の「Create Account」をクリックします。

４、プラグインを導入する画面が表示されます。「Download」ボタンを押します。

 

５、Choromeだと下記の様なポップアップが表示されます。「拡張機能を追加」のボタンを押して追加しましょう。

※FirefoxやInternetexplorerも同様のポップアップが出ます

 

６、プラグインを導入するとメールアドレスとパスワードを入力する画面が表示されます。

入力が完了しましたら、「Create Account」のボタンを押してください。

 

7、以上でオリジナルアカウントでのClipularの登録は完了になります。

Clipularの使い方

Google chrome拡張機能でScreen capture, screenshot share/saveを追加しよう

※オリジナルアカウントで登録した方は、この手順をスキップしてください。

では早速、Google chromeで「Clipular」を使っていきましょう。
まずは、下記URLから「Clipular」をインストールします。

https://chrome.google.com/webstore/detail/screen-capture-screenshot/cjbjepchlgclmpinlbbeinajphohgfod

上記ページで表示される画面の右上「＋無料」ボタンを押すと、ツールバーに「Clipular」のアイコンが追加されます。
たったこれだけで、インストール完了です！

画面のキャプチャを取得しよう

次に、実際に画面のキャプチャを取得していきましょう。
使い方はとても簡単！まず、キャプチャしたいページを表示したうえで、先ほど追加された、「Clipular」のアイコンをクリックします。

 

そうすると、上記画像のようなものが表示されます。
3つのアイコンが並んでいますが、左二つがキャプチャの際に使用するアイコンです。
それぞれキャプチャの仕方が異なりますので、場面によって使い分けてください。

ページ内の一部だけをキャプチャする。

そのページ全体をキャプチャする。

それぞれ、アイコンをクリックすると、これでキャプチャ完了！
「Clipular」内に保存されます。

集めたデザインを管理しよう

では、保存されたキャプチャを見ていきましょう。
先ほどと同じように、「Clipular」のアイコンをクリック。
表示されたものの中の「緑のノート」のアイコンをクリックしてください。

 

そうすると、「Clipular」の画面が表示され、そこに先ほどキャプチャしたページが追加されていることが確認できます。

 

キャプチャしたものは全てここに格納されていきます。

削除の方法

追加したキャプチャの削除方法もご紹介します。
削除したいキャプチャの、下向き矢印をクリックします。

 

すると、詳細設定欄が表示されますので、その状態で「ゴミ箱」アイコンをクリック！

 

これで削除完了です。

ローカルダウンロードの方法

「Clipular」は、キャプチャしたものを、画像としてダウンロードすることも可能です。
ページをキャプチャした後、「Clipular」のアイコンをクリック。
そうすると、さきほどキャプチャした画面のサムネイルが表示されています。

その状態で、「緑のノート」アイコンの下の「オレンジの雲」のアイコンをクリックします！

 

そうすると、画像がダウンロードされます！

グルーピングの方法

沢山キャプチャをしてくと、数が増えて管理が少し大変になってきます。
その場合は、「グループ分け」を利用しましょう！

「Clipular」はキャプチャを、任意の名前のグループに分けることが可能です。
「Clipular」画面の左上にある「Group」ボタンをクリック。

 

すると、キャプチャの周りが点線で囲われた状態になります。
その状態で、グループ分けをしたいキャプチャを選択していきます。
複数選択が可能ですので、登録したいキャプチャを全て選択してください！

 

全て選択が終わったら、画面左上の「Select」ボタンをクリックしてください。
すると、グループの名前を付けるウィンドウが表示されますので、任意の名前を入力してください。

 

「Add to this new collection」ボタンをクリックすれば、登録完了です！

なお、上記ボタンをクリックした時に表示されるページで、そのグループを公開するか、非公開にするかを選択することが可能です。

 

画面左下のグループ名の横に、鍵のアイコンがありますので、そちらをクリックすると「公開（Public）」と「非公開（Private）」を選べます。
「公開（Public）」にすることで、相手にこのグループページのURLを伝えることで、他の人にそのグループを共有することが出来ます。

まとめ

ディレクターに「こういうデザインを作って欲しい」と言われても、最初のうちは難しいと思います。何が正解かがわからないからです。デザインに正解はないのですが、ディレクターは正解に近いものを要求してきます。

そこはトライアンドエラーで成長していくしか無いのですが、「Clipular」をうまく活用すれば早く結果を出すことが出来るかもしれません。

登録は無料ですので、一度試してみてはいかがでしょうか。