【体験談】CodeCamp（コードキャンプ）のデザインマスターコースを修了した私が教える効率の良い学習の進め方。

CodeCampのデザインマスターコースを受講・修了したまるです。とにかく短期で終わらせたかったので、勉強は計画的かつ戦略を立てて行いました。その結果２ヶ月足らずで全科目合格（＝コース修了）。

これから同じコースを始める人は、是非この記事を参考に効率良く学習を進めていってくださいね！

まだ受講を迷ってる人はまずは無料体験レッスンを受けてみましょう♪

＞＞CodeCampの無料体験レッスンを申し込む

1 まずは自分に合ったコースを選ぶ
2 どの科目から手を付けたらいい？
- 2.1 コーディング系科目の進め方
- 2.2 描画系科目の進め方
3 学習を始める前の準備
4 各科目の学習のポイント
5 自習が行き詰まったらレッスン予約して講師に質問しよう

まずは自分に合ったコースを選ぶ

CodeCampのデザインマスターコースには２ヶ月・４ヶ月・６ヶ月の３つのコースがあります。それぞれのコースの違いや自分に合ったコースの選び方はこちらの記事をご参照ください♪

CodeCamp（コードキャンプ）のデザインマスターコース、期間はどれがいい？選び方を徹底解説！わたしはwebデザインの勉強をするため、CodeCampのデザインマスターコースの２ヶ月コースを受講・修了しました。カリキュラム...

どの科目から手を付けたらいい？

デザインマスターコースで学習するのは以下の５科目。どれから始めたら良いのか迷っちゃいますよね。

HTML5/CSS3
JavaScript/JQuery
Bootstrap
Photoshop
Illustrator

この５科目はざっくり２種類に分けられます。

コーディング（HTML5/CSS3、JavaScript/JQuery、Bootstrap）
描画（Photoshop、Illustrator）

コーディングと描画はまったく別物なので並行して進めても構いません。HTML5/CSS3が終わってないとPhotoshopが理解できないとかそういうことはないので。

ただ、コーディング系３科目と描画系２科目はそれぞれどの科目から進めたら良いかという順番があります。

コーディング系科目の進め方

まず最初にHTML5/CSS3を終わらせ、次にJavaScript/JQueryを始め、最後にBootstrapという順番で学習しましょう。

HTMLとCSSは基本のキで、JavaScript/JQueryやBootstrapもこれらを使って行うので必ず一番最初に完成させてください。

なお、BootstrapではJavaSctiptやJQueryも使いますが自分でコードを書く必要はないので、JavaScript/JQueryを途中まで進めて「JavaScriptやJQueryはwebサイトに動きをつけるものだ」ということが理解できたら同時進行でBootstrapも開始してOKです。

図で表すとこんな感じ。

描画系科目の進め方

PhotoshopとIllustratorはどちらを先に始めても構いませんが、できれば最初にどちらかを終わらせた後にもう一方を始めた方がいいです。

というのも、PhotoshopとIllustratorは同じAdobe社が提供するソフトでありながら機能が違うから。似て非なるものなので、両方同時に進めるとごっちゃになって頭が混乱します。

まる

わたしは同時進行でやってたから頭がこんがらがったw

図で表すとこんな感じ。

学習を始める前の準備

学習を始める前に２つ準備をします。

教科書に一通り目を通す
レッスン内容の記録フォームを作る

まず、５科目すべての教科書に目を通しましょう。読み込まずざっと目を通すだけでOK。「内容」「学習量」「自分はどの科目が得意か苦手か」ということを把握するのが目的です。

それを基に、各科目何回ずつレッスンを受けるか見当を付けます。おそらく最初に想像していたより多くのレッスン回数が必要だった・・・となると思うので、余裕を持って考えましょう。

コースに含まれているレッスン回数マイナス５くらいで終わらせるつもりで考えると良いです。２ヶ月コースなら20-5=15回、４ヶ月コースなら40-5=35回、６ヶ月コースなら60-5=55回といった感じですね。

わたしが実際受けたレッスン回数はこんな感じ。苦手なJavaScriptでは全レッスン回数の半分近く消費しましたw

	レッスン回数
HTML5/CSS3	５回
JavaScript	８回
Photoshop	２回
Illustrator	１回
Bootstrap	３回
合計	19回

また、レッスン内容は記録しておくと良いですが、手書きだと大変なのでエクセルで記録フォームを作っておくと楽ですよ。

