【最新版】コーディングは必須？WEBデザイナーの定義

WEBデザイン, ウェブ

現在もTwitterのWeb制作者、IT業界界隈では「Webデザイナーがコーディングできるべきかどうか？」という議論が白熱していますよね。
僕はWEBデザイン→コーディング→マークアップ→WEBディレクション→フロントエンド開発という経験と体験に基づき自分なりに定義してみましたので、IT業界はすごいスピードで進んでいく中、もWEBデザイナーへ対しても求められるものも時代に合わせていくべきだと僕は考えています。今回は「Webデザイナーがコーディングできるべきかどうか？」について記事を描いてみました。参考にしていただければ幸いです。

コーディングの定義とは?どこまでを請け負う必要があるか

「コーディング」といっても、業種によっても様々で、大きく5つにまとめてみました。該当する項目はあると思います。

  • ①基礎的なHTMLやCSSを書くことができる
  • ②コーディングのトレンドなども抑えた上でモダンなHTMLやCSSを書くことができる
  • ③SEOを取り入れたセマンティックコーディング
  • ④HTMLやCSSに加え基礎的なJavaScriptを書くこともできる
  • ⑤HTMLやCSSなどのフロント開発はもちろん、バックエンド開発言語も使用し本格的なWebアプリケーションの開発もできる

①と②に関してはマストでWEBデザイナーも書けるべきだと思っています。
③と④に関してはできるに越したことはないですね、ここまでできると、サイトのUI/UXの部分を意識しながらデザインに着手する事ができたり、ワイヤーを切る際もスマートフォンのレイアウトをレスポンシブデザインで意識した上でデザインに取り掛かることもできるのでアップまでもスピードがとても早いです。僕はここまでを求めて社内で勉強会など開催しています。

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

昔のWebページは印刷物のようにガチガチに固定されたレイアウトで制作していました。今でも紙媒体出身の方と仕事する機会があるのですが、

「ここに改行を入れて欲しいです・・・」
「PC画面をみながらスペースがあるから説明文を付け足したい・・・」

と紙ベースのデザインで作成してしまうと検索順位だったり、スマホで閲覧した際にテキストしか画面に表示されていなくユーザーが別ページへ離脱してしまったりなど。紙ベースのデザイン思考でWEBデザインを作成してしまうとせっかくリソースを割いてデザインしてもいい結果が出せない場合が多くなると思います。
現在多くのWebページはGoogleも推奨している「レスポンシブWebデザイン」という手法でPC・タブレット・スマートフォンなどのさまざまな端末に対応するようWEBサイトやWEBページを作る必要があり、「Googleのクローラーはモバイルページを優先にインデックスし、評価を行う」ためです。

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

レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する手法です。言い換えると、PC・タブレット・スマートフォンなどさまざまなデバイスのウィンドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことです。
以下のようなWEBページのデザイン、レイアウトのまとめサイトを参考にしても良いかと思います。
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

WebページをPCで表示してWebブラウザーの幅を縮めると、縮めた幅に合わせてレイアウトが可変していきます。スマートフォンの場合、画面を縦横に回転させても画面の幅に合わせてうまくレイアウトが切り替わるはずです。
今はCSSでブレイクポイントを設ける事で簡単にレスポンシブデザインをWEBページに取り入れることも可能になったので、安心してください。本当に慣れると簡単です！

昔は一つのLPのデザインを作成する場合でも、デザインカンプをPC画面の１パターンのみ作成でも成り立ちましたが、
現在ではPC画面・タブレット画面・スマホ画面の3パターンを作成するのが一般的です。
WebデザイナーがレスポンシブWebデザインの仕組みを全く知らずにデザインすることは
今の時代は厳しいのではないかと思います。
今求められるのWEBデザイナーのスキルは？

  • 「レスポンシブWebデザインの仕組み」
  • 「デザインにアニメーションを付与する方法」
  • 「クローラビティーの良いHTMLやCSSの記述方法」

などは知識をインプットしておく必要があると思います。

▼こちらの記事でもコーディングが上達するコツを詳しく解説！
爆速！コーディングが上達する6つのコツをご紹介！

コーディングの作業をデザイナーに押し付けているのではない

WEBデザイナーの作業負担が増えてしまうと考える方もいると思いますが、やはり今のIT業界に合わせてしまうのですが、作業分担できる方は「デザイン」と「コーディング」を切り分け作業を行っても構わないと思いますが、上記でも説明したと思いますが、できればWEBデザイナーがコーディングまで行う方がベストなのではないかと思います。
デザイン後にデザインデータを渡しコーダーにコーディングしてもらう流れだったと思いますが、WEBデザイナーは下記も意識してデザインを作成することをおすすめします。

  • ・コーディングが困難なデザインデータを作らない
  • ・モバイルファーストのレスポンシブレイアウトを意識したデータを作る
  • ・コーティングの基本的な知識については知っておいてほしい

ここまで抑えてデザインを作る事ができるだけでも、自分自身の力でアップまでの作業を一貫する事ができ、質やスピードも最適化する事が可能になり、無駄がないと僕は思っています。
デザイナーの作業工数も数値で管理した際も早い段階で成果をあげる事ができました！
ここがこの記事でとても重要なポイントになりますが、WEBデザイナーのモチベーションも合わせて向上する事が重要
デザイナー達もアニメーションなどで動的に自分のデザインを動かしたり、デザイナー個々の技術力も向上し、本人達のモチベーションも上げることもできました。
WebデザイナーがHTMLやCSSの基本的な知識を身につけているべきだと考えているのも、それと同じ理由です。

