WEBデザイナーになりたいけど今からなれるのかな…
この記事は、WEBデザイナーになりたい人向けの記事です。前半は、コスパ最強で安く学べる方法、後半は独学ロードマップの内容になります。
全くの未経験者でも１から勉強してWEBデザイナーになれる！
WEBデザイナーになるためには、下記の知識が最低限必要になります。
WEBデザイナーになるために必要な知識
①HTML/CSS（レスポンシブ対応必須）
②デザインソフトの使用（Photoshop Illustrator XD）
③JavaScript/jQuery
④WordPressの使い方、作り方、カスタマイズ
⑤デザインの基本知識
楽して稼げるものでもないのでそこは騙されないように！
もし過去にillustratorを使用したことがある。Photoshopを使用したことがある。という方は、他に何が必要なのか？を改めて確認してみてください。
だいたいのスクールの教材では下記の内容は盛り込まれているはずです。
今までは、WEBデザイナーというとPhotoshopやillustratorができれば…というイメージが強かったのですが、求人情報を見ていると近年はコーディングの知識を持った人、デザインもコーディングも両方できるといった人が強く求められているようです。
デザイナー専門を目指すのは難しいかも・・・
個人的に思ったのが近年の傾向として、WordPressに重きを置いている会社も多いので、デザインとコーディングの両方が出来る方を「Webデザイナー」という職種に定義している場合があります。
会社によって使用しているCMSは異なるけど、ほとんどの会社はWordPressを使っているよ！
背景にはWordPressへの移行
WordPressは、CMS「Contents Management System：コンテンツ・マネジメント・システム」の中の一つで、Webサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのことです。
簡単に言うと、従来ではホームページの更新はHTMLを知っている人でないとできませんでしたが、WordPressを使用すれば、コンテンツの中身である、簡単なテキストや画像の差し替えなどの修正・更新はお客様の方で可能となります。
10年前までは、HTMLサイトが主流でしたが、大規模サイトなどを作成するときにかなり重労働＆メンテナンスもややこしいといったことになるのでWordPressを使用する会社が増えてきています。
WordPressはHTMLサイトとはまた違った特徴があるので、デザイナーさんも仕様を理解していないと話にならないといったことになるのです。
また、小規模のホームページだとデザインと構築までデザイナーお願いね！といったパターンもあります。
もはや職種名は『WordPressマスター』でよいのでは？
まず新人はデザイン職につけるかどうか・・・
会社によって違いますが、まったくの未経験、異業種からの転職だと、「デザインをがっつりやりたいです！」といっても・・・
まずはバナー作成。簡単なホームページの修正からお願いします。
まずはお客様対応、電話対応からお願います。
・・・といったパターンが多いようです。これは本当によく聞きます。
しかし元々デザインの学校に通っていたとか、紙媒体でのデザイン経験がある場合、独学で勉強してデザイン力を身に着け、Instagramなどに制作物をあげてフォロワーさんから依頼が来た！というパターンもあります。
どうしてもデザインがしたい場合は、最初からフリーの方向で考えてもよいかも！
しかしこのパターンで誰もが成功するとは限らないため、デザインもコーディングもできるよ！パターンをご紹介しようと思います！
紙媒体とWEB上のデザインは違う・・・
ホームページのデザインというのは普通の紙媒体とは違って、ウェブの知識が必要になってきます。例えば、タブレットやスマホに対応できるレスポンシブデザインなどです。
1枚デザインを作成しても、レスポンシブデザインやアニメーションに対応するとなると、このデザインでは無理だった…ということもあります。
特にデザインとコーディングの部署が分かれている会社であれば、自分のデザインをコーダーさんに渡すので、ある程度コーディングが理解できてないと、「これはコードで全て再現出来ない。」と言われることもあるかもしれません。
あくまで求人情報の場合は、デザインもコーディングも両方できる方が好ましいようですが、両方完璧になる必要もありません。どちらか一方が苦手で、もう一方がとても優れている人は沢山います。
いずれも勉強して損はありません！
①職業訓練校へ行く
WEBデザイナーになりたいけれど、スクールに通うお金がない！と悩んでいる方は、まずはご自身がお住まいの地域の職業訓練校にWEBデザイナー養成講座があるかどうかを確認してみてください。
運よくあれば、お金をもらいながら学べる機会を得ることが可能です。
職業訓練校の記事については、下記にも書いてあります。気になる方はご覧になってください。
コスパ最強！安いけど良質なスクールを探す！
職業訓練校のWEB系講座に興味あったけど落ちたわ…
倍率が高いこともあります。
でもチャンスはまだあるよ！
職業訓練校の入学テストに落ちた。自分が住んでいる地域になかった場合。または講座を開催している時期ではなかった場合。
50万、30万とお金をかけずとも、独学で学ぶスクールは沢山あります！
テックアカデミーさんやデジハリさんなどの20万前後のスクールはネットにありふれているので、10万以下のスクールを厳選して記事にしました！
★10万以下厳選 安くて良質なスクール★
①デイトラ
デイトラは、1日1題90日で一定のレベルに到達するようゴールから逆算で設計しています。
最短で稼ぎたい！といった人向けです。
WEB制作コースやでWEBデザインコースなど他にもコースがあります。
学習後のサポートもあるようです。
②Udemy
特に『たにぐちまこと』さんがお勧め！
必要な知識を部分的に学ぶことができます。
デザインは他のスクールで学んでいる、という方にお勧めです。
どんな感じで講座が進んでいくのか不安な人はYouTubeでも無料公開されているものもあります。
たにぐちまことのともすたチャンネル
YouTubeでも有料会員になればUdemyと同じ口座が見れ、特典も得られるとのことです。
特典…有料講座の視聴、メンバーページへのアクセス、専用Slackへの招待
※Udemyはセールがあり、安くなっている時期があるので見逃さないように！
子育てしながらスクールに通う
子供がいるからスクールに気軽に通えない。
でも将来的に技術を身につけたい！
①主婦・ママ向け Famm(ファム)WEBデザイナースクール
ご自宅に無料でベビーシッターを手配してくれるそうです。対面の講座では講義スペース近くにシッターさん常駐のキッズスペースを設置、安心して受講できます。
むむむ…無料でベビーシッター⁉
すごいよこれ…
②デジタルハリウッドスタジオさん
なんとデジハリさんも主婦・ママ向けプランを出していらっしゃいました。
お子さん同伴でも良いそうです！
※STUDIO渋谷・新宿とSTUDIO吉祥寺のみ
WEBデザイナーは独学でなれる？（コーダー寄り）
できればスクールに通いたくない…
お金ないし…
やる気があれば、
なれまーす！
スクールに通わなくてもWEBデザイナーにはなれると思います！
しかし、illustratorやPhotoshopは、私は手を動かして教えてもらわないと本当に操作できなかったので、デザインソフトについて全くの未経験であれば、そこは100％イエスとはいれません！（たびたび先生を呼んでいた私なので…笑）
え？わからない！
先生助けてー！！
デザインソフトは操作が重要になってきます。ショートカットキーも実務では使用できないと話になりません。
①まずはHTML / CSSから勉強しましょう！
デザインに関しては置いておいて、コーダー向けで学習ロードマップを作成しました。
ただし、個人的には社会人になって勉強したことがある人！時間に余裕がある人！記憶力に自信がある人！にオススメしたいです！
MANAさん著書の本からますは初めてみる！
MANAさんはフリーのウェブデザイナーさんです。
とにかくわかりやすいし、センスが良い！
とにかくホームページを作ってみる！
作りや骨組みを理解する！
こうやってホームページができるのね。
なんだか楽しくなってきたわ！
いいね！
まずは好奇心から育てましょう！
Webクリエイターボックス
https://www.webcreatorbox.com/
『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
よくわからないところがある…
ググりますよ！
わからないことはとにかくググる！
スクールに通っていても、自ら調べること、ググることができない人は絶対に伸びません！
基礎的な部分であれば、絶対にググってでてきます。
勉強して行って、複雑になればなるほど、ヒットする記事は減ってきます。
本当にわからないことは…Qiitaで質問！！
Qiitaは、エンジニアリングに関する知識を記録・共有するためのサービスです。
②サイトを自由に作ってみる
本を数冊読んで、ある程度骨組みや基本的な知識がついたところで、自由にホームページを作成してみましょう。
illustratorやPhotoshopなど絶対に使用しないといけない状況なので、何が何でも操作は覚えるはず！！
わからなければ、調べる！本を買う！
1つ作成しただけでも、調べながらやることでかなり力がつきます！
人に見せることが出来るレベルになったら、ポートフォリオを作成してみましょう！
③既存のサイトの模写をする
既存のサイトを真似て、サイトを作成してみましょう！
アップロードさえしなければ、写真なども同じように配置してみましょう！
自分のポートフォリオなどでアップロードする場合は、著作権フリー画像を使用するようにしましょう！
既存のサイトを真似ることで、いろんなコードの打ち方を学ぶ。
数をこなしていくことで、レイアウトごとにどういうコードを使用したらいいかわかる。
④ワードプレスを勉強する
ある程度、HTMLやCSSができるようになったらワードプレスの勉強をしてみてください。
個人的な体験談ですが、私はワードプレスはカスタマイズの方から学びました。
おそらく職業訓練校の時間の都合上だと思いますが、カスタマイズから入ると普通の使用方法を知らなかったので理解するのに非常に苦労しました。
ワードプレスはWEB業界ではない、普通の会社でも使用されています。
会社のホームページの「お知らせ」の記事を投稿したりなど、WEB担当という人がいる会社もあります。記事の投稿は、誰でもできるものでなければなりません。
投稿ページの更新が内側の作業であるとすれば、一方で、WEBデザイナーはワードプレスでは外側の機能について詳しくなければなりません。
外側の機能とは、ワードプレスそのものの機能です。
WEBデザイナーは、テーマの作成・機能の追加・テーマのカスタマイズが仕事です。
なので、お客様側から見て利用するということも知っておかなければならないので、まずは記事を投稿することから始めてみてください。
ブログを書いてみる
まずはワードプレスでブログを作成してみる。
テーマは既存のもので、無料テーマを使用する。
一般的な使用方法を、まずは身に着ける。
一般的な使用方法とは、お客様側から見て、管理画面の設定・使用方法。記事の投稿の仕方など。
ブログサイトでオススメの無料テーマはLIQIDとCOCOONです。
※COCOONは管理画面が特殊なので、ある程度、ワードプレスを理解した方向け。
■LIQID
https://lqd.jp/wp/
■COCOON
https://wp-cocoon.com/downloads/
既存テーマのコーポレートサイトを試してみる
いろんなテーマを試して、慣れてきたらコーポレートサイトを試してみてください。
手始めとしては、下記のLightningが無料でオススメです。
カスタマイズしなくても、管理画面でコーポレートサイトは作成可能です！
ただし、とてもシンプルで見栄えがよくないので、カスタマイズが必要です。
■Lightning
https://lightning.nagoya/ja/
テーマには親テーマと子テーマがあります。
親テーマは、テーマ制作者側の都合で常にアップデートされます。
WordPress自体を提供している会社も常に本体のアップデートをするので、テーマ自体もアップデートする必要があるのです。
そこで親テーマを個人的に修正などしても、テーマの更新があった場合は、その作業は上書きされてしまいます。よってこのテーマの更新しても影響がない、子テーマが必要になってきます。
カスタマイズするときは、子テーマに記述を行うこと！
簡単なカスタマイズはCSSの知識だけで可能です！
オリジナルテーマを作成する
ここは、Udemyで講座を取ったほうがよいと思います。
本もいくつかありますが、動画の方が理解しやすいかもしれません。
もし本を買う場合は、内容の新しいものにしてください。
ワードプレスは常にアップデートされているので、古いものを買ったところですでに情報が古い場合があります。
■たにぐちまことさんの『WordPressマスター開発』
https://www.udemy.com/course/wordpress_master/
⑤未経験でWEB制作会社へアルバイトとして入る
独学で一通りホームページを作成できる！レベルまで行けば、フリーでもなんでもお金は稼げるのではないか？と思われそうですが、他にも学ばなければならないことは沢山あります。
自分のやりかたは合っていたのか？一般的には通用するのか？
など、やはり不安な面もあると思うので、WEB制作会社に入社されることをオススメします！
独学で勉強はできますが、HTMLやCSSができるだけではお客様にホームページを作成して商売ができるわけではありません。
アルバイトであれば、未経験で入社できる可能性は大いにあります！
WEB業界では年齢はあまり関係なく、履歴書と職務経歴書とポートフォリオを提出する必要があるので、ポートフォリオである程度の業務はこなせますよ！というアピールさえできれば受かると思います！
Web業界は学んだからここで終わり…というワケではなく。どんどん新しくいろんなことが変わります！新しい情報を取り入れて、これからもコツコツ努力できる人材が重宝されると思っています。
独学でここまでできるよ！根性あるよ！というアピールで頑張ってください！
アルバイトで入社するとひとまずは、既存のサイトの部分的なコーディング修正作業から入ると思います。またはバナー作成など。
コーディングはすでに綺麗に打たれている状態ですし、プロのデザイナーさんのデザインを毎日目にすることができます。
そこでデザインを学ぶもよし、コーディングの質を高めるもよし！
第一歩としては一般的な知識を働きながら身に着けましょう！
まずは一般的な知識を身に着けることから始める。
デザインソフトやコーディングを当たり前に使用できる、時間内に作業ができるレベルにまでもっていく！
自主的にも勉強する姿勢を忘れず、どんどん新しい技術をみにつけること！
初心者がチェックすべきサイトは？
コリス
技術的なことからデザイン的なことまでWEB業界全般的な情報収集が可能。
おしゃれなフォント情報もあります。
Webクリエイターボックス
上記でも案内したサイト。
初心者でもわかりやすい内容が多い。
オススメな勉強本などの情報なども。
デザインの本でどれを買おうか悩んでいるときにも参考になります。
■Webクリエイターボックス
https://www.webcreatorbox.com/
忍者CODE
主にコーディングの勉強ができるサイト。
有料講座もあるが、無料講座で基本的なことが学習できるようになっている。
サイトデザインもサイトのコンセプトも斬新すぎて勉強になります。
■忍者CODE
https://ninjacode.work/
WEBデザイン研究所
忙しいときはインスタもおすすめ！
さらっとインスタだけでも勉強になります。
デザインとは？を追及しているサイトです。
■WEBデザイン研究所
https://desaken.com/
HPコード
初心者から上級者まで幅広い記事があります。
わからないことでググっていたら、だいたい上位にいつも上がってきます。
とてもお世話になっています。
■HPコード
https://haniwaman.com/