Adobe XDで進化する Web・アプリの開発プロセス|WD ONLINE

WD Online

特別企画 [PR] Web Designing 2019年10月号

Adobe XDで進化する Web・アプリの開発プロセス より高速に、よりクリエイティブに? 共同制作の質を大きく向上させる新定番ツール

2017年、それまでのデザインツールとは一線を画すコンセプトで登場した「Adobe XD」。当初はプロトタイプが作成できる点が強調されて紹介されるケースが多かったが、多くのユーザーの声に応えて機能強化が図られるにつれ、企画からデザイン、実装に至る開発フローの「効率化」と「質の向上」を同時に実現できるツールとして、大きな進化を遂げている。今回はそのXDが「制作現場に効く」理由をピックアップして紹介してみたい。まだ使ったことのない人はもちろん、リリース当初に利用して以来触れていないという人にもぜひ読んでいただきたい。
Photo●黒田 彰 


Adobe XD
Webサイトやアプリ、音声デバイスのUI/UX開発のためのデザインツール。ワイヤーフレーム、デザインカンプ、プロトタイプの作成とクライアント・制作チーム間での共有を一つのアプリで実現。
https://www.adobe.com/jp/products/xd.html

教えてくれたのは…轟 啓介さん
アドビ システムズ (株)でXDのデベロッパーマーケティングを担当。ユーザーとのつなぎ役として、イベントなどさまざまな場所で活躍中。 ※★印は轟さんによる「推しのポイント」を紹介。

 

01 作業が進んでも操作は軽快なまま

従来のデザインツールは、作業が進むにつれて動作が重くなることが多かったが、XDは扱うアートボードの量が増えても軽快に動作し、ストレスなく作業することができるよう設計されている★1。また、用意されているツールは従来のアドビのアプリケーションを引き継ぎつつも、より直感的で洗練された操作感を実現しており、いったん慣れてしまえば迷うこともない。さらに繰り返しが発生するコンテンツを簡単に複製できる「リピートグリッド機能」や「レスポンシブリサイズ」のように、これまで面倒だった作業を効率化する機能も搭載され、作業の効率化に寄与している。アドビはXDの大きな特徴として「思考の速度でデザインできる」ことを挙げているが、作業が進むにつれ、そのメッセージが大げさでないことを実感できるはずだ。

★1「XDは軽快な動作ができることを優先して開発を進めています。例えば1つの書類に1,500枚のアートボードを作成しても、標準的なPCの画面描画速度である60fpsをキープできる。この感覚を、ぜひご自身の目で確認してみてください」
01「思考の速度」でデザインできる高速ツール
上の図は「リピートグリッド」を利用しているところ。選択した要素をドラッグするだけで、繰り返し表示させることができる。下は「レスポンシブリサイズ」の機能。要素の配置を崩さずにサイズを変更できる

 

02 「プロトタイプ駆動」を今すぐ実現できる

XDはサイトマップの作成からワイヤーフレーム制作、デザインといった作業を一貫して行うことができるアプリケーションだが、どのステップにおいても、簡単に仕上がりをイメージしたプロトタイプを作成し確認することができる。ディレクターやデザイナーがどんなイメージを描いて制作を進めているのか、ページはどのように遷移するのか、といった点をすぐに確認することができるのだ★2,3。チーム内はもとより、クライアントも交えてイメージを共有すれば、作業全体の質を大きく高めることができるだろう。

読者の中には、「プロトタイプ駆動」などと言われても導入の敷居が高いと感じる人もいるかもしれないが、制作にXDを導入することで、無理のない移行が可能となるのだ。

★2 「XDのプロトタイプは、ワンクリックで更新ができます。ですから、クライアントとのミーティング中に、指摘を受けた点を改善し、すぐにプロトタイプに反映するといったことも可能です。その回転速度の速さは制作の質を大きく上げてくれるでしょう」
★3 「作成したプロトタイプはPC上ではもちろん、PCと繋ぐことでスマホ上でも確認ができます(左ページ写真)。実機で確認ができるためイメージの共有が進むはずです」
02 プロトタイプをリアルタイムに生成できる
要素を矢印の線をつなぐだけでリンク動作を設定することができる(上)。プロトタイプはウインドウ上に常に表示させるだけでなくネットを経由して共有することが可能だ

 

03 デザインの一貫性を保つことができる

自社で制作するWebサイトやモバイルアプリの見た目やUI/UXに関する一貫性を保つために、さらには作業の効率化を実現するためにカラーや文字スタイル、コンポーネントの共通化を図る「デザインシステム」の導入を進めている制作会社は多いだろう。XDにはそうしたデザインシステムを実現し、容易に運用するための機能が搭載されている。

