Webデザイナーはコーディングをどこまで学ぶべきなのか

Webサイト制作は、ざくっと分けると「Webデザイン作業」と「Webコーディング作業」に分類されます。

デザインソフトで作ったデザイン画をHTMLファイルの形にすることで、Webサイトは初めてボタンを押せたりリンクを貼れたりするようになるんですね。

この2つの作業に必要なスキルは全く違っています。

そして、

WebデザイナーはHTML/CSSコーディングも学ぶべきなのか。

といった議論が、Web制作者の中で度々話題になります。

一般的なイメージとしては、Webデザイナーというと、前者のWebデザインのみをする業務を思い浮かべる未経験者が多いと思うんです。

しかし、Webデザイン専門スクールのカリキュラムには、WebデザインだけでなくHTML/CSSの学習も入っていることが多いですよね。なかにはデザイン学習よりもHTMLの学習の方に重きを置いているスクールもあります。

でも実際にWebデザイナー志望者の意見を聞くと、

・HTMLはプログラムっぽくて難しいから苦手

・地味。

・覚えることが多すぎる

・HTMLを勉強する時間があったらデザインだけやっていたい

という声も聞かれます。

本当にWebデザイナーはHTMLやCSSも勉強べきなのでしょうか？

また、学習するとしたらどこまで学ぶべきなのでしょうか。

そのような疑問に業界歴15年になるフリーランスWebデザイナーがお答えします。

なぜWebデザイナーがHTMLコーディングも担当するのか

昔はWebデザイナーはWebサイトを作る人という認識だった

そもそもなぜHTMLコーディングがWebデザイナーの分担だったのでしょうか。

Webデザイナー＝Webサイトを作ることができる人。という認識が、昔は一般的でした。

そのため、Webデザインを作りコーディングしてサーバーにアップロードするまでの一貫したWebサイト制作全般が、Webデザイナーの仕事とされてきました。技術そのものが今より簡単だったのもあります。

WebデザイナーはデザインとHTMLコーディング両方ができて当たり前というのは長年の風潮としていまだにあります。

しかし、Web制作作業は時代とともに複雑化し、Webサイトをデザイナー一人で作るのには高度なレベルと時間が必要になってきました。

その結果、現在のWeb制作はチームでの分業化が進んでいます。

2023年現在では、デザインとコーディングは分業体制が主流に

スマホが台頭してきたこともあり、Webサイトも進化が加速して、よりインタラクティブな仕掛けが必要になったり、現場は現場でよりスピード感のあるスケジュール（要は納期が早い）を求められるようになりました。

その結果、最近のWeb制作現場の主流は、

・デザイン業務 → Webデザイナー

・コーディング業務 → Webコーダー（マークアップエンジニア）またはフロントエンドエンジニア

と別の職種の人間が、分業して行うことが多くなってきました。

なので、今はHTMLコーディングができないWebデザイナーも普通にいます。

特に会社勤めのWebデザイナーであれば、HTMLを学ぶ必要も機会もなくなってきています。

また、Webサイトで求められるデザインレベルも年々あがってきています。

昔はファイル容量の関係で複雑なものができなかったデザインが、現在のネット環境では大掛かりなデザインでも再現可能になりました。

　

ただし、フリーランスWebデザイナーの場合は、コーディングも自分でできた方が得です。

以下より、その理由を解説していきます。

　

フリーランスWebデザイナーがHTMLもかけた方がいい理由

HTMLコーディングだけ外注すると手間とお金がかかる

フリーランスのWebデザイナーがWebサイト制作を受注した場合「Webサイトをまるっと作って欲しい」という依頼が多いです。

Webの知識がないクライアントはどんな仕組みでWebサイトが作られているかわからないので、納品された時にはWebサイトが完成されている状態が普通だと思っています。

もしあなたがHTMLコーディングができなければ、外部のWebコーダーに外注しなければいけません。そうするとコーダーへの外注分、見積もり金額は高くなってしまいます。

さらにあなたが受注した案件であれば、窓口は基本あなたです。外注コーダーをコントロールする作業も入ってきてしまいます。その人が一発OKの素晴らしいHTMLコードを納品してくれるならいいのですが、想定していないミスをしてくることもあるでしょう。そういったエラーのチェックやクライアントの修正指示をコーダーに指示するのもあなたの役目になります。

Webディレクション費用として見積もりに計上できればいいのですが、だいたいこういった費用に対しての労力は赤字になりがちです。

