Webデザイナーにコーディングスキルは必要？

結論➡️ HTML・CSSとレスポンシブの理解は必須！

いきなり身もふたもありませんが、コーディングの基本的な知識は必要です！

デザインをきちんと表現するため・制作現場でのムダを省くため・今後業界で生き残っていくためにも、Webデザイナーもコーディングの基本的な知識を理解しておくことが必要なんです。

ただし！最初からものすごく広く深く学ぶ必要はありません。

デザイナーとコーディングをする人で完全分業で制作をしている会社もありますし、まずはデザインをしっかりと身につけることが大前提だからです。

では、Webデザイナーにコーディングの知識が必要だという理由と、まずはどこまでのレベルのスキルを身につけるべきなのかという考えをご紹介していきますね。

そもそもコーディングとは

作ったデザインを元に、HTMLやcssを使ってブラウザで見える形にすることをコーディングといいます。

そしてこのコーディング、と呼ばれるのがどこまでの範囲なのか。

実はきちんと定義されているわけではなく、職場によって捉え方が違い曖昧になっています。

「プログラミング」と混同されることも多く、実は線引きがよくわかっていない人も多いのではないでしょうか。

当記事では「コーディング」の定義を以下の内容としています。

1.基本的なHTMLやCSSを書いてサイト構築ができる

2.レスポンシブWebデザインとして構築できる

3.簡単なjsの理解がある

ひとまずこの1〜3が、自分がデザインしたものをサイトとして構築できる最低限必要なコーディングレベルと考えています。

職場によってはjsも自分で書けるレベルまで必須であったり、PHPやフレームワークが実務で必要とされることもあります。

どこまでをコーディングを呼ぶべきかという議論は、正直ケースバイケースすぎてあまり意味がないと思いますので、ここでは省かせていただきますね。

Webデザイナーがコーディングを身につけた方がいい4つの理由

では、なぜWebデザイナーがコーディングを理解するべきなのか。その理由を4つご紹介したいと思います。

1.実際の端末でのレスポンシブ表示を想定してデザインができる

スマホ・タブレット・PCなど、ウェブサイトは本当にいろいろな端末で閲覧されます。

ディスプレイサイズによってレイアウトを変更するレスポンシブで構築することで、どの端末で見てもきちんと情報を伝えられるサイトになります。

もしWebデザイナーがコーディングを全くわからずにデザインを作るとどうなると思いますか？

答えは、実現できない(実現しづらい)デザインになってしまうんです。

その結果、いざコーディングしてみるとせっかくのデザインのよさが死んでしまうケースが発生します。

Webデザインはコーディングをしてブラウザ上で表現するというものである以上、デザインのルールや制約があります。

スマホやパソコンなどで実際にどう見えるのかをイメージして「レスポンシブに向いているデザイン」を作るためには、やはりコーディングの知識は必要になってきます。

「これはこうやって組むんだろうな」という具体的なイメージができれば、実現可能で中身が伝わるデザインを作ることができます。

2.コーダーとの連携がスムーズになる

デザインとコーディングを分業で行っている場合、デザイナーにとってコーディングする人との相互理解がとっっても大切です。

コーディングを全く理解していないデザイナーの作ったデザインは、コーディングをする人間からすれば「確認や修正をしなければいけない点が多すぎる」もので、工数が上がって効率も悪くなります。

例えば。

ある要素の背景に配置されている画像を、そのままの縮尺で小さく表示するのか、それとも横幅固定で背景表示するのか。

その場合に他の要素との違和感をどうするのか、など。

デザイナーがその点をイメージしてデザインを制作していれば、カンプに反映させたりコメントを入れたりと、コーダーにもわかりやすいように連携ができます。

工数を押さえて効率よく進めることは、制作全体の中でもとても重要なポイントです。

スムーズな連携のためにも、デザイナーがコーディングを意識しておく必要があります。

3.実際の挙動を想定できるからデザインの幅が広がる

サイトにアニメーションを自分で実装できるデザイナーはまだまだ少ないかもしれません。

それでも、「何が実現可能なのか」を知っているだけでも、デザインの幅がとっても広がります。

例えば、ふわっと右側から要素がフェードインしてくるアニメーション。

これを導入することを想定して、コンテンツがより生きてくるデザインを考えることができます。

ある要素をキラキラと光るエフェクトを入れることを前提にデザインすると、どの端末で見ても美しいエフェクトで世界観を作れます。

デザインをどんな形で表現するか。 それはデザインカンプの上だけではなく、技術上で何が可能で何か不可能なのかという知っていることで世界が広がります。 実際に端末で見たときにどんな表現になるかを想像できれば、ワンランク上のデザインができますね。

4.デザインだけでなく全体を通した仕事にシフト可能になる

緩やかながらも世の中のWeb化が進みつつある今、Webデザイナーという職業に求められる内容は年々変化しています。

デザインカンプだけしか作れないデザイナーはいらない、とふるいにかけられる可能性もあるんです。

何もかも深く理解して使いこなせなくとも、プラスアルファのスキルが多いデザイナーが重宝されていくでしょう。

例えば、コーディングの知識をもっていると他のデザイナーよりも業務上の裁量が大きくなるので、自由度の高い仕事ができたり、収入がUPしたりというメリットもあります。

