BLOG



adobexdworkshop00.jpg

みなさんこんにちは、富川です!シナップでは先日ARCHETYPさんと合同でAdobe XDの勉強会を開催しました。今日はその様子をレポートします。

adobexdworkshop01.png

勉強会の講師にお迎えしたのは、フリーランスのUIデザイナーとしてWebサイトやアプリケーションの企画・デザインの分野でご活躍中で、現在デジハリやスクーなどでも教鞭をとられているオロ先生(本末英樹氏)です。

開催の経緯

時々シナップブログでもご紹介していますが、私はプライベートでPanon publicというグループで作品制作を行っており、先月11/21、2年ぶりにヒカリエで開催された"dotFes2016"に『loop』という作品で出品させていただきました。

adobexdworkshop02.jpg

つみきのような木製のシンセサイザー『loop』 http://panon.tokyo/music

Panon publicのメンバーは異なる会社やフリーランスでWeb業界に携わっているデジハリの講師やOB/OGなどですが、前作で一緒に制作したオロさんは、今回の"dotFes2016"でAdobe XD体験ワークショップの講師をされました。

『loop』制作メンバーでARCHETYPさんに所属している鎌田直美さんと私もそのワークショップに参加したかったのですが、当日は展示で忙しかったため、後日お互いの会社で希望者を募り、合同勉強会という形で教えていただくことになりました。

そしてお洒落オフィスと以前から噂を聞いていたARCHETYPさんにぜひ遊びに行きたい!とお願いし、ARCHETYPさんのミーティングスペースをお借りして開催することになりましたm(_ _)m

奥原宿のシナップからARCHETYPさんのある恵比寿へは30分ほどで移動でき、当日は神戸など遠方からもオンラインで参加される方もいて、両社合わせて15名ほどで賑やかに受講させていただきました。

adobexdworkshop03.jpg

向かう途中で恵比寿の有名な鯛焼き屋さんに全員吸い込まれました、勉強の前に腹ごしらえ...?!

勉強会の様子

adobexdworkshop04.jpg Adobe XDの未経験者向けとして、仮想アプリのUIデザインとプロトタイプ作成の基本的な操作を教えていただきました。オロさんのわかりやすい説明と資料をもとに、実際に自分たちで手を動かしながら作っていきます。

adobexdworkshop05.jpg

オロさんが用意してくださったカレーのキュレーションメディア、デザインがかわいい!

デザイン作成

実際にデザインを各自作っていきましたが、PhotoshopやIllustratorでお馴染みのショートカットはそのまま使えたり、レイアウトのアシスト機能が充実しているおかげで、新しいツールですがとても快適に手早く操作することができました。
スマホにもすぐデザインが同期され、使い心地を実機で確かめながらデザイン制作することができます。

adobexdworkshop06.jpg

一番盛り上がった機能は、テキスト素材や写真素材をあらかじめ準備しておいた上で、リピートグリッドという機能で1セットデザインを作ると、異なる写真やテキストで多数のパーツを簡単に量産したり調整することができました。Sketchでもプラグインを使えば可能ではありますが、直感的にすぐ使えるのが優れモノだなと思いました!

プロトタイプ作成

デザインが終わったら、次はプロトタイプを行います。

シナップのデザインチームでは Sketch × Marvel の組み合わせでUIデザイン案件の時は利用することが最近多いのですが、今回Adobe XDが画期的だなと思ったのは、1つのソフトでプロトタイプの作業まで完結できる点でした。
Sketch × Marvel の同期も簡単なのであまり不便は感じていませんでしたが、同一画面内で画面遷移まですぐ設定できる点は、今回の体験の中で個人的に一番新鮮に感じました。

一通り作業を通してみて、予想以上にとても使いやすいことが体験できました!デザインの細かな作り込みをする機能はまだ乏しいですが、今後のアップデートに期待が高まります。デザイナーに限らず、ディレクター・エンジニアにも使いやすく、共通のコミュニケーションツールとして広がっていく気配を感じました。

adobexdworkshop07.jpg

