この記事では、「独学でWeb制作学習をするときの注意点」について解説します。
独学でWeb制作を学習するうえで、注意すべきことを5つ絞って紹介します。初学者が独学でWeb制作を勉強していると、ついやりがちなことや見落としがちな事柄があります。この記事を読んでやりがちなミスを回避しましょう。
合わせて、Web制作の効率的な学習方法の流れやおすすめ学習サイトについても解説していきます。
- Web制作学習で注意することが知りたい人
- Web制作の勉強の流れをざっくり知りたい人
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
独学でWeb制作学習をする注意点5選
Web制作の独学をするうえでは、５つの注意点があります。これらの注意点を把握することで、効率よく学習を進めることができます。
- インプット重視にならないこと
- 暗記しようとしないこと
- 第三者にコードを添削してもらうこと
- 多方面のスキルアップ学習に手を広げすぎないこと
- 学習すること自体を目的にしないこと
インプット重視にならないこと
Web制作の学習では「インプット重視にならないこと」が重要です。インプット学習とは、教材の内容や知識を覚えていく学習方法を指します。
インプット学習ばかりしていると、学習した気になってしまいがちです。それと同時にアウトプットとして手を動かしてやってみる、というのが大事です。
例えばCSSのプロパティの使い方、JavaScriptを使ったハンバーガーメニューの実装方法など、技術は読んだだけでは身につきません。実際に自分で作ってみる、動かしてみるという工程で頭に定着させます。
インプット学習は学習する前提で重要な工程ですが、それは後の工程でアウトプットする前提なことを忘れないようにしましょう。
暗記しようとしないこと
Web制作の学習では「暗記しようとしないこと」が大事です。
そもそもプログラムやコードのはたらきを全て暗記しようとすると、膨大な情報量になるため、暗記学習は非効率です。
例えばCSSのcolorプロパティを全て暗記しようとするのは効率的ではありません。また、一度暗記してもプログラムはアップデートによって、暗記したプログラムの記述が非推奨になったり、新しい記述が使えるようになったりと、情報が更新されます。そのたびに暗記し直すのは非効率で時間がかかります。
暗記しなくても、分からなければインターネットで調べてすぐに答えを見つけることができます。そして調べて自分で解決していくうちに、だんだんと頭に定着して自然と覚えていきます。無理に暗記する必要はありません。
第三者に添削してもらうこと
Web制作の学習では、自身が書いたコードを添削してもらうことも成長につながります。
独学で学習していると、自分が書いたコードやプログラムが合っているのか、効率的な書き方をしているか、判断できません。
第三者に添削してもらいたい場合、例えば以下の方法が挙げられます。
- MENTAを利用する
- プログラミングスクールを利用しているなら、講師やメンターに見てもらう
- プログラミング系のコミュニティに所属しているなら、スキル感が上の人に見てもらう
- 知り合いや友人にエンジニアがいるなら、その人に見てもらう
MENTAとは、有償でプロのエンジニアやデザイナーなどその道の専門家に直接相談したりスキルを学ぶことができるサービスです。知り合いにエンジニアがいない、スクールやコミュニティを利用していないという場合はMENTAを利用するといいでしょう。
よりベターな書き方、別のスマートな書き方などを教えてもらうことで、理解が深まります。自分の記述と効率的な書き方を比較することで、プログラミングはさらに上達するでしょう。
多方面のスキルアップ学習に手を広げすぎないこと
Web制作学習でやりがちなことは「多方面のスキルアップ学習に手を広げすぎてしまうこと」です。
Web制作の実務では、
- HTML・CSS
- JavaScript
- CSS設計・Sass
- デザイン
- 営業・ディレクション...etc
などさまざまな技術が必要になります。一つ一つ大事な工程で学習は必須ですが、あれもこれも、と手を広げすぎるとかえって一つ一つの学習スピードが落ちてしまいます。
また、一つの分野を学習した後、最近流行っているからといって新しい言語や知識に手を広げるのも得策ではありません。これまで学習したことが中途半端に終わってしまうためです。
例えば、JavaScriptの基本を学習したばかりなのに、特別な目的もなく流行っているからといってReactを学習するようなケースです。Reactの例だと、JavaScriptが前提知識となっているため、基礎のJavaScriptが中途半端だと、かえってReactの知識を身に付けるのに時間がかかったりします。
それよりも基本の学習や基礎学習をしっかりこなし、実務である程度経験を積んでいきましょう。新しい言語の学習はそれからでも遅くはありません。
複数の言語に対応可能だと、請け負える案件の幅が広がっていろんなプロジェクトに参画できるようになるので、忙しくなること請け合いです！
学習すること自体を目的にしないこと
独学で勉強していると、「Web制作の学習をすること自体が目的になりがち」です。Web制作の学習は目的を達成するための手段の一つでしかないので、目的を見失わないようにしましょう。
Web制作を学習するなら、例えば以下のように目的をはっきりさせましょう。
- Web制作学習して
- 副業で稼ぎたい
- オリジナルのサイトを作りたい
- 転職したい
- フリーランスになりたい
目的をはっきりさせたら、いつまでに到達したいのかも決めておくといいでしょう。到達日を設定しておくと、それまでにどれだけの学習にどれだけの時間を費やすのか、逆算することができるので、効率的な学習計画を立てることができます。
Web制作の効率的な勉強方法や流れ
Web制作の学習上の注意点を理解したうえで、効率的に学習を進めましょう。Web制作で効率的な勉強方法は以下のような流れです。
- 学習準備
- Web制作の基礎、HTML / CSSを学習する
- JavaScriptを学習する
- WordPress
- Webデザインの基礎
Web制作の効率的な学習方法については、以下の記事で詳しく解説しています。ここでは以下の記事の内容を簡単にまとめてご紹介します。
1．学習準備
Web制作における学習準備とは以下を完了させることです。
- エディタ導入
- タイピング練習
- よく使うショートカットキーを覚える
- ブラウザの設定
サイト制作のエディターはVSCodeがおすすめです。
ショートカットキーやタイピングなどは、完璧でなくてもHTMLやCSSを学習しながら覚えていきましょう。
開発環境として使用するブラウザは「Chrome」を推奨します。Chromeは開発に必要な検証ツールが非常に便利で、Web制作の現場でもベースとなる環境です。
さらにChromeには、制作で使える拡張機能が豊富にあります。おすすめの拡張機能とChromeのインストール方法を、以下の記事の中で解説しています。まだChromeのインストールを済ませていない方は、記事を参考にChromeをインストールしてください。
2．Web制作の基礎、HTML / CSSを学習する
学習準備ができたら、HTMLとCSSを学習しましょう。HTMLとCSSは、Webサイトを構築する上で重要な言語であると同時に、基礎的な言語でもあります。
HTML/CSSは、Web制作者としての基本的な技術である以下の3つができるようになることを目標にしましょう。
- 正しくタグを使ってデザインを作り、レスポンシブ対応ができる
- 外部プラグイン（Google Mapや Facebookなど）を利用できる
- デザインカンプからコーディングができる
まずはシンプルで簡単なWebサイトでレスポンシブができるように制作してみましょう。
ある程度力がついてきたら、発展としてCSS設計やSassを使ったコーディングに挑戦してみてください。実案件では頻繁に使用するため、必ず役に立ちます。
3．JavaScriptを学習する
JavaScriptはプログラミング言語の1つです。
ブラウザ上で動く言語のため、開発のための特別な環境構築が必要ないという特徴があります。
Web制作分野におけるHTML/CSSと、JavaScriptとの違いは次のようになります。
- HTML/CSS：Webサイトの「見た目の部分」を制御する
- JavaScript：Webサイトの「動きの部分」を制御する
JavaScriptでは、Webサイトでよく使われる4つのパーツが作れるようになることを目標にしましょう。
- カルーセルパネル：画像などコンテンツをスムーズに横スライドさせる表示方法
- モーダルウィンドウ：指定された操作を完了するかキャンセルするまで他のウィンドウを開くことができないウィンドウ
- ハンバーガーメニュー：三本線のアイコンで表示されるナビゲーションメニュー
- アコーディオン：クリックすると隠れている詳細情報を表示する見せ方
ある程度力がついてきたら、発展として以下の学習をしてみるといいでしょう。
- GSAPやEJS、Swiperなどのライブラリの使用
- JSフレームワークを扱えるようになる
- WebAPIを使えるようになる
それぞれについて詳しくは、以下の記事で詳しく解説していますので、ぜひお読みください。
4．WordPress
WordPressは、Webサイトの作成・ブログ作成などができるCMS（コンテンツマネジメントシステム）の一つです。
お知らせのような更新性のあるコンテンツを、管理画面から簡単に更新することができます。さらに「プラグイン」を活用することで、容易に機能や見た目をカスタマイズすることができるのも特徴のひとつです。
WordPressでは、実案件でよく使われる以下の4つを実装できるようになることを目標にしましょう。
- WordPress化：HTMLのページを元にしてWordPressのテーマに改造すること
- カスタム投稿：「固定ページ」や「投稿」以外に新たに別の「投稿」を作成する機能
- カスタムタクソノミー：カテゴリーやタグの他に独自の分類タイプを作る
- カスタムフィールド：任意の入力項目を追加する機能
5．Webデザインの基礎
初心者のうちは、デザインツールを使えるようになること、自分がなぜそのデザインをしたか説明できるようになることを目標にしましょう。
以下のことを意識してWebデザインを学習しましょう。
- デザインの制作工程を把握する：ヒアリング、要件定義からワイヤーフレーム作成、デザインカンプ作成などの工程
- デザインツールを使えるようになる：PhotoShop、AdobeXD、Illustrator、Figmaなどのデザインツール
- 自分の作ったデザインを言語化できるようになる：フォントや色、コンテンツの配置や余白など、なぜその配置をしたかなどの理由付け
ここまでの詳しい説明は、以下の記事で行っています。
Web制作の学習サイト３選
Web制作の学習を進めるうえでおすすめのサイトを3つ紹介します。
- ZeroPlus Gate
- ドットインストール
- Progate
ZeroPlus Gate
ZeroPlus Gateは、30日間無料でWebサイト制作を学べる学習サービスです。
60種類の動画教材を使用した自習形式で学習を進め、分からないことは現役エンジニアに無制限で質問できます。また専属のメンターとの学習面談を、最大４回まで行うことができます。
ZeroPlus Gateの基本情報
サイトURL | |
無料で学習できるレッスン |
|
学習スタイル | 動画教材 面談学習サポートあり |
環境構築 | 必要 |
有料版の料金 | 有料版なし |
学習レベル | 初心者向け |
ZeroPlus Gateは、プロのメンターが学習の目標設定やプランニングを、あなたに合わせて徹底的にサポートします。目標がはっきりすることで、それに向かってWeb制作の学習をより効率的に進めていけるようになります。
特に独学でやっていると、どこまで勉強すればよいのか、どのタイミングで次のステップにいけばいいのか、悩みは尽きません。勉強やメンタル面の悩みにもメンターがいっしょに悩み、解決のためのアドバイスをしてくれます。
30日間で、一生使えるスキルの基本を会得することができます。
ZeroPlus Gateの3つのメリット
- 費用が無料（コスパ最強！）
- 30日間で基本的なWebサイトが作れる（一生使えるスキルの基礎が学べる！）
- メンターがつく（ひとりで悩ませない！）
ZeroPlus Gateはこんな人におすすめ
- プログラミング経験がない人
- プログラミング学習の第一歩を踏み出してみたい人
- 短期集中でスタートダッシュを切りたい人
ドットインストール
ドットインストールは、初心者から中級者くらいのレベルの人におすすめのプログラミング学習サービスです。
ドットインストールの基本情報
サイトURL | |
無料で学習できるレッスン |
※基礎編のみ |
学習スタイル | 動画講義形式 |
環境構築 | 必要 |
有料版の料金 | 月額1,080円（税込） |
学習レベル | 初心者〜中級者向け |
ドットインストールの学習スタイルは、動画講義からコードの書き方を学んでいく形式です。それぞれの動画は3分程度で終わるので、忙しい人でもスキマ時間を活用しながら勉強できるでしょう。
ドットインストールでは、学習の目的に応じてコースを選べますが、無料版の範囲で学習できるのは、上記3レッスンの基礎編までです。プレミアム会員になれば、アプリ開発やデータベースのレッスンなども受けられるようになります。
ドットインストールについては、こちらの記事で詳しく解説しています。利用を検討している人や評判が気になる人はぜひ参考にしてください。
ドットインストールの3つのメリット
- 隙間時間で学習できる
- 基礎学習よりも少しレベルが高い内容を学習できる
- プレミアム会員になると幅広いレッスンを受けられる
ドットインストールはこんな人におすすめ
- プログラミングの学習を少しだけレベルアップしたい人
- 動画を使って学習したい人
- 短い時間でも学習したい人
Progate
Progateは、初心者・未経験者におすすめのプログラミング学習サービスです。
Progateの基本情報
サイトURL | |
学習できる言語・ |
※無料版の範囲は各レッスンの基礎編まで |
学習スタイル | スライド・記入形式 |
環境構築 | 不要 |
有料版の料金 | 月額1,490円（税込） |
学習レベル | 未経験者・初心者向け |
Progateでは、スライドで説明を見てからコードを書いていく方式でレッスンが進んでいきます。コードの書き方を確認しながら進めるため、未経験者でもプログラミングの感覚を掴みやすいでしょう。
なお、Progateを無料で利用できるのは全93レッスンのうちの18レッスンまでです。無料版を少し試してみて、さらに進んだ学習をしたくなったら有料版へ移行するとよいでしょう。有料版へ移行して、1カ月〜2カ月ほどですべてのレッスンをやり切ってから解約するというやり方もおすすめです。
Progateの3つのメリット
- プログラミング完全未経験でも学習できる
- ゲーム感覚で進められる
- 教材がスライド形式で見やすい
Progateはこんな人におすすめ
- プログラミング経験が一切ない人
- ゲーム感覚で学習したい人
- スライドを見ながら学習したい人
まとめ：注意点を理解して、効率的に学習しよう
独学でWeb制作学習をするときの注意点について解説しました。目的を見失っていたら、何のために勉強をしているのか、今一度考えてみましょう。
また、HTMLやJavaScriptなど基礎学習をしながら、さまざまなことを試してみてください。実務の本番で失敗するよりも、練習でたくさん試して、失敗することが大切です。実務ではその経験が必ず活きますし、技術への理解もより深まることでしょう。
独学でWeb制作学習をする際の注意点
- インプット重視にならないこと
- 暗記しようとしないこと
- 第三者に添削してもらうこと
- 多方面のスキルアップ学習に手を広げすぎないこと
- 学習すること自体を目的にしないこと
Web制作で効率的な勉強方法
- 学習準備
- Web制作の基礎、HTML / CSSを学習する
- JavaScriptを学習する
- WordPress
- Webデザインの基礎
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
