【安易なWebデザイナー志望はやめとけ】コーダーと喧嘩する人とプロの違い【解説】

自分はプロのWebデザイナー・マークアップエンジニアとして長年働いていますが、日本では「嫌われるWebデザイナー」が意外と少なくありません。

そして「Webデザイナーは誰でもなれる仕事」という甘い認識が目立つのもかなり問題です。

実際に「プロと呼べたものじゃない無能Webデザイナーの仕事」によって、数多くのトラブル対処を経験したり、見聞きしてきましたからね。

嫌われるWebデザイナーとは
安易なWebデザイナー志望はNG
コーダーと喧嘩する人の特徴
無能とプロのWebデザイナーの違い

現役Webデザイナーは戒め、業界を目指す方はリアルな話を参考にしてもらえればと思います。

！

個人の見解です

ほかの意見もご参照ください

嫌われるWebデザイナーはコーディングできない

経験者は語る

コーディング能力は必須ではないし、最低限の知識で十分。

今は分業・デザイン単体案件もあるから大丈夫です！

面接担当もしているから、こういう甘い言葉につられるWebデザイナー志望は書類で落とすね。

CHECK!

デザインだけで、コーディングが一切できない（コーディング知識がない）人。

正確には「できない」よりも「知見がない」が正確で、見下しているとか職業差別ではなく、経験者や「本物の」プロもほぼ一致の意見です。

【コーディング】HTML・PHP・CSS・JavaScriptなどを用いて、デザインをブラウザ上に実装する業務・スキル。

しかし知識がないWebデザイナーは無茶なデザインを出して苦労をしいられるのも数多く、後述のようにGoogleや企業ガイドラインも読まず設計も無知なので、コミュニティコストが尋常です。

noindexのLPや期間限定サイト案件ならまだ許容できますが、基本的に覚えるべきでしょう。

個人的にはコードもPhotoshopやIllustratorと同じデザインツールのひとつと思ってるのでWebデザイナーはコーディングの知識が必要と思う派。 https://t.co/WQH9Yxz0Kt
— 黒葛原道　Tohru Tsuzurahara (@armytoru) January 12, 2020

ページエクスペリエンスが Google 検索の検索結果に与える影響について｜Google

コーディングができないWebデザイナーが迷惑な理由｜321web

「Webデザイナーはコーディングできるべきか」について現場から｜bluetraff dezain

安易なWebデザイナー志望は迷惑

人間関係が苦手なので、Webデザイナーに志望しました。

違う仕事をしていましたが、職業訓練でWebデザインを学んでフリーランスになりました。

人とあまり接しないから、Web制作会社勤務経験がない……Webデザイナーをナメすぎでは？

プロ目線から正直に言いますが、こういう人たちはWebデザイナーの仕事を甘く見すぎです。

どれほど迷惑かは後述するとして、WebデザインはDTP（印刷物）感覚で作るものではなく、コーディング知識のみならず、Googleや企業のガイドライン、設計知識も必要だからです。

またWebデザイナーは人と接しない仕事でもないし、むしろチームワークありきの仕事です。

外部業者やフリーランスの選定をするにあたって、設計知識は身についているか、Web制作会社の勤務経験が3年以上あるかは重要視します。

自分がDTP上がり、Web制作会社の勤務経験に欠くフリーランスを信用しない理由がこれです。

Webデザイナーになりたいなら職業訓練で学ぶのはいいにしても、ちゃんとしたWeb制作会社に勤めて下積み経験を積むべきでしょう。

可能であれば、Webマーケティング事業も並行してやっているような会社が望ましいですね。

整備士や消防士からフリーWebデザイナーに転職したアピールも見たことあったね。勤務経験もないなら「で？」としか思わない。

実際にあったトラブル

冗談抜きで
本当にいる

言われている意図がよくわかりませんので、貴社で調整してください。後はおまかせします。

（この人本当にプロのデザイナーなのかな……？）

「スマホだけのデザインが送られてくる」
→ PCデザインも当たり前に必要だよね？
「基本の文字のサイズが11px」
→ 11pxでスラスラ読めると思うの？
「H1（記事タイトル）の文字が小さい」
→ 戦略上することあるけど基本しない。
「見出し構成や動きの説明も一切無し」
→ HなのかPなのか、フェードは？
「ボタンのサイズが30px未満」
→ Googleのガイドライン読んでる？
「SNSアイコンが30px未満」
→ 利用ガイドラインぐらい読もうよ。
「基本左右余白が40pxと広すぎる」
→ スマホ実機で本当に確認した？
「Webフォントの情報を送ってこない」
→ Webフォントの仕様を理解してる？

上記のツッコミ集は、「コーディングができない外部業者のWebデザイナー」から実際に送られてきたWebデザインを見たときの反応です。

それを建設的かつマイルドに指摘したところ、「貴社で調整してください」と言われた形です。

上記トラブルは会社受注ではなく、顧客が独断で外部業者と進めたから予見ができなかった。

