見出し画像

[メモ]AdobeMaxJapan2018で聞いてきたこと

AdobeMaxJapan2018の各セッションに参加した際のメモです。
殴り書きなので、ご了承ください。

1.KEYNOTE
1-1.はじめに
・貂明朝テキストが新しくAdobeFontsに追加される

仕事をスピードアップ
・多くのクリエイターが反復作業が多く、単純作業をAIに任せたいと思っている

クリエイティビィティの解放
・ツールの連携を取る
・デスクトップツールからデバイスを跨いで作業ができるようになっていく

新たな表現への挑戦
・音声やARなどの表現が今後重要になっていく

1-2.Photoshop
・編集→コンテンツに応じた塗り潰し
・塗り潰しで参照しない要素をユーザがコントロールできるようになった

・書式→マッチフォント
・選択範囲内のテキストで近いフォントをピックアップしてくれる

・シンメトリー機能が追加
・簡単にシンメントリーのデザインを描画可能になった

・Dimensionと組み合わせるとロゴを3D空間に配置した時のイメージを確認できる

1-3.Dimension
・PSDデータをドラッグ&ドロップするだけで3Dオブジェクトにテクスチャとして貼り付けられる
・視点も自由に変えられる
・カメラのブックマークで指定位置の保存ができる

・3Dシーンを公開からブラウザから確認できるようになる
・視点の自由な変更やコメントなどが可能

・様々なフォーマットに対応できるようになった
・レンダリング性能が向上

1-4.Illustrator
・フリーグラデーションの機能が追加
・自由にグラデーションの位置を設定できる
・ポイントだけでなくラインのグラデーション設定が可能なので、例えば円の縁に沿ったグラデーションなどが掛けられる

・オブジェクトを一括選択で、シンボル化していなくても形が同じなら一括編集が可能になった

1-5.XD
・PC/SP/Tabのデザインをそれぞれ作るのは面倒
→アートボードでレスポンシブリサイズ機能をONにすると縦横比を維持してアートボードを広げられる

・シンボル化したオブジェクトが外部のXDファイルと連携可能になった
・スタイルガイドファイルに変更をかけるとデザインファイルも同じように変更がかかる

・マイクロインタラクション
・アニメーションを効果的に使いUXを向上させる手法
・プロトタイプからアートボードを紐付けて、自動アニメーションを選択する
・ダイナミックなアニメーションが簡単に作成可能

・拡張用APIが公開されているので、JSでプラグインの開発が可能になった
・インストールもアプリ内から簡単にできる
・様々なプラグインが公開されており、スプレッドシートにあるデータを流し込んだりできるものなどもある

・音声UIを付けられる
・プロトタイプからワイヤーを引くときにトリガーにVoiceを選択
・音声コントールのプロトタイプをノンプログラミングで作成可能になった
・現在は英語のみだが、近日中に日本語にも対応する予定

1-6.LightroomCC
・iPadProと組み合わせると効率的に作業できる
・AIを使い、写真の自動補正が可能

・ジオメトリーから自動であおりの歪みを修正できる

1-7.PremiereRush
・ローカル、CC、Dropboxから素材を選択可能
・ピクチャーインピクチャーで映像の中に別の映像を埋め込める
・カラープリセットも豊富

・モーショングラフィックステンプレートを利用可能

・音声が入ったときにBGMを小さくするなどの調整もAIが自動で行ってくれる

1-8.PremierePro
・カラーマッチで青空を夕焼けに変えるなどの調整が簡単にできる

・特定の色のみを変更可能になった

1-9.AfterEffects
・動画のコンテンツに応じた塗り潰しが実装予定

1-10.iPad版Photoshop
・2019年にリリース予定
・フルバージョンのPhotoshop
・数ギガサイズのファイルでも軽快に動く
・ネイティブなPSDファイルを開くことができる
・筆圧感知

1-11.Gemini
・iPad用ドローイング、ペインティングアプリ
・たくさんのブラシが利用できる
・パネルの位置は柔軟に変更可能
・ベクターブラシも使用できる
・ベクターとラスターを組み合わせることが可能
・ライブブラシでは、水彩画などで水の量を調整できたり、描いた色同士がリアルタイムで混ざり合う
・油彩画も本物の絵の具のようなテクスチャで描ける
・2019年リリース予定
1-12.Aero
・ARにより画面の制約から解放される

・PSDファイルをドラッグ&ドロップでAR上に配置できる

・ディメンションで作った3DファイルもAeroからAR上に配置できる
・コードを書かずに実現可能

1-13.まとめ
・AIを使い時間のかかる作業を短縮化し、ボトルネックを排除していく

