XDに惚れた2017年。XDに惚れた2017年。XDとは?XDを知ったのは、2016年春。・・・2017年5月下旬。XDに期待すること個人的トンデモな願望2018年のロードマップデザインモードプロトタイプモード共有機能さいごにはじめにこんにちは、Kentan(@herrkf)です。12月10日の記事です。アドベントカレンダーという文化がある事自体、11月に知ったばかりですが、いい機会なので頑張って書いてみました(1つの記事をここまで丁寧に書くのは初めてかも)。XD」のお話をします。デザインツールのPhotoshopやIllustratorでおなじみのアドビによるアプリです。XD(以下「XD」)は、大雑把に書くと、Webサイトやスマフォアプリのワイヤーフレーム(骨組み)をデザイン出来るWindows/Mac用のツールです。デザインするだけでなく、画面の遷移(ページの切替)もある程度再現出来るのが特徴です。自分は、社内やクライアントに「情報のレイアウトはこんな感じでいかがでしょう」と、作ったものを共有しながら詳細を詰めるのによく使っています。公式サイト※以降は、知っている人以外は理解が難しい専門的な記事になります。XDを知ったのは、2016年春。・・・XDの存在を知ったのは、2016年の春くらいでした。きっかけは、当時読んだ以下のブログの記事(2016.4.26付)だったと記憶しています。blog(ドワンゴクリエイターズブログ)上記の記事を見て「Webサイトの骨組みや、ページ遷移のイメージを作るのに便利そうだなー」と、少し使ってみました。いえ「便利そうだなー」とは思いつつも、まだリリースされたばかりで、機能が非常に限られていたプロトタイプをURLで共有できるのはいいけど、パスワードはかけられない動作が軽快だけど、それだけで関係者に「これ使おう」と言うのは難しいその時はタイミング的に仕事でそれをガッツリ使う機会がなかった別の分野の仕事で忙しく、じっくりと「何が出来るか」を検証する余裕がなかったという事もあり、ちょっと触った後、すっかり記憶から消え去ってしまっていました。久しぶりにチェックしてみたら・・・色々変化していた時は経ち、2017年5月下旬。きっかけは記憶にありませんが、XDの事を久しぶりに調べる機会がありました。Station)2016年の誕生当時から、順調に機能を増やしている事Adobeの担当者も交えた勉強会も行っている事ということを、初めて知ることとなりました。XDのリリース当初からずっと動きを追っていた人にとっては当たり前の事かもしれませんが、これらを知り、「このツール、まだ発展を続けてたのか!これは・・・今後も期待できそうだな」と感じ、以後、XDの流れをキャッチアップしていくようになりました。気づいた、XDのいいところ上記の流れを受けて、改めてXDを触ってみたら、色々なことに気づかされました。以下、XDを触っている人にだけ分かる(おい)、XDのいいところ箇条書きです。動作が軽い!XDがリリースされた当時、動作が軽快というのが1つのセールスポイントになっていましたが、あれから1年以上経過した2017年12月においても、この軽さが維持されている。特定のルールに沿った要素の繰り返しを簡単に作れるXDの利用者の間で評判のすこぶる良い「リピートグリッド」機能。特定のルールに沿った要素の繰り返しを簡単に作ることが出来て、自分も重宝しています。いずれかの方法で、デザインしているものをリアルタイムでスマホで確認出来る。パーツのサイズについて使いやすさを逐次チェックしながら進められるところが、好きです。クラウドフォルダに保存USBケーブルで接続プロトタイプモードで、ページの遷移を再現できるこれが、XDならではの機能だと思っています。この機能のおかげで、今まで紙で「こちらがトップページで、こちらが会社概要ページで...」のように見せるより先に、スマフォ実機で「実際に体験」させる事が出来るようになりました。スマフォで表示を見るために、コードを書かなくていいWebサイトを作るためには、HTMLやCSSやJavaScriptといった言語でゴリゴリとページを作っていくものですが、これ、ページ遷移などのちょっとした動きを含むにしても時間がかかってしまいます。XDは、オンライン共有の機能を使えば、タップや画面の遷移が出来るプロトタイプを簡単に他の人と共有できるため、コードを書く前の段階でアレコレと関係者と詰められるようになりました。画像のトリミングをいい感じにやってくれるあらかじめ準備しておいた図形の中に写真をはめ込むと、下記のように、図形の大きさを変更しても、写真の縦横比をゆがめることなく、いい感じにトリミングしてくれます。「写真の大きさをちょっと調整したい」時にすごく重宝しています。マスクも出来る上記の自動トリミング機能は、任意の領域をトリミングすることは難しいですが、マスク機能も装備されているため、写真の自由なトリミングが出来ます。+Mで出来ます)JPG書き出し:圧縮クオリティが、想像以上にすばらしいこちらは、11月のアップデートで実装された機能(それまでも、PDFやPNGへの書き出しは出来ましたが、JPGへの書き出しは出来ませんでした)。実装された時は「ふーん」という気持ちでしたが、実際に使ってみると、JPG圧縮のクオリティが、思った以上に優秀でした。以下は、640×480ピクセルの写真を普通にJPG書き出しした時の容量ですが、クオリティ100→60に落としても、見た目はほぼ変わらない割に、結構いい感じに圧縮されていました。書き出し自体も「Cmd+E」というシンプルなショートカットで出来るのもGOODです。アプリの開発の進捗を公式ブログやフォーラムを通して知ることが出来るので、ワクワクする機能ではありませんが、XDの広報のあり方にも好感を持っています。以下のような項目です。Stationのブログで告知。日本語なのがうれしい!オンラインのフォーラム(英語)にてユーザーの意見を募っている。ユーザーから寄せられている要望が体系的にまとめられている最近のツールだと、上記のような姿勢は当たり前なことなのかもしれません。ユーザーと交流し、ユーザーからどんな意見を受け取っているのかを伝え、何に取り組んでいているのかを伝え、将来は何が出来るようになるかを伝える事。これらは、なかなか出来ることじゃないです。プロダクトにもよりけりですが、ソフトウェアに関しては、秘密主義を貫くよりも、ユーザーの意見に耳を傾けて、より良い方向に進めていく事にこそ好感を持たれるケースが多くなっているように感じる今日このごろです。XDからは、そんな姿勢を感じました。XDに期待することきっと、いや、間違いなく、2018年もXDを使っていくと思われますので、2018年のアップデートに期待することを。ページ内スクロールハンバーガーメニューやLightboxのように、スマフォでタップしたその場で、別の要素を表示ヘッダーやフッターのナビゲーションを、リンク設定も含めてシンボル化して、複数のアートボードで使い回しテンプレート機能(例:新しいアートボードを作ったら、デフォルトで特定のパーツが配置されている)レスポンシブ機能(共有リンクを開く時、PC/スマフォで別々のレイアウトを設定可能)すでに実装が予告されているもののありますが、将来的には、アプリやスマフォサイトのUI(インターフェイス)を、プログラミングのスキルが無くてもそっくりそのまま再現出来るようになることを期待しています。個人的トンデモな願望トンデモな願望ですが、このツールで作成したデータを、キレイなHTML5で書き出すことで、そのままWebサイトとして公開。コーディングの手間そのものをゼロに近い所まで大幅に削減できたらなぁ、というのを密かに願っております(コーダーを敵に回す発言)。on:という文脈で発表されました。Leeという、アメリカのXD開発の関係者のようです。・・・と言ったところでしょうか。実装予定の機能が色々と書かれており、今後に期待せずにはいられません。(個人的には、パスワード保護が嬉しいです)さいごにここまでお読みいただき、ありがとうございました。Webサイト制作に関わる立場から「ココが好き」と「これからの期待」を書かせていただきました。実際のコーディングに入る前に、XDで作ったプロトタイプで実機検証が行えたら。ビジュアルデザインに入る前に「挙動の見本」を作るという工程をクライアントやデザイナーやプログラマーと共有できたら。XDが、これらを解決してくれるツールとして2018年も発展してくれる事を願う2017年12月でした。Scrawl.ホーム検索トップ。