僕が受講したテックアカデミー『Webデザインコース』のカリキュラムを紹介

8月 7, 2019

オンラインのプログラミングスクール「テックアカデミー」に興味があっても、どのコースにしようか迷っている人も多いのではないでしょうか。

そこで今回は、僕が受講した『Webデザインコース』についてカリキュラムの内容を詳しく紹介します。

おじさん
このサイトのようなカスタマイズは、簡単に出来るようになります

 

カリキュラムの内容は2019年7月のものです。

内容は、今後変わる可能性があります。

うさぎ
テックアカデミーの無料体験はこちら

Webデザインコースで出来ること

「Webデザインコース」では、WordPressで作ったサイトのデザインを学びます。


当サイトでも、見出しやボタンやボックスがただの文字ではなく、なんらかの装飾がしてありますよね。

「Webデザインコース」ではHTMLとCSSという言語を使って、こうしたデザインが出来るようになります。



「Webデザインコース」の最終目標は、オリジナルサイトの作成です。


ただし、ブログの記事投稿のように、複数のページを追加したり、関連記事を表示したりするのは「WordPressコース」で学ぶPHPという言語が必要になります。

なので「WordPressコース」も最終目標はオリジナルサイトの作成ですが、完成品は別物になります。

カリキュラムの一覧

Webデザインコースのカリキュラムは次のようになっています。

レッスン
目安時間 累計
0 事前準備 5 5
1 Webデザインの概要 5 10
2 Webデザインの原則 5 15
3 制作フロー 5 20
4 デザインツール
7 27
5 ポートフォリオ:デザインカンプ 10 37
6 HTML/CSS基礎 10 47
7 ターミナルコマンド 3 50
8 Sass/Compass 5 55
9 ポートフォリオ:コーディング 10 65
10 モバイルデザイン 15 80
11 コーポレートサイト 25 105
12 ショッピングサイト 25 130
13 オリジナルサイト 30 160

目安時間はあくまでも目安で、前半は5時間と書いてあるレッスンでも、1時間くらいで終われるものもあります。

逆に後半は時間内に追われないレッスンも出てきます。



後半になるほどレッスン内容も課題も難しくなるので、いかに前半で時間的余裕を作れるかが肝です

次に具体的なレッスン内容を見ていきましょう。

初心者でも大丈夫?

Webデザインコースは全くの初心者でもOKとテックアカデミーは説明しています。


しかし受講してみて、ある程度の予備知識がないと厳しいと感じました。

実際、僕もテックアカデミーのトレーニングを受講したので、CSSの学習をスムーズに進められたと実感しています。

分からないところは質問できるのでは?
うさぎ
おじさん
初心者だと「分からないところが分からない」状態になっちゃうんですよね


Lesson0 事前準備

Lesson0は、受講に必要なサイトやツールの登録をおこないます。

中には不要なものもあるので、自分の環境に合わせて登録してください。

時間目安5時間ですが、1~2時間あれば終わります。

登録するもの一覧

Google Chrome デベロッパーツールを使う
Gyazo スクリーンショット
Slack チャット相談
GitHub 任意の最終レッスンで使う
AWS Cloud9 HTML、CSSの開発
Cacoo サイトのワイヤーフレーム作成
Photoshop 画像加工
さくらレンタルサーバ オリジナルサイトの公開

登録しなくても良かったもの

僕の場合は、以下の5つが登録不要でした。

Google Chrome

もともと使っていたので登録不要でした。

Gyazo

Gyazoは、チャットの相談に画面の写真(スクリーンショット)が必要な場合に使います。僕はパソコンについていた機能を使ったので不要でした。

GitHub

GitHubは任意の最終レッスンで使うので、必要だと感じたら登録するのが良いと思います。

Photoshop

僕はPhotoshopのCS5を持っていたので不要でした。CS5は何年も前の古いバージョンですが、受講に支障はありませんでした。

さくらレンタルサーバ

テックアカデミー受講者はさくらレンタルサーバを3ヶ月無料で使えます。すでにレンタルサーバーの契約をしていてドメインの追加が出来る方は不要です。

 

その他受講に必要なもの

受講には、言うまでも無いですがパソコンが必要です。

Webカメラとマイク

あと、メンター(指導者)とのビデオチャットにWebカメラとマイクが必要ですが、たいていのノートパソコンには搭載されていると思います。


無い場合はスマホでもOKですが、カメラとマイクが一体になったものが1000円代で買えます。画面共有することもあるので、購入をオススメします。

 

参考書

他に、僕は参考書を2冊買いました。

1冊は家用で紙書籍、もう1冊は外出先でも読めるように電子書籍です。

これは最初に買うのではなく、分からない項目が出てきた時に分かりやすく説明している本を買うのが良いと思います。

本の後ろの索引が充実していると良い本の可能性が高いです。

Lesson1 Webデザインの概要

最初のレッスンは、Webデザインの概要と、このコースで学ぶことの概略を大まかに掴みます。

僕は、初めて聞くような単語をメモしながら、1時間もかからず終わりました。

読み物的な学習内容は、また後で戻るつもりで速く読みすすめるのが良いと思います
うさぎ
おじさん
実践してみると「ああ、あのことか」と理解できる事が多いですね

Lesson2 Webデザインの原則

レッスン2は、配色やフォントなどの概要について学びます。

