ここ最近よく伺うDMMさんを会場に、デザインとデザインツールのイベントが開催されました。ヤスヒサさんもTwitterでおっしゃってましたが最近こういうイベント速攻で埋まるそうです。みつけたら申し込むのが吉ですね

イベントハッッシュ

#dandc

１、InVisionStudio Review　よしたけ りょうさん

よしたけさんちのかわいいかわいい”たびちゃん”の写真でスタート！
InVision Studioは実はイベント前日の段階で招待制じゃなくなり、自由にゲットできるようになったそうなので、ご興味のある方は早速ダウンロード

その上で、アーリーアクセスはまだ取れていないのでツールのGUIを公開することができない取り決めになってます。（ゆえにたびちゃん写真）

現段階では、不具合が多いが中心の話題で（笑
・hiragino sansを使うと可愛くなっちゃう
・コンポーネント化したものをアニメーションすると変な挙動
・アニメーションがうまくプレビューできない時は再起動！
などなどがあがりました。

有益情報としては
・widthに%を使えるのでレスポンシブ描画がしやすい
・割と簡単にアニメーションが作れる

というとろでした。所感としては私が触った時とおなじ感触だなとおもいましたので、アニメーションの作り方など、こちらご覧いただければこれ幸いと。

２、Adobe XDの話　湯口 りささん

XDエバンジェリストといったら湯口さんですね！
会場で使用者割合をざっくりアンケートとったところ、ユーザーは６割ほど、実務利用者は３割ほどということろでした。結構多いんじゃないでしょうか？属性までは取れてませんが。

話の要所としては
・ツール使用に挫折の多い自分でもXDは簡単に使えた
・Adobeツールなのに軽い
・会議中に簡単に使え、エンジニアや企画の方にも刺さるツール
・ゆえに全員がデザインの当事者になれる
・GUIがシンプル（アプデ多いのに）
・アプデが多いのでわくわくする
・ワイヤーや簡易プロト向きだがマイクロインタラクションもそろそろ？
・日本語ネイティブ対応！
・win / mac　で使える

googleの新しいマテリアルデザインに合わせて、下タブ固定プロトも近々実装か？とささやかれており、マイクロインタラクションも作れるようになったらますます使いやすくなるツールですよね！

今回の資料（XDのプロトタイプ公開リンク-こういうところ便利）

３、Figmaの話　三橋 正典さん

Figmaユーザーはとても少なく、会場でも実務使用者はちらほらといった具合でした。Medium上にはFigmaの記事が多いものの、日本語で書かれている記事が少ない&すでにsketchを導入しているところの多さが普及ネックになっているような気がします。

三橋さんからはFigmaを使用するワークフローやメリットデメリットの説明をしていただけました。

Figmaのいいところ

対エンジニア
・アプリインストールなしでブラウザ上で確認できる
・CSSコードがさっと取れる
・URL共有だけで閲覧できる

対PM
・常に最新状態で共有されている＝共有ネイティブ！

対デザイナー
・共有しやすい、コンポーネントが柔軟

対ディレクター
・共有しやすい！デザイナー/エンジニアだけじゃなくステークホルダーや社外協力会社にも共有しやすい！

対マーケ
俯瞰で全体を見れるので操作が想像しやすい
コメントも一目でわかる

Figmaのいまいちなところ
・PDF書き出しできない
・スライスがむずかしい
・読み込みに時間がかかる場合がある
・グラフィックの作り込みに弱い（対photoshopなど）

ただ補って余りある共有環境に使ってみようと思ったかたも多かったようです。実際に会場ではデモデータにブラウザから30人が同時にアクセスし、盛り上がりをみせてました。三橋さん自身も形になるまではやくなったきがすると体感を述べられていて、非常に可能性を感じるツールです。

※追記　PDF化は対応していないけど、SVGで書き出してchromeで描画してPDF保存してくれと公式が言ってました

今回のデモで使われた資料はこちら

私が触ってみた記事もよろしければどうぞ！（コンポーネントとtips)

４、デザインツールを導入したシームレス開発＆チームビルディング　河西 紀明さん

