webデザイナーを目指す人が最低限必要なプログラミング言語と学習法

悩んでいる人

・そもそもwebデザイナーはプログラミング言語を学ぶべきなの？
・もし学ぶべきならwebデザイナーに必要な言語って何？
・プログラミング言語は独学でも習得できる？

こんな疑問にお答えいたします。

これからwebデザイナーになろうと思っている方は、「どうやらwebデザイナーでもプログラミング言語が必要らしい」というのをどこかで耳にして、この記事をみてくださっていると思います。
本記事では、未経験から独学でwebデザイナーになった著者が、web業界会社を3社経験した上で以下について説明をいたします。

ではひとつずつ解説していきます。

webデザイナーはプログラミング言語を学習するべき？

これについては「ケースバイケース」としか言えません。具体的にいうと、あなたが次のタイプのいずれかでプログラミング言語を学ぶべきかが変わります。

webデザイナーを目指している人

とにかくwebデザイナーになるために最低限のスキルを身に付けたいという方は、プログラミング言語は不要です。
一方で、webデザイナーとして採用される確率をできるだけあげたい、給料のいいところに就職したいと考えている方はプログラミング言語を学ぶ必要があるでしょう。

現在webデザイナーの人

現状に特に不満もなく、同じ場所で同じ給料で問題ない人はプログラミング言語は不要です。
一方で、技術職としてキャリアアップしたい、副業で稼ぎたい、フリーランスとして独立しなら必須になってきます。

つまり、webデザイン単体のスキルではキャリアアップや高収入、フリーランスとして活躍するには難しいから、プログラミング言語を学べ！という、意識の高い系の人のおせっかいというわけです。

そもそもなぜ「webデザイナーはプログラミング言語を学習するべきか」という議論が生まれるのかというと、これからのweb業界の動きとして以下のようなことが起きているからです。

• webデザイナーの供給が増えてきている（未経験でもなれる＝参入障壁が低い）
• 世の中のwebサイトのクオリティが全体的に上がってきている
• webデザインに加え、別の付加価値を持つ人が増えてきている

このような状況下の中で、「webデザイナーはプログラミング言語を学習するべき！」と語る人々の意見だけを聞くと、独学でwebデザイナーを目指そうと考えている人にとっては、

「やっぱり言語覚えなきゃだめか...」

と意気消沈してしまいそうですが、怯える必要は全くです。

上記のケースバイケースのように、プログラミング言語を扱えなくても、webデザイナーとして就職はまだ可能です。
実際に私が一昨年未経験からwebデザイナーに就職できた時も、ポートフォリオは紙だけでも大丈夫でした。

悩んでいる人

でも、実際コーディングできるwebデザイナーの方が多いんじゃないの？

ゆーし

そんなことはないですよ。コーディングができないwebデザイナーの方もたくさんいます。
僕はweb業界を3社経験しましたが、一緒に働いたwebデザイナーさんたちの半数以上はコーディングできない人でした。現在働いている会社でも、コーディングができないデザイナーさんはいます。

そんなこと言っても不安は不安。webデザイナーとして採用されるためにできる限りのことはしておきたい！と思っている方に向けて、webデザイナーを目指す人に最低限必要なプログラミング言語を紹介していこうと思います。

webデザイナーを目指す人に必要なプログラミング言語

では、世の中のコーディングができるwebデザイナーたちは、どんなプログラミング言語を扱っているのでしょうか。
実際に現場にいたwebデザイナー兼コーダーの方が使っていた言語を以下にまとめてみました。

悩んでいる人

うわあ、聴き慣れない言語もいっぱいある...
ゆーしさんはプログランミング言語は扱えるんですか？

ゆーし

未経験時代はまったくさわれなかったけど、webデザイナーになって「ejs」以外はだいたい扱えるようになりました。

もしあなたが今後市場価値の高いwebデザイナーになりたいと思っているのなら、ここら辺のスキルは最終的に身につける必要があります。

