すべてのデザインのインスピレーションを整理する新しい方法

プロダクト デザイナーやデジタル アーティストなどのほとんどのクリエイティブな人々は、Pinterest に精通しています。人々はそれを使用して、ウェブサイトのデザイン、絵画、建築などのインスピレーション ボードを作成および収集しています。Pinterest は長い間私の生活の一部であり、私の最初のコレクションは 2012 年にさかのぼります。 UI デザイナーのペルソナ。Pinterest にとらわれる代わりに、デザインのムードボードとリソースを整理するためのEagleという隠れたツールを見つけました。この投稿では、Pinterest をやめて、すべてのプロのワークフローを Eagle アプリに移行した理由と方法を中心に展開します。

Pinterest が製品デザインに関係がないのはなぜですか?

現在、Fintech モバイルおよび Web アプリケーションの設計に取り組んでいます。私はゼロから始めているため、デザイン システムをセットアップし、ダッシュボードをデザインするための何百ものインスピレーションを調査し、フォント オプション、カラー パレット、図像のサンプル、Web サイトのデザイン、通知音、およびモバイル パターンを調査する必要があります。Pinterest にはさまざまな種類のリソースが含まれているため、Pinterest で完全なインスピレーション リストを作成することは不可能です。上記の各ことを行うには、特定のファイル形式を理解し、さまざまなソースからインスピレーションを得ることができるツールが必要です。

Pinterest はインスピレーションを収集するための非常にシンプルなツールですが、色、フォント、音声、ベクトルを理解する必要がある高度なユースケースでは機能しないため、Pinterest はここで機能しなくなります。したがって、自分のユースケースにより適したツールであるEagleを調査して見つけることにしました。

はじめましょう！

ツールに関する限り、Eagleと Pinterest の両方が、インスピレーション コレクションのエコシステムで正当な位置を占めています。投稿の最後で、私が意味することを説明します。しかし、製品のデザイン ムードボードを構築するためには、Pinterest が処理できない高度なユース ケースに取り組むためのツールが必要です。ビルドと移行のプロセスを、Eagle を使用する 10 の理由と方法に分けて説明します。うまくいけば、これらの理由が、インスピレーションを整理するためのこの今後のツールを探索する動機になることを願っています.

01 • インスピレーションの素早いインポート

私のインスピレーションの多くは、 Dribbble、Behance 、Pinterestの別々のフォルダーに保存されており、これらは相互に通信していません。このため、これらの各ソースから手動で画像を Miro にダウンロードする必要があります。ただし、数百の画像を同時に処理できないため、Miro のパフォーマンスはしばらくすると低下します。Eagle アプリケーションは、上記のフローで最も差し迫った 2 つの問題を解決するのに役立ちます —

1. Pinterest、Behance、Dribbbleから画像をバッチプルして、1 か所に保存します。これにより時間が節約され、すべてのインスピレーションを 1 か所にまとめておくことができます。
2. 処理する画像が大量にある場合でも、このツールは機能しません。実際、私が広範囲に使用している間、それはそのために構築されたように感じます.

Behanceなどの一部のサイトでは、マウスの右クリックがブロックされ、ユーザーが画像をダウンロードできなくなることをご存知ですか? 幸いなことに、Eagle-app はこの JavaScript の制限を吹き飛ばします。

02 •コミュニティからのリソース

約 5 年前に Sketch から移動したとき、Figma 内のコミュニティ サポートは、今日でも他のデザイナーから学び、仲間のデザイナーが作成した無料のリソースをダウンロードし、直接会うことができなかった人々と交流するのに役立つ重要な機能でした. 人々が Pinterest を使用する理由は、他の人の画像を簡単にピン留めしてインスピレーション ボードを作成できるまさにそのためだと言えます。Eagle を使用すると、インスピレーションだけでなく、リソースを収集するためのコミュニティに注意を向けることができます。たとえば、プロダクト デザインの UI 作業用のフォント、アイコン、イラストをダウンロードできます。

