BLOG

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

Webデザイナーのコーディングスキル・勉強方法
kanri
本記事はこんな方にオススメです
  • 未経験からWebデザイナーに転職・就職したい方
  • Webデザイナー初心者の方

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

えりー
えりー

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

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

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

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

について解説しました。

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

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

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

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

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

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

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

えりー
えりー

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

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

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

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

《コーディングとプログラミングの違い》

  • コーディング:プログラミング言語を使ってソースコードを書くこと
  • プログラミング:プログラムを作成する作業全般
ソースコード
ソースコードのイメージ図

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

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

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

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

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

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

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

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

JavaScriptとは:動きを付ける

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

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

初心者の方におすすめのコーディングソフトは「Adobe Dreamweaver」です。

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

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

コーディングのスキルレベル
  • HTML・CSSを使って1サイトコーディング出来る
  • 既存のJavaScriptのコードを導入できる

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

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

レスポンシブWebデザイン(画面サイズによってレイアウトが変わるデザイン)も習得するのが望ましいです。

CSSとセットで、Sass (SCSS/SASS)を習得すると、コーディングがグッと楽になります。

※Sass (SCSS/SASS)とは:CSSの拡張版。より書きやすく、見やすくしたスタイルシートのこと。

JavaScriptとともに、jQueryも習得しましょう。

jQueryとは:JavaScriptをより容易に記述できるようにするために設計されたもの。


※jQueryも既存コードをコピーしてサイトに導入できるレベルが目標です。

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

出典:https://prog-8.com/

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

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

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

おすすめプログラミング学習サイト
えりー
えりー

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

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

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

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

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

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

えりー
えりー

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

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

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

です。

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

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

えりー
えりー

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

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

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

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

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

えりー
えりー

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

基礎を大切にする

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

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

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

えりー
えりー

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

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

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

えりー
えりー

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

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

プログラミング言語
  • HTML
  • CSS
  • JavaScript

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

コーディングのスキルレベル
  • HTML・CSSを使って1サイトコーディング出来る
  • 既存のJavaScriptのコードを導入できる

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

おすすめプログラミング学習サイト

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

私が心がけていた勉強方法
  1. とにかく手を動かして覚えること
  2. ソースコードを印刷して、マーカーで色分けすること
  3. 基礎を大切にする
えりー
えりー

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

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

ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web制作のことや、就職・転職に役立つ情報を発信しています。
error: Content is protected !!
記事URLをコピーしました