コーポレートサイトやブログ、ランディングページにおいても、ユーザーを紹介する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サイトに配置してはいけない。詳しくは利用規約を確認してほしい。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
