Illustrator iPad版＋Adobe XDで
どこでもデザイン＆コミュニケーション
Illustrator iPad版＋Adobe XDで
どこでもデザイン＆コミュニケーション
新たな力をもう1つ - Plus One
技術と表現の新しい可能性を探求し、世界的な活躍を続ける株式会社ライゾマティクス。その手法は、データビジュアライズ、リアルタイムグラフィック、AR・VRなど多岐にわたり、展開されるフィールドもアート、web、映像、アプリ、ライブ演出と枚挙にいとまがありません。
常に先進的なクリエイティブによって人々を魅了し続ける株式会社ライゾマティクスのデザインワークフローの中で、Adobe Illustrator iPad版とAdobe XDはどのように使われていくのでしょうか。
ライゾマティクスデザインのインターフェイスデザイナー・阿部琢哉さんに、ARアプリのUI開発でIllustrator iPad版とAdobe XDを組み合わせて、機動力あふれるデザインワークとコミュニケーションを実現する方法について紹介いただきました。
"有機的な形をすばやく作れるIllustrator iPad版は、UI作成ツールとしても優秀"
Illustrator iPad版を使って現場でUIを検討
→Adobe XDでチーム間に共有＆レビュー
「今回、“環境に応じた植物の育成マッチング度をシミュレーションできるARアプリ”の作成を仮定し、Illustrator iPad版とAdobe XDを使ってアプリのUIを作るワークフローを構築しました。設置したい植物に必要な日光、水、土などの要素が変数としてサークル状に表示され、環境に対してどの程度マッチングするかを判定してくれるほか、水をあげる頻度などの情報が表示されるというものです。
今回は、Illustrator iPad版でUIに必要なパーツを作り、使用が想定される場所でそのUIを作り込んでいきました。Illustrator iPad版はカメラを通してアートボードに直接、写真を取り込むことができるので、現場でARアプリのUIのドラフト作成や検証を行なうことができます。使用する場所や掲示される場所でデザインの確認ができるのは、持ち運びができるiPad版ならではのメリットと言えます。
Illustrator iPad版で“どこを触りたい”、“どう操作したい”というミクロなインターフェイスを作ったあとは、Adobe XDではマクロな視点でUI全体のレイアウトを検証して、共有機能でレビューを行ないます。
UIを作るツールとして優秀なIllustrator iPad版とAdobe XDがあれば、現場でのシミュレーションや検証が必要なプロジェクトでも、スムーズにデザイン、コミュニケーションができるのではないかと思います」
1. ARアプリのUIに必要なパーツを、Illustrator iPad版のラジアルリピートやグリッドリピートを使い、有機的に仕上げます
2. Illustrator iPad版で「読み込み」→「カメラ」を選び、使用が想定される場所の写真を撮影。アートボードに取り込みます
3. 写真上にパーツを配置し、アプリのUIを検討。クラウドドキュメント経由でデスクトップに移し、XDでの共有レビューに進みます
有機的な造形も手で描くように思いのまま。
Adobe Illustrator iPad版のリピート機能
「いまの仕事では、デザインに使う素材はほぼ、Illustratorで作成します。ライゾマティクスデザインの場合、web、アプリから映像、印刷物まで幅広くデータを展開することが多いので、ベクターデータとして持っておくということが非常に重要なのです。加えて、Illustratorデータにはプログラムで制御がしやすいというメリットがあります。たとえば、データビジュアライズでは幾何図形を変化させることが多いのですが、○や□のような単純な図形に対してランダムな変形をかける、スクリプトで割合選択を行なうことによって不規則に間引く、そうした処理がしやすいというメリットがあります。
Illustrator iPad版は、手で描く感覚に近いこともあり、こうした有機的なグラフィックがさらに効率的に作ることができます。たとえば円ひとつの色やかたちを変え、ラジアルリピートをかけるだけで、面倒な円形パーツを簡単に作ることができる。UIを作るツールとしても非常に優秀なアプリだと思います」
プロトタイピングからコミュニケーションの
プラットフォームとしても機能するAdobe XD
「ライゾマティクスデザインにとって、Adobe XDは、webやアプリのプロトタイピングツールであり、データを統合するプラットフォームであり、コミュニケーションのベースとなるツールです。PhotoshopやIllustratorで作った素材をライブラリを経由してAdobe XDに集約して、デザインを進め、共有機能を使ってチーム内でレビューをしていきます。
関わる人数が多いほど、チーム内コミュニケーションの視覚化が重要になりますが、Adobe XDの共有レビューなら、ひとつのものを見ながら全員がコミュニケーションできますし、外部との共有も簡単です。フィードバックとアップデートが高頻度で繰り返されるプロトタイピングの過程で、スピーディに情報が集約できるというのは大きなメリットだと思います。自分が関わる領域以外の動きも、Adobe XDで共有されたデータを見れば、すべての情報を追うことができますから。デザインワークフローの統合ツールとして非常に便利だと思います」
阿部 琢哉
株式会社ライゾマティクス／Rhizomatiks Design所属
インターフェイスデザイナー／デザインエンジニア
大学で建築設計を学んだあと、Web制作プロダクションを経て、デザインエンジニアとしてライゾマティクスに入社。
CI制作・R＆Dサポート・サービスデザイン・デジタルプロダクト制作など、さまざまなポジションで案件に参加。
人と情報のタッチポイント全てをインタフェースと捉え、ブランド・体験設計からオンスクリーンUI・グラフィックまでのデザインと実装を行う。
第一線のクリエイターが
時短勝負！CCだとどれくらい早い？
IllustratorやPhotoshopでよく行う作業を、新旧バージョンを使用した場合で比較してみました。
デザイナーの仕事を早くする時短テクをご覧ください。
