私、つい半年前までは、WEBデザインとは全く縁のない職場で働いておりましたが
約半年間の独学の末、幸いにもとある会社より内定を頂き
Webデザイナーとして職を得るに至りました。
数ヵ月で人生って変わるんだなぁ～（しみじみ）
というわけで今回は
この記事は、そんな未経験WEBデザイナーだった私の就職体験記シリーズ、第1弾【①勉強編】になります。
- Webデザイン初心者だけどWEBデザイナーになりたい。
- でもお金はそんなにかけたくない。
- でも、独学ってどうやればいいかわからない。
こんな方の参考になれば幸いです。
勉強ロードマップ
■HTML/CSS
■Photoshop
【基礎】～1ヵ月
↓
【実践】～2週間
↓
■JavaScript
■jQuery
【基礎】～1ヵ月
↓
【実践】～1週間
↓
■Adobe XD
【基礎】～1週間
【実践】～1日
こんな感じで、まるっと約3ヵ月間かけて勉強していきました。
以下、この順番でそれぞれ勉強方法を紹介していきます。
HTML/CSSを学ぶ
まずはHTMLとCSSというプログラミング言語を学びました。
HTMLは、文字とか画像とかを画面上に表示させる言語です。
だからHTMLだけだと、文字や画像の羅列が画面上に表示されるだけのWebサイトが出来上がります。
そこで登場するのがCSSです。
CSSは、画面上に表示されているものの色・フォント・配置などを整える言語です。
だからHTMLとCSSは、「2つで1つの言語」みたいな扱いを受けております。
私はこのHTML/CSSを、Progate（プロゲート）というプログラミング言語学習サイトで勉強しました。
Progate | プログラミングの入門なら基礎から学べるProgate
まずは無料版で勉強してみて
案外ひとりでも勉強できるものだな～
と、独学に対する手応えを感じられたところで
月950円（税抜）のプラス会員になり
HTML/CSSすべてのレッスン・道場コースをやりました。
ネットにはプロゲートに関するレビューが沢山転がっていて、中には
プロゲートをやった程度の知識では、お仕事は受注できませんよ
というレビューもありますが、私はこうした意見に賛同しつつも
それでも「こんな安価に分かりやすくプログラミングを学べるなんて素晴らしい！」って思います。
そんな訳で、私はプロゲートをガンガン利用していました。
実践でも使えそうなスライド・コードは印刷して
レッスン・道場コースを2～3周して
最終的には何も見ない状態でも道場コースをクリアできるように実力を固めていきました。
Photoshopを学ぶ
HTML/CSSと同時並行で、Photoshopについても勉強しました。
Photoshopの操作方法を学ぶにあたって購入した参考書はありません。
Photoshopをインストールすると必ず付いてくるチュートリアル機能を使って
画像編集に必要な最低限の知識を身に着けました。
Photoshopのチュートリアルは本当に優秀で、1つ動作するごとに……
チュートリアル
「次はここをクリックしてください」
「ここでブラシの太さを調整してください」
と、手取り足取り、吹き出しで指示してくれるので
初心者でも難なく技術を学ぶことができます。
しかも！あくまでただのチュートリアルだから追加料金ナシ！
私はここでマスク処理（画像を自由な形に切り取る処理）や
その他各種ツールの基本操作を学びました。
これによって、自作でいろんな素材を作成できるようになったり
画像を合成できるようになったりしました。
Photoshop（あとIllustrator）には1週間無料のお試し期間があります。
ソフトがまだ無いという方は、まずこのお試し期間を利用することをオススメします。
※Illustratorの勉強
結論から言うと、 Illustratorの勉強は一切していません。
なぜなら、クラウドワークスの案件を見ている限り、Illustratorを使った案件は
Photoshopを使った案件に比べて圧倒的に少なかったからです。（ほぼゼロに近かった）
あとはIllustratorにデフォルトでついている学習機能があまり優秀ではなく
Photoshopと違って手取り足取り指導してくれないので
勉強する気が失せたというのもあります（苦笑）
でも、ロゴとか飾り字とかを作成する場合Illustratorの使用はマストです。
また、「レイヤー」「アンカーポイント」といった概念や
「スポイトツール」「ペンツール」といった各種ツール等
IllustratorにはPhotoshopと共通した部分が多くあります。
だから、一通り基礎的なWebデザインスキルを学んだ後
Illustratorを使わなくちゃいけない状況になったら
その都度Google検索したり書籍を読んだりして、スキルを学んでいます。
【実践】ホームページを作ってみる
素材が作れて、最低限のコーディングができるようになったところで
一つ成果物を作ってみました。
自分でイチから作品を作ってみると大きな自信に繋がりますし
コーディングの環境構築という、基本的かつ地味に大変な作業も
一通り経験することができます。
でも、初めてホームページを作るとなると……
途中でエラーにハマったら作業進まなくなるだろうなぁ～。
しかも、そのまま挫折ってのもあり得る。
そう考えると……
コードの答えはあった方がいいなぁ～。
ということで私は
「これ一冊でホームページができちゃう！」的なモデルコード付きの学習本をベースに
ホームページを作成することにしました。
そこで購入した本が『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』です。
コチラは、Webデザイン初心者界隈では大変有名な本です。
私もこの本を参考に、架空のカフェのホームページを作成しました。
案の定、初ホームページ作成ではエラーにハマって
なんでカタチにならないの！？
何が悪いの～！？
……っとまあ、こんなふうに発狂しました。（苦笑）
だから、答え（＝モデルコード）と解説がついている本を用意しておいて本当に良かったと、心からそう思います。
だって、もしこの本がなかったら
ホームページ完成してなかっただろうからね。
さてさて……！
1つ何かを完成させると「案外カンタンかも？」と思うものでして
その勢いのまま、実際に存在するWEBサイトを参考に
あと2～3個ぐらいホームページを作りました。
だから、これからWEBデザイナーになろうとしている方も、
自信がなくても、知識が不完全でも、とにかく何か一つでも形にしてみて下さい。
景色が一気に変わりますよ(^^♪
※コーディング環境整備 ＆ 自作HPの公開方法
コーディングをするには
コードを書くためのテキストエディタが必要になります。
また、テキストエディタを使って折角コードを書いても
ネット上に公開しないとただの編集ファイルでしかありません。
プログラミングの環境作りと自作HPの公開をどうするか？
初心者・独学者である私にとって大変悩ましい問題でしたが
全部↓プロゲートで解決できました。
Progate | HTML & CSS の開発環境を用意しよう！
Progate | 自分で作ったWebページをインターネット上に公開しよう！
↑これら記事に
- Atomというテキストエディターでの環境作りの方法
- GitHubを使ったホームページの公開方法
……が記載されています。
特にこだわりがないのであれば
簡単で分かり易いので、こちらの記事に従って作業を進めると良いと思います。
JavaScript & jQueryを学ぶ
動きのない基本的なホームページができたところで、次に
動きをつけるプログラミング言語の勉強に取り掛かりました。
すなわち、JavaScriptという言語と
JavaScriptのライブラリ（＝「これってみんな使えると便利だよねー」っていうコードの蓄積）であるjQueryです。
HTML/CSS同様、これらもプロゲートを利用して
実践でも使えそうなスライドやコードを印刷して、何度も見返したり
レッスンを2～3周したりして勉強しました。
【実践】作ったホームページに動きをつける
一通り勉強ができたら
HTML/CSSの実践編で作ったホームページに
JavaScript（jQuery使用)で実際に動きをつけてみました。
JavaScriptについてもやはり
答えがないと、途中でエラーになったときに完遂することができないという危険があるので
モデルコードがついている本を購入しました。
それが『jQuery標準デザイン講座』という本です。
この本は、どんなアニメーションを作りたいかによってセクション分けがされていて
辞書のような感覚でコードを調べられるので、オススメです。
ちなみに私は、この実践勉強でも、案の定エラーにハマりましたので
HTML/CSSの時と同様
答え（モデルコード）と解説がついている本を用意していて、本当に良かったと思いました。
※ポートフォリオの重要性と作るコツ
ちょっと話がそれますが……
勉強したことはあります。
でも、ポートフォリオはありません。
こんなプログラミング初心者、割といるんじゃないかな？と思います。
このあとの記事でも触れますが
ぶっちゃけ、ポートフォリオが無いと就職は99.9％ムリです。
こうした状況に陥らないためにも、何か成果物を作るときは
- 必ずエラーにハマる前提で
- 完遂することを目標に、作業を始める
……のが、かなり重要になります。
なので、いつでも教えてくれる人がいない限りは、何かしら1冊は手元に置いて作業をするようにして下さい。
Adobe XDを学ぶ
Adobe XDはPhotoshop同様、Adobe社が提供するツールの一つです。
Adobe XDを学ぶ目的は
デザインカンプと呼ばれる、いわば「ホームページの設計図(完成図)」を作ることにあります。
残念ながらAdobe XDには、Photoshopのようなチュートリアルがついておりません。
だから私は、『Adobe XDではじめるWebデザイン&プロトタイピング』という本を購入して勉強しました。
この本は、一つ一つ手順を記載してくれているので
初心者には本当に優しい一冊です。
ちなみに！Adobe XDを勉強してみた感想ですが
感覚的にはPhotoshopよりも遥かに操作が簡単でした。
だから、時間に余裕のある方であれば
1週間で一通り学んで、1日でポートフォリオ作成まで出来るようになると思います。（私も実際にそうでした）
【コスト】ここまでに掛かったお金
以上が、私がスタートから3ヵ月間で勉強してきた内容です。
4ヵ月目から実際に業務を受注し、実績を作っていくのですが
その話をする前に
3ヵ月の勉強でかかった費用を算出してみました。↓
【Progate3ヵ月分】＋【書籍】＋【Adobeソフト代】
＝2,850円 + 7,691円 + 39,980円
＝50,521円
約5万円なり!!!!!
もしAdobeソフトを既に持っていた場合
WEBデザインを独学するのに新たに必要なお金は
せいぜい1万円ちょっとという事になります。
何という高コスパΣ(ﾟ口ﾟ;)//
↓内訳はこんなかんじ。
【HTML/CSS】
■Progate
950円 × 3か月 ＝ 2,850円
■『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』新品
2,486円
【Photoshop/illustrator/Adobe XD】
■Adobe CC 1年版（ソフトインストール）
※ヒューマンアカデミー通信講座『たのまな』経由
39,980円
■『Adobe XDではじめるWebデザイン&プロトタイピング』新品
2,750円
【JavaScript/jQuery】
■Progate
0円
■『jQuery標準デザイン講座』新品
2,455円
Adobeソフトを定価ではなく
ヒューマンアカデミーの通信講座『たのまな』経由で購入したことが
合計価格を抑えた秘訣だったでしょうか……。
『たのまな』では、いつでもAdobeソフトをお得に購入できるわけではないので
お得に購入したい方はこまめにチェックすることをオススメします。
ヒューマンアカデミー『たのまな』通信講座アカデミックストア
ちなみに、私が『たのまな』でAdobeソフトを購入したのは2020年8月です。
もしかしたら来年も夏頃にまたお安く買えるかも……？？
※『たのまな』については後でまた記事にしようと思います。
