こんにちは! 森和恵です。暑い夏の日か、ジメジメと梅雨が続きますね。今回は、久しぶりの動画でウェブ学ぼう! の回です。Adobe XDについてのシリーズを始めます。
前回ご紹介したイベントの開催に向けて、連動企画としてお送りします。
【CSS Nite in Osaka, vol.45「All About XD」 w/YATのblog】
http://cssnite.jp/osaka/vol45/
早割りが明日までなので、ご検討中の方はぜひこの機会に。
わたしは、「Bootstrapありきで考えるXDでのページレイアウト」というセッションを担当します。こちらの連載でも、XDとBootstrapにつなげていきますのでお楽しみに。
●最近のXDとわたし
Adobe XDは、ウェブサイトやスマホアプリなどの画面設計を行うツールです。
https://www.adobe.com/jp/products/xd.html
レイアウトに長けたツールで、これまでのAdobeソフトの中だとIllustratorと操作感が似ていますね。
従来のAdobeソフトと設計方針が異なり、「速い・軽い・簡単」に作られているのが驚きです。
ということもあり、わたしもウェブデザインツールとして使い始めたのですが、結局、一番よく使っている機能が「作図」になっています。
というのも、インストラクターという仕事をしているため、講座のテキストを作る作業が多いのです。テキストでは操作手順や仕組みなど、とにかく図をたくさん作ります。
アートボードを50枚ぐらい並べ、たっぷりのスクリーンショットや図をおいても軽く動くXDは、手放せなくなってきました。
ということで、このコラムでは「作図にXDを使ったら、(Illustratorと比べて)楽に作業できるよ」ということを語ろうと思います。
●動画でウェブ学ぼう!「作図に役立つ、Adobe XD」
XDでパス操作を解説した動画をYoutubeにアップしました。
今回の操作のポイントは、下記の通りです。
※ツールの()は、ショートカットキーです。
・新規作成とXDの起動画面の構成
・アートボード(A)ツールとアートボードの作り方
・選択(V)ツール、長方形(R)ツール、楕円(E)ツール
・プロパティインスペクター
・パス(P)ツールとパス描画の基本操作
・パスの方向線の連動を外すには[option]([Alt])キー
・オープンパスは[ESC]キーで終わる
・写真を配置するとシェイプができる
●Adobe XDの基本情報
Adobe XDは、まだ歴史の浅いツールです。現時点で、解説書も発売されていません。(7月以降、たくさん出版されると聞いています。)
日頃の情報源としては、下記を押さえておくとバッチリです。
【Adobe XD勉強会(XD ユーザーグループ)】
https://www.facebook.com/groups/xdstudy/
【ほぼ毎月Adobe XD勉強会 - connpass】
https://xd-study.connpass.com/
※東京では、毎月、XDユーザーグループの勉強会が開催されています。
開催後、スライドや動画が公開されています。
【Adobe XD - ホーム】
https://www.facebook.com/AdobeXDJapan/
※公式のFacebookページです。
【Adobe XD Feedback : Feature Requests & Bugs】
https://adobexd.uservoice.com/
※XDは、毎月バージョンアップを繰り返し、進化しています。ここでは、ユーザーからの機能追加のリクエストを受け付けています。投票数が多いと、あなたのリクエストが実現するかも知れません。
……というわけで、今回はここまで。次回も引き続き、XDを使った作図について、便利な機能を紹介しますね。
そして、久しぶりにYoutubeライブ配信をします。6月7日夜10時半より「Bootstrapありきで考える、XDページレイアウト」でお話します。
チャンネル登録も、お待ちしております。
https://www.youtube.com/r360studio
ではまた、次回お目にかかりましょう!
(^^)
【森和恵 r360studio ウェブ系インストラクター】
r360studio@gmail.com
http://r360studio.com