UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

以前、『Eagleを使った画像素材の管理方法』という記事で、素材管理アプリのEagleについて紹介しました。

私の場合、素材だけでなく参考サイトの収集もEagleで行っているので、今回はその方法について紹介します。

Eagleとは

Eagle – 画像収集と管理するアプリ

Eagleは、素材管理アプリで、画像に限らずさまざまな素材ファイルをまとめて管理・検索できます。

ドラッグアンドドロップで簡単にEagleにインポートでき、インポートした画像は簡単に整理・検索できるようになります。

単純な画像だけでなく、IllustratorデータやPhotoshopデータも管理できるので、とりあえず Eagleで管理しておいて、必要なときに開きたい他アプリにドラッグアンドドロップしてすぐに開いて使えます。

参考サイト収集をする目的

『呪術廻戦に学ぶ 成長するために重要なこと「目より先に手が肥えることはない」』でも紹介したように、目を肥やすことが重要です。

私は毎日デザインのギャラリーサイトに追加されたウェブサイトがデイリーノートに自動的に入ってくるように設定しています。

ギャラリーサイトに追加されるサイトは一定のレベルをクリアしているものがほとんどです。
毎日一定品質のサイトを見て、新しい or 面白い表現や、使われている知らない技術があればメモして調べるようにしています。

そんな風に毎日見ているサイトの中から、特に「これは後々参考サイトとして使えそうだな」というものはEagleに保存してすぐに見返せるようにします。

Eagleに参考サイトを保存するメリット

Eagleのいいところは検索性が高い点です。
「コーポレートサイト」「ECサイト」などのある程度のフォルダ分けをしつつ、使われている技術（CMSやライブラリ）をタグとして登録しておくと、あとから簡単に検索できるようになります。

本当はAIを使ってこの辺りのタグ付けも自動でできるといいのですが……

また、色検索もできるので「青系の参考サイトを見たいな」というときは、青色で検索することもできます。

もちろん毎回ちゃんとタグ付けしておくことが大切ですが、かなり使いやすいオリジナルの参考サイト集が作れます。

Eagleに保存する方法

Eagleにはブラウザ拡張機能（Eagle for Chrome）があります。
これを使うと開いているウェブページをワンクリックでEagleに保存できます。

フォルダを選択し、タグを追加してすぐに追加できるので非常に便利です。
ページ名やURLも自動的に入るので、これでどんどんウェブサイトを保存していきます。

まとめ

サイト全体ではなく、ヘッダーだけスクショして集めたり、フォームなどの一部だけ保存することもあります。

画像素材管理としての使われ方ばかりされてしまいがちなEagleですが、参考サイトの保存場所としても非常に優秀なアプリです。

ぜひ、活用してみてはいかがでしょうか。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！