CSS Nite in Osaka, vol.45「All About XD」 w/YATのblog

公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。

Twitter

ツイートは下記にまとめました。

次のブログで取り上げていただきました。ありがとうございます。

動画について

ダウンロード期限があるものもありますのでご注意ください。

基調講演：Webデザインシンキング × Adobe XD
YAT（Rish-Design）

先日は暑い中ご参加いただきましてありがとうございました。
基調講演として「Webデザインシンキング × Adobe XD」をお話させていただいたYATです。
僕のセッションでは主にWebデザインシンキングの基礎と、そこにAdobe XDを導入することでチーム内に何が起こるのかをお話させて頂きました。

Adobe XDを利用することにより、デザイナーの思考をすばやくアウトプットすることが可能となりチームへの共有が早く行えるようになりましたが、デザインにおいて重要視するのは見た目の部分ではなく、ビジネスにおいて何が必要で何のためにそれを作るのかという部分が重要になるので、その意識認識にズレが発生しないようにコミュニケーションを取る必要があります。

デザインはあくまで課題を解決するためのものであり、そこを考ぬくのはデザイナーの役割ですがビジネスを考えるのはあくまでサービス提供者であったりWebサイトの管理者です。
我々制作者は要望のヒアリングを行った上で、思考を視覚化し、チームでコミュニケーションを図る必要がありますが、見ること・触れることができるように視覚化された思考は、言葉だけで伝えるコミュニケーションよりも遥かに伝わりやすく、それを実現できるツールは早く取り入れたほうが良いと思いますし、学習コストが低く設定されているAdobe XDは間違いなくおすすめできるツールといえます。

Webデザインシンキングについてもっと知りたいという方はセミナーを行っていますのでぜひご参加くださればと思います。
セミナーの情報をいち早く受け取るにはconnpassに作成しているYATのblogグループにご参加ください。https://yatblog.connpass.com/
またデザインシンキングの話やデザインのこと、サイト制作に関することはブログに記載しておりますので是非見てみてください。
https://wp.yat-net.com/
またソーシャルメディアもやっていますので、ご興味ございましたら是非フォローください。
twitter: https://twitter.com/yat8823jp
facebook: https://www.facebook.com/yatblog
instagram: https://www.instagram.com/yat8823jp

ダウンロード

Adobe XDクイックオーバービュー　〜10分で把握するXDの全体像
鷹野 雅弘（スイッチ）

改めてご参加ありがとうございました！
私自身、とても楽しめた回になりました。

vol.44から松下さんをリーダーに企画・運営が行われています。CSS Niteだけでなく、YATさんの主宰セミナー、リクリなど、ぜひ、盛り上げていってください！

補足

Windowsでデバイスプレビュー（スマホをケーブルでつないでリアルタイムにミラーリングすること）ができない点、これはXDの問題ではなく、Windowsのセキュリティ機能で許されていないからだそうです。そのため、「今のところは」ではなく、当面、これが実現することはないようです。

お知らせ

10月にアメリカはLAで開催されるAdobe MAX 2018に日本人初のスピーカーとして出演します。

SNSなど

TwitterやFacebookなどでもつながっていただければ幸いです。

Facebookで友達申請をお送りくださるときには（スパム避けのため）「〜のセミナーに参加した」等、ひとことメッセージをお願いします。

ダウンロード

Adobe XD、最初の一歩
松下 絵梨（ツキアカリ）

ご参加ありがとうございました。他の講師陣のお話も全て興味深く、私自身とても勉強になるXD漬けの一日でした。

私のセッションについて、「もっと勉強したくなった」「実際に操作している所を見て一緒に操作できて理解が深まった」など、温かいコメントをいただき、お役に立てたようでとても嬉しいです。
「ちょっと早い」「もっと内容を絞ってほしかった」いう方もいらっしゃいました。たくさんのことをお伝えしたいがために、詰め込みすぎてしまったようです。

配布しているサンプルファイル内のStep01〜03.xdに操作手順を書いていますので、素材フォルダ・動画と合わせて、ぜひ復習に活用していただけたら幸いです。
分からないことがあればご遠慮なく、FacebookやTwitterで質問してください。

