WEB学習でのYouTube活用法
WEB技術の学習の方法にはYouTubeがおすすめです。
書籍やオンラインスクールなど、学習方法によってそれぞれメリットがありますが、YouTubeでの学習は無償ですし、ブログの解説で文字を追いながら学習するよりも、直感的でわかりやすいというメリットがあります。今回はYouTubeで学習を進める際のポイントを以下にまとめてみました。
記事の終わりにはWEB技術の学習にオススメのチャンネルを紹介しています。
スキルアップにお役立てください。
準備
私は業務時間の隙間を使って学習をするので、周りのスタッフの迷惑にならないよう、イヤホンが必須です。視聴する環境に合わせて用意しましょう。
学習中のビデオの再生&停止は頻繁に行う動作ですので、プレーヤー制御のショートカットを覚えておくと、便利だと思います。
- 再生/停止:スペースキー
- 5秒巻き戻し/早送り:カーソルキーの左右
- 字幕の表示/非表示:「c」
探す
言語環境はこだわらない
日本語でのチュートリアルもありますが、やはり英語など、他言語のチュートリアルが圧倒的に数があります。語学がなくてもアプリケーションやスクリプトの解説はなんとなくわかるものです。また、WEB業界の最新技術は、英語圏が何歩か先を行っているのが通例です。日本語にこだわらず、広く探してみましょう。
公開日の新しいものを
YouTubeで検索した際、そのビデオがいつ公開されたか記されています。
日進月歩のWEB技術の場合、同じチュートリアルであっても、公開日が古い場合、もう使えなくなった機能の紹介も含まれてしまっている可能性もあります。
公開日はなるべく最近のものを選ぶようにしましょう。
学習を始める
再生の前に
目当てのチュートリアルが見つかったら、すぐに再生せず、まずはビデオの最後の方まで飛ばして、完成形が自分のイメージに近いものか確認してみましょう。冒頭で完成形を紹介しているビデオもありますが、応用バージョンだったりするので注意が必要です。10〜30分のビデオを見た後に、思ったような仕上がりではなかったと後悔しないようにしましょう。
動画の説明部分もチェック
プレーヤー下にある、説明部分はデフォルトで閉じた状態になっていますが、ここにチューリアルの完成ファイルや、必要な素材のダウンロードURL、アドバイスなどが書かれている場合があります。開かないと見れないので見逃しがちですが、こちらもチェックしてみましょう。
画面を大きく見やすく
デフォルトの画面サイズであると、アプリケーションのインターフェースやスクリプトなど小さすぎて見えない場合もあります。プレーヤー右下にあるシアターモードをクリックして可読性を確保しましょう。
字幕を表示する
音声だけでは聞き取れなかったりする時は、字幕表示をしてみましょう。
字幕がいつも完璧というわけにはいかないですが理解の手助けになることがあります。字幕の位置が重要な部分に被って見辛く感じたら、ドラッグして調整することができます。
学習を終えたら
チュートリアルが気に入ったら、チャンネルの方もチェックしてみてください。類似した別のチュートリアルも見つかるかもしれません。チャンネル登録しておけば、新たな動画がアップロードされた際に通知されます。
学習目的別オススメYouTubeチャンネル
Adobe アプリケーション
- PiXimperfect Photoshopチュートリアル
- Nobu Design PS/AIチュートリアル
- Photoshop Tutorials ズバリなチャンネル名
- Satori Graphics グラフィックデザイン Illustrator多め
- Spoon Graphics Photoshop & Illustrator
動画編集・アニメーション
- Ben Marriott After Effects、Photoshopのタイムライン機能使ったアニメーション
- Motion Science After Effects。「Pro Flow Tips」というシリーズでごく短いチューリアルがある
- Dope Motions AfterEffects多め
- ECAbrams AfterEffectsの勉強に
コーディング・プログラミング言語
- 前田剛 HTML、CSS、JSなど
- Traversy Media 様々な開発言語を網羅しています
- LearnCode.academy こちらもいろんな開発言語
- techsith 開発言語いろいろ
- DesignCourse 同じく
- たにぐち まことのプログラミング学習応援チャンネル WP、Bootstrap、他プログラミング言語
その他
- TipTut デザイン全般。After EffectsやAnimateのチューリアル有り
WEBデザイナー / S.K