よくある質問・相談

コーディングができなくてもwebデザイナーになれる?デザイナーに必要な最低限のコーディングスキルを身につける方法

コーディングができなくてもwebデザイナーになれる?デザイナーに必要な最低限のコーディングスキルを身につける方法
記事内に商品プロモーションを含む場合があります
コーディングも出来ないとwebデザイナーになれないの?
なれます!基本さえ分かってれば、なんとかなる!

 

私自身がそうであるように、コーディングが出来なくても、webデザイナーにはなれます。

むしろ、コーディング以外のデザイン分野ができる人材はとても不足しているので、デザインに特化するのは大いにアリ◎

ただし、最低限の知識は身につける必要があります!

 

この記事では、次の3つのポイントをご紹介していきます。

  • デザイナーを目指すならコーディングは出来なくても大丈夫な理由
  • ただし、デザイナーも最低限のコーディングスキルは身につけるべき理由
  • 最低限のコーディングスキルを身につける方法

 

デザインとコーディングそれぞれの仕事内容などはこちらの記事で解説しています。

webデザイナーとは?仕事内容や将来性、働き方や副業の事例も紹介します
webデザイナーとは?仕事内容や将来性、働き方や副業の事例も紹介しますwebデザイナーとは、 webサイト(ホームページ)…企業のコーポレートサイト・採用サイト・ブログなどのメディアサイト・イ...

 

この記事でのコーディングとは

コーディング

この記事で言うコーディングとは、webサイトを作る上で最低限必要な言語である

  • HTML…見た目の骨組みを書くための言語
  • CSS…見た目のスタイルを整えるための言語
  • JavaScript…動的な処理を実行するためのプログラミング言語

を使って、webサイトを組み立てていく作業のことを言います。

 

デザイナーを目指すなら、コーディングは出来なくても大丈夫な理由

コーディングがまったく出来なくても、デザインスキルさえあれば、webデザイナーになることは難しくありません。

pタグ?なにそれ?みたいなレベルでも、webデザイナーとして採用された私がなによりの証拠です…!

 

デザインスキルを最速で身につけられる

デザインとコーディングは学び方も仕事内容もまったく違うので、どちらも身につけるためには単純計算で2倍の時間がかかります。

まずはデザインに特化することで、スキルが身につくスピードは格段に速くなります。

 

1人でデザイン・コーディング両方できるのはとても強みになりますが、いきなりそこを目指す必要はありません。

後からコーディングを勉強する、でも遅くないですよ。

 

もちろん、私自身がそうであるように、コーディングをほとんど学習しないまま、ずっとデザインだけでやっていくことも可能です。

最終的にはどちらか片方に特化する人がほとんどです

 

デザインに一点集中している人の方が採用されやすい

転職するときも、個人でお仕事を受けるときも、採用されやすいのは「どちらか一方はできなくてもいいから、どちらかが一定レベル以上できる人」

どちらもある程度はできるんだけど、どちらも中途半端、な人は、採用される機会はとても少ないです。

 

なぜなら、現場では

  • デザイン
  • コーディング

を分担して、違う人が作業することがほとんどだから。

よっぽど小さな規模でない限り、ほとんど分業制です

 

もちろん、デザイン・コーディング共に高レベルのスキルを持っている人は超貴重人材なので、売れっ子webデザイナーになれることは間違いないです。

ただ、その分、それ相応の覚悟や努力が必要になることは覚えておきましょう。

 

コーダーよりデザイナーの方が需要がある

タイトルだと語弊があるので補足すると、ここでいうコーダーとは、HTML・CSSと簡単なJavaScriptだけを実装する人のことです。

※高度なJavaScriptやPHPなどのスキルもあるフロントエンドエンジニアは含んでいません。

 

HTML・CSSと簡単なJavaScriptだけを利用した基礎的なコーディングは、

などのノーコード(コーディングなし)でサイトを制作できるサービスを使えば、ほとんど必要なくなってしまいます。

 