無駄にストレスがたまり、でも自分がもらえるのはデザイン費＋わずかな調整費用だけ。

これなら自分でHTMLを覚えた方がマシ、という気持ちになります。

フリーランスの受注案件の幅が広がる

Webデザインスキルのみであれば、できる案件はWebデザインのみです。

しかしHTMLコーディングのスキルがあれば、

• Webデザインのみ
• HTMLコーディングのみ
• Webサイト制作一式
• 既存Webサイトの修正作業

といった複数パターンの受注をすることができます。HTMLコーディングだけの案件の数も多いので、より安定した収入が欲しい場合はHTMLコーディングも学習しておくに越したことはありません。

また、実はフリーに回ってくる案件で実はとても多いのが、最後の「既存Webサイトの修正作業」です。

既存サイトのちょっとした部分を修正したいけど、自分では直せないし頼れる人もいない。という理由で、知人の知人レベルの紹介があったりします。

既存Webサイトの修正は、HTML知識がないと対応できません。

例えば、バナーを新規に差し替えて欲しいという依頼があったとして、HTMLを知らないと新しいバナーの作成はできても、肝心の差し替えができませんよね。

こういった細かい修正案件をこなしていくことで、いずれ大きい案件につながっていくので、フリーランスはHTMLも知っていた方が良いと思います。

スマホ/PCに対応するレスポンシブデザインには、HTMLの知識が必要

レスポンシブデザインとは、スマホとPCと両方に対応するデザインです。

Webデザイナーはレスポンシブデザインに対応したデザインカンプ を作成する必要があります。フリーランスに限ったことではなく、会社員デザイナーも同様です。

Webデザイナーは、スマホ用画面とPC用画面のデザインを両方起こす必要があります。

レスポンシブデザインは、ひとつのHTMLファイルで、スマホとPCのどちらのデザインも再現できるように作り込みます。

この仕組みを知らないばかりに、絶対に再現不可能なデザインをあげてくるWebデザイナーがたまにいます。

Webデザイナーであれば、きちんとレスポンシブデザインを考えて仕事をするべきだと思います。

静止画のデザインとWebデザインは、セオリーが全く違います。なので、HTMLやレスポンシブデザインを知らなければ、正しいWebデザインはできません。

　　

WebデザイナーはHTMLをどこまで勉強する必要があるのか

WebデザイナーがHTMLを学ぶとすればどこまで学べばいいか。

先ほども書きましたが、会社員デザイナーであれば、最悪勉強しなくても仕事はあるしお給料もはいあります。ただし、将来副業やフリーランスを考えているのであれば、HTMLを学ぶに越したことはありません。

どこまで学ぶかについてですが、HTMLという言語について一度整理してみましょう。

Webコーディングには、主に以下の知識が必要になります。

• HTML（エイチティーエムエル）
• CSS（シーエスエス）
• Javascript(ジャバスクリプト)
• FTP（エフティーピー）やサーバー

この4つを簡単に説明します。

HTML

Webサイトの内容の骨組みを作ります。コンピューターがこれはタイトル、これは文章、これはボタンだとわかる様に、コードで意味付けをしていきます

CSS

HTMLを装飾する言語です。文字に色をつけたり、ページ全体のレイアウトを整えたりします。HTMLとセットでなくてはならない言語です。

Javascript

Webサイトに動きをつけるにはこの言語を使います。例えばスクロールでついてくるメニューやクリックするとポップアップするウィンドウなどはこの言語で使います。

FTP

FTPとは作成したHTMLをサーバーにアップロードするために使うもので、上記3つと違ってコードではなくソフトウェアです。HTML作成には必要ありませんが、作成した後にwebサイトを公開するのに必要になる知識です

マークアップ言語とプログラミング言語の違いって？

HTMLはマークアップ言語といい、一方Javascriptはプログラム言語になります。

マークアップ言語は意味づけをするだけの言語です。コンピュータに「ここに書いてある文字はタイトルだよ」と教えてあげる言語で、少し難しい言葉で言うと、コンテンツを定義し構造化する言語です。

コンテンツを定義するだけなので、ルールに則ってコードを書くだけのものです。非常にシンプルで習得しやすいのが、HTMLです。

一方プログラミング言語は、複雑な計算処理をさせたり論理的な思考が必要なので、ある程度のセンスと知識が必要になり、習得するまでに時間がかかります。

デザイナーであれば、プログラムに苦手意識がある方もいると思います。

しかし、HTMLはプログラミング言語に比べるととても簡単で、学習しやすいです。

