Illustrator iPad版Adobe XDで
どこでもデザイン&コミュニケーション

Illustrator iPad版Adobe XDで
どこでもデザイン&コミュニケーション

Black Fridayセール!11/29 (金)まで 
個人向け50%OFF、法人向け40%OFF、学生教職員向け80%OFF

新たな力をもう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でチーム間に共有&レビュー

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

1. ARアプリのUIに必要なパーツを、Illustrator iPad版ラジアルリピートやグリッドリピートを使い、有機的に仕上げます

ステップ2

2. Illustrator iPad版で「読み込み」「カメラ」を選び、使用が想定される場所の写真を撮影。アートボードに取り込みます

ステップ3

3. 写真上にパーツを配置し、アプリのUIを検討。クラウドドキュメント経由でデスクトップに移し、XDでの共有レビューに進みます

Adobe Illustrator iPad版

有機的な造形も手で描くように思いのまま。

Adobe Illustrator iPad版のリピート機能

 

有機的な造形も手で描くように思いのまま。Adobe Illustrator iPad版のリピート機能

「いまの仕事では、デザインに使う素材はほぼ、Illustratorで作成します。ライゾマティクスデザインの場合、web、アプリから映像、印刷物まで幅広くデータを展開することが多いので、ベクターデータとして持っておくということが非常に重要なのです。加えて、Illustratorデータにはプログラムで制御がしやすいというメリットがあります。たとえば、データビジュアライズでは幾何図形を変化させることが多いのですが、○や□のような単純な図形に対してランダムな変形をかける、スクリプトで割合選択を行なうことによって不規則に間引く、そうした処理がしやすいというメリットがあります。

Illustrator iPad版は、手で描く感覚に近いこともあり、こうした有機的なグラフィックがさらに効率的に作ることができます。たとえば円ひとつの色やかたちを変え、ラジアルリピートをかけるだけで、面倒な円形パーツを簡単に作ることができる。UIを作るツールとしても非常に優秀なアプリだと思います」

Adobe XD

プロトタイピングからコミュニケーションの

プラットフォームとしても機能するAdobe XD

 

プロトタイピングからコミュニケーションのプラットフォームとしても機能するAdobe XD

「ライゾマティクスデザインにとって、Adobe XDは、webやアプリのプロトタイピングツールであり、データを統合するプラットフォームであり、コミュニケーションのベースとなるツールです。PhotoshopIllustrator作った素材をライブラリを経由してAdobe XD集約して、デザインを進め、共有機能を使ってチーム内でレビューをしていきます。

関わる人数が多いほど、チーム内コミュニケーションの視覚化が重要になりますが、Adobe XD共有レビューなら、ひとつのものを見ながら全員がコミュニケーションできますし、外部との共有も簡単です。フィードバックとアップデートが高頻度で繰り返されるプロトタイピングの過程で、スピーディに情報が集約できるというのは大きなメリットだと思います。自分が関わる領域以外の動きも、Adobe XDで共有されたデータを見れば、すべての情報を追うことができますから。デザインワークフロー統合ツールとして非常に便利だと思います」

Illustrator、XDをはじめとするアプリから、
フォントやストレージなどのサービスまでそろうCreative Cloudをぜひご検討ください。

 

詳細無料で始める

阿部 琢哉

阿部 琢哉

株式会社ライゾマティクス/Rhizomatiks Design所属
インターフェイスデザイナー/デザインエンジニア

大学で建築設計を学んだあと、Web制作プロダクションを経て、デザインエンジニアとしてライゾマティクスに入社。

CI制作・R&Dサポート・サービスデザイン・デジタルプロダクト制作など、さまざまなポジションで案件に参加。

人と情報のタッチポイント全てをインタフェースと捉え、ブランド・体験設計からオンスクリーンUI・グラフィックまでのデザインと実装を行う。

Rhizomatiks Design Webサイト

第一線のクリエイターが
さまざまな「プラスワン」仕事術を紹介!

その他の記事を読む ›

時短勝負!CCだとどれくらい早い?

IllustratorやPhotoshopでよく行う作業を、新旧バージョンを使用した場合で比較してみました。
デザイナーの仕事を早くする時短テクをご覧ください。

Illustratorでチラシ制作
Illustratorで企画書制作
Photoshopでポスター制作
Photoshopでバナー制作
コンプリートプランがおとく

3アプリ以上ならコンプリートプランがお得

使わない製品の分だけ割高になるのでは?と思われがちですが、3本以上の製品をご利用になる場合は、コンプリートプランのほうが割安です。

例えば、Illustrator、Photoshop、Acrobatの3製品を単体で購入するよりも、コンプリートプランのほうがお得。続々追加される新しいアプリやサービスも、追加料金なしで利用可能です。

*Creative Cloud個人版の通常価格で比較(税込)

個人版を購入法人版を購入

最適なCreative Cloudプランをお選びください

個人向け

    (税込)

20以上のCreative Cloudアプリサービスご利用いただけます。
製品一覧を見る | 詳細を見る

学生・教職員向け

 (税込)

20以上Creative Cloudアプリ71%以上割引価格ご利用いただけます。
詳細を見る

法人版

(1ライセンスあたり) (税込)

優れた作品を制作するために必要なすべてが揃っています。さらにライセンス管理が簡単になり、高度なサポートなども提供されます。
詳細を見る

電話でのご注文:0120-921-104