LIFE is 日々一歩(75)[ウェブ]作図に役立つ Adobe XD(1)
── 森 和恵 ──

投稿:  著者:



こんにちは! 森和恵です。暑い夏の日か、ジメジメと梅雨が続きますね。今回は、久しぶりの動画でウェブ学ぼう! の回です。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