03 • 画像のタグ付けとフィルタリング

ムードボードに大量のインスピレーションを集めた後の画像の並べ替えは悪夢です。Eagle を使用すると、すべてのリソースに複数のキーワードでタグを付けることができるため、最も関連性の高い画像をこれまで以上に迅速に取得できます。例を挙げると、Revolut からスナップショットを収集する必要があります。スナップショットは次のように分類できます —

1. マーケティング/プロモーション キャンペーン
2. ウェブサイトの折り目
3. アプリのパターン
4. App Store と Play ストアの画像

04 • カラーパレットでハンティング

Eagle で Fintech ムードボードを作成していたとき、同じまたは似たような青色の画像を探すのは非常に便利でした。フィンテック ウォレット アプリの世界では、青は多用されている色であり、私がインスピレーションを集めた多くのアプリが青を使用していました。似たような青色の画像をすべて見つけるのに何年もかかったでしょう。イーグルは、各画像をフィルターに使用できる 6 色のパレットに分解するため、色を使用して画像を区別できます。

Eagle のカラー パレット機能は、各色の HEX、RGB、HSL、および CMYK 値を驚くほどキャプチャし、それらをクリップボードにコピーして、別のデザイン ツールでさらに使用できるようにします。

05 • 90 種類のファイル形式をサポート

一連のリソースとアセットを Eagle ライブラリに保存しましたが、このツールがサポートするファイル タイプの範囲の広さには驚かされます。あらゆる種類の画像、3D オブジェクトベースのアセット、Fig/PSD/Ai などのツールベースのファイル、ビデオ、オーディオ、フォント、画像 RAW、XLS や DOC などのドキュメントベースの形式を含む90 種類のファイルを処理できます。 . 例を挙げると、Figma は現在 Adob​​e によって所有されていますが、Figma で AI、EPS、または PDF アセットなどの Adob​​e ベクター アセットを開いてプレビューすることはできません。幅広い種類のファイルをサポートする統合ソリューションは、あらゆるクリエイティブにとって無敵です。

06 • ライブリンクの保存

ランディング ページをデザインする際には、Web リンクを保存することが重要になります。特定のセクションのスナップショットは、それを完全にカットしない通常のソリューションです。通常、ライブ リンクの保存と Web サイトのスナップショットの両方が必要です。Chrome プラグイン ベースのツール — FireShotは、Web サイト全体をキャプチャするための優れたオプションであり、 Eagleと組み合わせると、Web サイトのライブ URL も保存できます。Eagle の URL 保存の最も優れた点は、ツール内で Web サイトを開くことです。これは、気を散らすものを減らし、ワークフロー内にとどめるのに優れています。

07 • ネストされたフォルダの管理

あるフォルダーを別のフォルダーにリンクして親子関係を作成し、同様のソースから画像を収集することは、情報の階層化と管理に最適です。残念ながら、Pinterest はボードのネストをサポートしていませんが、Eagle はサポートしています。私のユースケースでは、Playstore と Appstore のすべての画像を個別に分離する必要がありましたが、アプリのプレビューの長いリストをキャプチャしたアプリごとに個別のフォルダーも用意する必要がありました。ユーザーが Eagle アプリを使用して実行できるすべてのフォルダー操作を説明する魅力的なサポート リンクを見つけました。

08 • 重複を見つける

すべての設計者は、同じ画像を複数のボードに 2 回追加するというこの問題に直面したことがあるでしょう。演習の途中で、ライブラリ全体をスキャンして、異なるフォルダーにある互いに同一のコピーである 67 枚の画像を見つけることにしました。その発見を投稿するのに 15 分を費やし、関連性のない重複を手動で削除し、将来それらを削除しないようにメモを残しました。

09 • クリップボードまたはドラッグ & ドロップから作業