カラー情報やフォントスタイル情報、さらにはパーツやボタンなどの共通パーツを登録しておく「アセット」。そのアセットを共有することで、ルールの共通化を図ることができるのだ。しかも、ルールを定義した元の書類のアセットの内容を更新すると、それを使用している書類全体に通知が届き、変更が促される仕組みが搭載されているため、更新を忘れるといったこともない。XDを利用すれば、社内におけるデザインシステムの実現を無理なく進めていくことができるはずだ。

03 デザインの一貫性を保つための優れた仕組み
カラー情報や文字スタイル情報、さらにはボタンなどのコンポーネントを登録しておける「アセット」。このアセットは簡単に共有できるため、複数プロジェクト間での共通ルールの運用も容易だ

 

04 コミュニケーションの質を高めるコラボレーション機能

XDというアプリケーションはそもそも、制作時の共同作業をいかにスムーズに進められるかという点を念頭に置いてつくられている。そのためクライアントが制作途上のデザインにコメントを書き込んだらすぐに修正を行い、プロトタイプに反映させるといったスピーディな制作スタイルも可能となる。また、こうした機能をうまく活用すれば、これまで現状を説明するだけだった会議の席を、デザインやUI/UXのブラッシュアップの場に変えることもできるのだ★4。

また、デザイナーとコーダー、エンジニア間のコミュニケーションについても、手間をかけることなく正確に情報を伝えられる機能が用意されており、仮にコーダー、エンジニアの手元のPCにXDがインストールされていなくても、ブラウザ上からデザインに必要な情報やテキスト、画像の取得ができるように設計されている。

デザイナーとディレクター、デザイナーとコーダー、さらには制作チームとクライアントと、よりスムーズな制作フローの確立を行う。XDのコラボレーション機能の本質的なメリットはそうした点にあるのだ。

★4 「近い将来、一つのファイルをリアルタイムで共同編集できる機能の搭載が予定されています。作業の重複を防ぎながら、より精度の高いコラボレーションが可能になります」
番外 「現在、全国11カ所でXDのユーザーグループが活発な活動を行っています。皆さんもぜひご参加ください。私も頻繁に顔を出しています!」
04 コラボレーションのための機能の充実
共有ボタンをワンクリックするだけで、すぐにプロトタイプを共有できる。プロトタイプの内容はデザインの更新にあわせてすぐに更新できる

 

企画協力:アドビ システムズ 株式会社

掲載号

Web Designing 2019年10月号

Web Designing 2019年10月号

2019年8月17日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

ローカルへの貢献でビジネスも広げよう

サンプルデータはこちらから

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

クリエイターのスキルが活かせる課題&チャンスが日本中にある!
地域活性化成功のポイント

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

【複数拠点】【リモートワーク】
場所に縛られない働き方

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

高齢化や人口減少など、地方が抱える課題は山ほどあります。
一方で、インバウンドによる地域資源の再発見やITインフラの整備など、
ポジティブに捉えられる話題もあります。
もちろん地方の自治体・民間企業は今、大きな課題に対し真摯に取り組んでいますが、
WebをはじめとするITスキルのプロフェッショナルの力を必要としているのです!

WebやIT業界で活躍する制作会社をはじめとしたプロフェッショナルのみなさんは、
今そこにある地方の課題解決に多少なりとも貢献できるスキルを持っていると言えるでしょう。
また、ネットワーク技術の進化は働く場所の自由度を大きく広げました。
自分の理想とするライフスタイルに合わせて、住む場所をはじめ関わりを持つ地域の選択肢も増えています。
そこで、企業や制作会社の地方も視野に入れた働き方の可能性も追求していきます。


また、ネットワーク技術の進化は働く場所の自由度を大きく広げました。
自分の理想とするライフスタイルに合わせて、住む場所をはじめ関わりを持つ地域の選択肢も増えています。
そこで、企業や制作会社の地方も視野に入れた働き方の可能性も追求していきます。



●地方が抱える課題とは
・制作会社の力が活きる地方のニーズ

●地方におけるWebビジネスのヒント
・制作会社の強みを活かす 考え方と実践
・今行われている地方でのビジネスとは?

●自治体側の受け入れ態勢や協業、助成金

●地方との繋がり方
・「移住」は手段の一つ。「住まなくても繋がる」関係性

●企業で考えるべき「働き方」
・地方志向の社員を活かすための制度導入
・サテライトオフィス、在宅リモートなど事例

【本誌内注目の一文】
■本当の魅力を発見して伝えていくためには、外から来たヨソモノ視点が必要

■まずは参加して、違う環境に関わってみよう

■都市部の高齢化問題の先進事例はローカルにある

■地域外の人材が地域づくりを担い変化を生み出す

■WebやITを生業とする方であれば、自身のスキルを活かす形でも関係人口になれます

■特別な理由がなくても全社員が選べる働き方として、テレワークを活用している




【スペシャル記事】・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

より高速に、よりクリエイティブに!
共同制作の質を大きく向上させる新定番ツール

Adobe XDで進化するWeb・アプリの開発プロセス

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・