figma-brandfetch-plugin
公開日: 2021.11.12  | 更新日: 2021.11.12

Figmaで企業ロゴなどのブランド・アセットを検索できる「Brandfetch」の使い方

今回は Figma で企業やサービスのブランド・アセットを検索できるプラグイン「Brandfetch」を紹介します。カンプデータとしてサービスロゴを探したい場合にすぐに画像やSVGデータとしてインポートできるので便利です。

言うまでもないですが、ブランド・アセットの無断使用には気をつけて利用しましょう。

この記事のターゲット

  • Figmaの初心者

  • Figmaで企業ロゴやブランドアセットのカンプデータを検索したい方

  • 特定のサービスのSVGやフォント情報を確認したい方


1. 「Brandfeach」をインストールする

install-brandfetch-plugin

Figma Community の「Brandfetch」のページからインストールします。

プラグインに関する説明と詳しいインストール方法はこちらの記事を参考にしてください。

Figmaのプラグインのインストール方法と使い方

今回はFigmaでプラグインをインストールする方法と使い方を解説します。あわせて、当サイトで紹介している便利なプラグインと使い方を解説したプラグイン集もまとめていますので、参考にしてみてください。 ... 続きを読む

figma-how-to-use-plugins

2. プラグインを起動してブランド・アセットを参照する

Figmaのファイルを開いて、プラグインがインストールされているか確認しましょう。

右クリックでメニューを開き「Plugin」から「Brandfetch」をクリックすると、プラグインのポップアップウインドウが開きます。

開いたら、検索ボックスに検索したいワードをテキスト入力して検索すると、該当するブランドが表示されます。

brandfetch2

「Figma」で検索した場合、上のように figma.com のサイト上のアセットが表示されます。

アセットをドラッグしてそのままFigmaのエリアにドロップすると、SVGや画像といった形式でオブジェクトとして利用することができます。

brandfetch1

同じように「apple」で検索した場合、apple.com のアセットが表示され、ロゴデータのSVGを呼び出すことができました。

brandfetch3

ちなみに、当サイトを検索するとどうなるのか試してみました。

結論としては、当然ながら誰も検索していないサイトになるので、少し読み込みがされたのち、wentz-design.com のアセットが呼び出せる状態になりました。

推測になりますが、ウェブサイトのURLが検索された段階で、データが存在しなければサイトからアセットを取得して自動的に登録しているのだと思います。

そして、Brandfetch のウェブページ上にも、当サイトのブランド・アセットのページが生成されていました。以下が実行の結果生成されたサイトです。

https://brandfetch.com/wentz-design.com

おまけ:Brandfetch にウェブサイトを登録する

上記の通り、ウェブサイトが公開されており検索されると自動でアセットが登録される挙動なので、場合によってはサイト運営者の意図に反したアセット登録がされたりされるケースが出てくるのかなと思いました。

幸い(?)サイトの所有権を主張する方法と、登録されているアセットを修正提案することができるようでしたので、その方法を紹介します。

サイトの所有権を主張する

まず、該当のサイトをブラウザで開くと、左側のサイトプロフィールのエリアの一番下に以下のようなメッセージが表示されているエリアがあります。

Do you work in this organization? Claim its brand profile today

直訳すると、「あなたはこの組織で働いていますか?このブランドのプロフィールを今すぐ登録してね」と言うような意味ですね。

このエリアをクリックすると、サイトと同じドメインのメールアドレスを入力するように促すダイアログが表示されます。

ここに、サイトと同じドメインのメールアドレスを入力すると、そのメールアドレス宛に確認メールが送信される仕組みです。

brandfetch4

以下がその確認メールの例になります。

brandfetch5

上のメール内の「Complete Verification」というボタンリンクをクリックすると、以下のページに遷移します。

brandfetch6

これで所有権の確認の手続きは完了です。ちなみに、直後にブランド・アセットのサイトを更新してもすぐには適用されませんでした。

後日、特に通知もないままサイトを確認したところ、twitterの公式アカウントのマークに似たアイコンがサイト名の横に追加されていました。

brandfetch7

ちなみにこのアイコンが表示されたことによって、直接編集できるようになるとかそういったことは何も起きませんでした。この手続きをする価値がどれくらいあるのかは正直よくわかりません。

登録されている情報やブランド・アセットを修正提案する

サイトに自動で登録されている内容がサイト名が「うえんつ」だったりアイコンが私のプロフィール画像だったり直したい部分があったので、右下の「Suggest an edit」ボタンから内容の修正提案を送ってみました。画像は別のサイトの例です。

brandfetch9

ボタンを押すと送信のダイアログが表示されます。

サイト・ブランドの名称や、登録したい画像ファイルやテキストのフォント情報などを入力することができます。

最後に、サイトと同じドメインのメールアドレスを入力して送信します。

brandfetch10

後日、アイコンや一部の要素は修正提案を送った内容に置き換えられていましたが、サイト名がいまだに「うえんつ」だったり提案が適用されていない部分もあり、この辺りの挙動は謎が深まるばかりでした。

どうやらブランドを管理する側としては、APIキーを使用してアセットを最新の状態に保ったり管理する機能が提供されているようで、完全にコントロールするには別途APIキーを取得して管理・運用する必要がありそうです。

詳しくはこちらのドキュメントを参考にしてみてください。


いかがだったでしょうか。

カンプデータとして気軽にアセットを検索できるのは便利そうですが、管理側としては少々不親切に感じるので、今後の改善に期待したいと思います。

言うまでもないですが、ブランド・アセットの無断使用には気をつけて利用しましょう(2回目)。

この記事を読んだ方におすすめの記事

Figmaで簡単にコンテンツマーケティング用のバナー画像を作ってみよう

今回は、商品紹介やイベントの告知など、顧客にリーチするためのコンテンツマーケティングで利用するベーシックなバナー画像(ヘッダー画像)を、Figmaを使って作ってみようという試みになります。 ... 続きを読む

figma-basic-banner-design

Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法

今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、サービス紹介用の素材作りにおすすめです。 ... 続きを読む

figma-mobile-and-destop-mockup

Figmaで無料のアイコン素材集を利用する方法

今回はFigmaで無料のアイコン素材集を利用する方法を紹介します。今回紹介するものはすべてFigma上で公開されているものなります(利用条件はライセンスによる)。アプリケーションのUIやWebページの装飾など様々なシーンで幅広く活用できますので、ぜひチェックしてみてください。 ... 続きを読む

figma-how-to-use-icons

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告