ですが安心してください。
これからwebデザイナーを目指す人が、ここまでできれば「未経験としては優秀だ」と思わせることができる、就職に有利な言語は以下だけです。

一つ一つ解説していきます。

HTML

webサイトにテキストや画像を表示させるための言語です。

詳しくはプログラミング言語ではなくマークアップ言語といいますが、気にしないで大丈夫です。
実際にどんなものかと言うと、今この画面を右クリックし「検証」という項目をクリックしてみてください。すると以下のようなスクリーンが表示されますね？

ざっくり言うと、この左側の英語だらけのコードがHTMLです。よく見ると、ブログの記事内容が、スクリーンのソースコードの中にもあるのがわかるでしょうか。

今あなたがみている文字も、HTMLを使って表示させているのです。

CSS

CSSとは、スタイルシート言語ともいわれる言語で（これも別に覚えなくてもいいです）、webサイトの装飾をする言語です。

悩んでいる人

今表示されている文字も十分綺麗だけど...

ゆーし

あなたがみているサイトはすでにCSSが適応されているからですよ。
このブログのCSSを実際に除いてみるとこんな感じです。

みてわかるように、HTMLはただテキストや画像を表示するだけで、CSSはこれらの見た目をカッコよくしてくれてるのがわかりますね。

JavaScript（jquery）

JavaScriptは、webサイトに動きをつける言語です。

画像が自動で切り替わったり、スマホのメニュー（三本線）をクリックするとメニューのリストが出てきたりなど、最近のwebサイトではよく見かけますね。

JavaScriptという言語はつきつめるとプロでもなかなか難しいです。ですので、webデザイナーが最低身につけるべきは、jqueryという、JavaScriptを簡単に書けるようにしたものでOKです。
jqueryも言語はJavaScriptですが、かなり少ないコードで簡単にJavaScriptと同じ表現ができるのでとても便利です。

ゆーし

例えて言うなら、JavaScriptが「三国志の原文」なら、jqueryは「漫画でわかる三国志」みたいな感じです。

web制作者のプロの中には、「漫画でよんだだけで三国志をわかった気になるなよ」みたいな感じでjqueryを馬鹿にする人もいます。

確かに、より複雑な実装をする場合はjqueryでは限界がありますが、独学の段階では、初歩的なスキルさえ習得できれば問題ないので、全く気にしなくてもいいです。

悩んでいる人

HTML、CSSだけでいいという人もいるよ？

一昔前まではそうでしたが、現在のwebサイトはかなりレベルアップしています。

上記の理由で、JavaScriptはHTML、CSSと同じくらいwebサイトにはマストの言語となってきています。

これからwebデザイナーになる人でも、採用基準を高めたい、副業をしたいと言う方は、JavaScriptはほぼ必須で習得すべきであると思った方がいいでしょう。

なぜ、HTML、CSS、JavaScript（jquery）だけでいいのか

悩んでいる人

さっきのコーディングができるwebデザイナーたちが扱っている言語は必要ないの？

先ほどちらっと見せた、世の中のコーディングができるwebデザイナーが扱っている言語について、それぞれ何のために必要なのかを説明するとこんな感じです。

つまり、コーディングができるwebデザイナーは多くの言語を使っているように見えますが、根本的な言語としては、HTML、CSS、JavaScriptだけなんです。この3つの言語は別の言語で代替できません。それだけです。

悩んでいる人

phpは全く違う言語なんじゃないの？

確かに、php（WordPress）を使うことで圧倒的に効率よくウェブサイトを構築できます。

しかしphpもまた、HTML、CSS、javascriptをいかに効率よく、自動的にブラウザに表示させるかの言語なので、極論を言えば、これら3つの言語でも代替は可能です。（作業量的に不可能ですが...）
独学のうちは学習する必要はないでしょう。

独学でもプログラミング言語は習得できる？

悩んでいる人

最低限とはいっても、3つ覚えるなんて大変そう...独学で習得できるの？

独学でもプログランミング言語の習得は可能です。
先ほどはハードルの高くなることをいってしまいましたが、これだけレベルの高いwebサイトが広まっているということは、プログラミングのスキルを習得する手段も容易になってきているということです。