レッスン前に質問をリストアップし、レッスン後に講師からの回答を入力します。ちなみにわたしはこんなフォームを作ってました。↓

記録フォームをダウンロード

これを基に自分の使いやすいフォームを作ってもいいし、ダウンロードしてそのまま使ってもらってもOKです！！

各科目の学習のポイント

ここからは、科目別に詳しい学習のポイントをご説明します。教科書の内容まではお見せできませんが、こういう風に学習すると効率が良いよというのをお伝えしますね！

HTML5/CSS3

HTMLとCSSはすべての基本なので、とにかく教科書を隅から隅まで読み込んでみっちり理解してください。CodeCampの教科書をきちんとやっておいたらあとはネットで調べればいくらでも応用が効きます。

最終課題はwebページ作成（１ページのみ）で、見本の画像を見ながら真似して作ります。

最初は知ってるプロパティだけでCSSを書いてしまうのでHTMLもCSSもゴチャゴチャしがちですが、ネットで調べたり講師に添削してもらうとよりシンプルな記述の仕方がわかってくると思います。

おすすめのリファレンスサイトはこちら↓

HTMLクイックリファレンス：http://www.htmq.com

JavaScript

デザインマスターコースのカリキュラムで唯一のプログラミング言語。わたしはプログラミングまったくの初心者なので難しすぎて何度も心が折れそうになりましたw

ネットで調べてみたりもしたのですが、JavaScriptはHTMLほどわかりやすいリファレンスサイトがなく、同じ表示結果を得るにも記述の仕方が無限にありすぎて「このサイトの通りにしたらできる！」みたいなのがありません。

また、HTMLやCSSと違って記述を間違えていてもエディタに×マークが出ないのでどこが間違っているのか分かりにくいです。

右クリック→検証→consoleでエラーを確認することもできますが、consoleに出てこないエラーもあるのでそうなったらお手上げw

なので自学自習は結構キツいと思われます。プログラミング未経験の人はJavaScriptのレッスン回数を多めに考えておいた方が良いです。

Bootstrap

JavaScriptと並んで泣きそうになったのがこれ。まず、「Bootstrapとはなんぞや」というところを理解するのに結構な時間を要しました。

要はCSSとJavaScriptのフレームワークで、自分で一から記述しなくてもあらかじめ作られたパッケージを使ってwebサイトの装飾ができるという便利ツールです。

Bootstrapはまぁやってみたらわかりますが、HTMLがものすごく複雑かつ大量になります。Webページ１ページ分で200行とか300行とか・・・。

で、CodeCampの最終課題はHTML5/CSS3と同様webページ作成（１ページのみ）なんですが、記述が大量すぎて講師の先生方も難儀してましたw

200行も300行もあるHTMLを見せて「コード確認してください！」と頼んでもパッと見て間違いを見つけるのはプロの講師陣でも難しいんですよね・・・。

なので、Bootstrapはどの科目よりも自習をがんばってください。小さい課題はなく最終課題のみですが、できる限り完成に近付けてどうしてもわからないところだけピンポイントに質問するのがおすすめです。

Photoshop

通称フォトショ。写真の編集のほか、簡単な描画やテキスト入力ができるソフトです。画像の形式はビットマップ（ラスター）。小さい四角形がたくさん集まって形を作ってるアレです。

まる

Windowsのペイントで新規作成するとファイル名が「新規ビットマップイメージ」になるよね？あれですよあれw

Photoshopはざっくり言うと写真の編集・加工に向いています。学習のポイントはとにかく手を動かすこと。教科書を読んでわからなくても実際にソフトを触ってみると感覚でわかってきます。

WindowsのペイントやGIMPなどのおえかきソフトを使ったことがある人ならすぐ慣れると思います。Photoshopは習うより慣れろの要素が強いですね。

Photoshopの購入方法

Photoshopは有料ソフトでAdobeの公式サイトから購入できます。

学生さんや学校の先生は割引価格が適用。対象は以下の学校です。

学割価格でご利用頂ける対象は、13 歳以上かつ以下に示す教育機関が提供する 3 ヶ月以上の課程に在籍する生徒/学生または該当教育機関の教職員の方です。
• 学校教育法に規定された教育機関
(中学校、高等学校、大学、高等専門学校、特別支援学校、専修学校、各種学校)
• 職業能力開発法に規定された公共職業能力開発施設および職業訓練法人
• 行政が運営する大学校のうち、学位が取得できる大学校

出典：Adobe公式サイト

まずはAdobeの公式サイトを開きます。