セッション中にお見せしたプロトタイプとデザインスペック

セッション中に配布したサンプルファイル

ダウンロード可能期限：2018年11月末

セッション中にご紹介したURL

ご質問と回答

（質問）XDでデザインする際に、ワイヤーフレームを作成しながら、写真などデザインするより、ワイヤーフレームを全て作成したほうが効率が良いですか？

今回のデモでは、進行の都合上、ワイヤフレーム→デザイン→プロトタイプという順で進めたのですが、ワイヤーフレームの時点でプロトタイプを作成し、チーム内やクライアントさんと共有すると、より効率が良くなるのでおすすめです。
実際に利用するデバイスで、ページ単体でなくWebサイト全体を俯瞰した検討が可能になり、「このページが抜けていた」「このコンテンツが重複していた」など従来の「動かないワイヤーフレーム」では気づけなかったことに早い段階で気づき、結果、手戻り作業を防げるからです。

（質問）複雑なデザインにはどこまで対応できるのでしょうか？

XDの良いところの一つは「軽さ」のため複雑なデザインに必要な機能はあまり多く用意されておらず、PhotoshopやIllustratorと連携させるでことで表現力がUPします。

具体的には、写真のレタッチや色調補正、選択範囲や不透明度を利用したマスク、（グラデーションやドロップシャドウ以外の）レイヤースタイルなどの表現が必要なときはPhotoshopが必要です。
また、パスファインダーや点線・破線が使えるので、XDでも簡単なデザイン地図程度なら作れますが、印刷物でも利用するという観点から従来通りIllustratorで制作した方がよいと思います。
基本はXDメインで制作を進め、必要な箇所でPhotoshopやIllustratorの力を借りるイメージです。

ただし、特に画面遷移を必要としないリッチな表現が重要なランディングページのような案件ですと、今のところXDを使うメリットはあまりなくPhotoshopメインでデザインした方がよいかもしれません。

（質問）テキストドロップが少し分かりにくかったです。

準備として、Macのテキストエディット（「フォーマット」メニューから「標準テキストにする」を選びプレーンテキストに変更可能）やWindowsのメモ帳などで、拡張子が .txt のプレーンテキストのファイルを作成します。

このテキストファイルのアイコンをXDの画面にドラッグ& ドロップすると、自動的にエリア内テキストとして読み込まれます。

改行で区切られた複数行のテキストファイルをリピートグリッド内のテキストにドラッグ&ドロップすると、改行されているテキストは別の項目として処理されるため、例えば4行だった場合、テキストオブジェクト4つごとに、テキストファイル内に記述されていた内容が1行ずつ繰り返し配置されます。

リピートグリッドへのテキストの読み込みについてはこちらの記事も参考にしてみてください。

ダウンロード

Adobe XD、次の一歩
松下 絵梨（ツキアカリ）

ご質問と回答

（質問）まとめてオーバーレイ設定する方法はありませんか？例えば、各ページのハンバーガーメニューに一気にオーバーレイを設定したい。

トランジションとオーバーレイどちらの場合でも、デザインモードではなくプロトタイプモードの画面でオブジェクトをコピー＆ペーストするとインタラクションごと複製することができます。

他のページのハンバーガーアイコンを削除しておき、プロトタイプモードで、インタラクションを設定したハンバーガーアイコンをコピーし、他のアートボードを全て選択してからペーストすると、インタラクションが設定されたハンバーガーアイコンが全ページに一気に配置されます。

インタラクションを設定したオブジェクトをコピーし、他のオブジェクトを右クリックして「インタラクションをペースト」することで他のオブジェクトにインタラクションのみコピーすることもできます。

（質問）リピートグリッドで例えば3.3.2となった場合どのような方法がありますか？私はクリッピングマスクで切り抜いています。

リピートグリッドを右クリックして「グリッドをグループ解除」し9個目を削除することもできますが、この方法だとリピートグリッドの機能は失われてしまうので、クリッピングマスクの方が再編集できるという点では優れていると思います。

単に9個目の要素が見えなくなればいいのであれば、背景と同じ色の長方形を上に重ねるという手もあります。

