【動画教材の学び方】OAS面談から考える Webのコーディング学習における目標サイトの設定と要素分析の重要性
みなさんこんにちは。デジタルハリウッド動画教材の人です。
暑い日が続きますね。暑くて朝シャワーを浴びようと浴室に入ったところ
ものすごく暑かったので、間違って浴室乾燥とか暖房付けてたかな？と思ったら、ついていませんでした（しかも窓も全開💦）結局朝からものすごく気温が高くなっていて、浴室も温まっていただけでした。でも朝からシャワーを浴びるとサッパリして、窓を開けた時にわずかに入ってくる風も涼しく感じますね（でも結局汗かきそうになるのでクーラーつけます）
皆様も熱中症にはくれぐれもお気を付けください。
さて、大分久々のnoteになりましたが、今日はデジハリ・オンラインスクールで行っているOAS面談に関してお話ししつつ、学習における目標サイトと、その要素分析の重要性をお話ししたいと思います。
■Webデザイナー講座のOAS面談とは？
デジハリ・オンラインスクールでは、Webデザインを学ぶみなさまの学習の伴走をするために、定期的にZOOMを使った面談を行っています。
Online Adaptive Support の頭文字をとってOASと呼んでいますが、
アダプティブラーニング（学習者への最適化学習）を取り入れた面談で、
問いと傾聴を繰り返しながら、受講生の皆さんの気づきを促し、次の学習アクションを決めてもらう重要な定期面談です。
■OAS面談１回目は目標設定面談
目標設定面談には、みなさんに目標シートを記入して臨んでいただきます。
・今までのクリエイティブソフトの経験の有無
・どんなサイトを作りたいか？実際にWebサイトを探して理想とするイメージに近いサイトを選んでURLを記入（目標サイト決定）
・なんでその目標サイトを選んだのか?の理由を記入
・週ごとの学習スケジュールを記入
などなど、これからWeb制作の技術を学習するにあたって最も重要な作業となります。
この中で、特に重要なのが、目標サイトを決めることです。
自分がどんなサイトを作りたいのか？が決まっていないと、動画教材の作例を淡々と学習しても”自分事”になりません。
３DCGの学習者さんとかは、「ピクサーのトイ・ストーリーみたいなフル3DCGの映画作品を作りたい！」とか
「モンスターハンターのモンスターのデザインを３DCGでしてみたい」など
学習前から明確に作品のゴールイメージがありますが、Webデザインを学習する方は「在宅でWebのお仕事をしたい」「本業とは別に副業でWeb制作の仕事がしたい」など、作品としての目標よりも、キャリアとしての目標が先に来るので、「こんなWebサイト作りたい！」というような作品のゴールイメージがないことが多いです。
皆さんは技術を学びますが、クリエイティブツールというのは、あくまで皆さんのイメージを形にするための技術です。なので、皆さんのゴールイメージがとても重要になるのですね。なので、入学してすぐに目標シートに″理想とするWebサイト（目標サイト）”を決めてURLを記入してもらうんです。
■目標サイトを学習に活用するポイント
動画教材では、Webのお仕事として受注しそうな一般的に目にするようなサイトを想定・設定して作例としています。
ただ、皆さんにとってその作例のサイトを作るのが楽しいか？は話が別です。教科書を勉強するのと同じで、勉強になってしまうため、自分事になりにくく、学習のモチベーションにつながらなくなりがちです。
やっぱりクリエイティブなことを学ぶのですから、動画教材で新しい技術を学んだら、目標サイトと見比べてほしいです。
例えば、メニューの部分の作り方を学習したら、目標サイトを見に行ってみて、「ああ、今日学んだメニュー部分のコーディングを使えば、自分が理想とする”あの”サイトのメニュー部分を作れるな～」と照らし合わせてほしいんです。
これを繰り返していくことで、学ぶことに”意味”が生まれ、動画での学習が自分事になっていきます。
同時に、０からサイトを作る際に「あのタグを使えば作れるかも？」と想像できるようになる訓練でもあります。
■目標サイトを決めると同時に要素の分析もしておきたい。
目標サイトが決まっても、それがどんな要素で作られているのか？がわかっていると、学習がより意味のあるものになります。なので要素分析もしていきましょう。
要素分析って難しそう・・・・
初めてWebサイトの制作を学ぶ皆さんは、きっとそう思うでしょう。
「技術を知らないのに、Webの要素の分析なんてできるわけがない！」
「そんな難しいことを学習を始める前にできるわけがない！」
そんなお怒りの声が聞こえてきます。
皆様のお気持ちを十分に受け止めつつ、要素分析を簡単にできる方法を教えます！
■世界一カンタン！？なWebサイトの要素分析の方法
たとえば下記のサイトを目標サイトにしたとしましょう。
このサイトを見て、どんな要素が入っているか、どんどん書き出していくんです。これだけ！
例えば、
＜千葉県旭市観光サイトより＞
①左上に可愛いロゴマークとキャッチコピーのグラフィックが入っている
②右上に様々なメニューが並んでいる
③言語を切り替えるボタンがある（ということは言語切り替えもできる？）
④最初に目に入る海と女性の美しい写真 と 可愛い筆記体フォントのキャッチ
⑤写真の右側にインスタやFacebookなどのSNSアイコンが並んでいて、専用のSNSに飛ぶようにできる。
＜千葉県旭市観光サイトより＞
⑥スクロールするたびに、SPOTの説明が、順番に右から左にスクロールしながらでてくる
⑦SPOTの説明が通り過ぎると写真が切り替わる
＜千葉県旭市観光サイトより＞
⑧おいしそうな食べ物やスイーツ、アクティビティなどの写真が出て右から左に自動的にゆっくりスクロールしていく
⑨マウスを上に乗せると写真が可愛く傾く（クリックするとその説明のページへ）
・・・・etc
とまあこんな感じで、その目標サイトにどんなコンテンツや動き、仕掛けが入っているか？を見たまんま、日本語で書いていくだけです。難しいプログラミング用語など必要なし！
この要素分析をしておくだけで、動画教材でSNSアイコンの設定の仕方を学んだら、「あっ！要素の⑤はこれで出来そう！」と実感が持てますよね。
こうして要素を洗い出しておいた上で動画教材の学習を進めると、学習した部分の重要性を実感し、自分事になって学習が楽しくなっていくわけです。
また、「この要素は動画教材にないけどどうやって作るんだろう?」と、動画教材の学習だけでは足りない部分を検索などで調べる際の参考にもなりますよね。
これは、何もHTML/CSSのコーディングやJavaScriptの学習に限りません。
このサイトに入っているようなきれいな写真の色の調整や、ロゴマーク、TOPの写真にちりばめられている丸や四角の”あしらい”なんかは、Illustrator,Photoshopの技術が必要ですよね。グラフィックツールの学習にも当てはめることができます。
作りたいものを構成しているものがどんなものなのか？見た目でいいのでどんどん書き出して、あらかじめ認識しておくことで、学習する内容に意味づけがされて、はかどりますよ！ぜひやってみてください～。
今日は以上です～
【ＰＳ】
私が開発に携わっている動画教材が学べるスクールサイトです～
↓これからクリエイティブをオンラインで学びたい方はこちら↓
↓大学・専門学校・塾・企業などでのオンライン授業活用はこちら↓