【Adobe MAX JAPAN 2018 イベントレポート】Adobeがみせる未来、クリエイターを進化させる驚くべきテクノロジーの数々

去る2018年11月20日（火）、今年もパシフィコ横浜にて、Adobe MAX Japan 2018が開催されました。
Adobe MAX Japan とは、映像制作・グラフィックデザイン・写真・Web制作、UI/UXデザイン など幅広いジャンルのプロおよびそれらを目指す方を対象にした、アドビ最大級のクリエイティブイベント です。
普段からAdobe製品を活用しているリブセンスのデザイナーが、最新情報をキャッチするべく参加してきました。本記事では会場やセッションの内容や様子をお届けします。

※ 昨年のAdobe MAX Japan 2017の記事は、こちら（基調講演）と、こちら（各セッション）を参照。

目次

• 会場の雰囲気ダイジェスト
• KEYNOTEポイントまとめ
• セッションpickup① iPadで描く！ 話題のProject Gemini徹底解説
• セッションpickup② イマドキのUIデザインには欠かせない！ マイクロインタラクションを作るためのズルいCC活用テクニック
• 所感

会場の雰囲気ダイジェスト

今回発表された新作アプリケーションである「Adobe Rush」で会場の様子を撮影し、簡単につないでみました。よろしければご覧ください。

映像の タイトル・カット・入れ替え・カラー設定・トランジション などを使いました。学習コストはかなり低いように感じます。
Adobe Creative Cloudにログインしておけば、iPhoneのRushアプリで撮影し、iPadで編集することをシームレスに行えたのが印象的でした！

KEYNOTEポイントまとめ

午前中はAdobe CCの最新情報・デモを見ることができるKEYNOTEが行われました。
KEYNOTEは、KEYNOTEアーカイブで全編閲覧することができます。
※ 以下の画像は、上記KEYNOTEアーカイブの映像よりキャプチャしております。

貂明朝のアップデート

カラーの絵文字のほか、見出しのみではなく本文でも使ってもらいやすい「貂明朝テキスト」を追加。

Photoshop CC 2019のアップデート

• コンテンツに応じた塗りつぶしがAdobe Senseiの力でアップデート。塗りつぶしの参照先をカスタマイズすることが可能に なりました。
• 画像に表示されているフォントを参照し、ローカルやTypekitに 登録されているフォントから近いものをリストアップ してくれます。
• 対象定規が実装された。Photoshopで作成したロゴを、Dimensionにドラッグ&ドロップでオブジェクトに反映。簡単にモックアップを作ることができます。

塗りつぶしの参照先カスタマイズ

PhotoshopとDimensionの連携

Illustrator CC 2019のアップデート

• 「フリーグラデーション」グラデーション機能が強化されました。グラデーションの開始位置をドラッグ&ドロップで指定 でき、より直感的に作成できるようになっています。
• シンボル化していなくても、同じ形のものであれば一括で選択・編集できる「オブジェクトを一括選択」という機能が追加されました。

Adobe XDの最新情報

Adobe XDも、正式版のリリースから早一年。すでに60もの新機能を追加しています。
最新機能からおすすめポイントを紹介します。

• レスポンシブサイズ変更機能
• アートボードの拡縮をしても、サイズが間延びしたり崩れたりしない
• シンボルを複数のアートボードの同じ位置にペースト可能。また、外部ファイルのシンボルの参照（リンク）。
• マイクロインタラクション（アニメーション）機能の実装。
• Googleスプレッドシートの外部データ連携。共有データ先の内容を読み込ませ、デザインに流し込むことができるようになった（画像URL、見出し、本文などの情報をスプレッドシートで管理し、XDに流し込める）
• 音声コントロールをプロトタイプに埋め込無事ができるようになった（日本語は未対応）

Lightroom CC 2019のアップデート

iPadアプリでどこでも作業可能になりました。

• Adobe Senseiにより自動補正が強化され、部分選択もワンタップ で、Apple Pencilを使って細かい部分を調整できるようになりました。スピード感をもって修正できそう です。
• マルチデバイスにも対応しました。パソコン、iPhoneなどクラウドですぐ共有することが可能です。

新アプリ Adobe Premire Rush

