昨今、スタートアップやベンチャー、大企業での新規事業が生まれています。背景として、沖縄ならではの課題、また東京や海外、地域ごとにある解決しなくてはならない命題が今、突きつけられているのではないでしょうか。

課題解決するための思考、そしてヒントが隠されていると「デザインの価値」が注目され、「コンピューターと人との関わり」「人と人との関わり」「行動のデザイン」「サービスデザイン」「ユーザーエクスペリエンスデザイン」…デザインの概念や原理原則が問われるようになってきました。

だからこそ、本職であるデザイナーやプロジェクトに一緒に入ることが多いディレクターやコピーライター、プロデューサー、営業であっても「デザインは大切だよね」と共通認識でいいあえる場が大事といえます。

7月2日に開催された「Adobe XD ユーザーフェス 2019 (沖縄)」では、主催Adobe XDユーザーグループ沖縄で、私たち、おきなわダイアログはイベント協力としてサポートさせてもらいました。

Adobe XDとは、「思考の速度でデザインする」をコンセプトに、Webサイトやアプリのデザイン制作に適したオールインワンソリューション。とくに、効率的に業務を進めるうえで役立つ機能が日々追加されています。

当日は、Adobe XDをテーマに様々な角度からデザインについて考えるきっかけとなりました。そんなフェスの様子をお届けします。

＊参加してくださったクリエイターのみなみのひげさんも、当日のレポートをまとめてくださっています。

Adobe XD ユーザーフェス 2019 沖縄へいってきた

*twitterを中心に、当日の内容を再編集したものとなります。

session01 「スタートアップにおけるUI/UX設計」

（上）『株式会社DIGILEAD』代表の大坪敏雄さん

（上）『おきまる株式会社』代表の具志堅好一さん

沖縄県内でもスタートアップが増えてきた昨今、セッション1はプロダクトの実例も交えながら大坪敏雄さんと具志堅好一さんより「スタートアップのプロダクト開発でXDをもっと使おう」に関してディスカッションされました。

大坪さん：
沖縄でも事業が増えてきて、プロダクトがつくられるなかでAdobe XDを通したコミュニケーションが増えてきています。

具志堅さん：
まず、Adobe XDを導入することで、私たち、スタートアップではエンジニアとの仮説検証が開発に入る前にできるのがメリットとして大きい。

（グランド）デザインを設計して、完成イメージを共有しやすく、そして最新ツールが増えていくなかでひとつのツールで完結できるのも使いやすいですね。

ではなぜ、チーム間でのコミュニケーションの円滑さがメリットとして挙げられるのか。それは、スタートアップでのUI/UX設計における問題点や課題に通じるためだ、と大坪さんは語ります。

大坪さん：
スタートアップでのプロダクト開発では、発案者一人で進めることはほとんどありません。発案者であっても、アイデアを具現化するディレクターやエンジニア、デザイナーとのチーム間での意思疎通が何よりも大事。

お互いの意思疎通を行われないと、プロダクトの完成イメージが共有されないし、そのまま開発が進むと結果としてプロダクト設計から開発フローまで決まらない。

で、いざ蓋をあけると想定外の仕上がりとなって、失敗に終わる…ことだってしばしばあるんですよね。

スタートアップでは従来、クライアントからの受託開発・制作フローとは異なり、仮説検証と制作デザインの循環をどうスムーズにしていくかがポイントとなるのです。

セッションの終わりには、大坪さんから具志堅さんへと突然「設計とは何か？」と問いが投げかけらました。お互いに打ち合わせにないなかで、本音ベースで語らいました。

具志堅さん：
わたしにとって設計とは、「ユーザーにとっての地図を作る」こと。当たり前に使っているアプリだって、ユーザー目線で考えれば、色や配置に左右されずに操作できることが大切で。

だから、ユーザーにとっての地図を編むつもり設計を考えています。そこで、Adobe XDをうまく活用しているところなんです。

session02 「中・大型プロジェクトを推進するXDを使ったプロジェクトマネジメント」

（上）株式会社コンセント 江辺 和彰 (えべ・かずあき) さん

コンセントでは、江辺さんのビール好きがこうじて（ビール）Tシャツが制作されるなど、事業開発やコーポレートコミュニケーション支援、クリエイティブ開発以外にも様々な取り組みを行なっています。

セッション2では、江辺さんが「中・大型プロジェクトを推進するXDを使ったプロジェクトマネジメント」をテーマについて語らいます。

「では、過去行なってきた大規模プロジェクトについてっと！」と江辺さんはかつて20000ページを管理してきたプロジェクトの一部を披露してくださいました。

江辺さん：
大規模プロジェクトの特徴では、はじめに情報量が多いし、複雑…笑 そして、プロジェクトに関わるひとたちも多い、案件期間が長いですよね。

