全くの初心者が独学でWeb制作できるようになるまでの効率の良い勉強の進め方

Webデザイン,Web制作

study

Web制作のテクニックを学ぶ方法は、研修やセミナーで学ぶ方法、スクールに通って学ぶ方法、そして独学する方法の3つに大別できます。

しかし、研修やセミナーは開催地が都市部に偏っていますし、スクールに通うのは経済的な負担が大きいのも事実です。そこでおすすめしたいのが独学です。筆者自身も全くの初心者の状態から独学でWeb制作のスキルを身に付けて今はそれをもとに仕事をしています。

独学中には勉強方法としての反省点や手ごたえを感じたことも多いです。そこで、今回は筆者がWeb制作を独学する中で分かった、独学による効率の良い勉強方法についてお話しします。何から勉強をはじめていいのか分からなかった人の指針になるかと思います。

対象読者

この記事はまったくの初心者を対象読者とし、独学でWebサイトやWebサービスを一から自力で作れるようになりたい人に向けて書いています。あくまで初心者向けの効率的な独学の方法についての話のため、技術的な話はなるべく触れないようにしています。

独学に有効活用したいWebサービス・サイト

独学をするのであれば、教材として有効活用できるWebサービスやブログを知っておいて損はありません。オンラインで無料で学べるサイトは今はかなり充実しています。

独学を進めながら気分転換にのぞいてみるのもいいと思いますし、ある程度スキルを身に付けてからでも十分活用できるので参考にしてください。それではここから独学の進め方について段階ごとに書いていきます。

インターネットとWebサイトの仕組みを理解する

まずは技術的なことよりも先にインターネットとWebサイトの仕組みを理解しておきましょう。Web制作スキルを早く身に付けたいという気持ちは分かりますが、これから学んでいくことの全体像の把握なしには効率の良い勉強はできません。

勉強の土台をきちんと固めておいてから個々の技術について学ぶというプロセスを経ることによって、自分が今Webのどの部分を学んでいるのか、これを学べば何ができようになるのかなどについて具体的にイメージできるようになります。これは記憶への定着においてもモチベーション維持においてもかなりプラスにはたらきます。

インターネットとWebサイトの仕組みについては総務省が運営する以下のサイトに分かりやすく書かれています。

インターネットを使ったサービス|基礎知識|国民のための情報セキュリティサイト

HTMLとCSSのスキルを習得する

html css

インターネットとWebの仕組みをきちんと理解できたなら、第2のステップとしてHTMLとCSSを学んでいきましょう。

HTMLはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページに表示するテキストや画像などの内容を書くための言語です。HTMLで書くことによって文書構造をコンピュータが理解できるようになります。一方、CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、HTMLの内容をどのように修飾するかを指示する言語です。

効率よく学ぶためには

HTMLとCSSの独学をする際は、入門レベルの書籍を1冊購入してはじめから最後まで実際にコードを書きながら仕上げるのが一番効率的です。ここで上級者向けの書籍から入ってしまうとほとんどの場合挫折します。

また、じっくり1冊に取り組むのではなくできるかぎり短期間で1冊に取り組んでください。新しいことばかり学ぶことになるので新しい記憶が残っているうちに一気に取り組んだ方が読み返す回数が少なくて済みます。だらだらと何か月もかけずに長くても1ヶ月以内には完了させましょう。

目標は自力でサイトを作り上げること

HTMLとCSSの勉強用書籍選びには注意点があります。以下の3つの条件を少なくとも満たしている書籍が効率の良い独学を後押ししてくれます。

  • まったくの初心者向け
  • 初版年が比較的新しい(あるいは改訂がきちんと行われている)
  • サイトを最低でも1つゼロから作り上げられる

1つ目については、先にも述べましたが挫折防止のためです。

2つ目は、初版年の新しさは現場とのずれを最小限にとどめるために重要です。技術の流行り廃りがWeb制作現場は激しいため、古い書籍で勉強すると今は使われなくなった知識を間違って覚えてしまう確率が上がります。できるかぎり新しい書籍に触れましょう。(今後ネットで技術的なことを検索する際にもいつ書かれた記事なのかを必ずチェックしてください)

3つ目は最もHTML/CSSの独学効率を上げてくれるので絶対条件といってもいいかもしれません。HTMLとCSSを学びたい!と思ったきっかけを思い出してみてください。自分でサイトをつくってみたかったのではないでしょうか?それならばサイトを作れる書籍を選びましょう。モチベーションを上げてくれますし、サイトを作り上げることができれば大きな達成感を得ることができるはずです。この達成感は今後もっと勉強を深めようと意欲を増幅させてくれます。メリットしかありません。