Adobe Premiereの簡易版として登場。気軽、簡単であることが最大の特徴で、素材をつなぐ、カット、トランジション設定、カラー補正、音声やテロップ付けて共有 までがワンストップでできます。レイヤー機能にも対応しています。
iPhone、iPadどちらでも操作しましたが、操作自体はできるものの、iPhoneの画面ではやはり小さい 印象を受けました。
しかし、AdobeCreativeCloudアカウントを経由しての、マルチデバイスでの素材共有はとても簡単なので、iPhoneで撮影した素材を共有し、iPadで編集するといったワークフローでも良いと感じました。
Adobe Premire Rushに関しては、ワークショップも受け、文章冒頭の動画も作ってみました。

Premire Pro CCのアップデート

Adobe Senseiの技術を使って、「カラーマッチ」という新機能を搭載しました。

• 例えば昼間の映像を夕焼けのような色味にしたい場合、夕焼けの画像を用意して「カラーマッチ」を選択することでワンクリックで色を合わせることができます
• カラーカーブの機能が強化「セレクティックカラーブレンディング」。空の色だけ変えたい場合、「色相×色相」のカーブにて色をスポイトし、カーブの値を調整することで映像全体の空の色を調整できる。(AfterEffectsにも同機能を搭載)

AfterEffectsの今後のアップデート

Photoshopでやったような「コンテンツに応じた塗りつぶし」をAfterEffectsでも可能に。

iPad完全対応版のPhotoshop

2019年に、iPadに完全に対応したフルバージョンPhotoshopをリリースする。Adobe MAX 2018ではその一部を紹介。

• PC版のPhotoshopでできることをiPadのPhotoshopアプリに完全再現。
• UIはiPadに最適化。
• デスクトップとiPadでシームレスに使用することが可能。
• 左下のtouch modifierを使用し、ショートカットのようなツール切り替えができる。

Project Gemini（プロジェクト ジェミナイ）の紹介

ベクターとラスターの表現ができるペインティング・ドローイングアプリケーション です。
拡縮で品質が劣化しないベクターの線と、表現力豊かなラスターレイヤーを一緒に使うことができます。
※ 詳細はpickupセッションで紹介します

Project Aero（プロジェクト エアロ）の紹介

AdobeはAppleと連携を強化し、今後ARにも力を入れていくとのことです。
iPadで動作するARアプリで、Photoshopのレイヤーの奥行きを立体的に表現する ことができたり、また__Dimensionで制作した3D製品デモをAeroにエクスポート__ することで、ARアプリ上で商品を閲覧することができます。

以下、個人的に参加したセッションを抜粋してご紹介します。

iPadで描く！ 話題のProject Gemini徹底解説

Project Geminiとは

Project Geminiは、Adobe Photoshopのパワフルなブラシエンジンをベースに開発 され、Photoshopのパワフルなブラシと、精密でスケーラブルなベクターブラシ、さらに全く新しいカテゴリーのブラシとしてライブ感にあふれる油絵と水彩画のブラシを搭載したアプリケーションです。
この誰も見たことがないようなブラシ以外にも、レイヤー、選択、マスク機能を搭載し、先進かつ非破壊のドローイングと編集ワークフローを実現します。

セッションの概要

ベクター（SVG、イラストレーターで書き出すような画像）と、ラスター（Photoshopで多様なブラシで描画する画像）は、それぞれ別々のアプリで扱うのが一般的でしたが、このアプリは両方使うことができます。
拡縮で劣化せず調整しやすいですが複雑な表現が難しいベクターと、表現力が豊かですが拡縮時劣化してしまうラスターのいいとこ取りということで、夢のようなアプリです。
ペインティングに関しては、特に水彩・油彩についてよりリアルに近いタッチ（筆を走らせると、水にインクが滲んでいくような表現だったり、油彩の絵の具が混ざり合ったり）が実現されています。

このセッションでは、「どんなことができるか？」に加え、プロのイラストレーターがライブドローイングを披露してくれました。

このイラストを、20分で書き上げてらっしゃいました。すごい。

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

こちら、一番のお目当てセッションでした。非常によかったです。

マイクロインタラクションを制作できる上記3つのツール（XD、AfterEffects、Animate）を主に取り上げていました。

マイクロインタラクションとは？

マイクロインタラクションは、ユーザーがサイトとインタラクションをする際に行う基本的なタスクです。
一般的なイメージの、アニメーションによるフィードバックも含まれますが、必ずしもイコールではないです。
例）音量を上げる、下げる、コメントを投稿する、など

インタラクションは通常、ユーザーの取った行動がきちんと動作したことを示すため、何かしらのレスポンスを返しますが、ほとんどの場合ユーザーには気付かれません。
マイクロインタラクションに対するサイトの反応は、インターフェイスにおいてシームレスなものでなければなりません。
ユーザは認識しないかもしれませんが、マイクロインタラクションはUXの成功を左右するのです。
※ UXMILKより抜粋

