CSS Nite LP57「All About XD」再演版フォローアップ(8)北村 崇さん、湯口りささん

2018年6月30日(土)大崎ブライトコアホールで開催したCSS Nite LP57「All About XD」再演版のフォローアップとして、北村 崇さん(TIMING DESIGN)、湯口りささん(ネットパイロティング)、轟 啓介さん(アドビ システムズ)の『Adobe XDとともに進化するデザインの未来』セッションのスライドなどを公開します。

フォローアップメッセージは、イベント開催直後(2018年6月)の時点のものです。

フォローアップ

ご参加ありがとうございました!
最後のセッションということで、他のセッションでカバーしきれなかった細かなポイントや、これからのお話をさせていただきましたが、他にもまだまだ伝えたいことや伝えきれなかったこともあります!
XDは今後もどんどん進化をしていくと思いますので、皆さんも色々な使い方をためしてみてください。またデザイナーやディレクター、プロジェクトをつなぐ架け橋としても、ぜひ活用してみてください。

コメント湯口

ご参加ありがとうございました。
XDは、「できないかも?」が「できちゃう!しかも簡単に」に変わっていく毎月の更新が楽しみなデザインツールです。その楽しさを少しでもお伝えできたならとても嬉しいです。
今回のイベントをきっかけに、社内での情報シェア、グループ活動・SNSでのちょっとした投稿といった小さなところからXDそのものを利用してみたり、周りの方におすすめしたりしてみてください。
XDからはじめるデザインコミュニケーションでどんどん周りを巻き込んでいきましょう!

質問と回答

JPGは結局自分で2倍を作らなければいけない?

いいえ。次の手順で1倍と2倍サイズのJPGファイルを一度に書き出せます。

  1. XDで予め用意されているアートボードを作成します
  2. 書き出したい画像を配置しサイズ調整や型抜きなどの加工をします
  3. 書き出す画像を選択して書き出しの設定をする画面まで操作を進めます
  4. フォーマットを「JPG」に指定します
  5. 書き出し先を「Web」に指定します
  6. 設定サイズは「1x」に指定します
  7. 書き出します

注意点は、2倍程度のサイズの画像を用意しておくこと。そうしないと2倍で書き出した画像が荒くなってしまいます。

もし、デザインは実寸の二倍サイズで作ることが決まっている場合には、アートボードのサイズに注意し、設定サイズに「2x」を設定します。

※設定サイズについては、配布している「スライド中の書き出し設定一覧表部分」を参考にしてください。

オーバーレイ スクロールやり方がわかりません

  1. どの領域でスクロールさせたいかを親のアートボード上でデザインします
  2. アートボード外に作ったデザインを移動します
  3. アートボードツールで移動したデザインに沿ってアートボードを作成します
  4. 背景になるシェイプを固定位置にします
  5. アートボードを選択してスクロールの項目を「垂直方向」に設定します
  6. アートボードの高さを広げます
  7. プロトタイプモードでオーバーレイを設定します

配布しているデモファイルで、ちょっと工夫が必要なオーバーレイサンプルを確認できます。オーバーレイ スクロールも設定済みですので合わせてどうぞ。

URL

毎年年末に開催している「Shift」シリーズの第12弾として、2018年のWeb制作シーンを振り返ります。