これまで、私たちの経験からお伝えすると関係者ごとに形式が異なる資料をつくってしまうと頓挫してしまいます。だから、できるだけAdobe XD内でサイトマップを作成し、プロジェクト内で管理するファイルを減らしていくことが大切です。

「大型プロジェクトでの関係者が多いならば」と、お互いのコミュニケーションや情報共有するための方法でステークホルダーマップ、そして実践の仕方を伝えてくださいました。

コンセントでは、関係者ごとの顔写真をAdobe XDでつくったマップにつけて、誰がどういう思いを持ってるのかを可視化してきたそう。

ここまでで、大規模プロジェクトでのAdobe XDを使うメリットがわかったものの…社内メンバーやクライアントにどうメリットやAdobe XDを使ってもらうために、どう提案すればよいのでしょうか。

江辺さん：
自分自身から何か1つの資料をXDでつくってみることからはじめてはどうでしょうか。

その資料を社内やクライアントとの打ち合わせで、実際にみてもらい、さわって、使ってもらう。

地道ではありますが、こうした情報共有こそがツールの便利さやプロジェクト管理とどうつながってくるのかを可視化できると思うんです。

session03 「中・大型プロジェクトを推進するXDを使ったプロジェクトマネジメント」

（上）ネットパイロティング株式会社の湯口りささん

これまで、東京で開催されてきた「Adobe XD ユーザーミーティング」など、Adobe Community Evangelistとして述べ20回以上のAdobe XDとユーザーとの場をつくってきた湯口さん。Adobe XDユーザーなら一度はふれてきた「スターターキット」の作成にも関わってきました。

2019年6月、Adobe XDは機能に関してバージョンアップし、新たに追加された機能について、湯口さんから操作方法をレクチャー付きで解説してもらいました。

湯口さん：
Adobe XDユーザーでも意外と知らない、コーポネントや基本操作を伝えていければと思います。

まず、レイアウトの補助機能として格子から作図、レイアウトから配置、ガイドからグリッドの補助線がスムーズに行えるようになりました。

他にも、Adobe XDに搭載されるショートカットを使えば、多角形ツールをドラッグ中に上下キーで辺の数を変えることだってできますよ。

冒頭にお伝えした通り、Adobe XDではユーザーが効率的に業務を進めるうえで必要な機能を都度追加してきました。そのため、企業での業務範囲外となる操作方法やバージョンアップにふれる機会がなかなかありません。

参加してくださったひとも、その場ではじめてAdobe XDをダウンロードして、さわってみることができるのも、Adobe XD ユーザーフェスならではの楽しみ。

ちなみに、湯口さんは当企画に備えて、Adobe XD操作方法に関連するシート（work1.2.3.4.5）を用意してきたため、途中でセッションタイム（30分）では足りないことが判明。アディショナルタイムへ突入するほど内容がボリューム満点でした。

例えば、レスポンシブリサイズでのサイズ変更の仕方や、プレゼン資料やアニメーションのつくりかた、プロトタイプモードの解説など湯口さんから伝えられました。

＊物足りないひとに向けて、湯口さんの過去のtwitterからも一部ご紹介させていただきます！

session04 「別にXDで作らなくてもいいものをXDで作ってみた」

（上）popIn株式会社 / TIMING DESIGNの北村崇さん

事業会社とフリーランス、両軸でデザインを極める北村崇さんから「XDでつくるスライド」「XDでつくる動画」「XDでつくるゲーム」を披露してくださいました。

はじめに、北村さんが懐かしのゲーム風をイメージしたというスライドから、XDでつくるスライドの「サイズ」「レイアウト」「遷移先」について解説。

北村さん：
Adobe XDでスライドをつくるなら、印刷サイズを意識しましょう！ 具体的に、（Adobe XD内の）アートボードは、1：√2のサイズ感にするとバランスが良い。手動で調整するのがむずかしいなら、プラグイン「Print Artboard」があるので利用してみてくださいね。

続いて、レイアウトについて配置がすごく重要となります。僕も当社ハマりましたが、書き出しのときに1pxであっても配置が上や左にあるものが優先されます。そのため、書き出しすることを前提に考えるなら、配置をどう考えておくかが大切です。

また、スライド枚数によって変わりますが、ページごとに「戻るボタン」とかあるとクライアントさんにも説明しやすいと思います。

＊北村さんのセッションでも、twitterにて補足してくださる湯口さんの解説画像をどうぞ！

続いて、Adobe XDのアニメーションのつくりかたを北村さんが実際に動かしながら魅力を語ってくれました。

北村さん：
Adobe XDから直接、Affter Effectsへと書き出せるため。たとえば、5秒間の（イベントや製品についてのバナー）動画をつくるなど、簡単につくる自動アニメーションならAdobe XDが便利！

