IORI-STIORI-STblogworksBLOG2018/03/13eventWCAN2018/03に参加しましたIORI-STeventWCAN2018/03に参加しました3月10日にベースキャンプ名古屋で行われたWCAN2018/03に参加しました。今回はadobeXDについての勉強会ということもあり、デザイナーさんの姿が多く見受けられました。内容はデザイナーさんに特化するものではなく、web制作のPDCAサイクルに関わる全ての人が楽しめるものだったと感じています。それでは早速振り返っていきます!...と言いたいところですが、なんと今回は実演がメインのセッション。しても文章メインで振り返ることになるので、なるべく実際の講義の印象とのギャップが生まれてしまわないよう気を付けます。今日から始めるXD!基本から最新の機能までの使い方と職種別導入ガイド講師はネットパイロティング株式会社の湯口りささん。誠に恐縮ながら、この日はランチをご一緒しました。ご自宅で飼われているaiboのお話がとても和みます。adobeXDとはadobeXDはwebデザインに特化したツールです。photoshopやillustratorなどの代表的な製品はノンデザイナーの方にもよく知られていますが、XDは前者に比べて業界関係者の間でしか話題にならないかと思います。私自身も学生時代はXDを全く知らなかっため、今回のイベントは「無料体験版をダウンロードしたての超初心者状態」で参加しました。講義が終わるころには、アートボードの並べ方やオブジェクトの量産など、なんとなくそれっぽい操作ができていたので驚きです。これはフォトショやイラレの操作に慣れている人なら、初めてでも感覚的にデザインを作ることができそうな予感。これぞadobeブランドの強みだなあと感じます。XDのメリット昔の制作基軸は「考える→作る→共有する」という一方通行のものでしたが、今はこの3点がサイクルになっています。これはwebに当てはめると「デザイン」「プロトタイプ」「共有」となり、XDではこの3つを基準としてツールバーが作られているそうです。明確で印象的なUIですね。制作過程でPDCAサイクルを回す際、それぞれの段階で中間成果物が生まれ、関わる人数も増えていきます。途中から制作に関わり始めた人は、その膨大な情報量や各アプリの知識量についていくのがやっとの状態にもなりかねません。そんな時、XDは3つの点で有効と言えるのだそうです。それが動作が早い60tpsと情報処理が軽いツールと役割がシンプルです。今回初めて触ってみて驚いたのですが、アプリの立ち上がりも本当に早く、またmarginの設定などはシステム側がほぼ自動で調節してくれるので、ノンデザイナーの方でも大変わかりやすく作られていました。シンプルながらも使い勝手が良いという点は、期限が限られている作業においてもってこいなのではないでしょうか。デザインの基本の機能1リピートグリッドあるオブジェクトにリピートグリットをかけてドラックすると、一定の幅に並んだコンテンツが出てきます。最初marginは任意の値で作成されるのですが、値を編集したら全てのコンテンツに適用されるようになっています。XDの特徴的な機能ですね。ドラックする方向は、初期段階では右と下に指定されています。これはオブジェクト自体を回転することで変更することができるそうです。フッター部分を上に伸ばしたいときなどは、オブジェクトを180度回転させてしまいましょう。※コンテンツに画像が挿入されているときは一緒に回転してしまうので注意が必要です。2自動の画像マスク・テキストデータの落とし込み1でグリッドを作成し、複数のコンテンツを配置したとします。その一つ一つに任意の画像を配置したい時、XDではフォルダに並んだ順に複数の画像を同時に落とし込むことができます。テキストを入れたい時も、テキストデータのままファイルからドラッグ&ドロップするだけで順当に入れることができます。3ダブルクリックパスなどを編集状態にできます。この機能はillustratorなどでもお馴染みですね。細部を調節したい時などは、関係ない部分が選択されないように編集状態にすると作業効率が上がります。4エスケープダブルクリックで指定した編集画面から抜け出せます。湯口さん曰く、「困ったときはエスケープ!」だそうです。5背景ぼかし文字通り背景をぼかすことができます。このぼかし効果、どんな場面に使うのだろうかと疑問に思っていたのですが、調べてみたら作業上で活躍する機能ではなくデザインの表現の一種でした。確かに最近はぼかし効果を使ったサイトをよく見かけます。参考:背景写真に「ぼかし効果」を巧く使ったWebデザイン事例(簡単なチュートリアル付き)6コメント上にも書いたのように、web制作の過程では多くの関係者がデザインをみながら検討する機会が出てきます。その際に出た意見を、デザインに直接ピン留めして残すことができます。補足ですが、コメントに関してはWCAN2018/02で松田さんがおっしゃっていた「invision」というサービスを活用する方法もあります。こちらではコメントに種類がつけられるのだそうです。参考:invision7テキストエディタXDのテキストエディタで特徴的なのは、何と言っても通常のテキストモードとテキストエリアモードを自由に切り替えることができる点です。普段illustrator使いの私、感動しました。8シンボル例えば離れた場所でテキストフォームを作りたい時、それぞれ1から作っていくのは手間がかかります。そんな時に作りたいデザインのテキストフォームを1つシンボル化してしまい、それを置きたい場所に複数配置することで、作業を効率化することができます。illustratorやphotoshopで言う「グループ化」に似ていますが、シンボルでは複数配置した後でも個々の編集がしやすいという利点もあります。配置したテキストフォームに角丸をかけたい時、グループ化ではそれぞれ編集していかなければなりませんが、シンボル化をしておけば、一つを直すだけで全てが自動的に編集されます。参考:illustratorやphotoshopにあってXDにない機能こんなにも「痒いところに手が届く」XDですが、残念ながら下の機能はillustratorやphotoshopにあってXDにないそうです。フィルターブレンドボードナイフツールまた下のような不得意分野もあるので、少し気をつけましょう。固定ヘッダーの表現(現在開発中とも)プロトタイプモードの基本の機能プロトタイプモードとは、複数のアートボードの関係性を整理できる機能です。オブジェクトかアートボードにカーソルを置くと、ボタンのようなものが表示されます。そこから伸びた枝を任意のアートボードに繋げることで、「このボタンを押したらこの画面になる」などの関係性が視覚的にわかるようになります。任意のアートボードにホームのアイコンをつけると、後々プレビュー画面で開いた時にそのアートボードが優先的に表示されるようになります。共有とは、文字通り出来上がったデザインを伝える機能です。XDはただリンクを作成するだけではありません。実はこの共有機能、リアリティがすごい!個人的に一番感動した項目です。今回セッション内で扱われた共有方法は2つあります。1プレビュー画面プレビュー画面ではプロトタイプで入力した関係性が大活躍します。実際にこの画面上でオブジェクトをクリックすると、プロトタイプで枝をつなげたアートボードが表示されます。これにより、今まではクライアントさんに複数のデザインを一回一回表示しながら言葉で説明していたところを、実際の動作で感覚的に伝えることが可能になりました。2ブラウザ画面ブラウザ画面では、実際にデスクトップやスマートフォンで表示した時のサイズ感を確認することができます。これにより、実装に入ってからボリュームの大幅な軌道修正をするなどの事態を防ぐことができます。まとめ今回初めてXDで操作をしましたが、冒頭で触れた通りシンプルでありながら便利な機能が多く、次回からでも早速実践できそうなテクニックが沢山学べました。湯口さん曰く、XD自体が軽いのでプロジェクトごとに全て同じドキュメントで作ることも可能だそうです。このように作業には直接関わらないシステムの部分もしっかりと考えて設計されている点で、XDはwebデザインツールの中でも多くの支持を集めているのだと思います。私は今sketchを使ってデザイン作業をしているのですが、今後はXDでも作業をしていきたいです。両方使えるに越したことはないですし、ツールの好みは人それぞれだとも思うので、まずは門を広げて「できること」を積み重ねていこうと考えています。https://isaikaori.com/。