〜この記事でわかること〜
webデザインの独学はなにから始めたらいい?
この記事は、Porgateで一通り学習を進めた方向けです。
こんにちは、キノシタです!
webデザインを独学したいけど、何から始めたらいいのかわからない・・・
と困っていませんか?
webデザインと言ってもやることがたくさんあるので、まずは覚えやすいコーディンングの部分「thml/css」から始めるといいと思います!
html/cssを効率よく学習するためのステップは下記の通りです。
ステップ2:お手軽に購入できる学習教材を購入して動画で学習する→今回
ステップ3:専門書を購入して一人でサイトを作成してみる
ステップ4:実際に公開されているサイトを模写して作成してみる
「前回の記事」でProgateでの学習についてご紹介しましたが、中には、
「Progateで学習してなんとなく分かったけど、まだ一人でサイトを作れるようになったとは思えない・・・」
このように感じているのではないかと思います。
Progateは触りの部分を学習するにはもってこいの教材ですが、それだけではサイトを1から作れるようにはなれません。
そこで、この記事ではProgateを実施してなんとなく「html/css」がわかったという方向けに、さらに理解度を深めるための学習方法についてご紹介します!
webデザインの独学には動画教材がおすすめ!
Webデザインの独学でProgateの後に何から始めたらいいのかと言うと動画教材がおすすめです。
ただ、動画教材と言うと、「なんだか高そう・・・」
って感じるかもしれません。
確かし、高額な動画教材もあると思いますが、「Udemy」なら良質な動画教材を安価に購入することができます!
また、「YouTubeなどでも無料で「html/css」を学ぶことができるじゃん!」
って意見もありそうなので、この章では、
ポイント②:Udemyのおすすめの教材はどれ?
についてご紹介していきたいと思います。
ポイント①:YouTubeなどの無料動画でも学べる?
YouTubeには、無料でプログラミング言語やマークアップ言語について解説してくれている動画があります。
もちろん、これらを参考に学習してもいいのですが、YouTubeの動画は「連続した教材ではない」ことが多いです。
「連続した教材ではない」とはどういうことかと言うと、例えば、cssで「padding」の使い方という動画があったとしますよね。
「padding」は余白を開けるためのものですが、それ単体だけ学習しても実際にサイトを作る時にどのように使うのかイメージするのが難しいです。
要は、「padding」と「margin」どっちで余白の設定をすればいいの?ってなっちゃうということですね・・・
なので、YouTubeの無料動画については、その都度確認する「辞書」みたいな使い方がいいのかなって個人的に思います。
ポイント②:Udemyのおすすめの教材はどれ?
Progateのみで学習しましたといかたであれば、サイトの作成を1から通して行えるUdemyの教材を購入してみることをおすすめします。
Udemyがおすすめの理由は下記の通りです。
・1から通してサイト作成を学べる
・30日返金保証あり
・使用する画像なども用意されている
私もProgateを一通りこなした後に、「なんとなくわかって気がしたけど、実際に一人でサイトを作成しろといわれてもできる気がしなかった」のですが、Udemyの講座を購入して実践したところ、かなり知識レベルも上がりました。
実際にサイトができているのを確認しながら勉強ができたので楽しみながら独学ができたのもよかったと思います!
一応、実際に私が購入して勉強になったなと思ったものを2つご紹介しておきます。

・未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース:Photoshopあり

それぞれに、共通しているのが「html/css」で「[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門」にはjavascript(サイトに動きをつけるプログラミング言語)のレッスンがあり、
・「未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース」にはPhotoshop(画像加工ソフト)のレッスンがあります。
また、Udemyはセールを頻繁に開催しており、人気の教材が90%off程で買えたりもしますので、上記の教材も安いタイミングで購入しておくことがおすすめです。
動画で学習する際のポイントは?
私もwebデザインの勉強は動画教材ですので、動画教材でどのように学習したら効率よく学習ができるのか、今までの経験からまとめてみました。
ポイント②:メモアプリなどを使いメモを取る
ポイント③:動画コンテンツの通り作ったらもう一度自分で作ってみる
それぞれ解説していきます。
ポイント①:わからないところは理解できるまで視聴、ネットでも検索する
動画を見ている中で、解説してる部分がいまいちわからないと言ったことがしばしばあります。
その時に、わからないまま次に進むのではなく、わかるまで何度も繰り返し動画を視聴しましょう。
また、インターネットで検索すると、その部分について詳しく解説されているブログがあったりするので、都度検索することもおすすめです。
例えば、cssのところでわからない部分が出てきたら、「css max-width」「css 文字 中央」などと調べることで動画でわからなかった部分の補足情報を簡単に調べることができます!
ポイント②:メモアプリなどを使いメモを取る
動画教材で独学をする時の特徴だと思うのですが、濃厚なコンテンツの分とても時間がかかります。
独学って本職をしながら学習していくので、パッと調べたい時に10分の動画を都度視聴するのはしんどいですよね。
そこで、重要そうだなって感じた部分はpcのメモ帳アプリでメモをとっておきましょう。
紙に書くのもいいですが、実際にコードを書いている時に紙のメモ帳で調べるよりも、検索機能を使用してそのままコピペをした方が効率的です。
また、スマートフォンにも連動できるメモ帳アプリなら電車に乗っている時などにもメモを確認できますよ!
ちなみに、私の場合だとiPhoneとmacbookを使用しているので、最初から入っている黄色いメモ帳を使用しています。
文字色を変えたりはできなさそうですが、
・見出し
・フォルダによる階層分け
このような機能が使えてとても便利です。
ポイント③:動画コンテンツの通り作ったらもう一度自分で作ってみる
動画コンテンツを一通り視聴したら、実際にサイトを作ってみることをおすすめします。
Webデザインなので、あなたがデザインしたサイトを実装してみるのもいいかもしれません。
自分でサイトのデザインが難しいようなら、「あ、このサイト作ってみたい!」「このサイトならなんとか作れそうだな!」ってサイトをインターネットから見つけてきて模写してみるのがおすすめです。
最初は時間がかかって、「本当に完成するかな・・・?」って気持ちになってしまうかもしれませんが、動画教材を繰り返しみたり、インターネットで調べながらやれば、簡単なサイトなら作れるようになると思います!
まとめ:Webデザインの独学はUdemyがおすすめ
今回は、webデザインの独学は何から始めたらいいのかについてご紹介しました。
ここで一度まとめておきたいと思います。
→YouTubeなどの無料動画はわからない時の辞書になる
→おすすめの動画教材はUdemy・動画で学習する際のポイントは?
ポイント①:わからないところは理解できるまで視聴する
ポイント②:メモアプリなどを使いメモを取る
ポイント③:動画コンテンツの通り作ったらもう一度自分で作ってみる
Progateはwebデザインの独学で何から始めたらいいのかわからない方には非常におすすめですが、Progateだけでサイトを作れるようになるには結構ハードルが高いです。
まずは予備知識をProgateで身につけて、そのあとでUdemyの動画教材を使ってみてください。

・未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース:Photoshopあり

また、Udemyはセールの時には90%off程で購入できる機会があったりするので、お手頃な時に購入しておくことをおすすめします。
それでは、ありがとうございました。