私の経験からすでにわかっているかもしれませんが、適切に設計されたムードボードをセットアップすることは困難な作業です。画像の名前、説明、およびその他の値を入力するために多くの作業が必要ですが、これは非常に平凡だと思います。私は通常、複数のソースからスクリーンショットを撮り、それらのスクリーンショットを論理的なフォルダー構造に整理するだけで 2 ～ 3 時間を費やしています。スクリーンショットの数は 200 以上になる可能性があるため、ドラッグ アンド ドロップ機能が便利です。Pinterest とは異なり、整理されていない 200 以上の画像を Eagle にドラッグ アンド ドロップして、そのままにしておくか、必要なときに後で整理するかを選択できます。このアプリでは、各ファイルに名前を付ける必要はありません。私は通常、分類してまとめて名前を変更することになります10 分以内にタグ付けします。クリップボードから画像を直接コピーして貼り付けることもできます。これは、Figma や Confluence などのツールを扱う場合に最適です。

10 • デザイン系ムードボードに最適

最後に、上で述べたように、Eagle は製品デザインのムードボードを構築するのに最適です。収集段階での私のムードボード フォルダ構造は次のようになります。

最終的には、モバイルと Web のインスピレーションだけを集めました。全体のバンドルは、年次フィンテック レポート、カラー パレット、アプリ フロー、デザイン パターン、Playstore/AppStore スクリーンショット、通知音、ロゴ、アイコン、イラスト、および実際の Web サイト URL コレクションで構成されていました。

もう一つあります…

私が Eagle で達成できる素晴らしいことはすべてありますが、改善できる点が 1 つあります。Eagle は、主にローカルにインストールされるクライアント ベースのツールです。つまり、モバイル デバイスで画像を閲覧することはできず、iPad などのオンライン専用デバイスからインスピレーションにアクセスすることもできません。ライブラリ全体を Google ドライブまたは Dropbox にバックアップすることはできますが、ラップトップにアクセスできない場合はそれらを表示できません。これは契約を破るものではありませんが、理想的ではありません。新しいプロジェクトを始めるときは、オンとオフを問わず多くのインスピレーションを収集することに夢中になることがよくあります。つまり、通勤などの活動をしながら画像を収集する傾向があります。

将来のバージョンの Eagle がモバイルベースのエクスペリエンスをサポートできることを願っています。サイズの大きなファイル タイプに取り組む場合は特に解決が難しい場合がありますが、オンライン バージョンで PNG、JPEG、WEBP、GIF、MP3、および MP4 リソースのみを表示する 1 つの方法や、その他の複雑なファイル タイプのプレビューがブロックされる可能性があります。このソリューションは、膨大な数の画像ベースのコレクションをカバーできる可能性があります。

この問題の当面の解決策として、私は引き続き Pinterest やBehanceなどのモバイル対応ツールを使用して、移動中のアイデアや解決策を捉えています。後で、クラウド リポジトリ全体を Eagle にプルして、すべてのアイデアを統合できるようにします。

エンドノート

結局のところ、Eagle は他のツールと同じです。くだらないアイデアを除外したり、優れたアプリを自動的に作成したりすることはできません。それが行うことは、ワークフローを強化して生産性を高め、実行速度を向上させることです。整理するためだけにさまざまなワークフローやツール間を行き来する時間と労力を大幅に節約し、自分のアイデアや情報を体系的に消費しています。私はそれを念頭に置いて調査を開始し、Eagle アプリを使用してまさにそれを達成しました。複雑なアセットのセットを整理し、リソースに対して大量の実用的な操作を実行するのに役立つ驚異的なツールを探しているなら、もう探す必要はありません。

これで、この短いが、できれば洞察に満ちた読み物は終わりです。最後までやってくれてありがとう。あなたがそれから何かを得たことを願っています。

‍ LinkedIn、Twitter、Figma、Dribbble、Substackの私のコンテンツ バースに参加するか、私の DMにスライドしてください。あなたの考えやフィードバックをコメントするか、会話を始めましょう!