無料の学習サイト、初学社向けの参考書、プログランミングスクールなどなど、今となってはプログラミング言語を学ぶ環境はたくさんあります。

ただ、学習手段の選択肢が多すぎて、なにが一番最適なのかがわからない方もいるとおもうので、webデザイナーを目指す方向けに「独学でプログラミング言語を習得するための最短ルート」を紹介していきたいと思います。

プログラミング言語を学ぶために準備するものは？

まずは、プログラミング言語を学ぶために必要なものを準備しましょう。
必要なものはPC（当たり前）と、コーディングソフトのみです。

悩んでいる人

・プログラミング言語を学ぶ際のPCスペックは？
・コーディングソフトは何を使うべき？

プログラミング言語を学ぶ際のPCスペックについてですが、プログラミング言語の習得にPCのスペックはほぼ考えなくていいです。
なぜなら、Webデザインのように、重いソフトを使うこともなければ、デザインチェックのためにスクリーンサイズの大きいPCを買う必要がないからです。

おそらくwebデザイナーを目指している方は、webデザインに必要なPCスペックを備えたPCをどのみち購入する必要があると思うので、プログラミング言語の習得のために特段スペックをあげる必要はないです。

コーディングソフト（エディタ）については、僕のオススメはVSCODE一択です。

URL：https://azure.microsoft.com/ja-jp/products/visual-studio-code/

先ほどのPCスペックにも関わりますが、他のエディタと比べてかなり動作が軽いです。かといって、機能が優れいていないわけでは全然ないので非の打ちどころのない最高のエディタです。

webデザイナーが現場でよく使うエディタについては、こちらにまとめていますのでぜひご覧ください。

webデザイナーが独学で最低限のプログラミング言語を習得する方法

ではここから具体的な学習法について解説していきます。

最初に言っておきたいのが、HTML、CSS、JavaScript（jquery）はかなり基本的な言語なので、多額の費用をかけてスクールで学ぶ必要はありません。

できるだけお金をかけずに、効率よく3つの言語を習得できる方法をこれからお伝えします。
それでは学習する言語の手順からみていきましょう。

習得するプログラミング言語の順番

HTML、CSSは同時に学習しても大丈夫ですが、JavaScript（jquery）はHTML、CSSをある程度理解した上で学習を始めましょう。
JavaScript（jquery）はHTMLやCSSを操作する役割も持っているので、これら2つの言語が曖昧なままでいると、つまずきやすくなり、挫折の原因となります。

プログラミング言語を習得するステップ

まずはHTML、CSSをこの手順で身につけていきましょう。そしてある程度理解できたら、次はJavaScript（jquery）で1~3の手順で学習してください。

それではひとつずつ手順を見ていきます。

手順その1：目標を決める

何を作るか目標を決めましょう。

独学の一番の落とし穴は、何を作るかも決めないまま参考書や学習サイトをあさった挙句、中途半端に知識だけをみにつけてなにも手元に残らないことです。
具体的に何を作るか目標を立て、それ作りながら必要な知識を身につけていくのが、独学の一番の近道です。

悩んでいる人

目標と言われても、何を作ればいいかわからないよ

アウトプットの仕方は色々あります。

webデザイナーを目指す人の一番いい目標は、ご自身で制作した架空サイトやポートフォリオのデザインを自分でコーディングしてみることです。そのまま実績として就職に使えるので、モチベーションにもなるのではないでしょうか。

自分のデザインがコーディングするには難しそうだと感じるのであれば、自分でも作れそうだと思えるwebサイトを見つけるか、コーディング教材を購入するのがよいでしょう。

自分のレベルにあったwebサイトを見つけるのはやや難しいところもあるので、多少お金はかかりますが、コーディング教材の完成品をまずは目標にしてもいいかもしれませんね。
参考にコーディング教材で有名なnoteを紹介しておきます。

ちづみさん

くりのすけさん

