Adobe XD ユーザーグループ広島、第4回は「デザイン模写のもくもく会」つまり「もしゃもしゃ会」ということで開催したので、レポートします。

これをもくもく会と呼べるのか？

集まったのは参加者22名、サポート枠3名、それに運営スタッフ数名を加えて、なんと総勢30名ほど！

開催して、おそろしい（？）ことに気づきました。

これ全然「もくもく」じゃない。

だれも「もくもく」と作業なんかしていない。

そりゃあこんな人数で「もくもく」なんてなるはずなかったわ。

質問とアドバイスが飛び交い、雑談も交えてワイワイがやがや。
もう「もくもく会」の看板を下げて、ハンズオンとかワークショップとか、別の看板を掲げるべきだったか？
そう思うくらいの大盛況。嬉しい誤算というべきでしょうか。

ご参加くださった皆様のおかげです！
いつも来てくださる方、本当にありがとうございます。
初めてだった方、見つけてくださってありがとうございます。

ではでは、ここから詳しくレポートしていきます。

2020のXDUG広島はペースアップ

昨年2019は、2〜3ヶ月に一度のペースで開催してきましたが、2020年は頻度を上げて月一ペースでイベントをしたいと思っています。
そのかわり、二回に一回は「もくもく会」として、運営の手間をかけずにライトに開催する予定にしています。

会場はいいオフィスにご協力いただきました！

いままでの会場は、人気で予約が取りづらいのが悩みでした。そのために開催頻度が増やせなかったという事情もあり。。。

今回、お願いして「いいオフィス 広島」を使わせていただきました！ありがとうございます！
コンセントもWiFiも充実していて、本当にありがたいです。

大盛況でサポートも充実

はじめてのライトな（？）もくもく会。今回サポートに立候補くださったのは頼もしい３名。

●デジハリでXD講師を務めるエンジニアの山ちゃんこと山本さん
●XDチャレンジでプロトタイプをバリバリ作っていたわさびたろうさん
●実務でプロトタイプをゴリゴリ作っているヤンプーこと柳谷さん

こんな豪華メンバーが、皆さんのサポーターについてくれました！
詳しい人に気兼ねなく聞ける、ぜいたくですね〜！

私は一応、前のスクリーンでスクショの撮り方とかガイドのひき方とかをやって見せる係でしたが、サポートが手厚いのであんまりやることもなく、現場にまるっとお任せしてしまいました^^;

おさらいメモ

聞き逃した方のために、私が紹介した機能をメモしておきます。（気になったらおググりください！）

スクショを撮る方法

今回はSafariで開発者ツールからスクショする方法をご紹介しました。コードでbodyを選択して右クリック→スクリーンを取り込む
他にもAwesome Screenshotなどのアドオンを使う方法や、Chromeでも開発者ツールで撮る方法もあったかと。

プラグイン　Mimic

URLからカラーコードやフォント名を抽出できる

プラグイン Image minify

大きすぎる画像をXDに貼ったとき、倍率と画質を指定して圧縮できる。

プラグイン　Split Rows

テキストを行ごとにばらしてくれる。

プラグイン　TrimIt

テキストボックスやリピートグリッドをいい感じにトリミングしてくれる。
（Text ToolboxのAdjust heightはテキストボックスだけできる）

プラグイン　Resize Artboard to Fit Content

アートボードを内容に合わせて高さ調整してくれる。
（一応TrimItもアートボードをフィットできるけど、横幅をキープする設定があるのでこちらの方が使い勝手が良い）

プラグイン　RepeatGrid Fitter

リピートグリッドを、数を指定して生成できる。
そして端数があるときにマスクしてくれる。

便利なプラグインの数々、開発者さんに感謝しながらバンバン使わせていただきましょう！

手を動かして、楽しくデザイン力アップ！

準備不足な面もあったと思いますが、「すごく楽しかった」「スタッフやサポートの方に直接教えてもらえてよかった」というお声をいただいて、嬉しい！よかった〜！

模写するにあたって、「参考サイトは横幅1400pxまでは可変で、それ以上は左右に余白が出てくるから、アートボードは1600くらいがいいんじゃないか」などの気づきをいただきました。
模写のいいところは、普通に眺めるだけでは見えないポイントに気づけることだと思います。
みなさんそれぞれ、「この横幅、どう動くんだろう」とか、「それぞれの余白はどういう法則性があるんだろう」とか、よく観察していただいたと思います。

見かけだけの模写からレベルアップを目指して

コーディングにむけたカンプやプロトタイプを想定して学びたいなら、見た目をなぞるだけではいけません。
たとえば柳谷さんからいただいた指摘で、「メニュー項目を、テキストをひとつひとつばらさないでスペースや改行で見た目だけ再現してしまうと、プロトタイプにしたときリンクが貼れない」というのがありました。確かに！
ただ見た目をなぞるのではなく、ボタンはばらしてコンポーネント化したり、レスポンシブでもうまく動くように調整したり、プロのカンプに近づける方法も学びたいですね。そういったトレーニングプログラムも今後の課題です。

これからのこと

次回は3/15に大きめの会をやる予定です。
すでに募集ページからお申込みいただけます。
3月は、もくもく会ではなくセミナー形式になる予定です。
ぜひご参加ください！

そして、4月には再びもくもく会！
（ワイワイがやがや会かもしれないけど！とにかく手を動かす会！）

今回の気づきを活かして、より良い学びの場にできるよう頑張ります！よろしくお願いします〜。