2.Adobe XD最新情報!新機能の使いこなしと今後の進化

資料
スライド1
スライド2
デモファイル
Auto Animate UI Kit
Responsive Resize Kit

2-1.はじめに
・CC連携が可能
・PSD、AIファイルを読み込める
・AEに書き出しできるようになった
・1年間で60以上の機能が追加

・日本でXDは人気のあるツールになった

2-2.レスポンシブリサイズ機能が追加
・縦横比を維持したまま要素を引き伸ばしたりできる
・横への引き伸ばしが強い
・デフォルトは自動だが、手動に切り替えることができる
・手動で要素の幅や位置などを固定できる
・アートボードの幅を切り替える時に固定した要素のみピンクの線が出てくる

2-3.リンクされたシンボル
・ファイルを跨いでシンボルの変更や配置が可能
・スタイルガイドを外部ファイルにしても形骸化しない
・スタイルガイドが変更されるとデザインファイルにも反映される
・リンクシンボルはテキストは自由に編集可能
・リンクシンボルの形などを変える場合は、リンク元のファイルのシンボルを変更する必要がある
・複数の外部ファイルからリンクしていても、変更したもののみが反映される
・外部ファイルは絶対パスで管理されている
・ローカルに置くか、共有のネットワークドライブに置く
・リンク切れなどの対処は近日中に出る

2-4.自動アニメーション
・アートボードは2つ以上必要
・アニメーションを設定していると要素をアートボードの要素を外に出しても、アートボード内に所属したままになる
・ハンバーガーメニューのアニメーションなども作れる
・ペンツールか線ツールで書いたものをパスにしないと上手くアニメーションしないこともある
・複数のアートボードを繋げてアニメーションさせることができる
・複数繋げる場合は、2つ目以降のワイヤーはトリガーを時間にする
・始点の位置やパスの数が異なると上手くアニメーションしないことがある

2-5.プラグイン
・GoogleSheets
・改行が入力されていても問題なく文字が挿入される
・スプレッドシート以外に、CSVデータも流し込める

2-6.今後の進化
・1つのファイルを使って、複数人で作業できるようにしていく
・コードの書き出しが行えるようにしていく
・修正依頼、反映の円滑さの向上

3.Dreamweaverで学ぶBootstrap 4!Adobe XDカンプからレスポンシブWebページを世界最速コーディング

3-1.はじめに
・XDカンプからWebページを作る
・カンプを見つつ、コーディングを行う必要がある
・Bootstrapを導入し、素早くコーディングを行っていく

3-2.Bootstrapとは
・12カラムのグリッドレイアウト
・jquery.js、bootstrap.js、popper.js、bootstrap.cssが最低限必要
・Dreamweaverでは自動で作ってくれる
・ブレイクポイントは5つ
・指定なし、sm、md、lg、xlでブレイクポイントを設定
・ブレイクポイントを設定する要素を決めておくと良い
・最大12カラムでカラム数は自由に変更可能
・外を.containerで囲う
・.rowで行、.col-XX(Prefix)-X(カラム数)で列を指定
・カラム間は30pxの余白、カラムの両端は外に15pxの余白
・次に大きなPrefixを指定するまで、そのレイアウトが適用される
・classを指定しなければ1カラムになる
・コンポーネントごとに決められたclassを指定する

3-3.コーディングしやすいXDカンプの作り方
・コーディングを考えて作成する
・グリッドに合わせたガイドを準備する
・各カラムの最大幅で作成した方が良い
・画面が小さい時はカラム数を減らしてガイドを作成する
・XDでBootstrap対応のガイドが公開されている
・XDの[グリッド]-[レイアウト]を使用すると1px合わないことなどがある
・自作したガイドはロックして背面に配置し、不要な時は非表示にする
・リピートの作成にはリピートグリッドが便利

・コーディング担当者にルールを伝える
・Bootstrapをベースに作っています。。。など
・レイヤー名にコンポーネント名を付けると良い
・テーマカラーや文字スタイルに要素名やコンポーネント名を付けてアセットに登録しておくと良い
・作ったカンプはデザインスペックで共有する
・素材はCCライブラリへアップし共有すると良い

3-4.DreamweaverのBootstrap対応機能
・新規ドキュメントからBootstrapを組み込んだ状態のHTMLを作成できる
・パネルからコンポーネントをHTMLに挿入できる

3-5.グリッドレイアウト応用編
・グリッドレイアウトを微調整するclassが4から追加された
・行内カラムの余白を無しにするclassが追加された

3-6.独自CSSを加える
・classを新規に追加した方が、どれが修正したstyleか分かるので良い