DMMの組織説明、どんな人材を育てるか（T型人材）などから始まって、エンジニアの手にわたるまでなど非常に広い範囲の話だったのでまとめられません（泣 　私が気になったところだけお送りします

お話の一部はこちらの投稿にまとまっているのでぜひ一読を！

Interface inventory + figma

デザインシステムを構築するのに、Interface inventory（インターフェースのインデックス化）を行ったそうです、でましたFigma!
Interface inventoryはすでにあるサイトの全てのボタンなどのUIを集めて共通化していく作業です。Figmaを使ったのはこういう作業の場合誰か一人が作業してるのを見ている状態になりがちなところを、同時に作業できるからという理由でした。デザイナーだけではなく、エンジニアからもこここんな風になってますよ！という参加もあるそうで、全員が当事者になれる共有ツールの強さを感じました。

最終的にはvueを使ってUIをカプセル化していく作業まで持っていったそうです。そこまでやると完璧ですね！

これらの作業を通して以下のことが実現できたそうです

・同じように見えて違う要素や共通化できるものを洗い出せる
・よりよい設計についてチームで学習しながら議論できる
・ステークホルダーにデザインシステムの必要性を示せる

組織に新しいツールを採用させるには
数人規模ならさっと採用できる新しいツールも規模が大きくなってくると一人で騒いでいても結局採用されないシーンがあると思います。そのために社内外でLT、記事、実践ナレッジをアウトプットしていくことが重要だとおっしゃられておりました。確かに登壇すると社内的にも無視できないくらいのインパクトあると思います！

５、デザインとコラボレーションの今とこれから　

ヤスヒサさんのパワフルなファシリテートによるパネルディスカッションです。

話の主題としては
アイデア　ー　デザイン　ー　テスト（プロトタイプ）ー　実装
それぞれのフェイズの間をどのデザインツールが埋めるのか、あるいは得意なのかという話がなされましたが、特にどうやって実装に渡すかというところがメインの話題になっていたと思います。

これ私もずっと思っていて、例えばAEでマイクロインタラクションを作ったとして、AEのイージング設定ってプラグイン使わない限りは一定じゃないので実装どうするんだろってずっと疑問だったんですよね。もちろんlottieとかを使う手もあるでしょうけれど。

この辺、むしろ実装側の役割の方がどうしてほしいのか、どうやったら助かるのかみたいなことをぜひ聞いて見たいなというところでした。

あるいはphaseやsupernovaのようなコードが吐けるツールをつかうと楽になるか。そのあたりまとまった意見が聞けるようになるといいなと思いました。自分で実装してみればいいんだけど。。。

共通の課題

あと、最近こういうイベントに参加して見て「いかにステークホルダーに共有できるか（巻き込めるか）、承認がとれるか」というところが１番の課題なんだなぁと思いました。当たり前なんだけど

私は、代理店からの受注案件がメインでずっとやっていたので、決められたものを形作っていくあんまり脳を使わない作業をしていたわけですが（それゆえ年齢に対して備わってるものが少なく市場価値が極めて希薄で失職中なわけですが）、ローンチ１週間前とかに突如現れた上位決裁権者がナイフを振り下ろすみたいなシーンはいっぱいあって、現場大混乱パターンは死ぬほど経験してきました。これはもはやツールがどうとかの話ではなくコミュニケーション構造をどうしていくかという話だなぁとおもってしまった。

それでも、そういうどうしようもないところ以外の分断を埋めてくれるツール群がでているのだからそれらを積極的につかって、つまらないつまづきを減らしていくのがいいんだろうなとおもいましたとさ。

今回はスポンサーさんがたくさんいらっしゃって、完全栄養食のcompグミやリブセンスさんの転職ドラフトにかけたドラフトビール（シャレ効いてる！）DMMさんからステッカーなどたくさん頂き物をしてしまいました！

ちなみに先般行われたデザイナードラフトにダメ元で参加して見たのですが、市場価値ほとんどない私でも１指名いただきました！ワクワクして楽しかったです！！

ありがとうございました！