こんにちは、森和恵です。今回は、久しぶりにAdobeXDのことを話します。
ウェブ制作を教えるインストラクターという仕事がら、専門知識の勉強は欠かせません。わたしがどんなふうにスキルアップをしているかについても、語れたらいいなと思っています。
さて、まずは本編を始める前に、YouTubeチャンネルのおすすめ動画紹介から。
先日、うちのチャンネルでは初めての、コラボ回をライブ配信しました。
YouTubeチャンネルでは、『コラボ』と呼ばれるチャンネル同士でお互いに出演する、コラボレーション放送が定番で、「うちも誰かと組んで放送したいな」と思っていたので、念願が叶いました。
・WordPressテーマ Nishikiの“ちょっとイイ”お話を聞こう！
WordPressテーマ“Nishiki Pro”の開発者である、AnimaGate 今村哲也さんとインタビュー形式で、テーマの特長やおすすめ機能、開発にかけた思いなど、興味深いお話を伺いました。
日頃お聞きできない裏話や、本音トークもでてきたりと、興味深い放送となりました。
自分ひとりでは得ることができない時間が過ごせたので、定期的にコラボ回を企画していきたいと思います。
……ということで、さっそく本編に進みましょう。
ウェブ制作を教えるインストラクターという仕事がら、専門知識の勉強は欠かせません。わたしがどんなふうにスキルアップをしているかについても、語れたらいいなと思っています。
さて、まずは本編を始める前に、YouTubeチャンネルのおすすめ動画紹介から。
先日、うちのチャンネルでは初めての、コラボ回をライブ配信しました。
YouTubeチャンネルでは、『コラボ』と呼ばれるチャンネル同士でお互いに出演する、コラボレーション放送が定番で、「うちも誰かと組んで放送したいな」と思っていたので、念願が叶いました。
・WordPressテーマ Nishikiの“ちょっとイイ”お話を聞こう！
WordPressテーマ“Nishiki Pro”の開発者である、AnimaGate 今村哲也さんとインタビュー形式で、テーマの特長やおすすめ機能、開発にかけた思いなど、興味深いお話を伺いました。
日頃お聞きできない裏話や、本音トークもでてきたりと、興味深い放送となりました。
自分ひとりでは得ることができない時間が過ごせたので、定期的にコラボ回を企画していきたいと思います。
……ということで、さっそく本編に進みましょう。
●参加した勉強会について
先週の土曜日に、Adobe XD ユーザーグループ大阪の勉強会に参加しました。
https://xdstudy-osaka.connpass.com/event/204641/
近頃はオンラインでの開催になっていて、どこからでも気軽に参加できるのがありがたいことです。人と出会えるリアルイベントも楽しいのですが、それは世の中が落ち着いたらのお楽しみにとっておきます。
今回は、沖縄から登壇された緑間なつみさんの「現場で使うXD！ クライアントワークでの活用例とアニメーションの基本設定」がメインセッションでした。
緑間さんのお仕事の現場で、制作フローの効率化のためにXDが大活躍している様子や、これからXDを学ぶ方に向けて、学び方のアドバイスなどを発表されていました。
このメインセッションは、後日アーカイブが公開されるそうなので、もう一度見なおすのが楽しみです。
また、松下絵梨さんのセッション「XD Pick up」では、XDの作図と3D機能を学べる「3Dで動く、トランプを作ろう！」というワークショップが行われました。
XDに長けた方の制作フローを見せていただきつつ、真似をして作る工程は興味深かったです。私も作ってみました。
●ダイヤ（ひし形）の描き方を深掘りしてみた
そのセッションで、松下絵梨さんによる「ダイヤの描き方」が新鮮でした。楕円を描いて、円弧を形作っているアンカーポイントの方向線をリセットする、という方法でした。
わたしもいろいろと他の方法を検討してみましたが、この方法が一番早くひし形が描けますね。
誰でもが一番に考えつくのは、「正方形を描いて、45度回転させ、幅を細くする」という方法だと思います。
しかし、この方法では、オブジェクトの変形の軸となる、バウンディングボックスも回転したままとなり、元の形を保てずに斜め方向の変形となってしまいます。
Illustratorで作業するなら、45度に回転した正方形を選択し、『オブジェクト＞シェイプ＞シェイプを拡張』と『オブジェクト＞変形＞バウンディングボックスのリセット』メニューを実行すると、バウンディングボックスの角度を元に戻せます。
しかし、XDには『バウンディングボックスのリセット』メニューがないので、同じ方法は使えません。
ここで「ひし形じゃない時は、どうすればいいんだろう？」という疑問が浮かびました。
オブジェクトを回転させてから、形を保ったままで変形したいときはどうすればいいのか？
XDでも、なんとかしてバウンディングボックスのリセットができないのか？ という欲求がでてきました。
いちど気になってしまったら、調べずには気が治まらない性格です。勉強会が終わった後に、XDを使ってあーでもない、こーでもないという検証が始まりました。
一時間ほど格闘した結果、三つの「ひし形を描く方法」が見つかりました。
1）45度に回転した正方形を選んでコピーし、Illustratorのアートボードに貼り付けます。そこでもう一度コピーします。再びXDに戻って貼り付けると、バウンディングボックスがリセットされます。
Illustratorを通すことで、オブジェクトの回転プロパティが「0」にリセットされるようです。
2）45度に回転した正方形に重ねるように、なにか図形を描き（わたしは小さな楕円を描きました）。その二つの図形を選んで、［合体］した後に［パスに変換］すると、バウンディングボックスがリセットされます。
3）45度に回転した正方形に重ねるようになにか図形を描き、その二つの図形を選んだ状態で変形する。
二つのオブジェクトを選んだときは、一時的にバウンディングボックスの角度が「0」になるため、無事に変形ができます。これは、バウンディングボックスをリセットせずに、ひし形にする方法でした。
「ひし形を描く」というひとつの操作から、XDの作図の特長を数多く知ることができました。
もちろん、ひし形以外を作図するときにもこの知識は役に立つので、今回の学びを通して応用力が身についたなと思います。
この他にも、「Photoshopからシェイプがコピペできない」や「運用しやすいホバーボタンの作り方」など、勉強会が終わってから、あれこれと試して知識を深めることができました。
資料がまとまったら、動画かブログ記事にまとめようとおもっています。気になる方は、私のツイッターをフォローください。発表したらツイートする予定です。
……というわけで、今回はこのへんで。
一見、遠回りのようにみえますが、他者から得た知識を丸呑みせず、自分でもう一度検証してかみ砕けば、記憶に深く残るし、より知識を深められます。
また、自分ひとりで勉強していても気づかない疑問に、気づかせてくれるのは、勉強会の良いところでもあるなと思いました。
ではまた、次回お目にかかりましょう！(^^)
《追記》
さらに良いひし形を描く方法がツイートされました。
多角形ツールで三角形を描いた後、プロパティのコーナーカウント（多角形の角の数）を「4」に変更しています。
この方法だと、パスに変換することなく、多角形オブジェクトのままにひし形が描けてよい方法ですね。
【 森和恵 r360studio ウェブ系インストラクター 】
mail: r360studio@gmail.com
YouTube：https://youtube.com/r360studio
サイト：https://r360studio.com/
先週の土曜日に、Adobe XD ユーザーグループ大阪の勉強会に参加しました。
https://xdstudy-osaka.connpass.com/event/204641/
近頃はオンラインでの開催になっていて、どこからでも気軽に参加できるのがありがたいことです。人と出会えるリアルイベントも楽しいのですが、それは世の中が落ち着いたらのお楽しみにとっておきます。
今回は、沖縄から登壇された緑間なつみさんの「現場で使うXD！ クライアントワークでの活用例とアニメーションの基本設定」がメインセッションでした。
緑間さんのお仕事の現場で、制作フローの効率化のためにXDが大活躍している様子や、これからXDを学ぶ方に向けて、学び方のアドバイスなどを発表されていました。
このメインセッションは、後日アーカイブが公開されるそうなので、もう一度見なおすのが楽しみです。
また、松下絵梨さんのセッション「XD Pick up」では、XDの作図と3D機能を学べる「3Dで動く、トランプを作ろう！」というワークショップが行われました。
XDに長けた方の制作フローを見せていただきつつ、真似をして作る工程は興味深かったです。私も作ってみました。
https://twitter.com/r360studio/status/1380756592031764480
●ダイヤ（ひし形）の描き方を深掘りしてみた
そのセッションで、松下絵梨さんによる「ダイヤの描き方」が新鮮でした。楕円を描いて、円弧を形作っているアンカーポイントの方向線をリセットする、という方法でした。
https://twitter.com/matsu_eri/status/1381445780645453829
わたしもいろいろと他の方法を検討してみましたが、この方法が一番早くひし形が描けますね。
誰でもが一番に考えつくのは、「正方形を描いて、45度回転させ、幅を細くする」という方法だと思います。
しかし、この方法では、オブジェクトの変形の軸となる、バウンディングボックスも回転したままとなり、元の形を保てずに斜め方向の変形となってしまいます。
Illustratorで作業するなら、45度に回転した正方形を選択し、『オブジェクト＞シェイプ＞シェイプを拡張』と『オブジェクト＞変形＞バウンディングボックスのリセット』メニューを実行すると、バウンディングボックスの角度を元に戻せます。
しかし、XDには『バウンディングボックスのリセット』メニューがないので、同じ方法は使えません。
ここで「ひし形じゃない時は、どうすればいいんだろう？」という疑問が浮かびました。
オブジェクトを回転させてから、形を保ったままで変形したいときはどうすればいいのか？
XDでも、なんとかしてバウンディングボックスのリセットができないのか？ という欲求がでてきました。
いちど気になってしまったら、調べずには気が治まらない性格です。勉強会が終わった後に、XDを使ってあーでもない、こーでもないという検証が始まりました。
一時間ほど格闘した結果、三つの「ひし形を描く方法」が見つかりました。
https://twitter.com/r360studio/status/1381557701864398850
1）45度に回転した正方形を選んでコピーし、Illustratorのアートボードに貼り付けます。そこでもう一度コピーします。再びXDに戻って貼り付けると、バウンディングボックスがリセットされます。
Illustratorを通すことで、オブジェクトの回転プロパティが「0」にリセットされるようです。
2）45度に回転した正方形に重ねるように、なにか図形を描き（わたしは小さな楕円を描きました）。その二つの図形を選んで、［合体］した後に［パスに変換］すると、バウンディングボックスがリセットされます。
3）45度に回転した正方形に重ねるようになにか図形を描き、その二つの図形を選んだ状態で変形する。
二つのオブジェクトを選んだときは、一時的にバウンディングボックスの角度が「0」になるため、無事に変形ができます。これは、バウンディングボックスをリセットせずに、ひし形にする方法でした。
「ひし形を描く」というひとつの操作から、XDの作図の特長を数多く知ることができました。
もちろん、ひし形以外を作図するときにもこの知識は役に立つので、今回の学びを通して応用力が身についたなと思います。
この他にも、「Photoshopからシェイプがコピペできない」や「運用しやすいホバーボタンの作り方」など、勉強会が終わってから、あれこれと試して知識を深めることができました。
資料がまとまったら、動画かブログ記事にまとめようとおもっています。気になる方は、私のツイッターをフォローください。発表したらツイートする予定です。
……というわけで、今回はこのへんで。
一見、遠回りのようにみえますが、他者から得た知識を丸呑みせず、自分でもう一度検証してかみ砕けば、記憶に深く残るし、より知識を深められます。
また、自分ひとりで勉強していても気づかない疑問に、気づかせてくれるのは、勉強会の良いところでもあるなと思いました。
ではまた、次回お目にかかりましょう！(^^)
《追記》
さらに良いひし形を描く方法がツイートされました。
多角形ツールで三角形を描いた後、プロパティのコーナーカウント（多角形の角の数）を「4」に変更しています。
この方法だと、パスに変換することなく、多角形オブジェクトのままにひし形が描けてよい方法ですね。
https://twitter.com/matsu_eri/status/1381840223366119427
【 森和恵 r360studio ウェブ系インストラクター 】
mail: r360studio@gmail.com
YouTube：https://youtube.com/r360studio
サイト：https://r360studio.com/