（質問）今回紹介していただたTIPSを学ぶにはどういった本、またはWebサイトがおすすめですか？

北村 崇さんの書籍がとても詳しく分かりやすいです（私も一部執筆協力させていただきました。）

また、新しい機能がどんどん追加されていくので、アドビのブログ「Adobe Creative Station」を定期的にチェックするのがおすすめです。

さいごに

2セッション連続で長時間お付き合いいただき、まことにありがとうございました。
また皆さまにお会いできることを、心から楽しみにしています。

XDユーザーグループ大阪版も、ぜひご参加ください。

ダウンロード

Bootstrapありきで考えるXDでのページレイアウト
森 和恵（r360studio）

先日は、ご参加ありがとうございました！みなさんがワクワクしながら真剣に取り組んでいるようすを後ろで眺めていて、Adobe XDというソフトはたくさんの方に期待されているプロダクトなのだなと改めて感じました。

…などアンケートを通じて感想を拝見し、今回のテーマを誤解なくまっすぐお伝えできたことに安堵しております。

わたしは普段、答えがはっきりとしているウェブコーディングやAdobeソフトの使い方をレクチャーしていて、それをどう伝えるか？を悩むことがあまりありません。

しかし、今回登壇した“ワークフロー”の話は「自分はこんな方法で制作をしています」というような主観で語ることが多くなり、是非や可否の判断がむずかしく、「これって、本当に正しいの？」「現場で使えるの？」と明確な答えがないものを模索しながら登壇準備をしました。自分の作業工程を深く考えたことで、ワークフローを振り返るよい経験となりました。

設計からデザインを経て、最終工程のコーディングまで、コミュニケーションをスムーズにするにはルールが必要だと考えています。そして、それをが守ることは次の工程を担当する人への気遣いだと思っています。

今回は、コーディング経験が浅くても仕組みが理解しやすく、普及率の高いCSSフレームワーク“Bootstrap”をルールに選びましたが、みなさんの現場で使いやすいルールがあれば、それをベースにしても同じことができると思います。みなさまの制作が、少しでもスムーズに進むことを願っています。

Bootstrap補足

Bootstrapをこれから学びたい！という方のために、以前にYoutubeライブ配信した動画のURLをご案内します。また、セッション中に紹介したBootstrapのUIキットのURLは下記です。

8月16日ライブ配信のこと

8月16日22時30分から、下記URLでライブ配信を行います。
今回のセッションでお伝えしたことを少しだけ深掘りしたり、いただいた質問にお答えしようかと思っています。

Q&A

(ご質問) BootstrapUI を使う上で、フォントはどう注意すればいいですか？

チームでXDファイルを共有するので「全員のマシンに入っているフォント」を決めて、それだけを使うのがベストです。各々でXDファイルがスムーズに開けます。

開くときに注意メッセージがでるものの、フォントがなくてもXDファイルは開けますので、「最終的に画像にする部分」のフォントはデザイナーだけが持っている状態でも進められます。その場合は、画像の最終的な書き出しはデザイナーが担当します。

「最終的にテキストする部分」のフォントは、全員が持っておくようにしましょう。XDファイルで見たときとウェブサイトの見た目が違ってしまいます。

全員がAdobeCCを契約しているのであれば、CCのサービスで利用できる【 Typekit 】フォントを使うのが手軽です。Typekitは、多くのフォントがWebフォントとしても利用できます。XDファイルでも使えるし、公開するサイトのテキストのWebフォントとしても使えます。

もしくは、オープンソースフォントを使う方法もあります。【 Google Noto Fonts 】のようにダウンロード提供とWebフォント提供の両方あるものを選んでください。

(ご質問) XDでBootstrapテンプレートを作る際もリピートグリッドを使いますか？

デモで少しお見せしましたが、ページをレイアウトする枠（Bootstrapグリッド）は、リピートグリッドで増やすと楽に操作できます。後に、個々にグリッドのサイズを変えるときは、リピートグリッドを解除してから作業します。また、今回デモファイルでは、ナビゲーション部分でもリピートグリッドを使用しました。

「この部分は同じパーツの繰り返しになるな」と思ったら、リピートグリッドをどんどん使います。

