デザイン

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

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

デザイナーになりたい、webデザイン気になる!と思うけど、

コーディングが難しそう…出来る気がしない…と不安に思ったりしますよね。

デザイン初心者さん
デザイン初心者さん
コーディングも出来ないとwebデザイナーになれないの?
現役webデザイナー
現役webデザイナー
結論から言うと、まったく出来ないのは微妙だけど、基本さえわかってれば大丈夫!! 

 

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

ただし、最低限のレベルは出来た方がいいです!!

 

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

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

・ただし、デザイナーも最低限のコーディングスキルは身につけるべき理由

最低限のコーディングスキルを身につける方法

 

コーディングとは

コーディング

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

webサイトを作る上で最低限必要な言語である

・HTML…見た目の骨組みを書くための言語

・CSS…見た目のスタイルを整えるための言語

・JavaScript…動的な処理を実行するためのプログラミング言語

のことを指します。

 

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

コーディングがまったく出来なくても、デザインスキルさえあれば、

webデザイナーになることは難しくありません。

 

pタグ?なにそれ?みたいなレベルでも、

webデザイナーとして採用された私がなによりの証拠です…!

 

webデザイナーを目指すのに、どうしてコーディングが出来なくても大丈夫なの?

 

デザインに一点集中した方が速くスキルが身につきやすい

デザインって正解がない分、どこまでやればいいのか分からなくなりますよね。

一方でコーディングは、「出来た!」というのが分かりやすいので、

初学者の方にとっては、コーディングの方が成長している実感があって楽しいかもしれません。

 

ただ、デザインもコーディングも両方手をつけてしまうと、

「どっちもある程度できるけど、どっちも微妙な中途半端なwebデザイナー」になってしまいます。

 

一方で、たとえコーディングがまったく出来なくても、

デザインに一点突破している人は貴重な人材になることができます。

 

もちろん、デザインもコーディングも両方できる人材は当然重宝されますが、

デザイン・コーディングともに一人前になるには、一朝一夕では無理です。

最短でも5年などの長いスパンで目指していくキャリアになりそうです。

 

コーダーよりデザイナーの方が、転職市場では有利

タイトルだと語弊があるので補足すると、

ここでいうコーダーとは、HTML・CSSと簡単なJavaScriptだけを実装する人のことです。

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

 

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

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

また、bootstrapなどのフレームワークの活用で、一からすべてをコーディングする機会は減ってきています。

 

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

もちろん、簡単にデザインを作成できるサービスも増えてきていますが、

オリジナルのデザインや、クオリティの高いデザインを作成するためには、

まだまだデザイナーのスキルが欠かせません。

 

そのため、webデザイナーとして転職を目指す場合、

「どっちも中途半端に出来る人」よりも、

「一方はまったく出来なくても、もう一方のクオリティが高い人」の方が採用されやすいです。

 

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

フロントエンドエンジニア

これは業界あるあるなのですが、

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

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

 

デザインがまだまだの人にデザインを教えるのって、結構大変だし時間がかかります。

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

 

であれば、コーディングがある程度できる人なら、コーディングをやらせておきたい、

というのが企業の本音です。

 

少しでもコーディングが出来ます、やります、と言ってしまうと、

デザインまったくやる機会なかった…なんてこともありえるので、要注意です!笑

 

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

 

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

コーディングは、デザインさえ決まっていれば、

誰が作業しても基本的には同じように作ることができます。

(もちろん、ちゃんとスキルのある方にお願いした場合ですが)

海外の方にお願いすることも可能です。

 

一方デザインは、まったく同じデザインが出来上がることはありえません。

デザインを外注するのって、けっこう冒険だったりします…。

 

信頼できる、レベルの高いデザイナーの知り合いがいたらいいですが、

そうでない場合、デザインが完成するまでどうなるか分からないのってハラハラしますよね…。

 

また、デザインの方がより上流工程に近いので、

出来るだけ外注せずに社内で制作したい、と考える企業も多いです。

 

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

これまで、コーディングが出来なくても大丈夫!という話をしてきましたが、

まったく何もわからない!という状態で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デザイナー始めたばかりの頃は、コーディング知識ゼロでした!

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

 

デザインスキルを最短最速で高めるためのポイントはこちらの記事で解説していますので、参考にしてみてください!

ブログランキングを見る

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

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