どちらもTwitterでは有名な方なので、信用してみるのもいいのではないでしょうか。

手順その2：本や学習サイトでwebサイトの仕組みを理解する

目標を立てたら、早速作ってみましょう。

と、その前に。
コーディングはつくりながら覚える、とはいったものの、まったくの0知識でつくるとコピペ作業になってなにも身につきません。
ですので、最初は参考書や学習サイトを見てプログラミングの基礎を勉強しましょう。

学習する上で大切なのは、コードの正しい書き方というよりは、

「どういう仕組みでwebサイトが表示されているのか」

をしっかり理解することです。

コードが思ったように表示されず挫折してしまう原因は、ソースコードの書き方の問題もありますが、そもそもファイルを読み込んでなかったとか、読み込む順番が間違ってた、などがよくあります。

自分でファイルを作って、ブラウザはどんなルートをたどってフォルダやファイルをよみこんでいるのか、どういう書き方が優先的に読み込まれるのかなどをちゃんと理解しておくと、実際に作っていく際に挫折しにくいです。

上記のようなwebサイトの仕組みも含め、プログラミング言語の基礎知識がわかるオススメの参考書と学習サイトを紹介しておきます。

いちばんやさしいHTML＆CSSの教本

ドットインストール

URL：https://dotinstall.com/

参考書と学習サイトどちらがいいかと言えば、耳で覚えるか目で覚えるかの違いなので、自分が覚えやすい方で大丈夫です。

個人的には、参考書の方が、出版社を通してプロが書いたものなので、わかりやすく、細かい基礎知識も学べるのでおすすめです。お金払って読む価値がここにあるってわけですね。

悩んでいる人

よく聞くprogateっていう学習サイトは？

progateはかなり有名ですね。

実際にコードを書きながら学べるので、さくさくと楽しみながらできるメリットがあります。挫折のしにくさで言えば、他の学習サイトよりダントツでTOPですね。

ただ、progateの落とし穴は、自分でファイルを作ったり、データをアップロードしてブラウザで確認する、という大事な作業を端折っているところです。
つまり、プログラミング言語を学習する上で大切な「どういう仕組みでwebサイトが表示されているのか」を学べないんですね。

学習サイト上で挫折しないことを考えすぎて、progeteなしで自分で何かを作るとなった時に、何もなにから始まればいいのかわからないとなってしまうのです。

その点、ドットインストールは、ファイルを作成してアップロードするところまで動画でみて学習することができるので、視覚的にwebサイトの仕組みを理解しやすいです。

手順その3：作りながらわからないところをネットで調べる

参考書を読んで、webサイトがどのような仕組みで公開されているかが理解できたら、今度こそ実際に目標の制作物に向けて手を動かしていきましょう。
はやくwebサイトをつくりたくてうずうずしているところではないでしょうか。

もちろん、初心者向けの本を読んだだけではわからないことは出てくると思います。
ただ、webサイトやコードの仕組みは理解しているのであなたが調べる必要があるのは以下のことだけです。

• HTML、CSS、jqueryの表現のバラエティ
• うまく表示されない時の対処法

「こんな表現ができるCSSないかな〜」
「このタグの中にこのタグ入れていいのかな？」
「この記述をしたらうまく表示されなくなっちゃったよ〜」

とか、作るものがはっきりしていると、必要な知識が明確になり、それを解決するための調べ方も簡単になるのがわかると思います。
最初のうちはわからないことだらけが当たり前です。検索すればするほど力が身につくと思ってつくっていきましょう。

調べてもわからない場合は、yahoo知恵袋のプログラミング版みたいな質問投稿サイトがあるので、利用してみてください。

teratail

URL：https://teratail.com/

僕も何度か使わせていただきましたが、返答率は100%でかなり助けられました。

まとめ

いかがでしたでしょうか。
最後に、本記事の要約をまとめましたので、チェックしてみてくださいね。

ご覧いただきありがとうございました。
これからwebデザイナーを目指す人が、すこしでもやる気をもてるようになったら幸いです。