「Webデザイナーはコーディングできるべきか」という議論に対する私の考え

過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。

かなり悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。

コーディングとはどこまでを指すか

「コーディング」といっても、人によって指しているものが違うと思います。
ここでは4つの段階に分けてみます。

  1. ごく基礎的なHTMLやCSSを書くことができる
  2. コーディングのトレンドなども抑えた上でモダンなHTMLやCSSを書くことができる
  3. HTMLやCSSに加え基礎的なJavaScriptを書くこともできる
  4. HTMLやCSSはもちろん、本格的なWebアプリケーションの開発もできる

このうち1に関しては、私は「議論の余地なくWebデザイナーも書けるべき」だと思っています。
2以上に関してはケースバイケースであり、議論の余地があると考えています。

HTMLやCSSを書けるべきと考えるのはなぜか

昔のWebページは印刷物のようにガチガチに固定されたレイアウトで制作していました。
しかし、現在多くのWebページは「レスポンシブWebデザイン」という手法でPCやタブレットスマートフォンなどさまざまな端末に対応しています。

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

1つのHTMLとCSSでPC・タブレット・スマートフォンなどさまざまな画面の大きさの端末に対応する制作手法のことです。

たとえば Apple のWebページをPCで表示してWebブラウザーの幅を思いっきり縮めると、幅に合わせてレイアウトが変わることが分かると思います。 スマートフォンの場合、画面を縦横に回転させても画面の幅に合わせてうまくレイアウトが切り替わるはずです。

もしWebデザイナーがレスポンシブWebデザインの仕組みを全く知らずにうまくデザインできるとはどうしても思えません。

最低でも「レスポンシブWebデザインの仕組み」や「どのようなことができるか」、「どのようなデザインはレスポンシブWebデザインに向いていないか」などは知っておく必要があると思います。

Webコーディングスクール 体験レッスン受付中

コーディングの仕事をしろと言っているわけではない

誤解のないよう念のために書いておきますが、私は「Webデザイナーが仕事でHTMLやCSSのコーディングもしなければいけない」とか「両方仕事でやらなければいけない」と考えているわけではありません。

一般的にデザインよりもコーディングの方が後の行程になるので、「コーディングが困難なデザインデータを作ってしまわないよう、コーティングの基本的な知識については知っておいてほしい」ということです。

印刷物の制作で例えると

私が初めてPhotoshopやIllustratorを使ったのは学生の時のアルバイトで、スーパーのチラシを作る仕事でした。
最初はIllustratorの画面上で自分がデザインしたものが正しく表示されていればそれがそのまま印刷されると期待していたのですが実際はそうではなく、「いろいろな事に気を使ってデータを作らなければ製版や印刷など後の行程をおこなう方に迷惑がかかってしまう」ということに気づきました。

たとえば、色をつける時に適当なCMYKの値を設定してしまうと、画面上では良い色に見えていても実際の印刷物では色が濁ったりうまくインクが乗らないなどです。
また、紙の端の方に背景色をつける時は適切な塗り足しをつけなければいけないなどということも学びました。

私はその頃から漠然と「PhotoshopやIllustratorなどを使ったデザインの仕事がやりたい」と考えていましたが、「印刷所で印刷機を使う仕事がやりたい」と考えていたわけではありませんでした。

しかし、自分が制作したデータに不備があってそのままでは印刷できないというのは悪いことだろうと思ったので、印刷に関することや印刷するときの注意事項についても勉強したという感じです。

WebデザイナーがHTMLやCSSの基本的な知識を身につけているべきだと考えているのも、それと同じ理由です。

以下のツイートが私と同じような意見だと感じました。

欧米ではコーディングができない人をWebデザイナーとは呼ばない

詳しくは以下の記事に書いていますが、欧米では見た目のデザインのみでコーディングができない人のことはWebデザイナーとは呼ばないのだそうです。

うわっ、日本のWebデザイナーの年収、低すぎ…?

欧米では「Webデザイナー」とは、PhotoshopやAdobe XDなどを使用したデザインやHTML・CSSコーディングはもちろん、JavaScriptやマーケティングなどさまざまな分野に精通した方のことを言うのだそうです。

「Webデザイナーがコーディングを知るとデザインの質が落ちる」という意見に対して

今回の議論のきっかけになったと思われるツイートを拝見すると「Webデザイナーがコーディングを学ぶとデザインの質が落ちる」と言ったことが書かれていました。

なぜそう考えるのだろうと不思議に思っていたのですが、たとえば「JavaScriptについて何も知らない状態から本格的なアプリケーションを作れるようになるまで勉強しよう」と思うと膨大な時間がかかり、デザインを含む他のことが手につかなくなってしまうという心配であれば理解できます。

しかしながら、HTMLやCSS、レスポンシブWebデザインの基礎を学ぶ程度であれば、そこまで膨大な時間はかからないはずです。
参考までに、私が開催している「スマートフォン時代のWebコーディングスクール」ではHTMLとCSSの基礎、レスポンシブWebデザイン、Sassなどを学ぶのに使っている時間は約25時間です。

Webページをきちんとデザインするのに最低限HTMLとCSSの知識は必須だと思いますので、なぜこの程度の時間が惜しいと考えるのかわかりませんでした。

ほかに可能性として考えられるのは「コーディングのことを何も知らなかった頃は自由にデザインできていたものが、HTMLやCSSが苦手とする事、やりづらいことを知ることで、自由な発想でデザインできなくなる」と考えている可能性があるのかもしれません。

そこに関しては、まず現在コーダーの方に迷惑をかけていないか心配した方が良いと思います。

たとえば、今回の議論に関係して「まったくHTMLやCSSを理解していないWebデザイナーから来たデザインがまともにコーディングできない」とか「モリサワフォントのような多くの環境で利用できないフォントが使われているので『Webフォントにすべきか、それともOS標準のフォントに置き換えて欲しいのか』をデザイナーに聞いても『適当にしといて!』と言われて困っている」などのツイートを複数見かけました。

コーディングの基礎を理解していれば「このようなデザインだとコーディングしづらいかもしれない」と感じることもあるでしょう。
そのような時は、コーダーとコミュニケーションをとって「このようなデザインにしたいけどコーディングが可能か?」ということを確認すれば良い話だと思います。

コーダーの方とコミュニケーションを取ることを面倒だと感じる方もいるかもしれませんが、コーディングできるかどうかを考えずに自由な発想でデザインした結果迷惑をかけるよりはずっと良いはずです。

プログラミングや黒い画面(ターミナル)などを億劫に感じる方のためにやっていること

私の場合、HTMLやCSSは90年代から書いていたのでそれほど苦手意識はありませんでしたが、プログラミングやターミナル(いわゆる黒い画面)に対しては苦手意識があったので、そういった方の気持ちはわかります。

定期的に「黒い画面入門講座」や「プログラミング入門講座」などの無料講座を開催しているのも、そういった方たちの役に立てればと思っている部分が大きいです。

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index