Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

モダンな作り方で急速に機能拡充が進むアドビのUI/UXデザインツール、統合開発環境もOSSを取り込み刷新

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/08/16 08:30

 アドビ システムズは、8月12日に会見を開き、Web制作ツールを担当する轟啓介氏が、UI/UXデザインツール「Adobe Experience Design CC(プレビュー版、以下Adobe XD)」と、Web制作の統合開発環境「Dreamweaver CC 2017(ベータ版、以下Dreamweaver)」の最新動向をデモを交えて紹介した。

目次
アドビ システムズ株式会社 Web製品担当 轟 啓介氏
アドビ システムズ株式会社 Web製品担当 轟 啓介氏

 両製品は、最近の開発ツールのトレンドに従い、月次の短いサイクルで新機能を搭載したアップデート版が提供されており、Adobe XDは7月19日に、Dreamweaverは7月29日に最新版がリリースされている。また、「User Voice(Adobe XD版Dreamweaver版)」という、機能要望やバグ報告を受け付けるオープンフォーラムが用意されており、投票機能によって開発チームへ要望の優先度を伝えることもできる。「FEATURE-STARTED」「STARTED WORK」といったタグがついたものは、近々の実装が期待される機能だ。

モダンな作り方でゼロから開発された新UI/UXデザインツール

 Adobe XDは、アドビ初のUXデザインツールで、UIデザイン、プロトタイピング、フィードバックの共有の3つを一つのツールで実現する。

 Web制作は、通常「ディレクター」がクライアントからの要望をワイヤーフレームやサイトマップにまとめ、「デザイナー」にデザインカンプを起こしてもらい、クライアントに確認してから「デベロッパー」が実装する、というフローで進む。つまり、ウォーターフォール方式で後工程に進むほど、手戻りのリスクが発生するため、ディレクターは早い段階で方向性を固める必要がある。一方で、動きのないデザインカンプでは、クライアントが実際の仕上がりをイメージしずらいため、「使いづらい、操作に一貫性がない」といった適切なフィードバックが行えず、生産性の課題を抱えていた。これを解決するのが、Adobe XDだ。

Web制作の一般的なワークフロー
Web制作の一般的なワークフロー

 今年3月にプレビュー版が提供開始されて以来、順調にアップデートを重ね、現在は7月19日提供のPreview 5が最新版となる。このペースであれば、Preview 6も間もなく提供されるだろう。多機能化に伴い、ツールの動作速度への影響を気にするユーザーの声も多いが、轟氏は「画像処理ソフトで普段用いるようなレイヤー数を使用しても、とても軽快に動く。モダンな作り方でゼロから作ったツールなので、実現できているのだと思う」と、ツールの完成度についても自信を伺わせた。

毎月新機能が追加されているAdobe XD
毎月新機能が追加されているAdobe XD

 現時点では、Mac OS向けのプレビュー版のみの提供となるが、Adobe ID(無料アカウント可)さえ取得すれば、誰でも試すことができる。前述のUser Voiceでも確認できるように、Windows版の開発も進められている。

 轟氏はデモを交えつつ、Adobe XDの特徴的な機能を紹介した。

 一つ目は「リピートグリッド」。検索結果の一覧といった、複数の要素で構成される項目を繰り返すデザインは、通常、一つの項目をデザインしコピーして作成するが、冗長な作業が多く、後からの修正も困難だ。リピートグリッドの機能を使うと、ドラッグ操作で簡単に同じデザインを適用した項目を複製することができ、画像やテキストも、複数選択した画像ファイルや、改行区切りで入力したテキストファイルのドラッグ&ドロップ操作で指定できる。デザインとコンテンツとを分離できることから、メンテナンス性も高い。

繰り返す項目を簡単にデザインできる「リピートグリッド」機能
繰り返す項目を簡単にデザインできる「リピートグリッド」機能

 将来的には、既存のWebサイトの情報をもとにしてデザインを作成する仕組みも実装される見込みだ。現在は、アートボードの単位でしかスクロールできないが、今後はオブジェクト単位でもスクロールできるように改善が進められている。

 また、最近は画面遷移せずにウィンドウをモーダル表示させて情報提供をするケースが増えているが、その際、情報を目立たせるため、背景にすりガラスのような処理を施すことが多い。これをPhotoshopなどで表現しようとすると手間がかかるが、6月に実装された「背景のぼかし」機能を使うと、簡単にこの効果を再現できる。

すりガラスのような効果を簡単に設定できる「背景のぼかし」機能
すりガラスのような効果を簡単に設定できる「背景のぼかし」機能

 Adobe XDのプロトタイプモードでは、ドラッグ&ドロップ操作で画面遷移や、その際の効果(スライド方向、イージング方法、遷移時間など)を設定できるが、7月の新機能として、直前の状態に戻る画面遷移の機能が実装された。遷移時の効果も自動で逆向きのものが設定され、画面遷移の整合性を保ちやすくなっている。

Adobe XDのプロトタイプモード。青い線で画面遷移先が表示される

Adobe XDのプロトタイプモード。青い線で画面遷移先が表示される

 6月の更新では、書き出し機能のフォーマットとしてPNG、SVGにPDF(単一または複数ファイル)が追加された。また、フィードバックを得るための共有方法として、従来のアドビのサイトにアップロードしてURLを共有する方法以外に、IFRAMEでのWebサイトへの埋め込みにも対応し、デザイン確認時のクライアントの要望に対応しやすくなった。

IFRAMEでもデザインを共有できるようになった
IFRAMEでもデザインを共有できるようになった

 その他、チュートリアルやイベントレポートといった詳しい情報が、アドビの情報ポータル「Adobe Creative Station」で多数提供されている。7月下旬には、渋谷において「外国人観光客がスクランブル交差点とハチ公の写真を撮って、すぐに帰ってしまうので、滞在時間を増やしてほしい」という実際の課題をテーマに、Adobe XDを使った現地のデザイナーによるプロトタイピング制作バトルも行われた。

 Adobe AIRやPhoneGapで作られたアプリケーションを表彰する「Adobe AppBox Award」では、今年からAdobe XDで作られたプロトタイプの応募も可能になり、デベロッパーだけでなくデザイナーも参加できるようになった。プロトタイピングのテーマは「今年のクリスマスが楽しみになるアプリ」。2016年11月15日までに、アドビのコミュニティサイト「Behance」に、所定の条件で投稿を行った作品が対象となる。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 斉木 崇(編集部)(サイキ タカシ)

    CodeZine編集部 編集長。1978年生まれ。早稲田大学大学院理工学研究科(建築学専門分野)を卒業後、IT入門書系の出版社を経て、2005年に翔泳社へ入社。2005年6月の正式オープン以来、ソフトウェア開発専門のオンラインメディア『CodeZine(コードジン)』の企画・運営を担当している。20...

バックナンバー

連載:プロダクト担当者インタビュー
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5