この記事では、WEBデザインやサイト制作の脱初心者したての方向けの、超おすすめの参考動画を紹介します。
動画5本くらい紹介しようと思ったんですが、複数ありすぎると目が散ってしまうので、特にオススメの動画2本を紹介いたします。
この動画を追ってコードを書くとワンランクステップアップできる
恐らく、紹介する動画を難しく感じるはずです。ですがそれが良いんです。
初学者向けの書籍には出てこない部分も含まれているので、新しい技術、モダンな技術をインプットできます。
WEB制作の実践で使える技術がぎっしり詰まっている
動画は2本とも、実践でスグに使えるおいしい技術が詰まっています。
- 1本目：約20分の動画
- 2本目：約45分の動画
たったこれだけで、ウェブ制作で使える武器が増えると思うと嬉しくなりますよね。
動画見て分からないところはどうすれば良いの？
今回紹介する動画の「難しい」と感じる部分はググれば解決策が見つかるモノばかりです。
それだけ、当たり前に使われている技術という事です。
ですので、分からないところは極力ググって自己解決して頂ければと思います。
もし、ググっても分からない場合「そういう物だ」と思って一旦コードの真似で済ませても大丈夫です。書いたコードは残りますから、今後のサイト制作に生かす事ができます。
資産になります。
前置きが長りなりましたが
早速、動画を二つ紹介していきます。
おすすめのWEBデザイン参考動画.その1
動画時間：23分
配信者：Dev Ed
この動画では、動きのあるかっこいいファーストビューが勉強できます。
実践ですぐに使えます。
TweenMaxという超メジャーなjavascriptライブラリを使ったダイナミックなメインビジュアルがモダンで非常にかっこいいです。
デザインは好みが別れるところですが、TweenMaxの初歩だけを使って実装されているので、めちゃくちゃ分かりやすくて勉強になります。
もう1つ良い点とし
CSSでわりとモダンな技術「grid」でレイアウトしてあるところです。FlexBoxやfloatをメインに使ってる人には是非みて頂きたいです。
「英語やないかい！」
とツッコミ入りそうですが、私の英語力は中学生レベルです。
心配無用です。
プログラミングは世界共通言語
配信者がとても上手なので、コードを追えば「何しているのか」がしっかり分かります。
諦めず頑張ってみてください。
おすすめのWEBデザイン参考動画.その2
動画時間：46分
配信者：DesignCourse
クリップパスというCSSではわりとモダンな技術を学べます。
しかもレスポンシブでの使い方をめちゃくちゃ分かり易く解説してくれています。
今風の「アイソメトリックなイラストを使うサイト」にも良く合うデザインなので、この動画も実践でスグ生かせます。
SASS（SCSS）が学べる
もう1つ良い点として、CSSをSASS(SCSS)で書いているところ。
SASSとは、CSSを便利に扱いやすくしてくれる書き方の事です。
SASS(SCSS)をまだ導入してない方はぜひ見て頂きたい。
撮影者は「Visual Studio Code」、通称「VScode」という無料のエディタを使っています。
マイクロソフトが開発しているだけあって、無料なのが信じられないほど素晴らしいエディタです。
「VScode」を使えば、無料で簡単にSASS（SCSS）の環境を整える事ができます。
VScodeでSassの環境をつくる方法を別記事で書いてますので、まず先にそちらをチェックしてみてください。とっても簡単ですよ。
まとめ
本日は、WEBデザインの実践で使える学習動画を2つ紹介させて頂きました。
どちらも、初心者の方には難しい動画ではありますが、めちゃくちゃ美味しいスキルが詰まっているので是非チャレンジして頂きたいです。
レスポンシブやCSSの手法、Javascript、SASSなどモダンなウェブサイト制作に不可欠な技術がわずか1時間程度で学べると思うと、コスパが良いです。
どうしても無理な場合は、またの機会でも結構ですので、是非リベンジしてみてください。
きっと、成長できるはずです。
