ケイタ全くの初心者が独学でWeb制作できるようになるまでの効率の良い勉強の進め方ツイート28シェアはてブ489Pocket760独学でWebデザインやコーディングなどのWeb制作スキルを身に付けたい方向けのノウハウを紹介します。Web制作のテクニックを学ぶ方法は、研修やセミナーで学ぶ方法、スクールに通って学ぶ方法、そしてお金をかけずWebサイトや本を参考に学ぶ方法の3つに大別できます。研修やセミナーは開催地が都市部に偏っていますし、スクールに通うのは経済的な負担が大きいのも事実です。そこでおすすめしたいのが自宅で学ぶ独学です。筆者自身も全くの初心者の状態から独学でWeb制作のスキルを身に付けて今はそれをもとに仕事をしています。独学中には勉強方法としての反省点や手ごたえを感じたことも多いです。そこで、今回は筆者がWeb制作を独学する中で分かった、独学による効率の良い勉強方法についてお話しします。何から勉強をはじめていいのか分からなかった人の指針になるかと思います。参考これから紹介する内容をすべて独学で勉強するために根気とモチベーションが必要です。そのあたりに不安があって挫折しそう・・と思うのであれば、プログラミングスクールで学ぶのも手です。最短で効率良く学ぶことができますよ。下記の記事では、コスパの良い良質なスクールを紹介しています。最後に対象読者:Web制作&デザイン初心者この記事はまったくの初心者を対象読者とし、独学でWebサイトやWebサービスを一から自力で作れるようになりたい人に向けて書いています。初心者向けの効率的な独学の方法についての話のため、技術的な話はなるべく触れないようにしています。独学に有効活用したいWebサービス・サイト独学をするのであれば、教材として有効活用できるWebサービスやブログを知っておいて損はありません。オンラインで無料で学べるサイトは今はかなり充実しています。ドットインストール(動画で学べるWebサービス)HTMLクイックリファレンス(制作リファレンスサイト)Codecademy(海外の初学者向けWebサービス)W3SCHOOL(英語の制作リファレンスサイト)独学を進めながら気分転換にのぞいてみるのもいいと思いますし、ある程度スキルを身に付けてからでも十分活用できるので参考にしてください。それではここから独学の進め方について段階ごとに書いていきます。おすすめ独学をはじめるとわかりますが、必ずどこかでつまづきます・・。わからなくなってそのまま挫折してしまう・・という人も多いのが正直なところ。効率よくWeb制作スキルを身につけたいなら、プログラミングスクールを受けてみるのもおすすめ。いってもコースを申し込むとそれなりの金額がかかってしまうので、まずはテックアカデミーの無料体験だけも受けてみるのがいいでしょう。1週間でWebアプリケーション制作が一通り学べます。始めにコレで基礎だけ身につけてから独学をスタートするとかなりスムーズに進みますよ。メンターにわからないところを質問し放題なので挫折の心配もありません。▷テックアカデミーの無料体験はこちら※これを1週間やるだけでも正直けっこう作れるようになるので自信が付きます。インターネットとWebサイトの仕組みを理解するまずは技術的なことよりも先にインターネットとWebサイトの仕組みを理解しておきましょう。Web制作スキルを早く身に付けたいという気持ちは分かりますが、これから学んでいくことの全体像の把握なしには効率の良い勉強はできません。勉強の土台をきちんと固めておいてから個々の技術について学ぶというプロセスを経ることによって、自分が今Webのどの部分を学んでいるのか、これを学べば何ができようになるのかなどについて具体的にイメージできるようになります。これは記憶への定着においてもモチベーション維持においてもかなりプラスにはたらきます。インターネットとWebサイトの仕組みについては総務省が運営する以下のサイトに分かりやすく書かれています。インターネットを使ったサービス|基礎知識|国民のための情報セキュリティサイトHTMLとCSSのスキルを習得するインターネットとWebの仕組みをきちんと理解できたなら、第2のステップとしてHTMLとCSSを学んでいきましょう。Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページに表示するテキストや画像などの内容を書くための言語です。HTMLで書くことによって文書構造をコンピュータが理解できるようになります。Sheets(カスケーディング・スタイル・シート)の略で、HTMLの内容をどのように修飾するかを指示する言語です。効率よく学ぶためにはHTMLとCSSの独学をする際は、入門レベルの書籍を1冊購入してはじめから最後まで実際にコードを書きながら仕上げるのが一番効率的です。ここで上級者向けの書籍から入ってしまうとほとんどの場合挫折します。1冊に取り組むのではなくできるかぎり短期間で1冊に取り組んでください。新しいことばかり学ぶことになるので新しい記憶が残っているうちに一気に取り組んだ方が読み返す回数が少なくて済みます。何か月もかけずに長くても1ヶ月以内には完了させましょう。目標は自力でサイトを作り上げることHTMLとCSSの勉強用書籍選びには注意点があります。以下の3つの条件を少なくとも満たしている書籍が効率の良い独学を後押ししてくれます。初心者向け初版年が比較的新しい(あるいは改訂がきちんと行われている)サイトを最低でも1つゼロから作り上げられる1つ目については、先にも述べましたが挫折防止のためです。2つ目は、初版年の新しさは現場とのずれを最小限にとどめるために重要です。技術の流行り廃りがWeb制作現場は激しいため、古い書籍で勉強すると今は使われなくなった知識を間違って覚えてしまう確率が上がります。できるかぎり新しい書籍に触れましょう。1冊できちんと身につく本3つ目は最もHTML/CSSの独学効率を上げてくれるので絶対条件といってもいいかもしれません。HTMLとCSSを学びたい!と思ったきっかけを思い出してみてください。自分でサイトをつくってみたかったのではないでしょうか?それならばサイトを作れる書籍を選びましょう。モチベーションを上げてくれますし、サイトを作り上げることができれば大きな達成感を得ることができるはずです。この達成感は今後もっと勉強を深めようと意欲を増幅させてくれます。メリットしかありません。1冊仕上げてサイトも1つ作り上げたのであればあとは自分でさまざまなレイアウトのサイトをたくさん作ってください。レスポンシブ対応やスマホサイトなどサイト作成にもさまざまな種類があります。作ることがスキルアップの近道です。Webデザインスキルを高めるHTMLとCSSのスキルがあることはWebデザインの基本スキルです。デザインが優れていなければサイトを作っても良い反応は得られません。デザインの優れたサイトをつくるために次のステップとしてWebデザインスキルを高めていきましょう。デザインの基礎を押さえるWebデザインスキルを高める前にデザインの基礎を学んでおきましょう。スキルアップの作業に入る前に頭に入れておくだけでスキルの伸びが大きく違ってきます。以下の記事で紹介されているような記事に一通り目を通しておいてください。既存の優れたデザインのサイトをひたすらトレースしようWebデザインのスキルアップには既存の優れたデザインのサイトをPhotoshopなどのデザインツールでひたすらトレースしていくのが最も効果があり効率的です。Photoshopの使い方は本を買って使いながら一通り覚えましょう。既存サイトのトレースは、先に頭に入れておいたデザインの基礎知識を思い出しつつ、「なぜここはこのようなデザインになっているのか」「このサイトのコンセプトは何なのか」についてよく考えながら行いましょう。Captureがページの上から下までのキャプチャが撮れて便利です。デザインの優れたサイトは以下で紹介しているギャラリーサイトを利用すると効率よく探せます。▷Webデザインの参考になりまくる、おすすめギャラリーサイトPinterestで気に入ったWebデザインをピンしていくのも良いと思います。サイトはあなたのインスピレーションが刺激されるであろう9つのWebサイトではWebデザインのインスピレーションが湧く記事を紹介しているので参考にしてください。んんどのデザイナーが一度は読んでいることでも有名な下記の本はおすすめです。これを読むだけでも最低限まともなデザインができるようになります。第4版JavaScriptを学ぶ動きのある現代的なWebサイトを作ろうと思うとJavaScriptを学ぶ必要があります。JavaScriptはプログラミング言語であり、HTMLとCSSを学んだときよりも脳にかかる負荷は多いですし、ある一定以上のレベルのスキル習得にも時間がかかります。実際、ここでスキルが止まってしまう人が多いのも事実です。Results」によれば、エンジニアに最も人気のある技術となっています。これからエンジニアとして成長していくのであれば避けては通れません。学習目標はjQueryを使えるようになること残念ながら効率よくJavaScriptを勉強していくのはむずかしいのですが、JavaScriptの勉強の入口としておすすめなのがjQueryを使えるようになることです。jQueryはJavaScriptライブラリの1つであり、Webサイト制作の現場ではよく使われます。jQueryはその記述が簡潔であり、初心者でも扱いやすいため、サイト制作におけるJavaScriptのとっかかりとしては最適です。jQueryを独学するにはやはり入門レベルの書籍から入るのがスムーズで早いです。ドットインストールのjQuery入門も分かりやすく効率よく学べます。ところで、jQueryにはプラグインというものがあり、プラグインを使えばある程度動きのあるサイトは作れてしまいます。参考▷【くるくる】カルーセルを実装できる評価が高いjQueryプラグイン5選ただ、プラグインばかりに頼っていては制作の幅は限られますし、スキルも伸びません。プラグイン同士の干渉の問題やサイト表示速度の問題も出てきます。「プラグインを使える程度でいいや」となってしまってはそこまでです。学びの広さと深さを大きくするために自分でゼロからコードを書くようにしましょう。jQueryを使えるようになったらjQueryでサイトにさまざまな動きを付けられるようになったら、jQueryを封印して生のJavaScriptを書いてみましょう。jQueryは便利ですが、そこでとどまってしまうと仕事の幅が狭くなります。スキルを高めたいのであれば、あくまでjQueryはJavaScriptの書き方の1つの方法にすぎないと考えておきましょう。WordPressを学ぶここまでくればWebサイト制作で仕事をすることができますが、もしクライアントが望むWebサイトの仕様が多更新だったりした場合は、動的にWebサイトを管理できるCMSの導入を提案できるようになりたいものです。こんな場合に備えてCMSの1つとして最も人気があるWordPressの習得が必要になってきます。学習目標は独自のテーマ作成WordPressの独学での最初の目標としては独自のテーマ作成が最適です。テーマ作成を自力で行うとWordpressの仕組みがよく理解できます。シンプルで不恰好なテーマでもよいので自分で一度作ってみることが大切です。細かなカスタマイズはあとから学びましょう。WordPressのテーマ作成の勉強はテーマをゼロから作り上げる方法が解説された書籍を1冊仕上げる方法が最も効率的です。ちなみに、ここまでですでにHTMLとCSSの基礎がでできているはずなので集中的に取り組めば1ヶ月以内に独自テーマができるはずです。このタイプの書籍にはローカル開発環境の構築方法も書かれているので、将来的にサーバーサイドのプログラミングも学んでいくのであればとっかかりとしてとても良い教材になります。Wordpressを学ぶには独自のテーマを作成できたのであれば、Wordpressを使っていろんなサイトをつくってみましょう。盛り込みたい機能も実装してみましょう。書籍で学んだとおりに一筋縄ではいかないはずです。いうときにはGoogleで検索してみたり、応用編のWordpressの書籍に取り組んでみたりして1つずつ疑問を解消していってください。地味で時間はかかりますが、これがスキルアップの近道です。▷WordPressの使い方&カスタマイズを解説。初心者から中級者まで!必読の書籍は下記。人も、挫折した人も、本格サイトが必ず作れるSEOとアクセス解析を学ぶクライアントがなぜWebサイトを開設したり、デザインをリニューアルしたりしたいか考えてみましょう。クライアントはWebサイトを使って顧客獲得や売上アップなどの成果がほしいはずです。ひととおりのサイト制作技術を身に付けたのであれば、クライアントの成果を最大化するスキルを身に付けましょう。そのスキルとしてSEOとアクセス解析およびその効果的な運用についての知識とその効果的な運用方法を身に付けましょう。自分でサイトを運用して実践から学ぼうSEOやアクセス解析について学ぶのであれば、実際に自分でサイトを持って実践しながら学ぶのが一番です。Wordpressサイトを構築する技術がこの時点で十分身についているのであれば、WordpressでSEOおよびアクセス解析をしてみましょう。SEOに関しては基礎的なことや歴史的な経緯などは書籍から学びます。そこで得た知識をもとにコンテンツを自分で書けるようになることを目指してください。応用的なことや最新事情などはGoogleウェブマスター向け公式ブログを中心に信頼できるソースから日々学んでいきましょう。Consoleの利用がおすすめです。多くのサイトで使われており、チュートリアルも充実しています。アクセス解析の結果をふまえて実際に改善策をサイトに適用してみてその結果を再度解析して......とPDCAを回していくことが大切です。Managerを活用していきましょう。▷SEO対策とは|成果を出すために必要な知識や考え方、実践方法SEOの書籍はたくさんありますが、下記の本だけでも十分です。10年つかえるSEOの基本プログラミング言語を学ぶサイト制作について自由度を上げたいのであればプログラミングができたほうが得です。▷初心者が学ぶべきプログラミング言語は何が良い?好きなサービスや作品から逆引きしてみよう!を参考にしてください。一から独学する場合はO’Reillyを片手に基礎から攻めていく方法でも良いですし、入門書から学ぶ方法も良いです。実際、プログラミングの勉強方法には一人ひとり合う・合わないがやはりあります。挫折しない方法を選択するのが最も最短の勉強方法です。※どの勉強方法にも共通するのは根気よく勉強しつづける必要があることと実際にコードを書くことです。楽をして身に付く性質のものではないことをよく理解しておきましょう。初心者が独学で身に付けたWeb制作スキルで仕事を取る手段として、以下のような方法が挙げられます。クラウドソーシングサイトを活用するエンジニア向けのエージェントサイトを活用する企業や個人へ直接営業する自身のSNSやブログから受注するWeb制作の仕事が取れるようになれば、フリーランスエンジニアとしても活動する事もできますし、転職エージェントサイトなどを活用すればWeb制作会社に転職する事も可能です。以下から仕事の取り方に関して、それぞれ詳しく解説していきます。クラウドソーシングサイトを活用するクラウドソーシングとは、簡単にいったら企業や個人が依頼する仕事を集約し、クラアントとワーカーを繋ぐプラットフォームサイトの事をさします。案件としてはWeb制作の他にもライティングWebデザインデータ入力など様々な分野が扱われています。比較的初心者でもクラウドソーシングサイトを活用して案件を受注する事が可能となっているので、Web制作のスキルに自信がある方は是非とも一度案件を受注してみてください。エンジニア向けのエージェントサイトを活用するフリーランスエンジニアを目指している方は、エンジニア案件に特化しているエージェントサイトを活用するのもアリです。代表的なエージェントサイトだと、レバテックフリーランスmidworksポテパンフリーランスなどになります。特徴としてはクラウドソーシングサイトと比較して、とても案件の単価が高いことにあります。在宅でガッツリ稼ぎたい方は、エージェントサイトをうまく活用して長期的な案件の取得を目指してみてくださいね。企業や個人へ直接営業する独学である程度Web制作に自信が持てるようになったら、直接営業するのもアリです。企業や個人でも良いので実績になりそうな、案件をまずは取得するように努めましょう。企業から直接案件が貰えたらかなり報酬も高い場合が多いですが、その場合にはしっかりとしたポートフォリオ(実績)が必要になります。初心者の方には最初は大変ハードルが高く感じるかもしれませんが、フリーランスエンジニアを目指している方であれば、直接営業で案件が取れるようになる方が稼げます。みじかな友人や知人から安く仕事引き受けて、実績を作るところから初めてみてくださいね。自身のSNSやブログから受注するWeb制作のスキルがある方は、個人のSNSやブログ等で発信する事でそこから仕事の依頼が来る事もあります。Web制作で案件の取得を目指している方は、個人ブログを一つ持っておくとポートフォリオにもなるので大変おすすめです。ブログやSNSから直接仕事を依頼する方は、高確率であなたに対して好印象を持っている方なので仕事も行いやすいのが特徴ですね。初心者が独学でWeb制作スキルを身に付ける場合によくあるQ&Aここでは初心者が独学で、Web制作スキルを身につける際によくある質問に関して、詳しくまとめてみました。独学だとどのくらいの期間で身につける事ができますか?独学で取り組む際に学習を継続させるコツを教えてくださいWeb制作を独学で学んでフリーランスエンジニアになれますか?Web制作を独学で学ぶ場合はPCは何がおすすめですか?Web制作を独学で学んだ後に企業へ転職する事もできますか?これからWeb制作スキルを活かして仕事を取ろうと考えている方には、大変参考になる質問内容なので是非とも目を通してみてくださいね。Q1:独学だとどのくらいの期間で身につける事ができますか?今は独学でもかなり勉強しやすい環境が整っています。期間に関しては、独学でWeb制作スキルを身に付けてどこをゴールとするかで、変わってきますね。大体約1年間ほど詰めて勉強すると、Web制作の仕事をクラウドソーシングサイト等で取れるようになるでしょう。人によっては早ければ約3ヶ月ほどで、簡単な案件などが取れるようになる人もいますね。独学でスキルを取得する場合は、学習に対するモチベーションの維持等が大変になってくるので、その辺りが身につける期間にも影響してきます。Q2:独学で取り組む際に学習を継続させるコツを教えてください独学でWeb制作スキルを身につける際には、Twitterなどを活用して同じ学習仲間を見つけてみてください。SNS等で学習成果をお互いに発信しながら、モチベーションの維持に繋げる事もできますし、他の方がどのような方法で学習しているのかも参考にすることができます。今はオンラインサロンなどもあるのでWeb制作に関係があるようなオンラインサロンに入会して学習仲間を探すのもアリです。Q3:Web制作を独学で学んでフリーランスエンジニアになれますか?実際に独学でWeb制作スキルを身に付けてフリーランスエンジニアになった方は、Twitterなどでリサーチすると大変多いです。多くの方がプログラミングスクール等を活用する事を最初に考えますが、独学でスキル習得する事で問題解決能力を個人で養う事ができます。「習うより慣れろ」という言葉もある通り、Web制作をスクールで習うのも良い方法ですが、個人で学習するのもまた一つの手段ですね。Q4:Web制作を独学で学ぶ場合はPCは何がおすすめですか?Web制作を行うパソコンとしては、個人的にはMacBookをおすすめします。Windowsでも出来ないことはないのですが、最近はMacBookの方が機能性も高いですし、持ち運びもかなり便利です。Airをおすすめしていますね。Q5:Web制作を独学で学んだ後に企業へ転職する事もできますか?Web制作スキルを活かしてIT企業へ転職する事も可能です。今はIT人材がどこも不足している状態なので、かなり需要も高くもらえる給料もそれほど悪くはありません。将来的にIT業界への転職を考えている方は、転職に強いプログラミングスクールを活用して効率的に就職活動するのが良い方法ですね。転職エージェントサイトなどを活用するのもアリです。初心者が最短でスキルを身につける方法ここまでは、基本的に独学でWeb制作スキルを身につけるためのノウハウを紹介してきました。挫折してしまったり、できるだけ最短で学びたい、実務レベルのスキルを身につけて就職or転職したい!のであれば、オンラインスクールもひとつの手段としてオススメです。初心者が挫折しないために最適化されたカリキュラムや、いつでもメンターにチャットで質問できたりと、Web制作における障壁を限りなく低くしてくれます。自宅にいながら好きな時間に勉強できるのもメリットです。様々なサービスがありますが、HTMLからマーケティング、デザイン、プログラミングなどを網羅して学ぶことができるテックアカデミーがオススメです。受講するには料金などのハードルが高いので、まずは無料体験をしてみるといいでしょう。▷無料でテックアカデミーを体験してみる※無料体験では1週間で簡単なWebサービスが作るという内容です。動くサイトを自分で作ったという自信がモチベーションにも繋がりますよ。最後にWeb制作について独学をするときに決めていた5つのことを紹介します。愚直なまでに入門書からはじめること毎日欠かさず勉強すること量をたくさんこなすことはじめから完璧を求めないこと困ったら人に聞く前に自分で調べ抜くこと特に、頭ではなく手に覚えさせることとまずは自分で最大限考えることが独学の効率と成果をバランスよく保ってくれると考えています。勉強というよりもこういうライフスタイルだと思い込むようにしていたので続いたのかもしれません。Webサイト制作を挫折した人やこれから始めたい人の独学の手助けになれば幸いです。IT業界に強い転職サイト・転職エージェントのオススメはココ!【比較ランキング】この記事が気に入ったらいいねしよう!最新記事をお届けします。ツイート28シェアはてブ489Pocket760この記事をかいた人ケイタ都内に潜むWebエンジニア。制作/運用/データ解析など幅広くやってます。応援は@keitaoriginalからどうぞ。