一方でデザイナーのスキルは、代替できるものがほとんどありません。

もちろん、簡単にデザインを作成できるサービスも増えてきていますが、オリジナルのデザインや、クオリティの高いデザインを作成するためには、まだまだデザイナーのスキルが欠かせません。

 

コーディングしかさせてもらえない可能性がある

これは業界あるあるだと思うのですが、

デザイナーとして採用されたのに、結局コーディングしかやらせてもらえなかった!

なんて話をよく聞きます。

 

デザイン経験が浅い人材にデザインを教えるのは、かなりの時間と労力がかかります。

その教育にコストをかけられる企業は多くないはず。

「コーディングがある程度できる人なら、コーディングをやらせておきたい」というのが企業の本音です。

 

もちろん、そのままコーディングを極めて、デザイナーではなくフロントエンドエンジニアにキャリアアップ、という道もあります。

企業によって様々なので、デザインをやらせてもらえる環境なのか?を確認しながら、就職・転職活動を◎

 

コーディングの方が外注しやすい

コーディングは、デザインさえ決まっていれば、誰が作業しても基本的には同じように作れるし、海外の方にお願いすることも可能です。

(もちろん、スキルによってレベル感の違いは多々あります)

 

一方デザインは、デザイナーが違えばまったく違うデザインになります。

まったく同じ要件でも、デザイナーが違うと全然違うデザインになるから面白い

 

また、デザインの方が上流工程に近いため、クライアントのヒアリングや、要件の理解から入ることが多くなります。

そのため、外注せずに社内のデザイナーに担当してもらう場合が多いのです。

 

デザイナーも最低限のコーディング知識があった方がいい理由

これまで、コーディングができなくても大丈夫!という話をしてきましたが、まったく何もわからない!という状態でwebデザイナーになるのは避けましょう。

コーディングができるようになる必要はないけど、最低限の知識は身に付けておいた方がいい理由を説明します

実装不可能なデザインを作ってしまう可能性がある

webサイトやLPのデザインをする時に、HTML/CSSでどのように表現できるのかをまったく知らないと、そもそも実装不可能なデザインを作ってしまう可能性があります。

 

不可能まではいかなくても、

  • めちゃくちゃ実装工数がかかるデザイン
  • 設計上問題のあるデザイン

を作ってしまうことで、対応工数増加や作り直し、あるいはデザインとは全然違うものが完成する、といった悲しいことが起きてしまいます。

 

コーディングしづらいデザインを作るとコーダーに嫌われる

デザイン力を高めるために、コーディングはやらない

実装不可能まではいかなくても、コーディングを考慮されていないデザインを作ってしまうと、ほぼ間違いなくコーダーさんに嫌われます。笑

 

  • 余白の設定がバラバラだったり
  • 画面サイズが違う場合が考慮されていなかったり
  • hover時のデザインを考えていなかったり

もちろん、よしなにコーディングで調整してくれるコーダーさんもいますが、完成形はコーダーさんのデザインスキルに左右されてしまいます。

 

レスポンシブデザインに対応出来るようにするため

webデザイン

現在のwebデザインで必須になってくるのが、レスポンシブデザインです。

 

レスポンシブデザインとは、あらゆる画面サイズに自動で対応するwebサイトを構築する手法のことを言います。

 

例えばこのブログも、レスポンシブ化がされています。こんな風に、PCとSPでデザインのレイアウトが全然違いますよね。

レスポンシブデザインとは

レスポンシブなwebサイトがどのように実装されているのかをなんとなくでも知っておくと、デザインをする時にも役に立ちます。

 

コーダーとのコミュニケーションがスムーズになる

HTMLとCSSの最低限の知識があれば、コーディングをお願いする際や、あがってきたコーディングを確認後に修正依頼をする際に、スムーズなコミュニケーションを取ることができます。

 

実体験、webデザイナー1年目でコーディング知識ゼロだった頃の私は、

