去る2017年11月28日（火）に、パシフィコ横浜にて、Adobe MAX Japan 2017が開催されました。
Adobe MAXとは、グラフィックデザイン、写真、Web製作、映像製作に携わるクリエイターの方、およびそれらを目指す方を対象にした、Adobeが提供している Adobe Creative Cloud（※以下、CC）を中心に新製品や新機能、その他サービスなどに関するセッションなどを行う、日本最大級のクリエイターの祭典 です。
イベントレポート第1弾では、午前中のKEYNOTEセッションと会場レポートをお届けしましたが、レポート第2弾では デザイナードラフト運営局のメンバーが受講 したAdobe XDに関する下記4つのセッションレポートを通して Adobe XDが制作、開発にどのような変革をもたらすのか を見ていきたいと思います。
- 明日から完全に使いこなす基本操作から応用テクニックまで
- Adobe XDが変えたライゾマのWebディレクション舞台裏
- 伝言ゲームをなくしてデザインの質を高める！Adobe XDを使ったライブデザインのコツ
- 事例に学ぶAdobe XDフル活用の極意。Photoshop/Illustratorとの連携から仕様書作成まで
【SESSION [ux1]】明日から完全に使いこなす基本操作から応用テクニックまで
登壇者
アドビ システムズ株式会社 轟 啓介 氏
Adobe Community Evangelist RsStudio 湯口 りさ 氏
概要
こちらのセッションでは、登壇者による機能紹介という内容のセッションではなく、轟氏が Webディレクター、湯口氏が Webデザイナー という役割で、ライブWeb制作 といった内容のセッションとなっていました。
Adobe XDとは？
AdobeXDはUIを制作するための専用のツールです。
AdobeのソフトウェアでWebデザインといえば、今まではIllustratorやPhotoshopが利用されていましたが、それらのアプリケーションにはない デザインレビュー機能 や プロトタイピング機能、ソースコード生成機能 などが盛り込まれています。
また、アプリケーションが 軽い、早い、簡単 というのも デザイナーの間で最も評価されている特徴の一つ で、Adobe XDの開発チームもそれを意識して開発している そうです。
Adobe XDをつかったディレクターとデザイナーの業務連携
Adobe XDはビジュアルデザインをするだけの為のものではないので、Webデザイナー以外でも、ディレクターやUXデザイナー がWebサイトやネイティブアプリの ワイヤーフレームを作る際にも有効 に使うことが出来ます。
チームで制作/開発しているケースや、クライアントワークをしているケースでは、デザインスペックで共有し、レビュー機能でフィードバックを受けつつデザイン業務をすすめことが出来ます。
セッション会場では、公式のヘルプに沿ったような手順で、ワイヤーフレーム作成からデザイン作成までがライブ制作されていました。
その他
Adobe XD専用のワイヤーフレームキット、Wiresの紹介もありました。
様々なUIキットがこのライブラリ内に包含されています。ワイヤーフレームの作成も捗りそうです。
Adobe XDの 開発チームはユーザーボイスも活用している ので、Feature Requests（機能リクエスト） と Bugs（バグ報告） をどしどし送ってほしいとのコメントがありました。このように、ユーザーボイスに挙げられた報告、要望へのレスポンスの良さも、Adobe XDの人気を後押ししている のではないでしょうか。
また、Adobe XDにはユーザーグループもあり、ほぼ毎月勉強会が行われている ようで、2017年は12/18（月）に最後の勉強会が実施されたようです。
公開グループのですので、デザイナードラフト運営局のメンバーもこれを機に参加 させていただきました。
興味のある方は参加してみてはいかがでしょうか。
【SESSION [ux2]】Adobe XDが変えたライゾマのWebディレクション舞台裏
登壇者
株式会社ライゾマティクス クリエイティブディレクター 清水 啓太郎 氏
※撮影禁止のセッションであったため、写真の掲載はありません
概要
AdobeのXDのページでも紹介されている、清水氏のセッションでした。ライゾマティクスといえば、2016年のリオデジャネイロオリンピックの閉会式のセレモニー終了後に行われた、2020年の東京オリンピックを紹介する8分間のプレゼンテーションや、有名ミュージシャンの舞台演出を想起される方が多いのではないのでしょうか。
しかし、それらはRhizomatiksの中でも、Rhizomatiks Researchという部門が担っていて、Rhizomatiksには他にもRhizomatiks DesignとRhizomatiks Architectureという部門があり、清水氏の所属する Rhizomatiks Design では、プロダクトデザインからブランディングまで、デザインに関連するありとあらゆる領域でのクライアントワークを担っています。
セッションの内容としては、写真撮影ができなかったため、内容の詳細は控えますが、実際のクライアントワークにおいてのAdobe XDの導入実例を元に、どのように活用していたのかが語られました。
【SESSION [ux3]】伝言ゲームをなくしてデザインの質を高める！Adobe XDを使ったライブデザインのコツ
登壇者
株式会社ソニー・インタラクティブエンタテインメント コーポレートデザインセンター Webデザイナー 池原 健治 氏
概要
Webの制作現場では、クライアント、ディレクター、デザイナー、エンジニアと職種が細分化されている ので、情報共有の手間 もかかりますし コミュニケーションの難易度も高い。その、Webの制作現場で起こりがちな 伝言ゲーム という問題を、ライブデザイン や Adobe XD の導入によってどう課題解決していくのか？を、池原氏がとある大学で発表した内容を交えての発表が行われました。
伝言ゲームって？
デザイナーやディレクターは、単に自分が作りたいものを作るのではなく、人の意見を聞き、情報を整理し、皆がハッピーになるものを作る必要があります。
つまり、ディレクターはクライアントにヒアリングをし、クライアントはディレクターに要望を挙げる、そしてディレクターは、クライアントからの要望をどのようにWebサイトに組み込んでいくかを要件としてまとめて、デザイナーに共有する。という具合に、ヒアリングから要件定義までの工程でも、会話の伝言ゲームになりがち なのです。
ライブデザインで伝言ゲームを解消
そんな伝言ゲームになりがちなWeb制作現場の問題に対し、複数人で会話をしながらその場でデザインを組み立てていく ことで、その課題を解決する手法があります。それが ライブデザイン です。そして Adobe XDはライブデザインの導入を後押ししてくれます。
ライブデザインの実例として、とある大学で行ったWebデザインに関するライブデザインを主題としたワークショップと同じものをセッション内でおこなわれました。
当日のプレゼン資料はこちらです。
プレゼン資料がマルチエンディング というおもしろい仕組みになっているので、皆さんよろしければ試してみてください。
ブレーンストーミングならぬXDストーム！
XDストーム とは、Adobe XDとブレインストーミング（集団でアイデアを出し合うことによって相互交錯の連鎖反応や発想の誘発を期待する技法）をかけ合わせた 造語 で、Adobe XDでライブデザインをすると、アイディアが浮かんだ上がった時点でデザイン化できることが表現されています。
XDストームの採用により、アイディア出しからからラフまでの完成が早くなり、Adobe XDを使うと 伝言ゲームに陥ること無く、関係者間での認識を合わせながら本当に重要でクリエイティブなことに集中できた とのことでした。
【SESSION [ux4]】事例に学ぶAdobe XDフル活用の極意。Photoshop/Illustratorとの連携から仕様書作成まで
登壇者
株式会社LIFULL クリエイティブ部 クリエイティブグループ 田中 忍 氏
概要
LIFFUL HOME’Sは、住宅情報検索サービスから、現在では実店舗なども構え、住まい探しの総合サービスになっています。
LIFULL HOME’Sは2017年の4月に社名変更しており、社名、ブランド変更に伴うコーポレートサイトリニューアルプロジェクトの現場でAdobe XDを活用された とのことで、その事例共有のセッションでした。
この概要はAdobeの公式ブログで記事になっているので、興味のある方はぜひ御覧ください。
Adobe XDは、動作の軽さや使い勝手の良さが魅力的ですが、カバーできる工程の広さも大きな利点 です。
デザイン、プロトタイピング、仕様書作成、プロジェクト管理など、組み込まれている機能を活用すれば、XDは常に現場でのコミュニケーションの中心を担える存在と言っても過言ではありません。実案件の経験を元にした、Adobe XDを活用したワークフローの発表がありました。
フル活用で見えた3つの魅力
セッションでは、Adobe XDの特徴としてカバーできる工程の広さを挙げられていましたが、その中でも、以下の3つが大きな魅力 であると、田中氏は語ります。
- ワークフローの中心 になる
- コミュニケーションが楽 になる
- 赤入れツール の新定番
XDの魅力1：XDがワークフローの中心に
デザイン、プロトタイピング、仕様書作成、プロジェクト管理までをも担うことができるAdobe XDは、数多くのソフトウェアを代替 することが出来ます。
セッションで挙げられていたのが以下の実例です。
クライアントワークや、外部ベンダーがいる制作、開発の現場では、
- ディレクターが企画をし、説明資料をパワーポイントで作成
- 要件定義はエクセル で機能や仕様をメンバーと共有
- 共有された仕様書を元に デザイナーがグラフィックツールでデザイン を作って確認
- 以降、実装
というワークフローを踏襲することが多くあると思います。
これが、Adobe XDを中心に据えたワークフローに置き換える ことで上記のように大きく変わります。
企画、要件定義、工程管理、デザインレビュー、ビジュアルデザイン、プロトタイピング までをも 同じアプリケーション で済ませることができるため、「デザインファイルは変わっている けど、エクセルの仕様書はかわってない！どっちが正しいの？」ということもなくなりますし、デザインやレビューの 履歴も残る ので、コミュニケーションロスを防ぐ助け にもなります。
XDの魅力2：動作の速さがコミュニケーションの速さに直結＆共有は常にリンク1本
社名変更に伴う、タイトなスケジュールでコーポレートサイトリニューアルを実施することになったことから、「動作が軽く、複数ページを短時間で制作することに向いている」と導入を決めたAdobe XDだったそうですが、その動作が軽いという特徴は、作業効率だけでなくコミュニケーションの方法も変えられた ようです。
上記のAdobe公式ブログにあるように、
「とにかく起動が早く、動作が軽かったこと、そして、操作がシンプルで思い通りに動かせたことで、複数ページを短時間で作るのに向いていると判断しました」
「Macbookさえ持っていれば、時と場所を選ばず井戸端会議の感覚で、その場でパッとデザインを開いて見せて、説明したり意見を聞くことができました」
このように、会議中にラフを作って説明、ヒアリング、場合によっては 打ち合わせ中に変更して承認 を取ったこともあったそうです。
次は、ランディングページ制作作業 と 映像制作作業 を並行して進めなければならないプロジェクトの話がつづきました。
このときにもAdobe XDが活躍したそうで、LP系のアートボードと映像系のアートボードを分割 し、ハブとなる共通の入り口を設ける ことによって、その入口のリンク先だけが共有されていればいい状況をつくる事で、プロジェクト運営に活かしたとのことでした。
XDの魅力3：アートボードが増えても影響なし。ファイルもスッキリ。
田中氏はAdobe XDを用いて「赤入れ」を担当したとおっしゃっていましたが、いわゆる「レビュー」や「修正」などと聞くと、その管理が問題になることが多くあると思います。セッションでも挙げられていましたが、よく起こり得るのは、以下のような状況ではないでしょうか。
- 事あるごとに 毎回別ファイル を作る
- 必要に応じて パブリッシュを毎回する
- メールやチャットに 添付した分だけのパターン ができる
- レビューを書いたが、どの時点のファイルに書いたかも分からない
- 修正用、レビュー用などの ファイルが数多く出来て管理しきれない
そのような事が続くとどうなるかというと、、
しかし、Adobe XDでは
- 編集履歴 が残る
- 各人が レビューを同時に でき、履歴も残る
- アートボードが増えても、履歴が増えても 軽快に動作する
ので、上記の問題を解決し、制作プロセスにも大きな影響を及ぼす可能性を秘めているとのことでした。
また、ベータ版ではありますが、2017年11月のアップデートでデザインスペック機能が追加されたので、ディレクター、デザイナーやクライアントの共有する/される側はもちろん のこと、さらに先の実装に係る エンジニアも含めて利用 を始めると、今回のセッションで発表されたよりも、さらに広い範囲のワークフローにいい影響を及ぼす ことができるかもしれません。
まとめ
2017年のAdobe MAXでは、午後全ての時間帯において、Adobe XDのセッションがあった ことからも、その勢いを感じました。
運営局メンバーも、全4セッションで各社それぞれの話をきいてみて、どのセッションでも共通に
- コミュニケーション、デザインを 加速させる
- あらゆる ツールを代替、統合 できる
ということをおっしゃっていました。
デザイナードラフト運営局のメンバーもAdobe XDを利用しているメンバーがいますが、下図のようなツールの転換が起こることにより、
- 要件〜デザインなどの 各工程間の連携がシームレスに なる
- 共有機能や、ライブデザインが可能になることにより コミュニケーションが円滑化 する
- ツールを集約できることにより、ファイル管理や共有漏れなどの エラー因子を減らす ことができる
- 企画や要件段階の内容を見ることが容易にできるので、それらの 意図を汲み取ったデザイン もしやすくなる
- デザイン自体がし易く動作が軽快なことで、デザイン業務単独で考えた場合の効率も上がる
などの理由から、ワークフロー自体への影響は少なからずある と感じているようです。
まだ使ったことがない皆様も、Adobe Creative Cloudを利用されていれば使えますので、試してみてはいかがでしょうか。
