ホームページ制作WORKS制作実績BLOGブログRECRUIT採用情報COMPANY会社概要CONTACTお問い合わせ03-6659-5220WordPress・レスポンシブが得意!ホームページ制作BLOG【webデザイナー必見】raindrop.ioでブックマーク・参考デザインをすっきり整頓&管理!【webデザイナー必見】raindrop.ioでブックマーク・参考デザインをすっきり整頓&管理!2020/02/06ツイート仕事中よく使うサイトや参考になるブログ記事は家で見返したいが、いちいち自分のスマホにURLを送るのは面倒!ブラウザのブックマーク機能は物足りない!出来れば1つのサービスでブックマークを管理したい!参考サイトをまとめたブックマークを共有したい!...というわがままな欲望を叶えてくれるサービスがありました。今回ご紹介する「raindrop.io」ではこんなことが出来ますアカウント登録でどのブラウザ・スマートフォンからでも追加・編集・確認が可能iOS・androidアプリ有chromeの拡張機能で現在見ているページを即座に追加可能フォルダ分け、タグ付け機能、ソート、検索機能付き一覧表示をカスタマイズ可能ドラッグアンドドロップで並び替え可能テーマ(ダークモード等)が選べるサイトだけでなく画像データも追加可能ブックマーク自体を公開設定でシェア可能などなど...。Up」から必要事項を入力し登録します。raindrop.io登録が完了すると以下の画面が表示されます。併せてchromeの拡張機能もダウンロードしましょう。以下のリンクの拡張機能を導入することで、クリックするとそのタブで開いているページをブックマークに登録できるアイコンが追加できます。拡張機能からブックマークを登録してみましょう上記の拡張機能を追加すると、雲のアイコンが追加されているかと思います。雲のアイコンをクリックすると、下の添付のように小窓が開きます。Bookmarks]ボタンをクリックする事で、ブックマークが登録できます!この時にディスクリプションやサイトのタイトルも一緒に保存してくれるので便利です。拡張機能を使わない場合はこちらから拡張機能を使わない場合は、サイドバーの[+]ボタンからブックマークを新規登録することが出来ます。・ブックマークしたいサイトのURL(※必須)・タグ上記を追加し、[Save]ボタンをクリックすれば保存完了です!3登録したブックマークはフォルダ分けして管理!せっかく登録したブックマークもフォルダ分け出来ないと分かりにくいですよね。次はフォルダを作成してみましょう。collection...」と書かれている部分クリックすると、ファイル名が入力できるようになります。Collections」の中にフォルダが作成されます!4ドラッグアンドドロップでサクサクフォルダ分けドラッグアンドドロップで直感的にフォルダ分け可能です。フォルダアイコン設定[フォルダ名を右クリック]し[Edit]を選択してみましょう。すると下記のような画面になり、赤枠内のフォルダのアイコンをクリックする事で、フォルダアイコン選択が出来るようになります。参考:筆者のサイドバー・フォルダ分け筆者が普段使っているアカウントはこのようにフォルダ分けしています。ダークテーマを使用しておりますが各テーマでサイドバー項目は同一のため、よろしければ参考にしてみてください。サイドバーではこのような形でフォルダ分けが可能です。PRO版(月額3$)では、重複したリンクやリンク切れのページを検出し、それぞれ各フォルダの中に自動追加されるようです。一覧表示をカスタマイズブラウザ機能のブックマークを使用していた時、サイトのデザインやビジュアルは覚えているけどサイト名は忘れがちで、ogimageが欲しい...と思っていましたが、そんな悩みも解決します。「List」「Headlines」「Cards」「Moodboard」の4つの中から一覧表示時のデザインが選べます。検索機能もあります登録したアイテムは、タグをつける事ができ、登録した名前やタグで検索しソートできる機能もあります!ページ上部の検索バーに単語を入力し、[Enter]キーで検索が可能です。画像もアップロード可能!参考デザインのまとめにも◎ブックマークだけでなく、画像データもドラッグアンドドロップで追加できます!参考サイトのスクリーンショットや、アイキャッチ・バナーの参考デザインを集めて眺めることも出来ます。ブックマークを公開設定でURL発行→シェア可能!フォルダ単位でブックマーク自体を公開設定でシェアすることが出来ます。誰かにまとめてURLを共有するときにも便利です。右上の[share]ボタンから、設定してみましょう。link]からボタンのオンオフで公開非公開の切り替えができ、オンにした時点でURLが発行されます。オフにすることで非公開にも戻せます。元が英語のサービスではありますが、読めなくても直感的に操作出来ます。半年ほど使用していますが、無料でも不自由なく使えています。運営会社にサービス維持のためにお金をお支払いしたくなるくらい便利です...!月額3$のPRO版では、リンク切れを自動で削除してくれたり、画像のアップロード容量が1GBに増えたり、Dropbox・GoogleDriveへのバックアップ機能などなど...お得要素が沢山あります。オリンピック開催年の2020年!最新のWebデザイン参考サイトをサイト、レスポンシブ、ランディングページ、バナー別にまとめてみました。ワイヤーフレームとは別称「画面設計」と呼ばれるもので、Webサイト制作の工程の中で一番初めに作成されるものです。ビジュアル的には簡素ですが、非常に重要な工程です。Web制作では画像素材をいくつも使用してサービス内容を分かりやすくしたり、伝えたいイメージや印象をつくります。「仕事の内の〇割は探し物をしている時間だ」という話をWebデザインスクールの講師から聞いたことがあります。