1.HTMLと基礎は勉強した方が良い

まずはHTMLとCSSの基礎をしっかりと身につけましょう。

さっきも書きましたが、HTMLもCSSも、そこまで難しい言語ではありません。

素人から始めてもとっつきやすい言語です。

WebデザイナーにおすすめのHTML基礎の本

HTML/CSS基礎の勉強でおすすめの本です。初心者向けでわかりやすいし、絵も可愛いです。

知識がゼロでも作れる構成になっていて、サンプルサイトを実際に構築しながら力が身についていきます。FTPやドメインについての解説も載っています。

もっともっと基本の一冊が欲しいならこちらもおすすめ。

難しいことは載っていませんが、それが逆にシンプルで良い。最初の一冊を探している人に。

オンライン学習もおすすめです。HTMLとはなんじゃ？というレベルの人は、まずは以下の記事で紹介している、初心者向けオンライン学習サイト「progate」を視聴してみてください。無料範囲もあります。

レスポンシブデザインはできた方がいい

Webデザイナーはレスポンシブデザインという概念を勉強した方が良いです。

レスポンシブデザインは、最近のHTML学習本であれば、絶対に掲載しています。

上にあげた「これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本」でもしっかり説明していますよ。

CSS設計がわかるとWebコーディングスキルがグッと伸びる

HTML/CSSの基礎、レスポンシブデザインまでは、基本的な習得レベルです。これに、CSS設計というスキルを勉強すると、現場で非常に役に立つ様になります。尚、個人でやる場合も、CSS設計は役に立つスキルです。

CSS設計とは、HTMLとCSSを書く上でプロが実践しているやり方を「CSS設計」という形でまとめたものです。今のWeb制作現場で使われている概念やテクニックはこのCSS設計が元になっています。

CSS設計については、詳しくはこちらの記事を参考にしてください。

Javascriptをかけるかどうかが分かれ目

Javascriptは、Webサイトをダイナミックに動かすには欠かせない技術です。今のWebサイトには動的なアクションは欠かせないので、Javascriptを使えるかどうかが、Webコーダーの初級者と中級者以上の境目になります。

Javascriptはプログラミング言語なため、HTMLと比べると少し習得が難しく、挫折する人も多いです。

WebデザイナーでJavaScriptをゴリゴリ書ける必要はありません。また、そのような人もあまり見かけたことがありません。

Javascriptができないけど動きのあるサイトの案件を受注した場合は、諦めて外注するか、ライブラリ等を使って動的な動きをつけるかになります。Webデザイナーであれば、ライブラリを利用して納品する場合も多々あります。

Javascriptをはじめて学ぶ人におすすめの本です。

Webサイトで実際に使われるJavascriptについてとてもわかりやすくまとめられています。

　

HTMLとCSSの勉強方法について

上に書籍も紹介していますが、HTMLとCSSの学び方については、以下の記事も参考にしてみてください。

Webデザイナーが初めてHTMLとCSSを勉強する場合のロードマップです。

尚、HTMLとCSSはデザイナーにとってはとっつきにくく、苦手意識の強い人もいると思います。

しかし、何も全てを覚える必要はありません。HTMLもCSSもググればたくさんの情報やコピペOKのコードが出てきます。最低限の知識を勉強すればあとは実践でgoogle先生に教えてもらえながら、吸収することができますよ。

HTMLを学ぶ必要がないと思うWebデザイナーの特徴

今度は逆に、こんなスタイルのWebデザイナーならHTMLを学ぶ必要がないんじゃないかな、と個人的に思うパターンをあげてみます。

デザインレベルが高い

私の周りでは、デザインがトップレベルに上手い人はコーディングを全くやりません。その分、デザインに全集中です。

Webデザインだけでなくイラストも描ける

オリジナルイラストが描けるWebデザイナーは貴重です。極論Webコーディングは誰でもできませんが、イラストは描ける人にしか描けません。そしてイラストを描くには時間がかかります。

個人的には、Webコーディングを勉強するより、イラストの腕を伸ばした方がWebデザイナーとして個性が出て、就職にも有利だし、フリーランスとしても重宝されると思います。

ずっと会社に所属（独立しない）

制作会社だと今や分業制がほとんどで、デザイナーがコーディングをすることはありません。フリーランスにならない限り、その会社の方針にもよりますが、コーディングを覚える機会がそもそもないと思います。

まとめ

Webデザイナーは、HTMLコーディングをどこまで学ぶべきか？という疑問に対する答えをまとめると、以下になります。