1冊仕上げてサイトも1つ作り上げたのであればあとは自分でさまざまなレイアウトのサイトをたくさん作ってください。レスポンシブ対応やスマホサイトなどサイト作成にもさまざまな種類があります。たくさん作ることがスキルアップの近道です。

Webデザインスキルを高める

Photoshop

HTMLとCSSのスキルがあることはWebデザインの基本スキルです。しかし、デザインが優れていなければサイトを作っても良い反応は得られません。よりデザインの優れたサイトをつくるために次のステップとしてWebデザインスキルを高めていきましょう。

デザインの基礎を押さえる

Webデザインスキルを高める前にデザインの基礎を学んでおきましょう。スキルアップの作業に入る前に頭に入れておくだけでスキルの伸びが大きく違ってきます。例えば以下の記事で紹介されているような記事に一通り目を通しておいてください。

デザインの原理原則がわかる8つの記事

既存の優れたデザインのサイトをひたすらトレースしよう

Webデザインのスキルアップには既存の優れたデザインのサイトをPhotoshopなどのデザインツールでひたすらトレースしていくのが最も効果があり効率的です。Photoshopの使い方は本を買って使いながら一通り覚えましょう。

既存サイトのトレースは、先に頭に入れておいたデザインの基礎知識を思い出しつつ、「なぜここはこのようなデザインになっているのか」「このサイトのコンセプトは何なのか」についてよく考えながら行いましょう。

サイトのトレースにはChromeの拡張機能のFull Page Screen Captureがページの上から下までのキャプチャが撮れて便利です。

デザインの優れたサイトは以下のギャラリーサイトを利用すると効率よく探せます。

Pinterestで気に入ったWebデザインをピンしていくのも良いと思います。

また、サイトはあなたのインスピレーションが刺激されるであろう9つのWebサイトではWebデザインのインスピレーションが湧く記事を紹介しているので参考にしてください。

JavaScriptを学ぶ

JavaScript

動きのある現代的なWebサイトを作ろうと思うとJavaScriptを学ぶ必要があります。JavaScriptはプログラミング言語であり、HTMLとCSSを学んだときよりも脳にかかる負荷は多いですし、ある一定以上のレベルのスキル習得にも時間がかかります。実際、ここでスキルが止まってしまう人が多いのも事実です。

しかしながら、JavaScriptはWebサイトに動きを加える以外の用途にも使える言語ですし、プログラミングなどのコミュニティサイトであるStackOverflowが公開した調査結果「Stack Overflow Developer Survey 2016 Results」によれば、エンジニアに最も人気のある技術となっています。これからエンジニアとして成長していくのであれば避けては通れません。

学習目標はjQueryを使えるようになること

jquery

残念ながら効率よくJavaScriptを勉強していくのはむずかしいのですが、JavaScriptの勉強の入口としておすすめなのがjQueryを使えるようになることです。jQueryはJavaScriptライブラリの1つであり、Webサイト制作の現場ではよく使われます。jQueryはその記述が簡潔であり、初心者でも扱いやすいため、サイト制作におけるJavaScriptのとっかかりとしては最適です。

jQueryを独学するにはやはり入門レベルの書籍から入るのがスムーズで早いです。ドットインストールのjQuery入門も分かりやすく効率よく学べます。

ところで、jQueryにはプラグインというものがあり、プラグインを使えばある程度動きのあるサイトは作れてしまいます。ただ、プラグインばかりに頼っていては制作の幅は限られますし、スキルも伸びません。プラグイン同士の干渉の問題やサイト表示速度の問題も出てきます。「プラグインを使える程度でいいや」となってしまってはそこまでです。学びの広さと深さを大きくするために自分でゼロからコードを書くようにしましょう。

jQueryを使えるようになったら

jQueryでサイトにさまざまな動きを付けられるようになったら、jQueryを封印して生のJavaScriptを書いてみましょう。jQueryは便利ですが、そこでとどまってしまうと仕事の幅が狭くなります。スキルを高めたいのであれば、あくまでjQueryはJavaScriptの書き方の1つの方法にすぎないと考えておきましょう。

WordPressを学ぶ

Wordpress

ここまでくればWebサイト制作で仕事をすることができますが、もしクライアントが望むWebサイトの仕様が多更新だったりした場合は、動的にWebサイトを管理できるCMSの導入を提案できるようになりたいものです。