従業員が多く部署が明確に分かれている場合など、作業分担しても良いかと思いますが、「一人のWEBデザイナー」がある程度のWEB業界のトレンドとSEOの知識を理解しアウトプットしながらデザインを作成するというのが今の時代に合っているのではないかなぁと僕は思います。

欧米ではWebデザイナーはコーディングができて当たり前

欧米では見た目のデザインのみでコーディングができない人のことはWebデザイナーと呼ばないみたいで、これからはWEBデザイナーはユーザビリティも考慮したUI/UXデザインの需要が高まってきています。
WEBデザイナーの国内の年収は350万〜いいところで500万円位が平均の相場です。
僕もWEBデザインからがIT業界でのスタートだったので年収は低かったです。涙
現在は様々な知識をインプットし何が今後必要なのかを見極めながらスキルの向上に励んでいます。

欧米では「Webデザイナー」とは、PhotoshopやAdobeXD・Sketchなどを使用したWeb、UIデザインに特化しているツールを使用し効率よくデザインできるようなデザイナーが求められています。「デザインやHTML・CSSコーディングはもちろん、JavaScriptやマーケティングなどさまざまな分野に精通した方のこと」を定義しています。

UIデザイナー・UXデザイナーとは

Webサイトの制作に関わる職種のひとつであり、ユーザーにとって使い心地の良いシステム・ビジュアルをデザインするのが仕事です。
なんと！欧米のUI/UXデザイナーの平均年収は
「1000万〜1500万」です！

日本ではまだUI/UXデザインに対しての価値が浸透していないと思いますが、将来的にもツールを使えるように学んでおいて損はないと思います！
自分自身の価値を向上しておきましょう！

Webデザイナーがコーディングを知るとデザインの質が落ちる？

ここがこの記事の目的部分になるとは思いますが、「Webデザイナーがコーディングを学ぶとデザインの質が落ちる」と言われていました。
ここは僕も共感する部分もありますが、目的を考えればその答えは明確になると思います。
確かにレスポンシブコーディングを意識するとデザイン自体紙媒体のように作り込めなくなると思います。
例えば、テキストにグラデやストロークやシャドウなどテキスト自体もデザインしたりなどしていたと思いますが、今はテキストベースでWEBページに落とし込む必要があります。
なるべく画像も軽くし、サーバーからのHTTPリクエスト数も減らし、ページスピードも最適化が重要視されているためです。

モバイルからのセッションシェアも世界的に見てもスマホからのアクセスが「60%〜70％」だからです。

よく見られている場所を改善していく方が、成果の上げる近道になるからです。
HTMLやCSS、レスポンシブWebデザインの基礎を学ぶ程度であれば、そこまで膨大な時間も掛からず、オンラインでプログラミング(HTML/CSS/Javascript)が無料で学べるサービスも多いので、時間があればいつでもインプットする事ができます。

▼こちらの記事でもプログラミングが学べるサービスをご紹介しています！
プログラミングが学べる学習サイト5選

Webページをきちんとデザインするのに最低限HTMLとCSSの知識はこれからのIT業界では必須だと思います！
WEBデザイナーがコーディングまで行う必要があるのかについて、ほかに可能性として考えられるのはコーディングのことを何も知らなかった頃は自由にデザインできていたものが、HTMLやCSSが苦手とする事、デザインがしずらくなり自由な発想でデザインできなくなると考えてしまう根元かもしれません。
コーダーへデザインカンプを引き継ぐ際にもこのフォントを使用してください。と伝えていてもOSなどにより指定のフォントが使えなくWEBフォントを使用しすぎてページの読み込みスピードが低下したりなど、今までのデザインの作成の仕方をしているとコーダーにも嫌な顔をされたりすると思います。
そのためにもコーディングの基礎を理解していれば「このようなデザインだとコーディングしづらいかもしれない」と自分自身で感じることもあるでしょう。
そのような時は、コーダーとコミュニケーションをとって「このようなデザインにしたいけどコーディングが可能か？」ということを一度確認するのが無難だと思います。

まとめ

自分自身の経験も元にWEBデザイナーの業務はどこまでおこなえば良いかが、明確でなくWEBデザイナーの定義が曖昧になっているのがこの記事を公開したきっかけになりますが、僕自身もWEBデザイナーからスタートし、今はデザイナー達を取りまとめて進行と品質の管理を行っています。上記でも説明したように従業員が多い企業などは部署が明確に分かれている場合など、作業分担しても良いかと思いますが、「一人のWEBデザイナー」がある程度のWEB業界のトレンドとSEOの知識を理解しアウトプットしながらデザインを作成するというのが今の時代に合っていると思います。
結論
「WEBデザイナーもコーディングの知識をインプットしておく必要がある」
また欲を言えば、WEBデザイナーの方達も自身のスキルアップと収入アップも将来的に視野に入れてコーディングやSEO、UI/UXへの学びはWEBデザイナーも必要になってくると強く思います。
この記事が少しでも参考になれば幸いです。

WEBデザイン, ウェブWEBデザイナー, コーディング, マークアップ, 定義

Posted by bolgly｜ブログリー