Adobe XD Trail を学習教材としてチェックしてみたら、学びのきっかけ作りにちょうどよかった件
クリスマスも近づきましたので、恒例の Adobe XD アドベントカレンダー 2020 記事を公開します。
（1日遅れですが）22日目担当、r360studio 森和恵です。
わたしは、ウェブ制作を教える、インストラクターをお仕事にしています。
このアドベントカレンダーの担当日を決めたときは、
「 22日を担当しまっす！いまから、XDを始める方へ何か書きます！ 」
と息巻いたものの、いざ書くとなったら、お題が広すぎてどうしようか……と悩んでしまい、気づけば当日の昼を過ぎておりました。
(;ﾟロﾟ) ﾜｰ! ﾄﾞｳｼﾖｳ……
うーんうーんと考えて、無料でXDの勉強をするなら、どこだろう……と頭を巡らせて思い出したのが、アドビ公式が運営している『Adobe XD Trail』でした。
わたし自身も、ライブ授業をYouTubeで配信していて、他のオンライン授業の進行方法を研究していることもあり、Adobe XD Trail のワークショップを毎回視聴しています。
スタジオから配信されるし、きちんと作り込まれた番組構成のワークショップは完成度が高いなぁ……（資金があるって強いなぁ。いいなぁ。）と感心していました。
ですが、肝心のメインのコンテンツはみたことがないままでした。
「これは（記事を書くのに）いいネタをつかんだかもしれないぞ！！」
ということで、先生が学習教材をチェックする目線でAdobe XD Trailのコンテンツを体験してみました。
「XDの基本操作が（Illustratorっぽいと）知れたけど、次のスキルアップはどうするの？？」と思っている方にオススメできそうな学習教材でした。
⛄⛄⛄
Adobe XD Trail、学習教材の使い分け
Adobe XD Trailのおもなコンテンツには、次の4つがあります。
📙 TUTORIAL（チュートリアル）：基本的な操作を知る、短い動画教材
ガイド線の引き方、グループ化の手順、素材の書き出し……など、XDの基本操作ごとに2～3分の動画が、79本も公開されています。
公開された降順に動画が並んでいるため、その順番にみても、初学者がステップアップしつつ段階を追う学びはできないのですが、『わからない機能をピンポイントに調べるための動画マニュアル』として最適です。
動画と合わせて、テキスト解説やサンプルファイルもあり、さくっと機能を使って試すことができます。
「この機能を調べたい、すぐに使い方を知りたい」という時に使うのにオススメです。
📙 LESSON（レッスン）：作りたいものを、実習形式で学ぶ動画教材
ドロワー、ハンバーガーボタンなど、すぐに使える素材を作りつつ、XDの特徴的な機能を学びます。
楽しく作りながら、かつ、制作者に知っておいてほしい事項が、課程に組み込まれているシナリオは秀逸でした。
職業柄、教材に設定された「学びのねらい」がなんなのか？ 教材を通して達成できているのか？ をついつい気にしてしまいます。
嫌な目線だわ……🐗
レッスンでは、5分程度の動画に対して作業量が多めに設定されています。ボーッと眺めていると「あっ！」いう間に進みます。
基本操作を習得しているのを前提に作られていて、制作途中に使う機能について、こと細かくは解説されていません。
まったくの初学者にはハードルが高めで、XDの操作を一通り理解した後に「何か作ってみよう！」というタイミングで使うとよさそうです。
自分が興味のある・作ってみたいなと思うレッスンを選び、少々わからないことがあってもくじけずに、動画を見ながら一緒に最後まで作ってみると『自分が何を知らないか』という疑問点がみえてくるはずです。
学んだ結果、疑問点が生まれるというのは、よい教材だと思います。自分が知らないことを知ることが、学びのスタートだと考えています。
📙 WORKSHOP（ワークショップ）：定期的に開催されるオンライン授業
ConnpassのAdobe XD Trailグループで開催されているワークショップのアーカイブです。
📙 KIT/RESOURCE（学習キット）：学習や実務に便利な、XDファイルを配布
ワークショップの教材や、スターターキット、実務に使えるUI Kit を多数ダウンロードできる、リンク集です。
⛄⛄⛄
初心者の方は、まずはこの2つから始めよう
まったく初めてXDを触るの方は、ワークショップの初回とスターターキットがおすすめです。
🌻 Adobe XD Trail 部屋キャンプ 初級編！基本の操作を学ぶ
「XDとはどういうツールか？」から始まって、基本操作を解説したワークショップ回です。
🌻 XDの主要機能を試せるスターターキット
スターターキットは、リンク先のページをスクロールした下の方にあります。
ダウンロードしたXDファイルを開き、各アートボードに書かれた操作を順に進めることで、XDの基本操作、ショートカットなど覚えておきたい操作を実際に体験できます。
⛄⛄⛄
“LESSON レスポンシブデザインを手軽につくる”をやってみた
効率よい学びをテーマに、ひとつのレッスンを使ってみました。
📗 レッスン前に準備、知っておくこと
まずは、レッスンページにある「撮影時XDバージョン」よりも、XDを新しいバージョンにしておきます。
ダウンロードするサンプルファイルは、レッスンよりも旧バージョンのXDでは開けないからです。
※現行とひとつ前のバージョンのみ、インストールが提供されています。同時に2バージョンをインストールすることはできません。
※動画の撮影時より現行バージョンが新しくなっている場合は、説明されている操作が変わっていることがあるので注意。
次に、サンプルファイルを開くと、そこで使用されている Adobe Fonts が自動的にインストールされます。
レッスン後に不要な場合は、Creative Cloud Desktopの《フォントを管理》から、アクティベートをOFFにしてアンインストールできることを知っておくとよいです。
📗 学習動画のオススメの再生方法
レッスンの動画はYouTubeで公開されています。
より大きい画面でみたり、再生速度を変更したり、早送りや巻き戻しなどの操作をするには、YouTube側で再生するほうが使いやすいです。
パソコンのブラウザで閲覧している場合は、動画上のタイトルをクリックすると、別タブが開き、YouTube側で再生されます。
この時、［shift］＋［?］キーを押すとYouTube操作のキーボードショートカットキーが表示されます。
これで、レッスンが速すぎて聞き逃してしまっても、巻き戻したり、再生スピードをゆっくりしたりして、何度でも安心して視聴が可能です。
ちなみに私は、Androidスマホを使って、YouTubeアプリからキャスト機能を使ってテレビで再生しながら、ノートパソコン側で実習して学んでいます。
📗 さっそく、レッスンで学んでみた
準備が整ったら、レッスンの動画を見つつ、自分でも作りつつ、XDの操作を確かめながら進めます。
うまく出来ない所、初めて聞いた機能名など、疑問に思ったことをメモに取っておきます。少々躓いても、とにかく最後までやりきるのがコツです。
今回のムービーを見ながら、わたしが書いたメモがこちらです。これのメモが、この次に深掘りしていく点となります。
📝📝📝
● アートボード、アートボードのプロパティ（レスポンシブサイズ変更、スクロール領域／ビューポートの高さ）
● オブジェクトのプロパティ（スクロール時に位置を固定）
ここでは、画像を図形に塗りとして流し込むのではなく、マスクが作られている。そのため、［ctrl］（［command］）キークリックで中の画像の選択が可能。後で画像の調整が必要ならこの方がベストっぽい。
● プラグイン
［プラグインを見つける］メニュー、Windowsの場合は操作方法が違う。「Google Sheets」が バージョンアップされて、画面が異なる。
● オブジェクトのプロパティ（レスポンシブサイズ変更）
📝📝📝
📗 メモを元に、知識を深掘りしてみる
ピックアップ点を深掘りして、さらに知識を深めます。面倒ですが、この作業が一番の学習になります。
ネットで闇雲に検索すると古い情報が見つかる場合もあるので、まずは、「チュートリアル」や「Adobe XDユーザーガイド」で検索し、じっくりと読みます。
上のメモには、わたしが実際に調べてみた公式情報へのリンクをつけておきました。
今回試したのは基本的なレッスンだったのですが、こうやって深掘りしていくことで、新しく知ったことも多かったです。
時間かかったけど、勉強になったなぁ。(^_^)
⛄⛄⛄
まとめ
単にレッスンを見るだけではなく、知識を得た後に、自分で手を動かして検証するフェーズを踏むことで、更に理解が増していきます。
Adobe XD Trail で提供されている学習教材には、興味を持って楽しんで作れるレッスンというお題があり、学びのきっかけ作りになりそうです。
⛄⛄⛄
最後に、自己紹介という名の宣伝を
日曜日の深夜に、次のチャンネルでウェブ制作が学べるライブ授業をしています。
現在は、HTMLとCSSの授業を30回近く実施中。年明けからは、WordPressのシーズンに突入予定です。
学びのきっかけが欲しい方、チャンネル登録をよろしくお願いいたします。
この記事をラストまで読んでくれたあなたなら、一緒に楽しく学びが出来そうです。
⛄⛄⛄