ワンクリックでアバター写真を取得する。Adobe XDプラグイン「UI Faces」の紹介

コーポレートサイトやブログ、ランディングページにおいても、ユーザーを紹介するUIは珍しくない。コーポレートサイトなら、事業主や代表挨拶の項目が考えられる。ブログなら、記事を投稿するライター説明の項目が考えられる。ランディングページなら、イベントのスピーカー紹介の項目が考えられる。

このように多くのケースでプロフィール項目は必要とされている。そしてこれらプロフィール項目には必ず対象人物の写真が配置されるわけだが、「モックアップ制作時にはまだ入手できていない」なんてことはよくある。

そんな場合は、枠だけ設けたり、ダミーの写真を使ったりと対策する。ところが、枠だけだと雰囲気もクソもなく、クライアントに伝わらないこともある。無関係な風景画だと誤解されてしまう恐れもあって、いちいち人物画を探す。これが手間になっている。

このエントリーでは、Adobe XDプラグイン「UI Faces」でアバター追加方法を紹介したい。

UI Faces プラグインについて

UI Facesは、アバター写真を提供するAdobe XDプラグインだ。UI Facesで提供される写真は、MicrosoftのFace APIにリクエストすることで取得している。ただし、当該プラグイン作成元の「UIFaces.co」が保有するものではない。

UI Facesをインストールするには、Adobe XDツールバー「プラグイン」>「プラグインを見つける…」をクリックするとプラグインウインドウが開く。

つづいて、ウインドウ右上の入力フォームに「UI Faces」を入力すれば、対象プラグインのみリストアップされるはずだ。インストールボタンをクリックして完了させよう。

アバターを表示したいオブジェクトを選択にして、Adobe XDツールバー「プラグイン」>「UI Faces」をクリックする。まもなく左メニューが切り替わる。「Apply」ボタンをクリックすれば、選択していたオブジェクトにアバターが追加される。

必要に応じて「年齢、性別、感情、髪の色」フィルターを活用するとよい。

Adobe XDプラグイン「UI Faces」の紹介だった。ワンクリックでアバター追加できるところを見てもらったが、いずれの写真も個人、非営利的な閲覧のみを目的としているため、Webサイトに配置してはいけない。詳しくは利用規約を確認してほしい。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。