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

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

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

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

スポンサーリンク



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

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

関 連 CodeCamp(コードキャンプ)のデザインマスターコース、期間はどれがいい?選び方を徹底解説!

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

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

  • HTML5/CSS3
  • JavaScript/JQuery
  • Bootstrap
  • Photoshop
  • Illustrator

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

  • コーディング(HTML5/CSS3、JavaScript/JQuery、Bootstrap)
  • 描画(Photoshop、Illustrator)

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

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

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

まず最初に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

図で表すとこんな感じ。

学習を始める前の準備

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

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

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

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

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

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

 レッスン回数
HTML5/CSS35回
JavaScript8回
Photoshop2回
Illustrator1回
Bootstrap3回
合計19回

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

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


>>エクセルフォームをダウンロード

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

各科目の学習のポイント

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

HTML5/CSS3

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

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

最初は知ってるプロパティだけで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ページ1ページ分で200行とか300行とか・・・。

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

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

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

Photoshop

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

まるまる

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

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

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

Photoshopの購入方法

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

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

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

出典:Adobe公式サイト

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

Photoshopのプランを選択します。3つプランがありますが、通常は一番安い980円/月のフォトプラン(20GB)でOK。

月々払いか一括払いを選択して購入画面に進む。(どちらでも値段は変わらず毎月払うか1年分まとめて払うかの違いです)

必要事項を入力。Adobe IDを持っている人は登録メールアドレスを入力、持っていない人は普段使っているメールアドレスを入力しましょう。

あとは次のページに進み支払い方法を入力して購入完了!決済が済むとすぐにダウンロードできるようになります。

まるまる

わたしはいろんなプランがあってどれを選んだらいいのかわからなかったの。参考にしてね!

Illustrator

通称イラレ。フォトショと同様Adobeが開発・提供しているソフトです。フォトショとの大きな違いは画像の形式がベクター(ベクトル)形式なこと。

これはビットマップとは異なり、拡大してもギザギザにならずなめらかな線でできています。違いはこの画像がわかりやすいです。↓

Illustratorはロゴやイラスト、アイコンなどの作成に向いています。学習のポイントはPhotoshop同様とにかく手を動かして慣れること。

Illustratorの購入方法

Illustratorも同じくAdobeの公式サイトから購入できます。もちろん学生&教職員割引もあり。

Illustratorの一番安いプランは単体プランで、2,180円/月です。(2018年11月30日まで22%OFFキャンペーンで1,680円!)

まずはAdobeの公式サイトを開き、単体プランでIllustratorを選択します。

次にプランを選択。Photoshopのフォトプランと異なり、「年間プラン(月々払い)」「年間プラン(一括払い)」「月々プラン」の3種類があります。

あとはPhotoshopと同じ手順で進めます。

  • 年間プラン(月々払い):2,180円を12ヶ月間毎月払う
  • 年間プラン(一括払い):2,180円×12ヶ月=26,160円をまとめて払う
  • 月々プラン:3,180円/月を月ごとに払う

わたしは年間プランの方が割安なので、年間プラン(月々払い)を選びました。が、正直これからwebデザインのスクールに入って勉強する人には月々プランをおすすめします。

というのも、実際にコースが終わってすぐwebデザイナーとして仕事を始めるかもわかりませんし、始めたとしてもPhotoshopだけで事足りてしまいIllustratorが必要ないということも考えられるからです。

まるまる

ロゴやイラストを作らない限りイラレは必要ないんだよね。イラレは高いからもし年間プラン買ったのに使わなかったらもったいない・・・!

なので、コースの期間中は月々プランを利用し、その後webデザイナーとして仕事を始める際に必要であれば年間プランを購入するのをおすすめします。

ここらへんはCodeCampからは一切案内がないので初心者は戸惑っちゃうんですよね。。

自習が行き詰まったらレッスン予約して講師に質問しよう

CodeCampは基本自習で、わからなかったところをレッスンで講師に質問するスタイルです。自習をがんばるのも大事ですが、行き詰まったらどんどんレッスンを入れて質問した方が早いですよ。

わたしのおすすめの先生は以下の記事で紹介しています。

関 連 【体験談】CodeCamp(コードキャンプ)のデザインマスターコース、おすすめ講師はこの先生!

CodeCampのカリキュラムをしっかりこなせばすぐに力がつくので、コースを申し込んだみなさんは是非がんばってくださいね!

まだ受講するかどうか迷っている人はまずは無料体験レッスンを受けてみてください。わたしは無料体験で現役講師に色々質問して安心できたので受講を決めましたよ♪

>>CodeCampの無料体験レッスンを受けてみる

まるまる

勉強煮詰まったらまたこの記事を読みにきてね!