Chiaki KOUNO 2/12（火）に行われたオンラインのWordPress勉強会『WP ZoomUP』、今回は第10回目の開催となりました！今回のテーマは「はじめてのAdobe XD入門。まずはこれを知っておこう！」。ご参加いただいたみなさん、スピーカーを務めてくださったr360studio 森和恵さん、ありがとうございました！
WP ZoomUP の概要、参加方法、運営者情報はこちらにまとまっています。
Adobe XDは、画面設計からプロトタイプを作るためのツールです。
https://www.adobe.com/jp/products/xd.htm
これからXDを使ってみようという方向けに、１時間でざっくりとした全体像を教えていただくということでしたが、導入前の手引きから始まり、使い込んでこそ気づくあれこれなど、実用的なポイントが盛りだくさんな内容となりました。
もくじ
開催概要
- 2019/2/12（火） 21:00〜23:00
- 最大参加人数：約50人
- connpassイベントページ
- Togetter（ツイートまとめ #wpzoomup）
- スピーカー： 森和恵 （Twitter、YouTube）
導入
Mentimeterという双方向プレゼンツールを使ってWP ZoomUPの説明やアンケートを行いました。ここではまず、ご参加地域の都道府県名、職業や得意なこと、WordPress歴などをお伺いし、WP ZoomUPの概要をご案内しています。
今回はそれに加えて、
- Adobe XD を使ったことがありますか？
- Photoshop、Illustratorを使ったことがありますか？
- どんな用途でXDを使う予定ですか？
といったアンケートをリアルタイムで実施しました。
セッション『はじめてのAdobe XD入門。まずはこれを知っておこう！』（r360studio 森和恵）
“むずかしいことでも、わかりやすく伝える”をモットーに、講師歴19年という大ベテランの森和恵さんの軽快なトークでスタート。「早口だったり、大阪弁強かったりしませんか？」という森さんの問いかけにチャットでは「むしろ大阪弁で嬉しいです」という声もあり、とても和やかなスタートとなりました。
セッション内容
- 導入前の手引き（無料スタータープランと有料版の違いなど）
- 基本機能の紹介（画面構成とツール。Illustratorとの比較）
- 他のAdobeソフトとのデータ連係（読み込み／書き出し）
- XDでプロトタイプを作るためのワークフロー
お疲れ様でした！
「ここはどうなる？」といった質問が出るたびに、森さんが「実はこの後ご説明しようと準備していたデータがありまして…」と、どんなボールも打ち返してくださるプロフェッショナルぶりには驚かされるばかりでした！
23時までの本編時間内に「プロトタイプを作るためのワークフロー」がおさまらなかったのですが、懇親会タイムに突入してからの延長セッションを森さんにご快諾いただき、プロトタイプモードでのデモも見せていただくことができました。改めまして、素晴らしいセッションをしてくださった森和恵さん、本当にありがとうございました！
そして、森さんから、下記フォローアップ情報をいただいております。
森和恵さんからのフォローアップ情報
【Adobe XD で使用できるすべてのショートカットキーを紹介します。】
https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html
【無料のUIデザインキット、アイコン、プラグイン | Adobe XDの素材】
https://www.adobe.com/jp/products/xd/resources.html
【Google Sheets for Adobe XD】
https://googlesheetsforadobexd.impekable.com/
【Adobe XD
https://adobexd.uservoice.com/
隔週水曜日のライブ配信のお知らせ
森和恵さんは隔週水曜日にYouTubeでライブ配信を実施されております。ぜひこの機会にチャンネル登録をしてご覧ください！
《 https://www.youtube.com/r360studio 》
WP ZOOMUP の今後をフォローしよう
【次回予告】#11 WP ZoomUP WordPressのバックアップやお引越しどうしてる？
WordPressバックアップをとるには、どんな方法があるのか。場合によってのオススメの方法など、バックアップに関するあれこれをみんなで一緒に考えましょう。何人かの方にお話していただく予定です。
また、バックアップデータから派生するあれこれとして、WordPressのお引越しやリストアについてもお話ししましょう！
▼参加登録
https://wpzoom.connpass.com/event/117976/
それでは、また次回お会いできることを楽しみにしています！
チャットログ
21:09:45 taizo fujita : 見るだけ。だと、誰がいてるのかもわからないんですね
21:11:30 三浦 力松 : はじめまして。見るだけ参加ですがよろしくお願いします。
21:11:33 naoko murakami : menti.com
にアクセスして下記を入力
96 53 23
もしくは、下記にアクセス
https://www.menti.com/dcd76f11
21:12:07 naoko murakami : 【 Mentimeter参加 】↑にアクセスされてください^^
21:12:39 Shinichi Nishikawa : Facebook Live 始まりました。 https://www.facebook.com/pg/wpzoomup/videos/
21:13:02 sayokomiura : パネリストになりたいけど視聴者のままの方は、手をあげてくださいね
21:14:06 deniyung : ww
21:15:56 はざ くみ : 見るだけ参加です～やっと入れました♪
21:16:12 sayokomiura : ありがとうございます！
21:16:18 naoko murakami : ようこそ！よろしくお願いします！
21:18:26 naoko murakami : 【 フィードバック 】
セッションアイディア募集フォーム
https://goo.gl/forms/TTVxcHsp4KoXEAWB2
登壇者募集フォーム
https://goo.gl/forms/gQVzjJDN2lT04qnN2
イベント改善提案フォーム
https://goo.gl/forms/XGPF0q99HXDYX2Zp2
21:19:09 naoko murakami : ↑こちらのフォームです！
21:19:23 naoko murakami : 【 WP ZoomUP 】
https://twitter.com/WPZoomUP
●Fbグループ
https://www.facebook.com/groups/1901906396782839/
●Fbページ
https://www.facebook.com/wpzoomup/
●Youtube
https://www.youtube.com/channel/UCzG2FqDp9MxxExrJHi1NFKQ
●ウェブサイト
http://wpzoomup.sakura.ne.jp/staging/
21:23:25 太田晴信 : そもそもXDとはなんぞやです・・・
21:23:27 ヤマシタ : お二人のクッションの縁が丸いのと、丸くないあたりにこだわりが。
21:23:44 本田 季之 : 触ったことはあります。
21:24:29 sachi majima : 実案件で導入されてる方も多いのかな？
21:25:02 太田晴信 : 使ったことはある。使いこなしてはいない
21:26:40 達男 山本 : AdobeXDでプレゼン資料のテンプレートを作ったからダウンロードしてね
https://arutega.jp/xd-presen/
21:27:04 太田晴信 : プロトタイプとかワイヤーフレームを作るソフトですか？
21:27:14 naoko murakami : 山本さん、ありがとうございます！出席者の方にも共有しますね。
21:27:14 naoko murakami : AdobeXDでプレゼン資料のテンプレートを作ったからダウンロードしてね
https://arutega.jp/xd-presen/
21:27:30 本田 季之 : https://twitter.com/webmemo777/status/1094357921318633472
21:27:37 太田晴信 : デザイナーが使うものですか？コーダーが使うものですか？
21:28:28 sayokomiura : 【 森和恵さん 】
★YouTubeチャンネル
https://www.youtube.com/r360studio
https://twitter.com/r360studio
21:29:10 太田晴信 : 森さんのYouTubeよく聴かせていただいています。Dreamweaver勉強になりました
21:30:32 ヤマシタ : 技術書典で買った森さんのXd同人誌は、同僚さんたちに好評で帰ってくる気配がありません。やっぱり書籍は強い！
21:31:15 Hiroki SAIKI : 888888888888888888
21:31:25 naoko murakami : 8888888888888888888
21:31:31 chiaki kouno : 888888888888
21:31:32 nukaga : 888888
21:31:38 sayokomiura : 888888888888
21:31:42 alitomo : 8888888
21:31:42 太田晴信 : ８８８８８８
21:31:59 太田晴信 : プレゼンスライドも作れるんですか？？
21:32:09 太田晴信 : 登録しています
21:32:17 naoko murakami : 【再掲】
21:32:19 naoko murakami : ★YouTubeチャンネル
https://www.youtube.com/r360studio
21:32:26 naoko murakami : ★Twitter
https://twitter.com/r360studio
21:32:33 Shinichi Nishikawa : 823人になった！
21:32:42 Hiroki SAIKI : おお！
21:32:50 依泰西村 : むしろ大阪弁で嬉しいですw
21:32:56 本田 季之 : 大丈夫ですよー
21:33:10 naoko terakawa : こんばんは！勉強させていただきます。
21:33:21 naoko murakami : 【 チャットの宛先について 】
メッセージ入力欄のすぐ上にある”宛先”で『全てのお姉リストおよび出席者』をお選びいただくと、『視聴（見るだけ参加）』の方にも発言をご覧いただけます(^^)/
21:34:44 太田晴信 : パワポの時代は終わったか・・・・
21:35:10 chiaki kouno : *全てのお姉リスト → 全てのパネリスト (＾＾)／
21:35:25 naoko murakami : （河野さんありがとうございます！）
21:35:35 naoko murakami : ★Adobe XD公式ページ
https://www.adobe.com/jp/products/xd.html
21:36:04 sachi majima : ズームイン・アウト、⌘+スペースキーでしてました〜
21:36:18 ヤマシタ : 技術書展6 の新刊 期待してます。
21:36:21 太田晴信 : CCの更新忘れてた・・・
21:40:42 Shinichi Nishikawa : ほんとにクラウドベースの考え方なのかな。まさにソフトウェアアップデートっていう。
21:44:28 Shinichi Nishikawa : 聞くモードに入ってますねｗ
21:45:01 shoko matsuo : へええ、、、Windows版はこうなっているのかああああ。初めて見ました
21:47:04 依泰西村 : 初めて触った時、勝手にダイレクト選択ツールに変わって焦った・・・w
21:47:48 sachi majima : ダイレクト選択ツールのクセでXD使うと、アートボードがボボボとできてびびります…
21:48:44 naoko murakami : アートボードがボボボ！！！
21:50:32 依泰西村 : 慣れたらメニューから探す必要がないので便利そうですね
21:52:14 taizo fujita : へええ
21:52:29 ヤマシタ : パス切れないんですね・・・自分これハマってました。
21:52:47 TOMOMI NAKATANI : おー…
21:53:13 太田晴信 : イラレからXDのコピペを実演してください
21:57:27 ji ni : 最近のアップデートでイラレからの持ち込みが向上したらしいですが、どう変わったんでしょうか。
22:00:00 ji ni : おぉ、構造も！すごい。
22:00:28 ji ni : ありがとうございます
22:01:07 吉田 哲也 : PSのデータも同じように持ってこれるんでしょうか。と聞こうと思ったら、ちょうどでした。ありがとうございます。
22:01:19 ヤマシタ : イラレで画像を埋め込みではなくリンクしてた場合、どのような表示になるんでしょうか。
22:01:30 TOMOMI NAKATANI : AIやPS互換が増えるのはありがたいけどその分Xdの動作が重くなったりしてませんか？（互換性ない分軽い！みたいなことを以前聞いたので）
22:07:00 依泰西村 : 正にWeb用のツールって感じですね
22:07:08 太田晴信 : ということは、今はまだCSS出力はできないんですね。。。
22:08:04 nukaga : 【 チャットの宛先について 】
メッセージ入力欄のすぐ上にある”宛先”で『全てのパネリストおよび出席者』をお選びいただくと、『視聴（見るだけ参加）』の方にも発言をご覧いただけます(^^)/
22:08:29 達男 山本 :
シフト押しながらだと大丈夫みたい。
22:08:48 ヤマシタ : マスクをした画像がおかしい拡大縮小になったのはこれだ！！レスポンシブサイズ変更かー。
22:08:59 吉田 哲也 : レスポンシブサイズ変更は、どういうときにONにすると便利なんでしょうか？
22:09:43 Shinichi Nishikawa : 「その質問の答えはこちらに用意してあります感」すごい。
22:10:59 nukaga : すごい
22:11:14 KEISUKE HORIE/移動中… : レスポンシブサイズ変更。XDの凄さに目が覚めた！
22:11:30 sachi majima : CSSっぽいですね〜
22:12:25 誠信 福島 : リピートグリッドも便利ですよね
22:12:34 kaori mizozoe : すごい機能
22:12:40 吉田 哲也 : なるほど！分かりました。ありがとうございます。
22:14:09 太田晴信 : Adobeにフィードバックしましょ・・・デフォルトをオフにしてって・・・・
22:14:10 alitomo : 環境設定とかでデフォルト変えれないのかなー？
22:15:28 alitomo : まじか！？
22:15:35 yori3 : macも環境設定ないっぽいですねー
22:15:41 ヤマシタ : そういえば、環境設定みたいなもんはないの裏返しではないですが、いろいろなプラグインには助けられてますね。
22:15:54 sayokomiura : 環境設定がグレー
22:18:18 sachi majima : 小ネタありがたいです
22:18:38 太田晴信 : 小ネタ集・・・しかし、まぁなんですねぇ・・・
22:21:21 naoko terakawa : ８８８８８８
22:21:48 yori3 : この機能がかなり
22:21:54 alitomo : 8888888
22:22:12 chiaki kouno : 888888
22:22:44 sachi majima : CSV流し込みプラグインあるんですね！ お客さんに原稿用意してもらうの捗りそうです
22:24:31 sachi majima : テキストの行数が変わると、リピートグリッド解除するしかないのかな
22:27:57 sachi majima : ありがとうございます！
22:28:11 sayokomiura : すごい！
22:28:48 sachi majima : パーツの大量生産にも使えるリピートグリッド
22:29:01 chiaki kouno : すごくわかりやすかったです！
22:31:43 alitomo : 移動ツールでドラック＆ドロップは出来ないのかな？
22:32:37 taizo fujita : これいい
22:32:58 kaori mizozoe : おぉ
22:32:58 TOMOMI NAKATANI : ふむふむ
22:33:10 chiharu ebisugawa : nannte
22:33:12 Shinichi Nishikawa : コピペとは何かということが問われている気がする！
22:33:18 chiharu ebisugawa : 便利ですね！
22:33:44 alitomo : ありがとうございます。
22:34:21 yori3 : ツールを役割ごとに割り切って使い分けた方が良いかもですね。
22:36:35 nukaga : 8888
22:36:53 alitomo : イラレのシンボルやね。
22:36:58 ヤマシタ : 画像リンクが進化してた！
22:37:01 sachi majima : 写真やイラストなどのパーツを各種ツールで作って、それをXDでレイアウトするみたいな感じですね
22:37:04 誠信 福島 : CCライブラリにはいつもお世話になってます
22:37:14 yori3 : CCライブラリってこうやって使うのか！
22:38:50 Shinichi Nishikawa : クラウドサービスですな。
22:38:55 Shinichi Nishikawa : なるほどー。
22:40:35 kaori mizozoe : CCライブラリーが分からなかったのでためになりました
22:43:43 taizo fujita : そのままスルッと書き出してくれます？
22:44:47 sachi majima : 自己申請方式ですね
22:45:55 taizo fujita : 非常に荒い画像になるのですが
22:46:05 deniyung : 倍で作らないと、2xの写真が荒くなったりしませんか？
22:46:26 taizo fujita : テキストのシャドーとか
22:46:32 Shinichi Nishikawa : 出た！「この後出てきます」すごい！
22:46:36 Hiroki SAIKI : あーでも以前は横幅640pxのデータで作ってもらってたわw
22:46:57 TOMOMI NAKATANI : Psの時はデザイン倍のサイズで作ってもらってましたねー
22:49:04 Hiroki SAIKI : テキスト周りはボケてますかね
22:49:33 alitomo : そのための２倍でアートボードごとつくる仕様があるのですね。
22:49:47 達男 山本 : Photoshopでは大きいサイズでもjpg（スマートオブジェクト）ではだめで、jpgをpsdに変換したものを使っておけばきれいに出力される、めんどう。
22:51:45 達男 山本 : Camp男木島のpsdは二倍だった
22:53:01 Hiroki SAIKI : 888888888888888
22:53:05 alitomo : 聞きたいです！！
22:53:09 chiaki kouno : 聞きたいです！
22:53:11 sayokomiura : 8888888888888888888
22:53:15 sachi majima : 888888888888
22:53:15 takeshifurusato : ありがとうございます！！
22:53:16 alitomo : 888888
22:53:16 chiaki kouno : 有難うございます〜！
22:53:17 shizumi : 88888888888
22:53:17 ji ni : 8888888888888
22:53:18 RyoUozumi : 888888888888888
22:53:18 Hiroki SAIKI : 8888888888888888
22:53:18 kaori mizozoe : 8888888
22:53:18 達男 山本 : 888888888
22:53:18 本田季之 : 8888888888
22:53:19 sayokomiura : ありがとうございました！！
22:53:19 shoko matsuo : 88888888888
22:53:19 誠信 福島 : ありがとうございました！
22:53:19 はざ くみ : 88888888
22:53:19 deniyung : ありがとうございましたー
22:53:20 chiharu ebisugawa : 888888888888888
22:53:21 yori3 : 88888888888888
22:53:22 吉田 哲也 : ありがとうございました
22:53:23 naoko murakami : 88888888888888888888888888
22:53:23 naoko terakawa : 8888888888888
22:53:25 TOMOMI NAKATANI : ありがとうございました。参考に利ました
22:53:26 Kei Sato : ありがとうございました！
22:53:33 はざ くみ : おつかれさまでした～♪
22:53:36 shoko matsuo : わかりやすかった！
22:53:37 TAISUKE MICHINO : ありがとうございましたー
22:53:41 茜 戸高 : ありがとうございました。勉強になりました
22:53:43 alitomo : ＸＤ改めてつかおーって思いました。
22:53:52 Hiroki SAIKI : 流れがスムーズすぎる…！
22:53:52 yori3 : すべてお見通しw
22:54:10 naoko murakami : 【 第10回アンケート 】
https://goo.gl/forms/pwyAvgl0pQpGwjk92
22:54:25 naoko murakami : 【 次回予告 】
11 WP ZoomUP WordPressのバックアップやお引越しどうしてる？
2/21（木）21:00〜
▼ 参加申込み
https://wpzoom.connpass.com/event/117976/
22:55:18 sayokomiura : ★CSS Nite in Osaka, vol.45「All About XD」フォローアップ
https://cssnite.jp/archives/post_3011.html
22:55:33 yori3 : チャンネル登録してきました！
22:55:44 三浦 力松 : ありがとうございました。
22:56:34 yori3 : こっそり宣伝
22:56:36 yori3 : https://connpass.com/event/119244/
22:56:56 naoko murakami : ↑WordCamp Osaka 2019を企てる会
22:57:03 KEISUKE HORIE : ギリギリ写真撮影に間に合った…
22:57:40 alitomo : 8888888
22:57:50 Hiroki SAIKI : 8888888888888888888
22:57:54 sachi majima : ここで失礼します！ ありがとうございました〜〜
22:57:55 naoko terakawa : ありがとうございました。
22:58:07 taizo fujita : さっきの質問の確認だけしたいのですが
22:58:19 Shinichi Nishikawa : taizoさん、どうぞ！
22:58:35 taizo fujita : しゃべっていいですか
22:58:45 Shinichi Nishikawa : douzo!
22:59:27 KEISUKE HORIE : Taizoさん、きたー！
23:07:59 Hiroki SAIKI : バージョンアップで変わってるとかありませんか？
23:09:07 ヤマシタ : Winで書き出したときに、ドロップシャドウがシャギシャギになったことはたしかにありました。原因はわからないままでしたが、他に体験されている方がいたので、それはそれで安心しました。
23:10:52 Hiroki SAIKI : このへんかな？
23:10:53 Hiroki SAIKI : https://adobexd.uservoice.com/forums/353010-adobe-xd-bugs
23:14:01 Hiroki SAIKI : もう飲んでますから大丈夫
23:14:25 shizumi : 懇親会は大体4時を超えるので誤差ですｗ
23:14:27 naoko murakami : ★Copy CSS to Clipboard
https://github.com/peterflynn/xd-copy-css-code
23:14:31 敦子鈴木 : ありがとうございます！
23:16:32 alitomo : すげー
23:16:52 Shinichi Nishikawa : Javascript で書けるんですね。
23:16:55 shizumi : text-shadowは助かるー
23:17:54 Shinichi Nishikawa : manifest.json でショートカットキーの指定ができるのでここなら自分で変えられそうですね。 https://github.com/peterflynn/xd-copy-css-code/blob/master/manifest.json#L21
23:18:12 naoko terakawa : 88888888
23:18:17 敦子鈴木 : 888888888888