とはいえ、拡張子mp4に変換すると、（アニメーションの）画像の背景が透過できないため…では背景にグリーンバックを入れてプレビューを保存して、Affter Effectsに遷移して背景を透過すれば簡単、でしょ！

セッションの終わりには、北村さん自作のアニメーションでつくったゲーム「体験をつくる XD」を制作フローをふくめて披露してくださいました。

会場に来てくださったひとも、Adobeには動画制作に特化したツールを知っているものの、１から覚えるのは大変…だからこそAdobe XDでつくったアニメーションなら社内やクライアントにベータ版としてみせる、またユーザーヒアリングとして活用することができるため、便利な機能と感じた様子でした。

session05 「Adobe XDの開発理念と目指すところ」

（上）アドビ システムズ 株式会社 轟啓介さん

最後のセッションとして、これまでのAdobe XDの開発秘話などを、AdobeのWebツール全般のマーケティングを担当する轟さんから伝えられました。

はじめ、轟さんは仲尾さんと共に行う「Creative Cloud 道場」と沖縄県名護とのつながりについておはなししました。

轟さん：
Creative Cloud 道場で共にする仲尾毅さんとわたし、実は名護に所縁があるんです。

皆さんはご存じかと思いますが、名護市にある「轟」の滝がありますよね。あと、名護は実は仲尾性の発祥の地…だから「Creative Cloud 道場」をはじめられたのも、すべて名護のおかげなんです笑

さて、Adobe XDの利用する月間アクティブユーザーは、全世界で日本は第二位。そんな日本ユーザーから愛されるAdobe XDを開発に至ることとなったのか。

轟さんは、「機能を絞って、クオリティ100パーセントを目指すため」という開発者たちの思いを語りました。

轟さん：
Photoshopも、かつてUIデザイン用の機能を試みたけれども実装させることはむずしかった。現に、Photoshop Design Spaceでは「速いは正義」という世の中では主流になれなかったし。

でも、わたしたちはユーザーに提供したい「思考の速度でデザインする」「大規模案件でもデザインの一貫性を保つ」「コミュニケーションを円滑にする」この３点を実現したいと開発を重ねてきて。それは、Adobe XDの前身といえる「Fireworks」からスタートしました。

FireworksからProject Sparkler、Project Comet、そしてAdobe XDとプロジェクト体制が変わっても、一貫した開発ポリシーである「DESIGN AT THE SPEED OF THOUGHT（思考の速度でデザインする）」という軸はブレずに開発を進めていきます。

では、思考の速度でデザインするとは具体的にどういうものなのか？ 轟さんは完結に「軽い」「早い」「簡単」、3つの要素だと言います。

たとえば、60fpsが品質条件でたとえ1500ものアートボードがあってもツールが止まらない、実行時間によって思考でデザインするプロセスを邪魔させない。

轟さんから1500アートボードを操作する様子が届けられて、会場からはどよめきの声が挙がりました。

そして、（Adobe XDの）アートボードをつくるなかで、デザインの一貫性を担保するため、「そもそも、穴をつくるためにドリルは必要なのか？」とデザインの原則はあっているのか、とチームで再定義して開発されてきたそう。

轟さん：
プロジェクトに関わるなかで、たとえ1年後のわたしが同じプロジェクトに入ったとしても、デザインの秩序がある世界を作りたかったんです。

そのために、Adobe XDではユーザーにとって「デザインの一貫性」「制作 とメンテナンスの効率化」「チーム内の共通認識」を叶えるために、これまでのデザインの原則や概念、スタイルガイド、コンポーネントライブラリなどあらゆるルールを定めたものを見直しながら進めていきました。

こうして開発されたAdobe XDは、まだまだユーザーにとって役立つ機能が追加できると轟さんは言います。現在、開発予定の機能も会場でお披露目したり、もしわからないことがあればお知らせしてほしいとユーザー思いに語る姿がそこにありました。

Adobe XDユーザーグループ（日本語）

Adobe XDの最新情報なら（英語）

Adobe XD最新情報を動画でご紹介中（英語）

Adobe XDのプラグインについて解説（英語&日本語）

編集記：

今回は、おきなわダイアログと共に、アドビ システムズ株式会社、FM那覇、D#（沖縄デザイングループ）、司会進行の緑間なつみさんによる多大なるサポート、ご協力やご支援があったからこそはじめてのAdobe XD ユーザーフェス 2019 (沖縄) を開催できました。改めて、お礼申し上げます。ありがとうございました。

会場：おきなわダイアログ

スキ「♡マーク」をいただけたら、「ありがとうございます、こちらこそ大好きです」とこれからもおきなわダイアログの読み物をがんばれますので。もし、よかったら「♡マーク」をポチッとしていただけたらうれしいです。

近日開催！ 「カルチャー」を通してこれまで、これからを対話するイベント