このレッスンも目安は5時間ですが、1時間もかかりません。

どんどん読み進めて、後半に使える時間をどんどん貯めるのが良いと思います。

おじさん
ここら辺で「余裕じゃん」とナメると、後で死にます
貯金貯金
うさぎ

Lesson3 制作フロー

レッスン4以降で作成するポートフォリオの制作の流れを掴みます。

ここも読むだけなので1時間もかかりません。

おじさん
貯金貯金

Lesson4 デザインツール

レッスン4から、いよいよ実践が始まります。

サイトの骨組みを描くための「Cacoo」と、画像を加工する「PhotoShop」の使い方を学びます。

2つのツールは初めて使う方が多いと思います。分からないところは早めに聞いて解決しておきましょう。

おじさん
ようやく実践が始まって、楽しくなってきます

Lesson5 ポートフォリオ:デザインカンプ

ポートフォリオは自分の自己紹介サイトのことで、その下書きになるのがデザインカンプです。

このレッスンでは最後に課題が用意されています。

おじさん
下の画像のようなものを作ります

Lesson6 HTML/CSS基礎

レッスン6からは、いよいよWordPressの体裁や装飾に関するHTMLとCSSの学習に入っていきます。

僕は独学で適当に自分のサイトのボタンやボックスのカスタマイズをしていましたが、全ての意味がつながってきました。

これまでHTMLやCSSを全く触ったことの無い方は覚えることが増えますが、プログラミングの楽しさも味わえるんじゃないでしょうか。

ここら辺からメンターに質問する項目が増えてきます
うさぎ


テックアカデミーの無料体験はこちら

Lesson7 ターミナルコマンド

レッスン0で登録した「AWS Cloud9」でターミナルを使います。

ターミナルは、この次のレッスンでも使うんですが、僕はイマイチ意味が分かりませんでした。

おじさん
意味がわからなくても問題なかったので、そのままにしてしまいました
初心者はここで躓く人が多いとメンターも言っていましたね
うさぎ

Lesson8 Sass/Compass

Sassは、CSSを効率的に入力するツールです。


たとえばCSSのカスタマイズをしていると、同じカラーコードを何度も入力することがあります。

Sassを使うとカラーコードを一度に全部変えたり、分かりにくいコードを単純化したりできます。


レッスン7のターミナルは、このSassを動かすためのものです。

おじさん
ターミナルの意味が分からなくてもSassは動きます

Lesson9 ポートフォリオ:コーディング

レッスン5で作ったポートフォリオをインターネット上に表示できるように、HTMLとCSSのコードを書いていきます。

たくさんのコードが出てきますが、そのまま真似して自分で打ち込むことが大事になってきます。

おじさん
写し間違いを修正することも勉強になります

Lesson10 モバイルデザイン

スマホとパソコンで表示を変えるレスポンシブデザインを学びます。

大きな画面のパソコンと小さな画面のスマホに同じ情報を盛り込むことが結構大変なことだと実感できます。

おじさん
今まで「モバイルファースト」の意味を間違えて使っていたことを知ったのが一番の衝撃でした
知ったかぶりは、周りの人が気づいても訂正しづらいですからね
うさぎ

Lesson11 コーポレートサイト

レスポンシブな企業サイトのPRサイトを構築します。

目安時間が25時間となり、Webデザインコースの山場を迎えます。

レッスンはこの後も続きますが、ここをクリアすると、かなり自信が付くんじゃないかと思います。

おじさん
僕は課題を作るのに思っていた以上に時間が掛かってしまいました

Lesson12 ショッピングサイト

商品を販売するサイトの制作です。

HTMLやCSS以外に、jQueryという言語を使った動きのあるサイトを作ります。

ショッピングサイトのコードも書けるようになると、「後は経験だけだな」と感じられるはずです。

おじさん
僕は4週のコースだったので、ここまでしかできませんでした
初めのほうのレッスンを急いでこなしても、1ヶ月で全部の課題をクリアするのはかなり大変ですね
うさぎ

Lesson13 オリジナルサイト

いよいよオリジナルサイトの制作です。

完成した作品はコンテストに出品することもできます。


そして、転職や在宅ワークのサポートについても、このレッスンで案内されています。

クラウドワークスで仕事を受注するときのアドバイスもしてもらえるので、初めての仕事探しも心強いと思います。


転職や在宅ワークを希望する方は、このオリジナルサイトで実績を証明できるので、ぜひ作品を完成させてください!

おじさん
受講期間終了後も課題は見れるので、僕もオリジナルサイトを作ろうと思うのですが、なかなか・・・
一人で期限もなく作るのは難しいですよね
うさぎ

まとめ

今回は。テックアカデミーの「Webデザインコース」のカリキュラムについて、その内容を詳しく紹介しました。

記事の中でも書きましたが、カリキュラムの山場は後半にあるので、そこで時間を多く取れるようにするのがオススメです。


僕は、最後の課題をクリアできませんでしたが、それでもこのサイトのようなカスタマイズは簡単にできるようになりました。

おじさん
結構、満足しています


この記事を読んで受講される方は、オリジナルサイトの作成まで終えることを願っています!

テックアカデミー

ド素人の40歳のおじさんが
2ヶ月間WordPressを学んで
自在にカスタマイズできるようになり、
在宅収入を得られるようになった
オンラインスクール