第47回 岡山WEBクリエイターズ「WebデザインのワークフローとXD」に参加してきました。
日時:2018年8月25日(土)14:30〜17:30
場所:専門学校岡山情報ビジネス学院12F
講師:松下絵梨さん、北村崇さん
XDは使い始めたところだったので、業務での使いどころや注意点などお聞きしたいと行ってきました。
8月は恒例の浴衣で行こう!ということで、講師の松下絵梨さん、北村崇さん、スタッフのみなさん、華やかでした。8月に女性の登壇者って楽しみが増えますね。
![](https://s3-ap-northeast-1.amazonaws.com/zipang/blog/user/8QeXyIqc/image/9cqKgZzy.jpg/org.jpg/146115438074204160/draft/146143037064290304.jpg)
私はちょうどこの日夕方からWordCamp男木島の打ち上げが岡山であるので、一緒に男木島スタッフをした同郷(山口)の村上直子さんと参加しました。
受付も浴衣で華やかです。
![](https://s3-ap-northeast-1.amazonaws.com/zipang/blog/user/8QeXyIqc/image/9cqKheGz.jpg/org.jpg/146115438074204160/draft/146142909683298304.jpg)
コツをつかんでもっと時短!Adobe XDの導入・活用レシピ
まずはツキアカリの松下絵梨さん
![](https://s3-ap-northeast-1.amazonaws.com/zipang/blog/user/8QeXyIqc/image/9feWuzqC.jpg/org.jpg/146115438074204160/draft/151877129529655296.jpg)
特に印象に残ったこと
【リピートグリッド】
リピートグリッドを使うと、繰り返しのデザインが速く作業できます。本当に便利!
・写真は複数まとめてドラッグ&ドロップできる!
・文字は準備したフォルダのままドラッグ&ドロップ!
【アセット】
・カラー
・文字スタイル
・シンボル
の3種類あります。どれも、直感的に操作できるのがすごい。
シンボルの活用
テキストやビットマップ画像は個別に指定できる
・シンボルの置き換え・・・スワップシンボル
ワイヤーフレームの時にディレクターさんがfooterやheaderをただの長方形で用意してくれていると、デザインができた時に一気に変更できる。
デザイナーもディレクターもXDの使い方を知っていると、お互い便利!
デザインを数種類用意してシンボルとして登録しておくと、テキストやビットマップ画像はそのまま、どのデザインがいいか差し替えながら検討できる。
【プロトタイプ】
スマホの実機で動きを確認できる!
制作しながら動きを確認できるし、クライアントさんへの説明も分かりやすい。
・URLやQRコードでXDを持っていないクライアントさんとも動きを共有できる。
・番号付きのコメントをつけることができ、クライアントさんとのやりとりが楽チン。
・デザインスペックを共有することで、カラーコードや文字サイズ、フォントも分かる。
原稿もテキストをコピーして使える。
など、プロトタイプは本当に便利!
まだクライアントさんとのやりとりで使ったことはないので、是非使ってみたいです。
ワイヤーフレームからデザイン、プロトタイプまで、デモで実際に手を動かしながら説明を聞くことができ、しかも実務に即していて、とても分かりやすかったです。
資料をとても丁寧に用意してくださっていて、後でビデオと資料を見返すととても勉強になりました。
ありがとうございました!
Webデザイントレンドから考えるAdobe XDの活用とポイント
つぎはTIMING Designの北村崇さん
![](https://s3-ap-northeast-1.amazonaws.com/zipang/blog/user/8QeXyIqc/image/9feWy9EU.jpg/org.jpg/146115438074204160/draft/151877309725331456.jpg)
北村さんにお会いするのは初めてで、楽しみにしていました。
おうちにいる時も着ている?という甚平姿でラフに楽しくお話ししてくださいました。
北村さんは、より実践的なお話をしてくださいました。
【注意点】
リピートグリッドを使った時
・写真を一つ入れるとそこだけの差し替えになるが、複数入れると全てが差し代わる。
アセットで色を変更する時
・アセットで色を変更すると、同じ色のものは全て変わってしまうので注意。
・北村さんは、XDでワイヤーを作るときは、背景にうっすら色を残しておくそうです。
Illustrator → XD
・コピーは注意が必要。
・素材で作ったアイコンなどはCCライブラリで管理した方がいい。
【良い点】
XDはまだ発達途上ですが、良さは、
早くて軽くて簡単!
ということ。
軽さは正義!
どのアプリケーションも得意分野がそれぞれあるので、XDならではの使い方を便利に使っていくと良いということです。
また、『シンボルの中のテキストは編集できる機能と、リピートグリッドの機能を組み合わせて使う』デモも、便利だなあと思いました。
トークセッション
![](https://s3-ap-northeast-1.amazonaws.com/zipang/blog/user/8QeXyIqc/image/9cqK32wC.jpg/org.jpg/146115438074204160/draft/151912501915598848.jpg)
最後は、松下絵梨さん、北村崇さん、司会のCODE54の後藤さん、サブ司会でデザイナーの堀田さんの4人でのトークセッションでした。
みなさんからのtwitterでの質問に答える形でした。
書き出しに関して気になっている方が多かったようです。
Q:XDからの画像の書き出しは?
A:等倍で書き出します
(1)等倍で作る
(2)書き出すときに書き出し先:”web”
設定サイズ:”1x”
1x・・・1倍で作った
2x・・・2倍で作った
*あなたの作ったアートボードは何倍ですか?という1x、2xなので、書き出すサイズは1xで。
Q:文字サイズは
A:今のところ”px”だけです
Q:ディレクターさん的に使うとすれば
A:仕様書とスタイルガイド兼ねたものが作れる。
パワーポイントの代わり、プレゼンにも使える。
3週間以上も経ってしまったのですが、セミナーに出ただけにならないためにも書きました。
セミナーに沢山参加して参加しただけになっていないか、という反省があって、今後はアウトプットすることで自分のインプットも促して行きたいです。
会場は、私も非常勤講師として勤務している専門学校岡山情報ビジネス学院 の12階のホールで、担当しているWebデザイン学科の1、2年生も参加していたので、私も一緒に学ぶ側として参加できたのは刺激になりました。
XDはチームのメンバー皆が使えるようになると、より便利になるのだろうなと思いました。
積極的に使って身につけたいです。
松下さん、北村さん、岡山webクリエイターズのみなさん、ありがとうございました。
写真:全てイメージフォト 田中秀和さん