ポンコツwebデザイナー
ポンコツwebデザイナー
フォントサイズを16ptに変更お願いします(正しくは16px) 
ポンコツwebデザイナー
ポンコツwebデザイナー
文字感覚が開いちゃってるので、この部分だけ文字詰めしたいんですけど…(一部だけ文字詰めはめっちゃ面倒)

こんな感じでコーディング知識がある人からしたらはちゃめちゃなコミュニケーションをとってしまっていました。(反省…)

 

デザイナーが身に付けておくべき最低限のコーディングスキルって?

では、「最低限のコーディングスキル」って、どのレベルなんでしょう。

まずはこれだけやっておけば充分、これが出来ればOK、という私なりの基準をご紹介します。

 

progateのHTML&CSSコースを最低1周

まずは、progateというプログラミングをゲーム感覚で学べるサービスの、HTML&CSSコースを最低1周、できれば2〜3周しましょう!

(HTML&CSSは厳密にはプログラミング言語ではありません)

 

途中から有料になりますが、月額たったの980円なので、まずは最後までやってみてください。

 

webサイトやLPを1ページだけでも作ってみる

progateで最低限の知識が身についたら、実際に1ページだけコーディングをやってみるのがおすすめです!

 

progateでわかった気になってたけど、実際やってみたらめっちゃ大変やんけ…!

となる可能性大です。笑

 

自分が好きなサイトを選んで、模写してみるとやりやすいです。

そうすれば、実装方法がわからない〜!となったときも、次にご紹介するディベロッパーツールで、そのサイトから答えを得ることができます。

 

ディベロッパーツールを使えるようになる

ディベロッパーツールとは、GoogleChromeに標準装備されている、webページのコードを確認できるツールです。

ディベロッパーツール

 

これを使えば、コードがどうなっているのか確認できるだけでなく、画面上でコードを書き換えて、表示を試してみる、なんてことも出来ます。

 

ディベロッパーツールについては、詳しく解説されているこちらの記事を参考にしてみてください!

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

 

コミュニケーション能力

自分がデザインしたもののコーディングをお願いするコーダーさんと、密にコミュニケーションを取ることを忘れずに!

 

実装可能性を相談したり、細かい調整をお願いしたり。

ここのコミュニケーションが上手くいかないと、せっかく綺麗にデザインを作っても、完成形がガタガタに…なんてこともありますので…。

 

まとめ

以上、次の3つのポイントをひとつひとつ解説してきました。

  • デザイナーを目指すならコーディングは出来なくても大丈夫
  • ただし、最低限のコーディングスキルは身につけるべき
  • 最低限のコーディングスキルを身につける方法

 

デザインのお仕事やってみたいけど、コーディングは苦手意識が…なんて方も、大丈夫!

まずはデザインに一点集中して、デザインスキルを高めてから、コーディングを軽く触ってみれば大丈夫ですよ。

 

現役webデザイナー
現役webデザイナー
私もwebデザイナー始めたばかりの頃は、コーディング知識ゼロでした!

デザインに一点集中していたおかげで、就職・転職活動では全然苦労せずに済みました〜! 

 

未経験からwebデザイナーになるためのロードマップは、こちらにまとめいています。

【デザイン特化】未経験から確実にwebデザイナーになるための完全ロードマップ!独学でも大丈夫?勉強の仕方は?
【webデザインの始め方】未経験からwebデザイナーになるためのロードマップ未経験から、できるだけ確実にwebデザイナーになるためのステップをまとめました。 それぞれのステップで重要なポイントも丁寧に解説し...
未経験からwebデザイナーになるためのロードマップ

これからwebデザインを学び始める方はもちろん、すでに学習を始めている方にも向けて、再現性高く、未経験から確実に、現場で通用するwebデザイナーになるための方法を紹介しています!

なんちゃってwebデザイナーではなく、市場価値の高い、仕事に困らないデザイナーになるためのロードマップです!

 

ブログランキングを見る

ブログランキングに参加中です。

記事を気に入っていただけたら、猫様をぽちっとしていただけると嬉しいです!