コーディングが苦手だったWebデザイナーが解説（コーディング勉強方法・スキルレベル等）

Webデザイナーに転職・就職したい方の中には、『コーディングが苦手・できない…』という方も多いのではないかと思います。

えりー

私も最初はコーディングが苦手でした…

でも、Webデザイナーもコーディングはできたほうが良いです。

本記事ではその理由の他、

• コーディングとは
• 目指すべきコーディングのスキルレベル
• おすすめのコーディング勉強方法
• コーディングが苦手な方へのアドバイス

について解説しました。

『コーディングってそもそも何なの？』という方も、ぜひご覧ください。

Webデザイナーもコーディングが出来たほうが良い理由

冒頭でもお伝えしたとおり、Webデザイナーもコーディングは出来たほうが良いです。

デザインだけしか出来ないと、転職・就職先が限られてしまうためです。

でも、デザインとコーディングは、どちらかが得意で、どちらかが不得意、という方も多いと思います。

デザインもコーディングも基礎は出来たほうが良いですが、その上で、「得意なほうを伸ばしていく」という考え方も大切です。

デザインを伸ばしていけば、私のようにWebデザイナー兼グラフィックデザイナーとして働ける場合もありますし、コーディングを伸ばしてWebプログラマーになる方もいます。

えりー

私はデザイン寄りのWebデザイナーです。コーディングはそんなに得意ではありません。

Webデザイナーが行うコーディングとは「コードを書くこと」

そもそも、コーディングとは何でしょうか。

コーディングとは、プログラミング言語を使ってソースコードを書くことを指します。

基本的に、プログラミング言語はHTML・CSS・JavaScriptの3種類を使います。

それぞれの役割をかんたんに説明すると・・・

HTMLとは：コンテンツの構造を定義

HTMLは、コンテンツの構造を定義するために使います。

HTMLを使って、『ここは段落』『ここは見出し』など、テキストや画像に意味づけをしていきます。

CSSとは：デザインを整える

CSSは、ページのデザインをするために使います。

文字に色を付けたり、レイアウトを組んだり、見た目の部分はCSSで整えていきます。

JavaScriptとは：動きを付ける

JavaScriptは、ページに動きを付けるために使います。

例えば、スライドショーやクリックすると展開するメニューなどは、JavaScriptを利用して作られています。

Webデザイナーに必要なコーディングのスキルレベル

Webデザイナーに必要なコーディングのスキルレベルは次のとおりです。

まずは、HTMLとCSSを使って、小規模なサイトを丸ごとコーディング出来るレベルを目指しましょう。

JavaScriptは1から書ける必要はなく、既存コードをコピーしてサイトに導入できるくらいのレベルが目標です。

Webデザイナーを目指す方におすすめのコーディング勉強方法

独学が出来る方には、プログラミング学習サイトがおすすめです。

本でも良いのですが、プログラミング学習サイトのほうが手を動かしながら学習しやすく、間違っている箇所も発見しやすいです。

おすすめのプログラミング学習サイトは、以下のとおりです。

えりー

ちなみに私は、最初は本を買って独学で勉強していましたが、就職後にプログラミング学習サイトでも勉強しました。

上記プログラミング学習サイトは無料プランがあるので、まずは無料から試してみるのがおすすめです。

「コーディングができない！苦手！」という方へのアドバイス

『コードを見るとアレルギーが出る…』

『デザインは出来るけど、コーディングはできない…』

という方も多いのではないかと思います。

えりー

私も最初はCSSでつまづきました…

私がコーディングスキルを身につけるためにしていたことは、

1. とにかく手を動かして覚えること
2. ソースコードを印刷して、マーカーで色分けすること
3. 基礎を大切にする

です。

とにかく手を動かして覚えること

当たり前すぎて何の役にも立たないかもしれませんが、コーディングは頭で覚えようとしても難しいので、手に覚えさせるイメージで、とにかく手を動かすことが大切です。

えりー

ノートは取らなくて大丈夫です

ソースコードを印刷して、マーカーで色分けすること

「ノートは取らなくて大丈夫」と書きましたが、ソースコード自体に苦手意識がある方にはソースコードの印刷がおすすめです。

ソースコードを印刷し、同じタグを同じ色のマーカーで塗って分類したり、わからない箇所を調べて、意味を書き込んでいったりします。

ソースコードを画面上で見ているだけでは意味が理解しづらいですが、１個１個紐解いていけば、それほど難しいものではないことがわかってくると思います。

えりー

すごくアナログな方法ですが、つまづいてしまったときにはおすすめです

基礎を大切にする

これも当たり前のことなのですが、「HTMLって何？」「＜ｐ＞タグって何？」というような基礎的なところから、1個1個丁寧に理解していくことが本当に大切です。

何度も反復学習をして、ちゃんと理解できてから次に進みましょう。

今までたくさんの方にコーディングを教えてきましたが、コーディングが苦手な方ほど、基礎を飛ばして応用からやろうとする傾向があるように感じています。

えりー

学校で習ったことがある方など、ある程度知識がある方も、基礎から学び直すのがおすすめです。情報が古かったり、間違って覚えている場合あるためです。

まとめ：Webデザイナーもコーディングは出来たほうが良い

Webデザイナーもコーディングは出来たほうが良いです。

えりー

そのうちコーディングもAIが全部やってくれる時代になるかもしれませんが…

コーディングとは、プログラミング言語を使ってソースコードを書くことです。

Webデザイナーに就職・転職するために、目指すべきコーディングのスキルレベルは以下のとおりです。

独学でコーディングを勉強をする場合は、プログラミング学習サイトがおすすめです。

あまり参考にはならないかもしれませんが、コーディングが苦手だった頃に私が心がけていた勉強方法は以下のとおりです。

えりー

わかるようになってくると、コーディングがどんどん楽しくなっていきました。

とにかく基礎からコツコツ、焦らずに1個ずつ習得していきましょう。

えりー

Web・グラフィックデザイナー / ブロガー

2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！