リピートグリッド使うと繰り返しの操作が楽になることが多いので、機能を理解して、いろいろな場面で使えると、もっとXDが好きになると思います。

SNSなど

お知らせはTwitter＆YouTubeで。フォロー＆チャンネル登録をお待ちしています。

ダウンロード

ディレクターが考えるXDの導入・活用方法
栄前田 勝太郎（リズムタイプ）

「ディレクターが考えるXDの導入・活用方法」で登壇した栄前田です。ご参加ありがとうございました。

皆さんの業務における導入の参考となるよう、実際のクライアントワークにおける導入や実務における活用方法を紹介させていただきました。
XDはデザイン、プロトタイプ作成、コミュニケーションと多岐に渡って活用できるツールではありますが、新しいツールはそれをいかに導入し、実務においてどのように活用していくかという点が課題になりますので、それについて何かしらの参考になれば幸いです。

セッションの中でお話させていただいたWires jpや、ワークシートに関するリンクを以下に掲載しますので、ワークショップのレポート記事とあわせてご確認ください。

参考リンク

ご意見、ご質問に関して

「ディレクターが考える」といったテーマのセッションでしたが、導入・活用の参考になったというご意見を多数いただけました。また、制作側の視点ではありましたが、発注側となる皆さまも発注される際の参考になればと思います。

幅広くXDを利用したケースを紹介しましたが、もちろん何でもXDを使えばいいということではなく、クライアントやプロジェクトの性質に合わせて適宜判断する必要はあります。今回は幅広く紹介することで、皆さんの参考になるケースがあればと考えていました。

（感想）XDがワイヤーフレームやデザインをするためだけのツールではない事がわかりとても勉強になりました。

それが今回のセッションで伝えたかったことの一つでもありますので、そのような感想をいただけるとありがたいです！

（感想）ディレクターさんにレクチャーしてぜひ導入してもらいます！

ぜひトライしてみてください。
もし上手く行かないようでしたら、ご相談いただいても大丈夫です。

（感想）クライアントにも導入させてみるという発想がなかったです。

もちろんケースバイケースなのですが、クライアントのモチベーションが高かったり、クライアント社内でのコミュニケーションに難がある場合は導入することでワークフローの改善に繋がります。

（質問）デザイナー 1.5人が気になりました。

専業としているデザイナーが1人で、残り0.5人は以前弊社に在籍していたデザイナーにダブルワークで対応してもらっているため、1.5人と換算しています。

（質問）デザインワークに使用しない理由はなんですか？

弊社のデザイナーはPsやAiに慣れている&長けていて、そのスピード感を落とすことなくフローの中にXDを取り入れたいと考えたため、いまのフローになっています。

XDをデザインワークに取り入れるトライは行いましたが、現在の体制ではPs/Aiと併用した方が効果的であると判断しました。（これはチームの体制やプロジェクトの規模感・性質によっても異なると思います）

（質問）デザインの履歴のアートボードを残すというやり方が画期的でよかった。データは重くならないのでしょうか？

XDのみで構成されていれば、データサイズは軽く、アートボードの数が100を超えても気になりません。

またキャプチャや画像を使用した場合も、ファイルを開く・操作することに重さは感じません（アートボードの高さが大きくなると気になる場合があります）

（質問）動的な仕様を詰める時など、画面に対するテキストをまとめたドキュメントがほしいです。XDで可能ですか？

弊社ではアプリに関する仕様書、データの入出力を含めた仕様を記載していますが、それをXDで対応するのが適しているかどうかは、テキストのみで相手に伝えることが可能かどうかで判断された方がよいかと思います。

例えばインタラクション表現をテキストで表現することは難しいかと思われますので、そういった場合は別ツールと組み合わせた方がよいかもしれません。

最後に

当日お話できなかった皆さま、SNSでフォローいただきまして、ご質問などいただければと思います。

それぞれでXD、またそれ以外の情報を発信しています。

Wires jpについてのご意見・ご感想は、Adobe XD JapanのFacebookページ 、または私のTwitter @katsutaro 宛てにいただければと思います。

ダウンロード