3-7.デバイスプレビュー
・PCにSPを接続することで実機に映して確認できる
・PCとSPを同じネットワークで接続する
・編集内容がリアルタイムで反映される

3-8.Sassを使ったカスタマイズ
・Sassを使えば、変数などを用いて繰り返しの多いCSSコードを管理できる
・Sassで作成し、CSSにコンパイルする
・Sassで作られたBootstrapが提供されている

4.イマドキのUIデザインには欠かせない! マイクロインタラクションを作るためのズルいCC活用テクニック

4-1.マイクロインタラクションの役割
・アイコンなどのちょっとした動き、メニューの動き、画面遷移時のエフェクト
・ちょっとしたインタラクションという考え

・取るに足らない瞬間を喜びに変える
・全体にも細部にもこだわる
・細部こそ製品を作り上げる
・突然の変化は現実には存在しない
・ユーザの行動の結果を視覚化することに役立つ

4-2.CC活用テクニック
XD:自動アニメーション
・異なる画面の要素の動きをスムーズに繋げる
・レイヤー名などで紐付いてモーフィングする
・画面遷移の動きも自動アニメーションで作れる
・次の画面の要素を透明度0で入れておくとフワッとした遷移アニメーションが作れる

AfterEffects:エフェクト、モーションブラーなどラスター系の処理が得意
・CGを使ったようなアニメーションが作れる
・XDからAEに書き出すことができる
・要素ごとに異なるタイミングでアニメーションできる

Animate:ベクター系の機能が充実している
・スクリプトも組み込める

・XDは簡単に使えるがアニメーションの精度は普通
・AfterEffects、Animateは難しいが、アニメーションの精度は高い

4-3.エンジニアへの共有
ソフト内でアニメーションを定義
→エンジニアがアニメーションをしっかり理解しないといけない
動画として書き出す
→容量が大きくなってしまう
スクリプトとして書き出す
→容量が小さくデザイナーの意図通りに実装できが、XDでは書き出すことができない
・プラグインを使いスクリプトを出力
・デザイナーとエンジニアの分業が可能
・プロジェクトごとに、どの技術を使うか選定する必要がある

AfterEffects + Bodymovin:ベクターのみ、HTML5 + SVG、iOS/Android
Animate + HTML5 Canvas:HTML5 Canvas
Animate + SnapSVG:HTML5 + SVG
Animate + Pixi.js:WebGL

4-4.アニメーション制作の理解
・動きに緩急を付ける
・より現実に近い動きにする
・伸縮、傾斜、回転を加えることで有機的な動きを作れる
・マウスオーバした時とマウスアウトした時のhoverの動きを変えてみる
・マウスオーバ時の動きを早くすることでレスポンスの速さを演出できたり、マウスアウト時に動きを遅くすることで余韻を与えるなどの提案ができる
・プログレスバーは停止させず、常に動かし続けた方が良い
・はじめはゆっくり始め、最後に行くほど早くするとスピード感を感じられる
UI Movementなどが参考になる
・グラフィックはシンプルで良い
・緩急の工夫がポイント

4-5.事例紹介
・Creative Icons(近日公開予定)

4-6.インタラクション不要論
Flashは。。。
・サイトごとに異なるUIを提供しているので、ユーザはサイトごとに学び直す必要がある(ヤコブ・ニールセン)
・不適切な演出
・ローディングありきの設計

上記を踏まえて。。。
・コンテンツの種別でインタラクションの役割は異なる
・没入型コンテンツ:世界観の醸成にアニメーションが役立てる
・情報提供型コンテンツ:UIの理解にアニメーションが役立てる
・ゴールとするUXを見据える
・ユーザの感受性は様々なので、担当者の温度感だけで判断しない
・UIデザイナーこそマイクロインタラクションの理解が必要
・ページ遷移時のアニメーションなど、実装が難しいものほど必要性が高い
・難しいものはリリース後に徐々に実装していくのも良い

・ユーザへの選択肢を設けるのも1つの手
・アニメーションを切れるようにするなど
・ソーシャルゲームにて、アニメーションをOFFにする機能を実装したところ、ユーザから好意的な反応が寄せられた
・UIのアニメーションは学ぶまでは必要だが、学んだ後はそこまで必要ではなくなることもある

4-7.今後のマイクロインタラクション
・アニメーションを定義したデザインシステムが増えている
AppleのHuman Interface GuidelinesGoogleのMATERIAL DESIGNなどが参考になる
・何となく組み込むと実装に差異が出てくる
・接続型アニメーションが今後のトレンドとして増えていくのではないか
→画面遷移するときに要素のつながりを意識して画面を切り替える手法

