CodeCamp デザインマスターコースの学習を効率的に進める方法を卒業生が解説
ニュージーランドのアラサー主婦ブロガーまるです。
わたしはコードキャンプのデザインマスターコース（２ヶ月）を受講しましたが、とにかく短期で終わらせたかったので勉強は計画的かつ戦略を立てて行いました。
その結果２ヶ月足らずで全５科目の最終課題に合格しコース修了。
最初に計画を立てることでレッスン回数を節約し「チケット追加購入しなきゃ足りない！」という事態を防げるので、デザインマスターコースを受講中の人はこの記事を参考に効率良く学習を進めてくださいね！
もくじ
まずはCodeCamp デザインマスターコース申込時にコース期間を選ぶ
コードキャンプのデザインマスターコースには２・４・６ヶ月の３つのコースがあります。
それぞれのコースの違いや自分に合ったコースの選び方はこちらの記事で解説してます↓
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社が提供するソフトでありながら機能が違うから。似て非なるものなので、両方同時に進めるとごっちゃになって頭が混乱します。
図で表すとこんな感じ。
CodeCamp デザインマスターコースで学習を始める前の準備
学習を始める前に２つ準備をします。
- 教科書に一通り目を通す
- レッスン内容の記録フォームを作る
まず、５科目すべての教科書に目を通しましょう。読み込まずざっと目を通すだけでOK。「内容」「学習量」「自分はどの科目が得意か苦手か」ということを把握するのが目的です。
それを基に、各科目何回ずつレッスンを受けるか見当を付けます。
おそらく「最初に想像していたより多くのレッスン回数が必要だった」となるので余裕を持っておきましょう。
コースに含まれているレッスン回数マイナス５回で終わらせるつもりで。２ヶ月コースなら20-5=15回、４ヶ月コースなら40-5=35回、６ヶ月コースなら60-5=55回です。
わたしが実際受けたレッスン回数はこんな感じ。苦手なJavaScriptでは全レッスン回数の半分近く消費しましたw
| レッスン回数 | |
|---|---|
| HTML5/CSS3 | ５回 |
| JavaScript | ８回 |
| Photoshop | ２回 |
| Illustrator | １回 |
| Bootstrap | ３回 |
| 合計 | 19回 |
また、レッスン内容は記録しておくと良いですが、手書きだと大変なのでエクセルで記録フォームを作っておくと楽ですよ。
レッスン前に質問をリストアップし、レッスン後に講師からの回答を入力します。ちなみにわたしはこんなフォームを作ってました。↓
CodeCamp デザインマスターコースの科目別学習ポイント
ここからは、科目別に詳しい学習のポイントをご説明します。教科書の内容まではお見せできませんが、こういう風に学習すると効率が良いよというのを伝授しますね！
HTML5/CSS3
HTMLとCSSはすべての基本なので、とにかく教科書を隅から隅まで読み込んでみっちり理解してください。
コードキャンプの教科書をきちんとやっておいたらあとはネットで調べればいくらでも応用が効くので。
最終課題は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行とか・・・。
で、コードキャンプの最終課題はHTML5/CSS3と同様webページ作成（１ページのみ）なんですが、記述が大量すぎて講師の先生方も難儀してましたw
200行も300行もあるHTMLを見せて「コード確認してください！」と頼んでも、パッと見て間違いを見つけるのはプロの講師陣でも難しいんですよね・・・。
なので、Bootstrapはどの科目よりも自習をがんばってください。小さい課題はなく最終課題のみですが、できる限り完成に近付けてどうしてもわからないところだけピンポイントに質問するのがおすすめです。
Photoshop
通称フォトショ。写真の編集のほか、簡単な描画やテキスト入力ができるソフトです。画像の形式はビットマップ（ラスター）。小さい四角形がたくさん集まって形を作ってるアレです。
Photoshopはざっくり言うと写真の編集・加工に向いています。学習のポイントはとにかく手を動かすこと。教科書を読んでわからなくても実際にソフトを触ってみると感覚でわかってきます。
WindowsのペイントやGIMPなどのおえかきソフトを使ったことがある人ならすぐ慣れると思います。Photoshopは習うより慣れろの要素が強いですね。
Photoshopの購入方法
Photoshopは有料ソフトでAdobe公式サイトから購入できます。
学生さんや学校の先生は割引価格が適用。対象は以下の学校です。
学割価格でご利用頂ける対象は、13 歳以上かつ以下に示す教育機関が提供する 3 ヶ月以上の課程に在籍する生徒/学生または該当教育機関の教職員の方です。
• 学校教育法に規定された教育機関
(中学校、高等学校、大学、高等専門学校、特別支援学校、専修学校、各種学校)
• 職業能力開発法に規定された公共職業能力開発施設および職業訓練法人
• 行政が運営する大学校のうち、学位が取得できる大学校出典：Adobe公式サイト
まずはAdobe公式サイトを開きます。
↓
Photoshopのプランを選択します。３つプランがありますが、通常は一番安い980円/月のフォトプラン（20GB）でOK。
↓
月々払いか一括払いを選択して購入画面に進む。（どちらでも値段は変わらず毎月払うか１年分まとめて払うかの違いです）
↓
必要事項を入力。Adobe IDを持っている人は登録メールアドレスを入力、持っていない人は普段使っているメールアドレスを入力しましょう。
↓
あとは次のページに進み支払い方法を入力して購入完了！決済が済むとすぐにダウンロードできるようになります。
Illustrator
通称イラレ。フォトショと同様Adobeが開発・提供しているソフトです。フォトショとの大きな違いは画像の形式がベクター（ベクトル）形式なこと。
これはビットマップとは異なり、拡大してもギザギザにならずなめらかな線でできています。違いはこの画像がわかりやすいです。↓
Illustratorはロゴやイラスト、アイコンなどの作成に向いています。学習のポイントはPhotoshop同様とにかく手を動かして慣れること。
Illustratorの購入方法
Illustratorも同じくAdobe公式サイトから購入できます。もちろん学生＆教職員割引もあり。
Illustratorの一番安いプランは単体プランで、2,180円/月です。（2018年11月30日まで22%OFFキャンペーンで1,680円！）
まずはAdobe公式サイトを開き、単体プランでIllustratorを選択します。
↓
次にプランを選択。Photoshopのフォトプランと異なり、「年間プラン（月々払い）」「年間プラン（一括払い）」「月々プラン」の３種類があります。
↓
あとはPhotoshopと同じ手順で進めます。
- 年間プラン（月々払い）：2,180円を12ヶ月間毎月払う
- 年間プラン（一括払い）：2,180円×12ヶ月＝26,160円をまとめて払う
- 月々プラン：3,180円/月を月ごとに払う
わたしは年間プランの方が割安なので、年間プラン（月々払い）を選びました。が、正直これからwebデザインのスクールに入って勉強する人には月々プランをおすすめします。
というのも、実際にコースが終わってすぐwebデザイナーとして仕事を始めるかもわかりませんし、始めたとしてもPhotoshopだけで事足りてしまいIllustratorが必要ないということも考えられるからです。
なので、コースの期間中は月々プランを利用し、その後webデザイナーとして仕事を始める際に必要であれば年間プランを購入するのをおすすめします。
ここらへんコードキャンプ側からは一切案内がないので初心者は戸惑っちゃうんですよね。。
自習が行き詰まったらレッスン予約して講師に質問しよう
- 最初に教科書にざっと目を通し、得意／苦手そうな科目を把握
- コーディング系科目と描画系科目それぞれ進め方の順番を守る
- 自習での疑問点やレッスン内容を記録する
コードキャンプは基本自習で、わからなかったところをレッスンで講師に質問するスタイルです。自習をがんばるのも大事ですが、行き詰まったらどんどんレッスンを入れて質問した方が早いですよ。
わたしのおすすめの先生は以下の記事で紹介しています。
CodeCamp デザインマスターコースのカリキュラムをしっかりこなせばすぐに力がつくので、コースを申し込んだみなさんは是非がんばってくださいね！
まだ受講するかどうか迷っている人は気軽に無料体験レッスンを受けてみてください。わたしは無料体験で現役講師に色々質問して安心できたので受講を決めましたよ♪
★お友達紹介キャンペーン★
あなたが紹介した友達がコースを申し込むと両方にAmazonギフト券10,000円分プレゼント！
