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

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

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

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

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

ごく基礎的なHTMLやCSSを書くことができる
コーディングのトレンドなども抑えた上でモダンなHTMLやCSSを書くことができる
HTMLやCSSに加え基礎的なJavaScriptを書くこともできる
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デザイナーが仕事でHTMLやCSSのコーディングもしなければいけない」とか「両方仕事でやらなければいけない」と考えているわけではありません。

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

印刷物の制作で例えると

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

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

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

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

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

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

例えば紙もののデザイナーは印刷の知識（印刷技法や紙、インクなど）があるとデザイン自体の幅も広がるのでそれと同じ感覚。
別に印刷屋さん並みの知識や経験が必要とは言わないけど、印刷の職人さんとコミュニケーションできるくらいの知識はあったほうがいい。
— 黒葛原道　Tohru Tsuzurahara (@armytoru) 2020年1月12日

webデザイナーはコーティングの知識を付けるべきというのはかなりザックリした表現で
・CSSで可能な表現方法
・html記述順序
このぐらいでいいのよ
・記法
・フレームワーク
・コード保守
みたいな技術まで身につけてコーダーになる必要性まではない
— のうめん🏗️👺デザイン産業バーチャル機械 (@nomen_machine) 2020年1月11日

DTPデザイナーは印刷の知識を付けるでしょ
CMYKの四色を重ねるから黒の表現にK100以外の幅があるとか

でも別に輪転機回せるわけではないでしょ
— のうめん🏗️👺デザイン産業バーチャル機械 (@nomen_machine) 2020年1月11日

欧米ではコーディングができない人を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標準のフォントに置き換えて欲しいのか』をデザイナーに聞いても『適当にしといて！』と言われて困っている」などのツイートを複数見かけました。

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

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