4-8.まとめ
・CCは便利!
・インタラクションはシンプルなテクニックの集まり
・本当に必要なインタラクションか考える

5.クライアントのビジネスも加速させるAdobe XD活用のディレクション

5-1.設計/制作チームの業務効率改善
・スタッフによって使うアプリがバラバラだった
・ツールを統一化することで作業の引き継ぎや分担ができ、作業効率も改善できる
・半年で業務量が倍増し、業務時間を削減できた
・業務コミュニケーションがスムーズになった
・打ち合わせが密にできるようになった
・仕事の質の面で良い効果があった
・非クリエィティブ業務でも利用拡大

5-2.個人やチームだけでなく、組織にXDを導入すると仕事はどう変わっていくのか5-2-1.UXプランナー/UXストラテジストの場合
業務内容は。。。
・クライアントのビジネスに貢献すること
・コミュニケーション戦略を考える
・理解。共感。ファン化
・サイト戦略、オウンド戦略

・エンドユーザを知る
・クライアントの戦略、顧客のニーズ、競合他社に対する強み/弱み
・ビジネスヒアリング、ワークショップ、アンケート/インタビュー、サイト分析、データ解析

・コミュニケーションを考える
・ターゲットユーザ像、タッチポイント、ゴールまでの流れ
・ターゲットペルソナ、カスタマジャーニー、サイトフロー

・形に落とす
・サイトコンセプト、ポイントとなる施策、設計方針
・サイト戦略・企画、ハイレベルサイトマップ、ワイヤーフレーム

・ワークショップや調査結果をもとにターゲットを設計
・ユーザフローを設計
・あるべき姿を組み立てる

・サイトコンセプト、設計方針の作成などでXDが活躍
・顧客体験のプロトタイプ
→言葉よりもプロトタイプを作ってお客様に確認していただいた方が良い
→絵コンテのようなもの
・XDでゾーニングや要素配置を中心としたプロトタイプを作り、お客様に体験していただく
・実際に体験するとフィードバックも色々出てくる
・「直感的に分かりやすいものを作ります」というような言葉だけだなく、実際のプロトタイプを見てもらう
・自分が提案したプランを伝えるための道具

・プラニングした顧客体験とアウトプットの齟齬が減る
→最終的なアウトプットの齟齬も減る
・ユーザ目線で設計中のサイトの体験テストができる
・画面を少し作り、プロトタイプモードでの確認を繰り返すことで、ユーザ目線を保ちつつ作業を進められる
・どのようにして分かりやすいコンセプトを設計し、それをXDでどう作るか

・プラニング意図の伝達を補助してくれるコミュニケーションツール

5-2-2.設計担当の場合
・設計担当なのに作業者のようになってしまうことがある
→ワークフローがトップダウン型なことが原因ではないか?
・プランナー・AI「ワイヤー確定しました。あとよろしく」→決定事項の中で構成を詰めることができない
・デジタル施策の複雑化により、プランニング→設計という一方通行のコミュニケーションでは限界がある

・XDという共通言語を導入
・ビジュアルをアウトプットしながら詰めていく

・プラニングに設計/デザイン担当も参画
・各作業を同時進行できる

・ユーザフロー作成にAI以外にデザイナーなども加わってもらう
・デザイナーも参画することで、ロジックの部分から考えることができる
・タイトルや画像などをワイヤーの段階で詰めてしまう
・異なる検索ワードで来たユーザに対して、同じ訴求内容を表示して良いのか?
→LP1枚で18パターンのデザインができた
・クイックな改善で施策効率UPも可能

・クライアントとの提案・議論も加速
・XDで見て、触れて分かる完成イメージを用意する
・議論や合意形成が中心の打ち合わせになった
・検証とフィードバックの高速繰り返しで、クライアントとの齟齬が減る
・アイデアの良いとこ取りでアウトプットの品質UP
・コミュニケーションの中核となり、最適解を導き出す
・設計書がキレイ&リアル
→設計書にデザイン力が必要になってくるかも
・IAとADの業務領域がフレキシブルに

5-3.さいごに
アートディレクター
・ビジネス目線、ユーザ目線の両方を持つことが大切
・最高の顧客体験を目指して考え抜くこと

プランナー/IA
・設計業務を分担し、業務負荷を軽減しませんか
・XDでプランしたUXの効果を最大化しよう

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

8

inumberx

Webデザイナー/フロントエンドエンジニアとして働いています。 https://afterworks.jp

web Magazine

web制作のあれこれ書かれた記事のまとめ
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。