業界で生き残るためにも、デザインにプラスができる人材に成長していくことが大切です。

そのためにコーディングはWebデザイナーとして押さえておきたい第一歩となります。

初心者がまず学ぶべきレベルはどこまで？

「コーディングが難しいデザインカンプを作ってしまわない程度の基本的な知識」が最低限必要です。

HTMLとCSSはレスポンシブでサイト構築ができるまで

・CSSで可能な表現方法

・html記述順序

・レスポンシブ

このあたりが理解できていれば、自分のデザインを「実機で見てきちんと情報が伝わるサイト」として実装できます。

HTMLもCSSも基本を知っていれば、あとは実務に合わせて調べながら対応していけますので安心してください。

まずはHTMLのルールや構造をしっかりと理解しましょう。

また、これに合わせて

・CSSと画像のどちらで表現するかの判断

・表示スピードへの配慮と可能な軽量化

・実機で見たときに問題ないかの簡単な検証

このあたりを判断して作業できるようになれば、より「実現可能なデザイン」を作れるデザイナーになります。

JavaScript (JS)はゼロからかけなくてもOK

Jsをゼロから自分で書けるレベルは必要ありません。 アニメーションなどで使い勝手のいいjQueryを利用できるところまでいけばOK。

jQueryの読み込みや簡単なルールさえ押さえておけば、自分でも簡単に実装できますし、デザインのときにイメージできるものが広がります。

ドロップダウンメニューやスムーススクロールなど、簡単なjQueryはわりと頻繁に使うので覚えていて損はありません。

フレームワーク系は後回しでOK

コーディングを学んでいくと目にする「フレームワーク」というものがあります。

Ruby on RailsやBootstrapなどなど・・・。 そしてフレームワークではありませんが、cssを効率よく記述するSass。

これらはもちろん使いこなせればとても世界の広がるものなのですが、初心者のうちは後回しで問題ありません！

Webデザイナーとして活躍していく中で、必要に応じて学んでいけばいいと思います。

とはいえ、業務上でやるかどうかは環境次第 ここまでデザイナーにとってのコーディングの必要性を並べてきましたが、実際にデザイナーが業務上でコーディングをするのかどうかは環境次第なんです。

完全分業でデザインに専念できる職場で働くことになるかもしれません。 そうなれば、仕事でコードをさわる必要はありませんよね。

一方で、WebデザイナーがHTML・CSSまでを担当して、JSやPHPはエンジニアが実装するという流れの会社もあります。

デザインもコーディングも完璧であれ！なんてことはいいません。 コーディングで実現できないデザインを作ってしまうような、そんなもったいないことをしないために。 自分の活躍する場を増やすために。 Webデザイナーもコーディングの基本的な知識をしっかりと持っていてほしいと思います。

フリーランスは "特に" プラスアルファのスキルが必要

フリーランスの場合、デザインとコーディングで分業するわけにもいきません。(そういった形態を取る人も中にはいますが。) 一般的に、フリーランスは一人でディレクション→デザイン→コーディング→サポートまで一通りできる必要があります。

コーディングだけではなく、JavaScriptやマーケティング、WordPressなどなど身につけたいWebを取り巻く技術は多岐に渡ります。 ドメインやサーバーの作業も、きちんと理解して使えるようにしておく必要があります。

将来的にフリーランスを目指す場合は、コーディングの基本知識だけではなくスキルを広げていくことで「自分のセールスポイント」を増やしていきましょう！

業務でコードを組むことがない人は自分のポートフォリオで実地練習を

もし業務ではコーディングをする機会がない場合、ぜひ自分のポートフォリオサイトでどんどん練習をしていきましょう。

ポートフォリオサイトは自分を表現するのに最適の場所です。

WordPressを構築したり、アニメーションふんだんに取り入れてみたり、クライアントを気にせず自由に試せます。

実務では使えないような最新技術や、試してみたいような技術をどんどん実験してみてください。

実際に試してどんな動きになるのか・表現になるのかを知ることで、今後のデザインに生きてくることがたくさんあります！

完璧な必要はありません！ ぜひ、今日から試してみてください。

まとめ：Webデザイナーとしての可能性を広げるためにはコーディングは必須のスキル

デザイナーはデザインを通して価値を提供するのが仕事です。 その表現する手段の１つとしてコーディングを身につけておきましょう。

IT業界は恐ろしく情報も技術も流れの早い世界です。

おそらく今後「Webデザイナー」という仕事の定義がどんどんと曖昧になっていきます。 この記事でお話しした内容も、すぐに古い内容となっていくでしょう。

マーケティングに強いデザイナー、ディレクションが得意なデザイナー、プログラミングに強いデザイナーなどなど。 デザインにプラスアルファができる何かを持っていることで、数多くいるデザイナーの中での差別化ができ、自分の活躍の場を増やす手段となります。

「わたしはこれが得意なデザイナーです！」と自分をプレゼンできるぐらいに、変化し成長し続けるデザイナーであることが将来につなげることができると思います。

そのためにも、まずは第一歩。 コーディングの基本を身につけて、その先にも目を向けていきましょうね！