こんな場合に備えてCMSの1つとして最も人気があるWordPressの習得が必要になってきます。

学習目標は独自のテーマ作成

WordPressの独学での最初の目標としては独自のテーマ作成が最適です。テーマ作成を自力で行うとWordpressの仕組みがよく理解できます。シンプルで不恰好なテーマでもよいので自分で一度作ってみることが大切です。細かなカスタマイズはあとから学びましょう。

WordPressのテーマ作成の勉強はテーマをゼロから作り上げる方法が解説された書籍を1冊仕上げる方法が最も効率的です。ちなみに、ここまでですでにHTMLとCSSの基礎がでできているはずなので集中的に取り組めば1ヶ月以内に独自テーマができるはずです。このタイプの書籍にはローカル開発環境の構築方法も書かれているので、将来的にサーバーサイドのプログラミングも学んでいくのであればとっかかりとしてとても良い教材になります。

さらにWordpressを学ぶには

独自のテーマを作成できたのであれば、Wordpressを使っていろんなサイトをつくってみましょう。盛り込みたい機能も実装してみましょう。おそらく書籍で学んだとおりに一筋縄ではいかないはずです。

そういうときにはGoogleで検索してみたり、応用編のWordpressの書籍に取り組んでみたりして1つずつ疑問を解消していってください。地味で時間はかかりますが、これがスキルアップの近道です。

SEOとアクセス解析を学ぶ

Google Analytics

クライアントがなぜWebサイトを開設したり、デザインをリニューアルしたりしたいか考えてみましょう。クライアントはWebサイトを使って顧客獲得や売上アップなどの成果がほしいはずです。

ひととおりのサイト制作技術を身に付けたのであれば、クライアントの成果を最大化するスキルを身に付けましょう。そのスキルとしてSEOとアクセス解析およびその効果的な運用についての知識とその効果的な運用方法を身に付けましょう。

自分でサイトを運用して実践から学ぼう

SEOやアクセス解析について学ぶのであれば、実際に自分でサイトを持って実践しながら学ぶのが一番です。Wordpressサイトを構築する技術がこの時点で十分身についているのであれば、WordpressでSEOおよびアクセス解析をしてみましょう。

SEOに関しては基礎的なことや歴史的な経緯などは書籍から学びます。そこで得た知識をもとにコンテンツを自分で書けるようになることを目指してください。応用的なことや最新事情などはGoogleウェブマスター向け公式ブログを中心に信頼できるソースから日々学んでいきましょう。

アクセス解析はGoogle Analytics・Search Consoleの利用がおすすめです。多くのサイトで使われており、チュートリアルも充実しています。アクセス解析の結果をふまえて実際に改善策をサイトに適用してみてその結果を再度解析して……とPDCAを回していくことが大切です。さらに詳細な解析をしていきたいのであればGoogle Tag Managerを活用していきましょう。
Google Analyticsヘルプ

プログラミング言語を学ぶ

programming

サイト制作について自由度を上げたいのであればプログラミングができたほうが得です。どのプログラミング言語を選択するかは

初心者が学ぶべきプログラミング言語は何が良い?好きなサービスや作品から逆引きしてみよう!

を参考にしてください。

一から独学する場合はO’Reillyを片手に基礎から攻めていく方法でも良いですし、入門書から学ぶ方法も良いです。実際、プログラミングの勉強方法には一人ひとり合う・合わないがやはりあります。挫折しない方法を選択するのが最も最短の勉強方法です。

※どの勉強方法にも共通するのは根気よく勉強しつづける必要があることと実際にコードを書くことです。楽をして身に付く性質のものではないことをよく理解しておきましょう。

最後に

Web制作について独学をするときに決めていた5つのことを紹介します。

  • 愚直なまでに入門書からはじめること
  • 毎日欠かさず勉強すること
  • 量をたくさんこなすこと
  • はじめから完璧を求めないこと
  • 困ったら人に聞く前に自分で調べ抜くこと

特に、頭ではなく手に覚えさせることとまずは自分で最大限考えることが独学の効率と成果をバランスよく保ってくれると考えています。また、勉強というよりもこういうライフスタイルだと思い込むようにしていたので続いたのかもしれません。

Webサイト制作を挫折した人やこれから始めたい人の独学の手助けになれば幸いです。

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

ケイタ
都内に潜むWebエンジニア。制作/運用/データ解析など幅広くやってます。 応援は@keitaoriginalからどうぞ。

関連する記事