「納品したから後はご自由に」はいただけないもので、結果的にそう言っているのと同じなんですね。これはプロの仕事なのでしょうか？

Webデザインは納品したから終わりではなく、納品してからがスタートです。

（コーディングできない）Webデザイナーとコーダーが喧嘩するのはそういうところであり、話が平行線で頭を抱えたこともありました。

被害者になるのはコーダー

Webデザイナーの人に伝えて。こういうことされるのは本当に大変で迷惑だから。

本当に同情した。無能なWebデザイナーほど「それコーダーの仕事でしょ？」と本気で言うからね。

そしてコーディングを一切考慮しないデザインで一番迷惑がかかるのは、コーダーの人たちです。

過去案件でもサイトにAdobe日本語Webフォントを5種類使用したデザインを提出した人がいて、コーダーの人が本気で苦しんだそうです。

実際に指摘しても、「よくわからない」とか「それはコーダーの仕事では？」と言いますし、長年見ても無能なWebデザイナーほど、大抵似たようなことを思っているフシは多々見かけます。

こういう外部業者やフリーランスに遭遇した場合、上長に報告して仕事は今後振らないでしょう。

社内なら「教育」ができる一方、外部業者やフリーランスに教育する義理はなく、プロとして行動してもらわないといけませんからね。

まあコーダーもコーダーで、「ダメなデザインに気づける観察眼と修正力」は必要かなぁ。

プロのWebデザイナーとは

把握していない
人たちが多すぎる…

Webデザイナーになりたいならどのような知識が必要ですか？

コーディングのみならず、Googleガイドラインやコアウェブバイタル知識は理解すべきかと。

【コーディング知識】コーディングのルールを理解したレイアウト設計。
【導線設計】視線誘導や視認性を意識したユーザビリティの設計。
【トンマナ】規則性を考えて「ルールがある」レイアウトデザイン。
【利用者層】PCよりもスマホデザインを重視する。PCはオマケ。
【MFI】Googleは2010年代以降、PCサイトをあまり評価しない。
【文字サイズ問題】推奨は16px、12px以下の文字多用は避けるべき。
【H見出し】見出しの構成はセマンティック（役割）的に決まっている。
【カラーコントラスト】Webデザインの文字の視認性はチェック対象。
【JS問題】スライダーを多用すれば表示パフォーマンスが悪くなるなど。
【CSS問題】グラデーション枠線など、実現が大変なデザインもある。
【日本語Webフォント】日本語Webフォントを何種類も多用すべきではない。
【ボタンサイズ問題】縦横40px〜48px推奨。小さくなる場合は余白を考える。
【規約問題】Adobe WebフォントやSNSアイコンには利用条件がある。

Webデザイナーを名乗るなら上記は義務教育レベルであり、逆に言えば、上記を理解できているWebデザイナーこそ「本物のプロ」です。

これはさすがに要求レベルが大きくないですか？

こう考えてごらん？キミは家を建てるのに、基礎工事の知識がないまま建築を進めると思う？

コーディング知識やコアウェブバイタルは「家の基礎」に該当します。実装できるぐらいの知識までは求めませんが、仕組みぐらいは学ぶものです。

基礎を理解せず建てれば家はどうなるかは容易に想像でき、欠陥住宅と判明したら責任をとることは上長や社長で、担当者ではありません。

ゆえに無能なWebデザイナーほど「実装はコーダーの仕事でしょ？」な他人事思想が見えます。

レイヤー整理をせずデザイン提出するのも証左で、プロのWebデザイナーほどコーダーに無駄な手間をかけさせない「配慮」はできます。

そしてコーディングできないデザイナーほど、DTPとWebデザインを同一視しがちです。

こういうことも含めて学べるから、Web制作会社に入社して経験を積むのが望ましいんですね。

ちなみにWebデザイン・コーディング両方できる自分は、コーディングしながらデザインをする荒業もします。短期納期だと便利ですね。

Google がモバイルファーストインデックスに取り組み始めてから数年がたちました。

これまでに、現在クロールされているほとんどのサイトに対してモバイルファーストインデックスを有効にしており、新規サイトについてはすべてデフォルトで有効にしています。
モバイルファーストインデックス登録への対応準備｜Google

Core Web Vitals と Google 検索の検索結果について｜Google

【重要発表】Googleがモバイル版とPC版を分離する事を発表！数ヶ月以内に実施の予定｜モバイル時代のSEO情報ブログ

【MFI】グーグルは今「モバイル・ファースト」でモバイル・ユーザーを重視｜コトドリ

モバイルSEOとは？重視される理由とモバイルファーストへの5つの対応策｜picks design

スマホで見られないページは2021年にグーグルから消える!? MFI強制移行で【SEO情報まとめ】｜impress

フォントサイズはSEOに影響する！？｜Giga Forest

【スマホEFO】マウスオーバー表現がなくてもわかりやすいUIを作るコツ｜UI改善ブログ

h1タグは複数使用するとSEOに悪影響がある？最適な設定方法とは｜デジマケの教科書