-
ワンクリックでアバター写真を取得する。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サイトに配置してはいけない。詳しくは利用規約を確認してほしい。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
Adobe XDのレイヤー名をリネームする。「Rename it」プラグインの使い方
コーディングにおいて、まず取り組むことといえば、画像の書き出し作業だろう。この作業がリズムよく実施できるか否かによって、その後の進捗に影響するといっても過言ではない。少なくとも私は、その認識をもって一気にクリアしたい工程である。 Adobe XDの場合、書き出したファイル名は、レイヤー名に関わる。レイヤー名がそのままファイル名になるということだ。レイヤー名が未変更状態だと、「長方形 xxx」だとか「線 xxx」などの名称が反映されている。 したがってファイル名は、命名規則に沿った名称に変えなければならない。書き出し作業を面倒に感じるのは、きっとこの名前を付けて保存する工程があるからに違いない。 レイヤー名が命名規則に沿ったものであれば、苦労はないが、そこはマークアップエンジニアの守備範囲であることが多い。コーディングの都合で、グループにしたいレイヤーや分割して書き出したい場合が考えられるためである。 それではどのタイミングでリネーム作業をすれば良いのか？いかに効率よく行えばよいかは、そのときの都合や好みによるため一概に何がよいとは言い難い。状況にあわせて書き出しウィザードで名前を付けて保存したり、XD内のレイヤー名を修正したりすればよい。だがそのどちらもシームレスに行えるものではないと感じてしまう。 そこでもうひとつの選択肢になり得る「Rename it」プラグインを紹介したい。 Rename it プラグインについて Rename itは、レイヤー名リネームをサポートしてくれる。アートボード内のオブジェクト操作に関連してリネームが行えるため意識を逸らすことがない。 特徴 レイヤー名を変更できる 命名パターンが用意されている（レイヤー名、連番、アルファベット、etc.） レイヤー名を置換できる 使い方 Rename itは、ダイアログ操作によりリネームを行うことになる。まずはプラグインをインストールしてもらいたい。 インストール Rename itをインストールするには、Adobe XDツールバー「プラグイン」>「プラグインを見つける…」をクリックするとプラグインウインドウが開く。 つづいて、ウインドウ内の入力フォームに「Rename it」を入力すれば、対象プラグインのみリストアップされるはずだ。インストールボタンをクリックして完了させよう。 リネームする場合 オブジェクトを選択 ショートカットキーを押下「⌃+⌥+R」 リネーム文字列を入力 Renameボタンをクリック アートボード上のリネーム対象オブジェクトを選択した後に、ショートカットキー「⌃+⌥+R」押下。するとリネームダイアログが表示される。 Name フィールドに文字を入力して、Renameボタンをクリック。以上でリネーム完了となる。果たして、レイヤー名が変わっていることを確認できる。 置換する場合 複数オブジェクトorアートボードを選択 ショートカットキーを押下「⌃+⌥+⌘+R」 Find&Replaceに文字列を入力 Renameボタンをクリック 複数のオブジェクトを選択するか、アートボードそのものをアクティブにすることで置換対象として認識される。選択が済めば、おもむろにショートカットキー「⌃+⌥+⌘+R」を押下して構わない。置換ダイアログが表示される。 Findに検索文字列、Replaceに置換文字列を入力する。それにより選択中のレイヤーから文字列がマッチしていれば、一括で置換が完了する。テキストエディタの文字列置換と変わらない感覚だろう。 まとめ 「Rename it」プラグインによるリネーム方法をお伝えしてきたが、作業フローに組み込むに足る内容だっただろうか。 Rename itでも、やはり完璧なシームレスとはいかないが、アートボード操作中にリネームを行える。僅かでもフローが連動していれば、効率UPにつながるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
Adobe XDにGoogleマップを表示する。Maps generatorプラグインのススメ
Webサイト制作で地図コンテンツを配置することも、少なくない。というよりコーポレートサイトには欠かせない要素のひとつといえる。そしてそのほとんどがGoogleマップで、お客様におかれてもGoogleマップ以外の選択すら考えていないほど確実にである。 私は、モックアップ作成時に地図コンテンツ配置が要求された場合、往々にしてGoogleマップのキャプチャを用いるわけだが、この工程を煩わしく感じてしまう。ブラウザでGoogleマップを開き、該当プレイスを表示する。大きめにキャプチャして、対象オブジェクトにクリッピングマスクをかける。そして表示位置を調整する。面倒くさい。 工程を増やすことで研ぎ澄ましていく類のものと違い、制作の現場では可能な限り無駄を省かなければならない。とはいえもちろん省くなかにも、見極めが大切だと考えている。 たとえば、デザイン装飾のクオリティを上げる工程は重要なことであり、省いてはならない。その一方で、画像を書き出す作業は、省略できそうなものだ。 この違いには、なにがあるのだろうか？ 私の理解では「ゴールが見えていて、そこまでの過程が面倒だと感じるか否か」であるが、あなたなりの理解でこのエントリーを読み進めていただけると幸いだ。 さてGoogleマップをアートボード上に表示する作業は、間違いなく省きたい作業に該当する。あなたがAdobe XDで作業しているならば、この工程を省略できるプラグイン「Maps generator」を紹介したい。使えるかどうか検討してみてほしい。 Maps generator プラグインについて Maps generatorは、Adobe XDアートボード上にGoogleマップを表示する効率UPを図れるプラグインだ。このプラグインは、Google Maps APIを使用して地図を生成している。したがって、Webブラウザに表示する場合と遜色がないはずだ。 特徴 地名、または緯度経度を入力するだけで取得できる マップタイプやズーム値を変えられる ロケーションピンの有無を選べる 使い方 Maps generatorは、ダイアログを操作して使うタイプのプラグインとなっている。まずはMaps generatorプラグインをインストールしてもらいたい。その手順はとても簡単だ。 インストール インストールの手順を示していこう。まずはAdobe XDのツールバー「プラグイン」>「プラグインを見つける…」をクリックしてほしい。 果たして、つぎのモーダルウインドウが開く。モーダルウインドウからプラグイン検索を行おう。入力フォームに「maps generator」と入力する。すると対象プラグインの「Maps generator」が表示されるはずだ。インストールボタンをクリックして完了させよう。 マップを表示する まずはアートボード上に、マップ表示用のオブジェクトを配置する。 オブジェクトがアクティブな状態で、ツールバー「プラグイン」に「Maps generator」が表示されていることを確認できたらクリックしよう。 果たして、つぎのダイアログが開く。ダイアログには、 Location Zoom Level Map Type Location Pin Enter Styles json の設定項目が設けられている。Locationに目的地、あるいは緯度経度を入力。Zoom Levelでズーム値を変更。Map Typeで地図の種類を選択。Location Pinでピンの有無を切り替え。Enter Styles jsonでマップに装飾を与える。設定が決まったら「Generate Map」ボタンをクリックする。 果たして、Googleマップが表示される。ご覧のとおりオブジェクトぴったりにGoogleマップが配置されてるのがわかると思う。 これにてMaps…
-
Adobe Premiere cs5.5 が使えなくなったのでiMovieで動画編集してみた
こんにちは、日々心の平穏を求め続けているikaidaです。 さて突然ですが、皆さんは動画編集にどんなソフトを使用していますか？ 動画編集は難しそうなのでやった事ないって方向けとは言いにくいですが、何かのきっかけになれば幸いです。さて、いつも私は自由度が高くて慣れると使いやすいAdobeさんの Premiere cs5.5 を使用していたのですが、macOS Mojave にアップデートしたばかりに起動はするけど使い物にならないポンコツ状態になってしまいました。 Mojave アップデートによるAdobe cs系の不具合 何が起きたかを簡単に言いますとmacOS Mojave自体が Java 6をサポートしておらず、Adobe CSシリーズが使えない状態となります。(サポート外で動かす方法はGoogle先生に聞いて頂ければと思いますので割愛しますが・・・) そんな感じで、無理やり動かしたものだからでますよね不具合？ 私のAdobe Premiere cs5.5 に起きた悲劇CS系の不具合で一番有名かな思うのは、終了時にクラッシュしながら終了すると言うワイルドな終了方法ですが、他UIパネルのアイコンがバグって何だかわからなかったりと結構あります。 そして、Premiereさんの場合はそんなあまっちょろいものじゃあ無かったのです！ 編集内容の確認や位置調整などを行う「プログラムモニター」が編集モードにすると何も映らなくなるという素敵な不具合！（わかりやすく例えるなら福笑い状態） なんとか治るかなと調べてみたけど・・・時間もないし諦めて別のソフトを使う事に iMovieを使ってみた そんな訳で手軽に使えてそれなりなモノが作れるものはないか（できれば無料アプリで）と調べていたら、iMovieが直感的操作で使いやすい上に無料と見かけコレだ！と、早速インストール！ 作成・編集手順を簡単に説明しますと 使用する素材(動画や画像)を素材置き場またはタイムラインにドラッグ＆ドロップ プレビューに表示されるのを確認しながらトリミング編集 タイムラインで長さや表示順などを調整 タイトルやトランジションを必要に応じて挿入 と、非常にシンプルで使いやすい！ iMovieの不便と感じるところ ・タイトルがテンプレしかなくテロップとして自由に配置できない。 ・トランジションがメインレイヤーにしかかけられない。他にマスクがかけられない等細かいものがありますが作成上一番困ったのは上記２点でした。 テロップの対処法前述の通りそれなりにテンプレートが準備されてはいますが位置・スタイルが固定と痒いところにギリギリ手が届かない感じで非常にもどかしかった為、何か良い方法はないかとGoogle先生に尋ねてみたところ、 『画像作成ソフトなどを使用し動画サイズでテロップを自作！』 と言う原始的かつ的確なアドバイスを頂きました。 早速XDを使用しテロップ量産開始！ 作成したテロップ画像を入れた場合なぜか「KenBurns」が適応され勝手にアニメーションされる場合があるりますので「フィット」に戻す事を忘れずに！ もう一つの問題だった、サブレイヤーにトランジションは？と言うと・・・機能的にできないので諦める！ まとめ Premiereほどの自由度はないですが、切り貼り程度のこだわらない動画を作成する場合には操作も簡単で作りやすいのでオススメです。ただ、凝った動画作成したい場合にはそれなりに工夫が必要となり出来る事と出来ない事の見極めは必要かなと。 今回はかなり駆け足での記事となりましたがもう少し詳しく知りたいなどあれば次回はもう少し掘り下げた感じで書ければと思います。
-
デザイナーwって
若かりし頃、「デザイナーw」って思っていました。 あの当時、デザイン科といえばおしゃれなかっこをしていて、iPodに刻印しちゃったり、イケイケなイメージ。 我々絵画系とは完全に別の世界の住人だと思っておりました。（筆者は絵画系出身のため） 作るものはきれいですが、心が持ってかれるような感覚になる作品はなく（ろくに見ていなかったかも・・）、デザインってなんだろう、デザイナーってなんだろう・・と。絵画って、自分の気持ちや考えを表現することができるので、デザインの人たちは、なんで自分を表現しないのだろうと常日頃考えていたものです。 さて、あっという間に16年の月日が過ぎ、現在開発会社でデザイナーをしている私wです。 むしろwの位置は変わり、「現在開発会社でデザイナーをしている私wです。」でしょうか。自分に対してのwポイント増加中ですがデザイナーにはなくなりました。 なぜ、「デザイナーw」じゃなくなったか 昔って、「ものつくり」=「自己表現」だと思っていたんですね。 「絵画って、自分の気持ちや考えを表現することができる」って言いましたが、逆を言うと外部っていなくても成立するんです。（モチーフや表現先としてはいるかも） だから、最大限自分の心をさらけ出したり擦り切らせたり、傷ついたり喜んだり、そういうMax値が必要で、ものづくりと作品作りはイコールではなく・・。「作品作り」=「自己表現」ではあるかもしれないけど。 で、デザインでいうものつくりはなんだろうってーと、 「ものづくり」=「実現」 デザインって、他者ありきなんですよね。むしろ、他者しかいないw。Max値とか出されると困っちゃうw。とても客観的である必要があります。 自分は出さず、他者と他者をつなげて実現するのがむしろお仕事というか。 例えば、お客さんと開発者をつないだり、サービス提供者とユーザーをつないだり、きれいに・おしゃれにレイアウトすることは仕事の一部分でしかなく、大部分はわかり易さや使いやすさを考えたり、ひととひとを繋ぐことが重要で。ただ繋ぐだけなら透明人間になればいいんですが、むしろ通訳したり変換したり、改良したりしながら繋いでいくので結構骨が折れる・・。 そんなことを日々やっていると 「デザイナー」って面白いな、と思うようになりました。 いろんな情報に関わったり、いろんな目線を体験したり、いろんなものをつなげたりできるので、自分は開発会社のデザイナーに向いているのかもしれません。 ぜひ若いデザイナーの方にはデザインを広く捉えて欲しいなと思います。 ビジュアルをきれいにすることが好きでデザイナーになる人も多いと思いますが、決まったやり方で整形するだけならロボットやオペレーターで十分かもしれません。自分にしかできないやり方を見つけれれば、長く続けられる仕事だと思います。 あ、そうそう、「ものづくり」=「実現」のスタンスでやる場合の大きな注意事項があります。この場合「誰か」の実現したいことを表現することが多くなるとは思うんですが、ここで、「人のせい」にするのは絶対にダメです。あくまで、「誰かのために、自分の能力・思考・技術を使って、責任を持って表現する」のがデザイナーです。ここんとこ履き違えるとこじらせて人間社会で生きていけなくなるのでお気をつけください！！！ 実際、考えと基礎力と吸収力があれば、どうにかなるw。 これらは私の「デザイナー像」です。皆さんもぜひ、自分の「デザイナー像」見つめて見てください。 以上、そんなお話でした。
-
入稿データの良し悪しは気配りで決まる！マークアップエンジニアが考える最高のデザインデータ
よい入稿データとは、どのようなものだろうか？ マークアップエンジニアにしてみれば、コーディングしやすいデータに尽きるのだろう。コーディングしにくいデータよりは断然よいに決まっている。工数は短縮できるし、ミスも少なくなる。時間の余裕がソースコード見直しに寄与するわけだ。 それでは「コーディングしやすい」とは、どのようなものか？ 私は、ひと目で構造を読み取れるデータと考えているが、いかがだろうか。構造がシンプルであれば、HTML/CSSが最適化しやすい。ソースコードの構造化ができれば、セマンティックWebに関わる定義に矛盾が生じにくい。さらにコンポーネント・ベースの UI 開発を取り入れることで、運用性があがる。つまりメンテナンス性の担保につながるわけだ。 私はフリーランス時代に、多くのコーディング案件を受託してきた。デザインデータを入稿してもらいHTML/CSSコーディングを行うといった内容だ。JavaScriptによるリッチコンテンツを加えたり、メールフォームの実装だったりもする。 制作会社でコーディングを担当する場合と違い、数多くのデザイナーのさまざまなデザインデータを預かる。癖も違えば、能力も違う。それでも柔軟な対応が求められ、違和感を覚えながらもマークアップをすることも少なくなかった。なかにはパワーポイントによるデザインデータの入稿を申告するケースもあった。きっとデザインと呼べるものではなかったに違いない。 そんななかでも、もっとも素晴らしかったデザインデータをご覧に入れたい。 もしかしたら学べるところがあるかもしれない。画像やバナー、テキストはダミーに差し替えている。その点はご容赦いただきたい。 入稿データ まず目につくことといえば、デザイン内に含まれた指示だろう。これはPhotoshopのレイヤーを活用して表示している。 実際には、これに加えて指示書も添付されていた。とても用意周到なお仕事だと関心したことを記憶している。 指示内容 指示内容には、つぎの２点で メインビジュアルのローテーション指示 デバイスフォント記述箇所の指示 以上のことが示されている。 メインビジュアルのローテーション指示について まずメインビジュアルのローテーション（スライダー）は、参照先を提示している。 これは動作イメージの共有を図ってのことだろう。これができるのは、デザインの段階で明確に動作までを考慮した設計あってのことだと思う。 そして動作イメージにおいて、文章で説明しても伝わりにくいことから参照先を示したわけだ。たとえばスライダーの場合、 一枚ずつ切り替え スピードはゆっくり このような指示があっても漠然としていてよくわからない。すでにイメージしている動きに近いものがあるなら参照先の提示がもっとも効率がよいだろう。 コーディングデータを確認したらイメージと違ったなんてことを未然に防ぐことできるはずだ。 デバイスフォント記述箇所の指示について つづいて、デバイスフォント記述箇所の指示は、透過オーバーレイで提示している。 デバイスフォント指示には、アンチエイリアスを外して示すパターンもある。しかしアンチエイリアスを外すと、カクカクした見栄えからクライアントチェックで不評を招く恐れもあって、およそアンチエイリアスはかけたままが多い印象だ。 そんなことから指示書に記されるわけだが、これも結局文章による説明となってしまい齟齬が発生しやすい。その点、デザイン上で示せるのならばベストといえる。 デザインデータを見ながら指示書を確認する作業は、非常に負荷のかかる行為である。このデータの指示方法には唸らせてもらった。 まとめ デザインとはWebページのレイアウトだけに気にかけていればいい、という類のものではないことを自覚させられたデータだった。 Webページのデザインは言わずもがな素晴らしく、レイヤーの整理、各所の指示内容を明瞭にするなど気配りが感じられたと思う。 デザインに限らず資料作成の際は、細部にまで気配りを加えることが必要だと学ぶことができるデータだったのではないだろうか。