オライリー社より「マイクロインタラクション」が発刊されていたり、昨今UIデザインをする上で注目されているトピックのひとつ です。
適切なマイクロインタラクションにより、ユーザの目的達成を助けることができます。

ツールの使い分け

Adobe製品で、インタラクションを制作できる代表的なツールは以下3つです。

Adobe XD / After Effects / Animate

Adobe XDの特徴

Adobe XDは、画面のプロトタイプ間の移動（トランジション）アニメーションを作るのに適しています。
競合プロトタイピングツールなどと比較すると、まだまだできることは少ないものの、ユーザの操作（クリック・タップ・スワイプなど）に応じたトランジションを「自動アニメーション」で設定することができます。
詳細は、Adobe XDセッションのアーカイブで見ることができます。
Adobe XD最新情報！新機能の使いこなしと今後の進化

After Effectsの特徴

3つのツールの中では 一番多機能で、精密・複雑なアニメーションを制作するときに適しています。
また大きなメリットとして、作成したアニメーションをjsonで書き出して、そのままアプリに組み込むこともできます。

Animate CCの特徴

Animateは、もともとはFlashと呼ばれていた、インタラクティブなコンテンツを作るのに適したアプリケーションです。
AfterEffectsのようなエフェクト・トラッキング系の機能はあまりないですが、ベクターのアニメーションを得意 としています。
またActionScriptによるプログラミングもでき、書き出し形式も多様です。（ただしjsonには対応していません。）

ツールの使い分けまとめ

作成したインタラクション（アニメーション）は、サービスに「組み込む」必要があります。
アニメーションを実装に組み込むためにはいくつか方法があり、それぞれ __メリット・デメリットがあります。

実装者とアニメーション製作者が別の場合、2、3が好ましい と思われます

各アプリケーションの、スクリプト書き出し対応状況

After Effectsのスクリプト書き出し

Animateのスクリプト書き出し

スクリプト書き出しを行えるソフトを使用することで、エンジニアとデザイナーの分業も可能になります。

本記事では割愛しますが、セッション内では各アプリケーションの 具体的なアニメーションテクニックなどを、実際のソフトの挙動や参考URLを交えて説明 されており、大変参考になりました。

インタラクション不要論

一時期は、Flashサイトでリッチな表現をするのがスタンダードになっていました。
しかし、次第にアニメーションやインタラクションに関して、「どこもかしこもFlashサイト → 過度なアニメーション」であることは、ユーザ体験を損ねる！という流れになっていきました。
更に、iPhoneでflash playerが動作しないこと、また flash playerの脆弱性 なども相まって、Flashによるリッチなアニメーションは次第に淘汰され、一気にシンプルな方向へシフトする ことになります。

なぜFlashは嫌われたのか

Flashが嫌われていた のは、インタラクションとコンテンツの目的が合っていなかった ことが理由ではないでしょうか。
昨今は、JavaScriptによるリッチな表現やマイクロインタラクションが改めて注目 されていますが、適切なインタラクションを設定すれば、最大限効果を発揮 できます。

最適なインタラクション（アニメーション）

下記のグラフは、インタラクションの必要性と実装難易度をマッピング しており、大変参考になりました。
グラフ左上のローディングスピナーなどは容易で効果が高く、進んでやるべきということになります。
また、グラフ右上のページトランジションもとても有用であり、長期的に考えた場合に、実装していくべきインタラクションであるということでした。
逆に、グラフ右下のオープニングムービーなどは実装大変で効果も低めということもあり、世界観演出などのためにどうしても必要な場合以外は採用しないほうがよい と考えられます。

今後のインタラクション（アニメーション）

昨今、流行しているデザインシステムにおいても、インタラクション・アニメーションを定義しているものが増えています。
有名なところでいうと、AppleのHuman Interface Guideline・マテリアルデザインシステム・GitHubスタイルガイド などがあります。

所感

昨年に続き参加しましたが、iPad・Apple Pencilとの連携強化や、AI（Adobe Sensei）の進化のめざましさが目立ちました。
2019年以降のアップデートも非常に楽しみですね。

各セッションのアーカイブは、Adobe MAX Japan 2018 ビデオアーカイブで見ることができます。
Web・UI・UX・画像編集・動画編集 など、各分野の最新情報を得ることができますので、更に情報を得たい方はぜひご参照ください。