• ホームページ制作
  • BLOG
  • 【webデザイナー必見】raindrop.ioでブックマーク・参考デザインをすっきり整頓&管理!

【webデザイナー必見】raindrop.ioでブックマーク・参考デザインをすっきり整頓&管理!

2020/02/06

仕事中よく使うサイトや参考になるブログ記事は家で見返したいが、いちいち自分のスマホにURLを送るのは面倒
ブラウザのブックマーク機能は物足りない
出来れば1つのサービスでブックマークを管理したい!
参考サイトをまとめたブックマークを共有したい!
…というわがままな欲望を叶えてくれるサービスがありました。

今回ご紹介する「raindrop.io」ではこんなことが出来ます

  • アカウント登録でどのブラウザ・スマートフォンからでも追加・編集・確認が可能
  • iOS・androidアプリ有
  • chromeの拡張機能で現在見ているページを即座に追加可能
  • フォルダ分け、タグ付け機能、ソート、検索機能付き
  • 一覧表示をカスタマイズ可能
  • ドラッグアンドドロップで並び替え可能
  • テーマ(ダークモード等)が選べる
  • サイトだけでなく画像データも追加可能
  • ブックマーク自体を公開設定でシェア可能

などなど…。

それでは早速登録して使ってみましょう!

  1. アカウント登録から基本の使い方まで
    1. 1アカウント登録→chromeの拡張機能追加
    2. 2簡単ブックマーク登録
    3. 3登録したブックマークはフォルダ分けして管理!
    4. 4ドラッグアンドドロップでサクサクフォルダ分け
  2. さらに便利な機能ご紹介
    1. 一覧表示をカスタマイズ
    2. 検索機能もあります
    3. 画像もアップロード可能!参考デザインのまとめにも◎
    4. ブックマークを公開設定でURL発行→シェア可能!
  3. 総評

アカウント登録から基本の使い方まで

1アカウント登録→chromeの拡張機能追加

公式サイトにアクセスし「Sign Up」から必要事項を入力し登録します。

raindrop.io

登録が完了すると以下の画面が表示されます。

併せてchromeの拡張機能もダウンロードしましょう。
以下のリンクの拡張機能を導入することで、クリックするとそのタブで開いているページをブックマークに登録できるアイコンが追加できます。

chrome 拡張機能ダウンロードはこちら

2簡単ブックマーク登録

早速拡張機能からブックマークを登録してみましょう

上記の拡張機能を追加すると、雲のアイコンが追加されているかと思います。
雲のアイコンをクリックすると、下の添付のように小窓が開きます。
小窓内上部の[★ Add Bookmarks]ボタンをクリックする事で、ブックマークが登録できます!

この時にディスクリプションやサイトのタイトルも一緒に保存してくれるので便利です。

拡張機能を使わない場合はこちらから

拡張機能を使わない場合は、サイドバーの[+]ボタンからブックマークを新規登録することが出来ます。

・ブックマークしたいサイトのURL(※必須)
・タグ

上記を追加し、[Save]ボタンをクリックすれば保存完了です!

3登録したブックマークはフォルダ分けして管理!

せっかく登録したブックマークもフォルダ分け出来ないと分かりにくいですよね。
次はフォルダを作成してみましょう。

サイドバー下部、フォルダアイコンの「New collection…」と書かれている部分クリックすると、ファイル名が入力できるようになります。
入力しEnterキーを押すと、「My Collections」の中にフォルダが作成されます!

4ドラッグアンドドロップでサクサクフォルダ分け

ドラッグアンドドロップで直感的にフォルダ分け可能です。

フォルダアイコン設定

[フォルダ名を右クリック]し[Edit]を選択してみましょう。
すると下記のような画面になり、赤枠内のフォルダのアイコンをクリックする事で、フォルダアイコン選択が出来るようになります。

参考:筆者のサイドバー・フォルダ分け

筆者が普段使っているアカウントはこのようにフォルダ分けしています。
ダークテーマを使用しておりますが各テーマでサイドバー項目は同一のため、よろしければ参考にしてみてください。

サイドバーではこのような形でフォルダ分けが可能です。
PRO版(月額3$)では、重複したリンクやリンク切れのページを検出し、それぞれ各フォルダの中に自動追加されるようです。

さらに便利な機能ご紹介

一覧表示をカスタマイズ

ブラウザ機能のブックマークを使用していた時、サイトのデザインやビジュアルは覚えているけどサイト名は忘れがちで、ogimageが欲しい…と思っていましたが、そんな悩みも解決します。

List」「Headlines」「Cards」「Moodboard」の4つの中から一覧表示時のデザインが選べます。

検索機能もあります

登録したアイテムは、タグをつける事ができ、登録した名前やタグで検索しソートできる機能もあります!
ページ上部の検索バーに単語を入力し、[Enter]キーで検索が可能です。

画像もアップロード可能!参考デザインのまとめにも◎

ブックマークだけでなく、画像データもドラッグアンドドロップで追加できます!

参考サイトのスクリーンショットや、アイキャッチ・バナーの参考デザインを集めて眺めることも出来ます。

ブックマークを公開設定でURL発行→シェア可能!

フォルダ単位でブックマーク自体を公開設定でシェアすることが出来ます。
誰かにまとめてURLを共有するときにも便利です。

右上の[share]ボタンから、設定してみましょう。
[Via link]からボタンのオンオフで公開非公開の切り替えができ、オンにした時点でURLが発行されます。
また、オフにすることで非公開にも戻せます。

総評

元が英語のサービスではありますが、読めなくても直感的に操作出来ます。
半年ほど使用していますが、無料でも不自由なく使えています。

運営会社にサービス維持のためにお金をお支払いしたくなるくらい便利です…!
月額3$のPRO版では、リンク切れを自動で削除してくれたり、画像のアップロード容量が1GBに増えたり、Dropbox・GoogleDriveへのバックアップ機能などなど…お得要素が沢山あります。

皆さんもブックマークを綺麗に保ち、参考サイトや好きなサイトをいつでもサッと読めるようにしてみてはいかがでしょうか!