本記事では、このような疑問にお答えしていきます。
結論からお伝えすると、WEBデザイナーになるためにプログラミングのスキルは必須ではありませんが、知識があるに越したことはありません。
こちらの記事を書いている私は今でこそプログラミングスクールやWEBデザイナー養成スクールでプログラミングを教えていますが、WEBデザインの仕事を始めた頃はコーディングができませんでした。
ただ、コーディングができないことで自分が作ったデザインがコードを書いて実現できるのかがわからず、コーダーの方に何度か迷惑をかけてしまいました。
本記事では、WEBデザイナーにプログラミングスキルは必要な理由と、独学でWEBデザイナーがプログラミングやコーディングを学ぶための学習ロードマップについてお伝えしたいと思います。
Contents
WEBデザイナーにプログラミングスキルは必要か
冒頭で、WEBデザイナーにプログラミングスキルは必須ではないがわかるに越したことはないとお伝えしました。
なぜわかった方が良いかというと、以下の理由が挙げられます。
- 作ったデザインが再現できるかがわからない
- ディレクターやお客様の話がわからない
これから上記の理由について詳しく解説していきますが、ここで気をつけたいのがプログラミング言語とマークアップ言語は異なるという事です。
マークアップ言語とは、サイトの骨組みとなるHTMLやサイトに装飾をつけるCSSが挙げられます。
つまり、HTMLとCSSはプログラミング言語ではありません。
一方、WEBサイトに動きをつけるJQueryやJavascriptはプログラミング言語です。
マークアップ言語はプログラミング言語と別であることに注意して、続きをお読み下さい。
理由1：作ったデザインが再現できるかがわからない
プログラミングの知識がなくてデザインを作っていると、「このデザインってコーディングで再現できるの？」、「画像で作った方が良いのかな？」と思うことがあると思います。
このような悩みは、HTMLやCSSの知識があれば解決します。
また、動きのあるデザインを作っている場合は、JqueryやJavascriptでどんな事ができるのかわかっていると、どんなアニメーションなら実装できるかがわかります。
理由：2ディレクターやお客様の話がわからない
プログラミング知識がない内はよくある事です。
私もディレクターが言っている言葉がよくわからなくて、噛み砕いて説明してもらった事がありました。
プログラミングに関する知識をつけていくと、周りの話についていけないということは少なくなります。
WEBデザイナーがコーディングもできると強い
コーディングまでできると、就職活動や転職活動では重宝されます。
どちらもできる方って、多くないのかもしれませんね。
コーディングはもちろんですが、ディレクションからサーバーへのアップロードまでできるようになれば一人でWEB制作ができることになるので、フリーランスにも転身しやすくなります。
WEBデザイナーがコーディングとプログラミングを学習する手順
正直独学だと挫折しそうになることもありますが、独学でもコーディングやプログラミングを学ぶことは可能です。
それでは、手順について紹介していきます。
手順1：テキストエディタについて学んで環境を整える
Udemyの動画を見て、マークアップ言語やプログラミング言語を書くVScodeというテキストエディタについて学びます。
VScodeは利用者数が多く、わからない事があっても調べると大抵のことは解決するのでぜひVScodeで学習を進めてみてください。
たにぐちまことさんのVisual Studio Code活用講座ではVScodeをより使いやすくする為の設定について解説されているので、初めに動画を見ながら初期設定を行いましょう。
Udemyは度々セールをやっていいて、安い時だと1500円くらいで購入する事ができます。
セール時に買うのがおすすめですよ！
HTMLとCSSを学ぶ
VScodeの設定が終わったら、Progateという学習サイトで基礎を学びましょう。
まずは HTMLとCSSの基礎編〜道場コースだけで大丈夫です。
まだ、JqueryやJavascriptに挑戦する必要はありません。
また、テックアカデミーでは無料で1週間プログラミングの基礎を学べる体験学習を行う事ができます。
私もコーディングの勉強中に参加してみましたが、メンターの方からアドバイスまでもらえて今後の勉強が進めやすくなったのを覚えています。
無料なのでとりあえず試してみるのが良いかなと思います。
ディベロッパーツールの使い方を学ぶ
コーディングする時に必ず使うのがGoogleChromeのディベロッパーツールです。
ディベロッパーツールはレスポンシブデザインを作る時に必須となるので、必ず学習しておきましょう。
しまぶーさんのYoutube動画で詳しく解説されているので、動画一本で理解できると思います。
Google Chromeデベロッパーツールとは？使い方や簡易的な解析テクニックについてご紹介します！
模写をする
実際のサイトのデザインを見て、模写をやってみましょう。
code-stepとクリスタというサイトが無料でデザインカンプを配布しているのでおすすめです。
jQueryを学ぶ
ここからやっとプログラミング言語を学んでいきます。
プログラマーになる転身する人以外は、プログラミング言語はがっつり学ぶ必要はありません。
Progateの基礎編を1周して基礎理解をしておきましょう。
また、動くウェブデザインアイデア帳というサイトでよく使われる動きを確認できるので、こちらも併せて確認しておきましょう。
動くWEBデザインアイディア帳は本も出版されています。
500ページ程ありますが、実際のコードも載っているので実務でコードを書く時に役立ちます。
PHPを学ぶ
PHPもJqueryと同様にしっかり学ぶ必要はありません。
なんとなく、こんな事ができるんだくらいの理解でOKです。
ここもお決まりのProgateでどういった言語なのかを学んでおきましょう。
まとめ
今回はWEBデザイナーにプログラミングスキルは必要なのかという点と、WEBデザイナーがプログラミング言語を学ぶ手順について紹介しました。
この手順は、私がデザインしか行っていなかった頃にプログラミングを学んだロードマップで、最後まで行えばプログラミングの基礎は理解できてくると思います。
ぜひ参考にしていただけますと幸いです。
