こんにちは、ひさびさのブログになったオッキーです。

今日は、2018年3月16日（金）に行われた、Adobe XD meeting 14の参加レポートをお届けします。SNS投稿・ブログ書くよ枠での参加ということで、がんばって書いていきます。

会場は、サイボウズさんの東京オフィスでした。当日は小雨が降っていましたが、日本橋駅直結の東京日本橋タワーなので濡れずに会場入りできて、ありがたかったです。

会場入口

中に入るとこんな感じ。天井が高くて清潔感のある、いいオフィスでした。

会場内

Adobe XD 最新動向とTips

まずはXDの3月更新についてのご紹介。スピーカーはAdobe XD meetingの代表でもある、ネットパイロティング株式会社 湯口 りささん。

やはり一番の目玉はPhotoshopファイル（*.psd）とSketchファイル（*.sketch）が読み込み可能になったことですね。いくつか、直近の仕事で使ったpsdファイルを読み込んでみましたが、最初にちょっとだけ時間はかかるものの、概ね再現性が高く読み込むことができました。ちゃんとPhotoshop上で作ったアートボードを受け継いで、XDのアートボードに変換されていたのは感動しました。

湯口さんによると、Photoshop上のテキストがXDに読み込むとアートボードの左上や、アートボード外に行く場合がある、とのことで、Photoshop上の見た目がXDで完全に再現できるわけではないようです。サポートされている機能は、Adobeのナレッジベースで紹介されています。

とはいえ、マークアップエンジニアやフロントエンドエンジニアの視点では、PSDをXDに読み込むだけでオブジェクト間の距離や各種サイズを取得するのは間違いなくラクになるので、確実にコーディングが捗るようになると感じました。

また、同様にSketchファイルの再現性は完璧ではないものの、ある程度実用的に使えるレベルではあるようです。その他に、グループ化したオブジェクトの色の編集や、円形グラデーションのアセットカラー登録、XDドキュメント間のシンボルのコピーなどが紹介されました。

ゲーム屋ですがこんな風にXD使ってます

続いてのメインセッション1つ目。スピーカーは株式会社カエルパンダ 奥田 覚さん。普段は、スマートフォンアプリやNintendoプラットフォームのゲームを開発されているそうです。

ゲーム開発のためにXDを使う主な用途としては3つ。プロトタイピング、グラフィック制作、ドキュメント制作。いずれも他のアプリケーションと比べて、軽い、操作が直感的、すぐ作って試せる、素材の取り回しが柔軟、というメリットからXDを採用しているとのこと。このあたりは業界を問わず、専門アプリケーションよりも素早く作ることができるXDの強みがよく分かります。

逆に言うと、Webデザイン用途ではレスポンシブデザインなどの面で、まだまだSketchなどの先発アプリケーションに差を付けられている部分があるものの、動作の軽量性や高速プロトタイピングが可能な機能群を考えると、総合面では決して引けを取らないクオリティになりつつあるな、と改めて確信しました。

近年のWebデザイン・開発用ツールは、数ヶ月何もしないだけで時代に取り残されてしまいます。Sketchをはじめ、WebStorm、VS Code、Atomなどが短いサイクルで改善を積み重ねていく中、AdobeがCreative Cloudをきっかけにその流れに乗ってくれたのは、業界にとってとても良いことだと思います。

シンボルとグループとリピートグリッド

スピーカーは再び湯口さん。リピートグリッドを作って、分解する前に1つだけを選択してシンボル化するテクニックを紹介されました。こうすることで共通ヘッダーなど、シンボルを作って所定の位置に置く、という作業を省力化できるというのは目から鱗でした。

XDでカスタマージャーニーマップ埋め埋め

最後のメインセッション、スピーカーは株式会社ビルディット 石崎 由美さん。私の主宰するコミュニティ、DISTのスタッフもお手伝いいただいている、萌え絵描きなデザイナーさんです。

カスタマージャーニーマップを紙でやってみたが、8畳の和室がいっぱいになってしまうという経験（笑）から、XDで作ってみたという事例紹介でした。絵文字を使える、シンボルを使い回せる、コメントで投票するなど、XDを使ったならではのアイデアが披露され、興味深かったです。

まとめ

XD使っていこう！（息切れ）