takato（@n8takato）です！
効率的なコーディングの勉強方法を知りたい
この記事は上記の課題に向けて作成しています。
webデザイナーを目指す方にとってコーディング学習は必須です。
これからコーディングを学習する方に向けて効率的な勉強方法を紹介します。
この記事を読むメリット
- 効率的なコーディングの学習方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
コーディングとは？
始めにコーディングについて説明します。
コーディングとは？
- プログラムを動かすようにコードを書くこと
webサイトやwebアプリは全てプログラミング言語によって動いています。
そのプログラムを書くことをコーディングと呼びます。
プログラミングとは？
- コンピューターにプログラムを処理させること
同じような言葉でプログラミングがあります。
プログラミングはPCやスマホにプログラムを処理させることを意味します。
※機能を処理させることを「プログラミング」と呼び、機能実装のためにコードを書くことを「コーディング」と呼びます。
webサイトを作ったり動かしたりするためにコーディングの知識が必要です。
webデザイナーに必要なコーディングスキル
webデザイナーに必要なコーディングスキルを説明します。
webデザイナーには下記のプログラミング言語が必要です。
webデザイナーに必要なプログラミング言語
- HTML
- CSS
- JavaScript
- PHP
HTML
「HTML」はサイトに文章や写真を表示することの出来る言語です。
全てのwebサイトはこのHTMLで作成されています。
サイト制作には必須の言語になります。
CSS
「CSS」はサイトに装飾を加えることの出来る言語です。
色や大きさを変更したり、余白を作ったりすることが出来ます。
HTMLとセットで使用することが多いです。
JavaScript
「JavaScript」はサイトに動きを加えることの出来る言語です。
画像のスライドショーやアニメーションなどはJavaScriptで作成します。
今はほとんどのサイトにJavaScriptが使用されています。
PHP
「PHP」は問い合わせフォームなどの作成に使用出来る言語です。
入力した情報を確認画面に反映させたりすることが出来ます。
ほとんどのサイトに問い合わせページがあるのでPHPも学習必須になります。
※このようにwebデザイナーは「HTML」「CSS」「JavaScript」「PHP」の4つの言語が必要になります。
WordPress（おまけ）
webデザイナーはプログラミング言語以外にCMSの勉強も必要になります。
CMSとは？
- CMSとは簡易的にwebサイトが作成出来るツール
CMSを使えばITに詳しくない人でもwebサイトを作ることが出来ます。
CMSには様々な種類がありますがその中でも「WordPress」が有名です。
※WordPressはCMSの中で最も使用されているツールです。W3Techsによると、全てのwebサイトの約43%がWordPressを使用しています。また、CMSの中では約65%がWordPressを使用しています。このようにWordPressはシェア率が一番高いCMSなのです。
W3Techs
web制作現場ではWordPressを頻繁に使用します。
そのためWordPressの使い方を勉強しておく必要があります。
※WordPressはプログラミング言語より簡単に学習出来ます。また、web制作で必ず使うわけでは無いため優先順位を下げました。
webデザイナーに向いている人の特徴をまとめました。
【基礎編】コーディングの勉強方法
実際にどのようにコーディング学習すれば良いか説明します。
オススメなコーディングの学習方法
- オンライン教材で学習する
コーディングの勉強は「オンライン教材」がお勧めです。
オンライン教材がオススメな理由
僕がオンライン教材をオススメする理由は3つあります。
オンライン教材をオススメする3つの理由
- 値段が安い
- 隙間時間で学習出来る
- 教材を持ち歩く必要が無い
値段が安い
オンライン教材は比較的値段が安いのが特徴です。
僕が過去に使っていた教材は月額1,078円でした。
毎月約1,000円でコーディング学習が出来るのはお得です。
※毎月のコーヒー代を少し我慢すれば1,000円浮くことが出来ますね。
隙間時間で学習出来る
オンライン教材は電車の中で立った状態でも勉強出来ます。
PCはもちろんですがスマホでも勉強出来ます。
オンライン学習なら毎日の通勤・通学中でも勉強出来ます。
教材を持ち歩く必要が無い
オンラインの場合教材は全てネットの中にあります。
そのため参考書などを持ち歩く必要がありません。
荷物によるストレスが軽減されますよ。
※僕は荷物を持ち歩くのが嫌なので、教材等は基本的にオンラインです。
本で学習したい方向けにオススメの本を紹介しています。
オススメなオンライン教材
僕がオススメするオンライン教材は2つあります。
個人的にオススメするオンライン教材
Progate
「Progate」は過去に僕も使っていたオンライン教材です。
初歩的な内容は無料で学習出来ます。会員費用は月額1,078円です。
「HTML」「CSS」「JavaScript」「PHP」の4つも含まれています。
※PC、iPad、スマホなど、どのデバイスでも学習可能です。自分のライフスタイルに合わせて学習出来ますよ。
ドットインストール
「ドットインストール」も初歩的な内容は無料で学習出来ます。
会員費用は月額1,080円です。
ドットインストールは動画学習なのが特徴です。
勉強は動画が良いという方はドットインストールを使ってみてください。
【応用編】コーディングの勉強方法
コーディングを学習したら実際にwebサイトを作成してみましょう。
※実際にwebサイトを作成することで自分の課題が明確になります。復習して課題を潰すことで理解度が深まります。
webサイトの作成は下記の2つの方法がオススメです。
- webサイトを模写する
- オリジナルサイトを作成する
webサイトを模写する
webサイトの模写は知識のアウトプットにオススメです。
webサイトの模写とは？
- 既存のwebサイトと全く同じものを作成すること
選んだサイトと全く同じものを作成します。
作成する過程で不明点や曖昧な理解だったものが明確になります。
webサイトの模写は下記の手順で行います。
webサイトを模写する手順
- 模写するサイトを決める
- 画像を書き出す
- コーディングする
①模写するサイトを決める
始めに模写するサイトを決めます。
既に模写したいサイトが決まっている方はそれを模写してください。
模写したいサイトが決まっていない方は「サイト集」から見つけましょう。
オススメなサイト集
上記のサイト集は様々なwebサイトを集めたサイト集になります。
※「可愛い系」「綺麗めなデザイン」「緑色を使ったサイト」など、ジャンル分けされたサイト集になります。模写したいサイトの系統から絞って探してみてください。
②画像を書き出す
模写するサイトを決めたら画像を書き出します。
画像の書き出しはサイト上で「右クリック」すると保存出来ます。
※背景画像として使用されているものは「検証ツール」を用いて保存します。検証ツールで指定箇所を選択し、cssの「background-image」を探します。記載されているURLを選択し、表示された画像を右クリックで保存出来ます。
コーディングに入る前に全ての画像を書き出します。
③コーディングする
画像を書き出したらコーディングに入ります。
本物とそっくりのwebサイトを目指して作成します。
※不明点は検証ツールで確認して構いません。余白の大きさ等良く見て模写してください。
いくつかのサイトを模写してください。
オリジナルサイトを作成する
オリジナルサイトの作成もアウトプットに繋がります。
オリジナルサイトはコーディング以外に設計・デザインも必要になります。
ハードルは高いですがポートフォリオの材料になるのでやって損は無いです。
※オリジナルサイトは自分が紹介したい商品やサービスの専用サイトがオススメです。ターゲットのペルソナを明確にしてサイト設計・デザイン・コーディングを行ってみてください。
コーディング学習の注意点
実際にコーディングを学習する際の注意点を紹介します。
コーデイングを学習する際の注意点
- 暗記しようとしないこと
- 1回で覚えようとしないこと
- 出来るだけ毎日勉強すること
暗記しようとしないこと
コードを暗記しようとするのはやめましょう。
※そもそもコードを暗記する意味はあまりありません。わからなければその場でググれば良いです。何回か使っている内に自然に覚えますよ。
コードを1つ1つ丁寧にノートにまとめる必要もありません。
問題を解いていく内に自然に覚えるようになります。
1回で覚えようとしないこと
問題を1回だけ解いてコードを覚えようとするのはやめましょう。
※同じ問題を繰り返し解くことで覚えられるようになります。1回で覚えようと考えるのはやめましょう。
コーディングは繰り返し学習することが大切です。
同じ問題を何度も解くようにしましょう。
出来るだけ毎日勉強すること
学習の間隔が空いてしまうと覚えたコードを忘れてしまいます。
※理想は毎日学習することですが、難しい場合は2〜3日に1回勉強するように意識してください。土日と水曜日を学習に充てるなど工夫してみてください。
座って学習するのが難しい場合はスマホで学習してみてください。
コーディングの独学は難しい？(※人によリます)
コーディングは独学で学べる人とそうでない人がいます。
独学でコーディングを学べる人の特徴は下記の通りです。
独学でコーディングを学べる人の特徴
- これまで独学の経験がある人
- 既に質問出来る環境がある人
- 理解出来るまで自分で調べられる人
反対にコーディング学習の独学が難しい方の特徴は下記の通りです。
コーディングの独学が難しい人の特徴
- 不明点を自分で解決出来ない人
- ITリテラシーがあまり高くない人
- これまで独学をしたことが無い人
コーディング学習はエラーが付きものです。
エラーを自力で解決出来ないと学習が進みません。
解決出来るまでググって調べる粘り強さが独学には必要です。
独学でwebデザインを学ぶ方向けに何から学習すれば良いかまとめました。
独学が難しい場合はスクールも選択肢に入れる
もし独学が難しいと感じたらスクールに通うことも視野に入れましょう。
スクールで学習するメリットは「学習スピードが早くなる」ことです。
学習スピードが早くなる理由
- 不明点はすぐに質問出来る
- 教材が非常に理解しやすい
- 質問相手は現役プログラマーやデザイナー
スクールの教材は「素人がつまずきやすい箇所」を丁寧に教えてくれます。
これまで教えてきた内容を活かして教材をアップデートしています。
独学では理解しづらかった内容もスクールなら理解度が高まります。
また、スクールは基本的に「質問し放題」です。
質問相手は現役のプログラマーやデザイナーが多いのが特徴です。
プロに質問出来るので、不明点がすぐに解決出来ます。
※無理に独学を続けるとwebデザイナーの転身も遅れます。スクールに通ってサクッとwebデザイナーに転身した方が良いです。
webデザイナーに転身して仕事をすればスクール代は元が取れますよ。
オススメのスクールは「デジハリ」
個人的にオススメなスクールは「デジハリ」です。
デジハリはweb制作会社のLIGが運営しているwebデザインスクールです。
コーディング学習はもちろん、デザインも合わせて学習することが出来ます。
※webデザイン会社が運営しているのでプロのwebデザイナーから学ぶことが出来ます。
スクール代は分割可能で月額5,400円(税込)から通うことが出来ます。
学習以外に「転職相談」や「コワーキングスペースの活用」も出来ますよ。
このまま独学で続けるか悩んでいる方は、一度無料オンライン説明会に参加してみてください。
モヤモヤがスッキリすると思いますよ。
独学が難しければスクールに通おう
コーディング学習は独学出来る人とそうでない人がいます。
もし独学が難しいと感じたらスクールに通うことを検討してみてください。
サクッと学んでwebデザイナーに転身しましょう。