コミュニケーションを可視化する！XDストーミング
池原 健治（ソニー・インタラクティブエンタテインメント）

コメント

先日はAdobe XD漬けの半日という長時間に渡ってのご参加ありがとうございました！

私自身、20年ぶりに訪れた大阪の地で楽しくお話させていただきつつ、とても勉強になりました。
まずは皆さまに「Adobe XDは楽しい！使ってみよう！」と感じてもらえたら幸いです。

セッションでもお伝えした弊社リクルートサイト制作にAdobe XDを活用した事例については、過去のインタビュー記事もご参考までに共有させていただきます。

参考リンク

セッション中にお見せしたデモ

ご意見、ご質問に関して

（感想）使い方がいろいろあると思いました。

人によって様々な使い方をしているのもXDの特徴です。ワイヤーフレーム、プロトタイピングツールという枠に囚われず、自分なりの使い方を模索してみるのも面白いと思います！

（感想）PS4 超絶お世話になっております。

ありがとうございます！私もNo Game, No Lifeです！

（感想）その場で議論の中身を反映して見れるのが便利と思いました。

まさに「思考の速度でデザインできる」とも評されるXDは、コミュニケーションしながらのデザインにとても向いていると言えます。

（キーワード）アイデア次第でXDは進化できる。

XDはシンプルな分、幅広く応用が効くので、ユーザーと一緒に進化していくツールだと思っています。

（感想）明らかにイケてない要望を実際に見てもらうことで納得してもらうのは有りだと思いました。

いかに最小限のパワーでイケてなさを見せるかがポイントです。・・が、イケてないと思われる中にキラリと光るものがあるときもあるので、生かすか殺すかはあなた次第です！

（質問）本番系のコンポーネントの運用に使えてしまうのでは？何かリスクや懸念があれば教えてください。

XDのプロトタイプは、テキストも含めてすべて（代替テキストのない）画像として出力されるため、アクセシビリティが保たれないのと、そもそも実体がAdobeのサーバー上にあるため、制作者の管理外となってしまいます。
あくまで、見た目や動きを一時検証するために使用するのが良いかと思います。

（感想）一部XDというのがよくわからなかったです。

XDのプロトタイプは埋め込みコードを利用することで、（Adobeのサーバー上に）公開したプロトタイプを他のWebページに埋め込んで表示させることができます（YouTubeの動画を自分のブログなどに埋め込んで見せるような感じです）。

例えばスライダーのように動くメインビジュアルのプロトタイプを作って、既存のWebページに埋め込むことで、Webページの一部をXDのプロトタイプとして検証する、という使い方もできます。

（質問）全然画面を見ていませんでしたが、どのくらい時間をかけているのでしょうか？

スライドが完成してから１週間はひたすらトーク内容を暗記することに努めました。
その後、PCのモニタをチラ見する程度で話せるようになるまで練習し、最後に演台から離れて体の動きやスライド送りのタイミングまで意識して話せるように、また１週間くらい特訓しました。

このようなプレゼンスタイルは私にとっても初めての挑戦だったのですが、東京でのCSS Niteに続いて今回の大阪版でなんとか形になってきたかな、というところです（笑）。

（質問）プレゼンは何のソフトを使っていますか？

スライドはすべてMacのKeynoteで作成しています。また、スライド送りやデモ中のポインタにはLogicoolのSpotlightを使用しています。

（感想）楽しかったです。

大阪の皆様に楽しんでいただけたのなら幸いです！

SNSなど

ご質問やゲーム話などお気軽にどうぞ！

Twitter: @kenji_clown5
Facebook: 池原健治

ダウンロード

ユーザーと歩むAdobe XDと今後の進化
轟 啓介（アドビ システムズ ）

ご参加ありがとうございました。

XDチームは「Design at the Speed of Thought」という開発ポリシーに基づき、世界中のユーザーさんからもフィードバックをいただきながら開発を進めています。

日本からのフィードバックにも注目しているので、ぜひみなさんのご要望やアイデアをUserVoiceから教えてください！

ダウンロード

  • スライド（PDF） 非公開
  • 動画（8月20日まで）

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

このページの上部に戻る