質問も両社から多数飛び交い、まだまだ話し足りないところで一旦勉強会はお開きとなりました。

懇親会

勉強の後は、お楽しみの懇親会です。ミーティングスペースを失礼してARCHETYPさんのワークスペースへ移動させていただくと、そこにはなんとお洒落なバースペースが!!

adobexdworkshop08.jpg

しかも豊富なお酒が次から次へと出て来ます。

adobexdworkshop09.jpg

同じビルにあるイタリアンのお店からピザなど美味しそうなお料理を沢山用意していただきました!

adobexdworkshop10.jpg

乾杯ですっ!

adobexdworkshop11.jpg

それぞれ名刺交換などしつつ、お互いの普段の仕事スタイルなどいろんな方とお話しさせてもらいました。

adobexdworkshop12.jpg

ARCHETYPさんの代表・齋藤さん(中央)と語らうSINAPディレクター・三国(右)

シナップとは全然雰囲気が違うので、私たちはARCHETYPさんのオフィスに興味津々です。バースペースに3台もある冷蔵庫からは、以前お祝いとしていただいたという立派な生ハムの枝肉が!!ちゃっかりお裾分けいただきました。

adobexdworkshop13.jpg

バースペースを囲んで、SINAPデザイナーの飯山がなぜか女性陣からモテモテです。

adobexdworkshop14.jpg

オロさんもモテモテです。

adobexdworkshop15.jpg

話は弾み、気づいたらかなり遅い時間までお邪魔していました。尽きない話はまた次の機会に!ということで解散。とても楽しく実りの多い一夜となりました。

adobexdworkshop16.jpg

SINAPメンバーからの感想

個人的にはAdobe好きなこともあり、Sketchよりシンプルで使いやすいなと思いました。
いまのところはデザインより提案資料や構成案など設計ものにピッタリなんじゃないかなと感じたのですぐに使っていきたいです。
また、懇親会では社長はじめ社員のみなさんと交流することで新しい気づきをたくさん得ることができ非常に良い時間となりました。
そして何よりオロちゃん先生がおしゃれでかっこよかったです。
(小茅)
Adobe XDはもう少し機能追加されると良いなと思う点もありましたが、シンプルで直感的で好きかもです。(シンプルなのでアプリケーション最初の起動時のチュートリアルで体験すると、基本的な使い方はマスターできちゃうかと思います。)
先生のオロさん、分かりやすい講義をありがとうございました。そしてARCHETYPさんのオフィスはオシャレ過ぎでした。
(鈴木)
Adobe XDはシンプル・軽量で、プロトタイプを作るための機能は結構揃っていて、普通に仕事で使えるなーという印象でした。現段階ではSketchの方が効率よく作れるけど、リピートグリッド機能がとても楽しいです。積極的に使っていきます。
ARCHETYPのみなさんと交流できたのも楽しかったです。定期的に開催したいですね!
(三国)
勉強会は、実践的でわかりやすいハンズオン形式だったので、日頃の業務でももっとAdobe XDを取り入れていきたいと思いました。また、ディレクター・デザイナー・エンジニアそれぞれの視点から気づきの違いも知れて楽しかったです。
懇親会では、ARCHETYPの皆さんと色々な意見を交わすことができて、共感できる点が多く見習うべき点も得られたとても楽しい時間でした。この場を借りて、ありがとうございました!(あと、オフィスがすごくオシャレでした!)
(飯山)
Adobe XDは思ったより便利な機能がたくさん入っていて、感動しました。これからのバージョンアップがすごく楽しみです。スライドの作成も、SketchやIllustratorより楽そうなので、機会があったら使ってみたいと思いました。
懇親会ではARCHETYPのみなさんと交流できて、とても新鮮で楽しかったです。このような機会をまたあれば嬉しいです。
(KayLin)

終わりに

講師のオロさん、ARCHETYPの皆さん、今回は大変お世話になりました!
ぜひまたARCHETYPさんや他の会社さんとも、勉強会&交流会を開催したいと思います。興味のある内容やご要望などもしありましたらお気軽にご連絡ください。