さまざまな社内スタッフや外注の方をつうじて、「好かれるWebデザイナー」と「嫌われるWebデザイナー」がいることがわかりました。
そして、日本では「嫌われるWebデザイナー」が意外と少なくありません。
- 嫌われるWebデザイナーとは
- なぜ嫌われるのか
- どう気をつけるべきか
現役Webデザイナー、またはその業界を目指す方は参考にしていただけますと幸いです。
個人の見解です
ほかの意見もご参照ください
嫌われるWebデザイナーはコーディングできない
経験者は語る
結論から申しまして、
CHECK!
デザインだけで、コーディングが一切できない（コーディング知識がない）人。これが嫌われるWebデザイナーの特徴です。
- 【コーディング】HTML・PHP・CSS・JavaScriptなどを用いて、デザインをブラウザ上に実装する業務・スキル。
これは見下しているとか職業差別といったものではなく、さまざまな経験者の方、Webデザイナー当事者の方すらもおおむね一致の意見です。
コーディング能力は必須ではないし、最低限の知識で十分。
今は分業・デザイン単体案件もあるから大丈夫です！
プロの方の中にはそう語る人もいます。
しかし現場の意見を言わせていただくと、コーディングできないWebデザイナーは無茶なデザインを出すので、苦労をしいられるのも事実です。
せめてコーディング知識ぐらいは持ってほしいというか、自分のデザインを自分で再現できるぐらいの見識は持ってほしい。
個人的にはコードもPhotoshopやIllustratorと同じデザインツールのひとつと思ってるのでWebデザイナーはコーディングの知識が必要と思う派。 https://t.co/WQH9Yxz0Kt
— 黒葛原 道 Tohru Tsuzurahara (@armytoru) January 12, 2020
コーディングができないWebデザイナーが迷惑な理由｜321web
「Webデザイナーはコーディングできるべきか」について現場から｜bluetraff dezain
実際にあったWebデザイナーとのやりとり
以下の内容は「コーディングができない外注デザイナー」とのやりとりをした実際の体験です。
- 「スマホだけのデザインが送られてくる（PCデザインはメインビジュアルだけ）」
→ PCデザインも必要。そもそも以下の理由からスマホ用ではない。 - 「基本の文字のサイズが11px」
→ 11pxはGoogleからお叱りされやすい。 - 「H1（記事タイトル）の文字が小さい」
→ H1というのは、記事で最も目立つ見出しのはず。 - 「見出し・挙動の仕様がデザインの中に一切書かれていない」
→ 見出しはHなのかPなのか、フェードインなど、注釈で指示を書いてほしい。 - 「ボタンのサイズが30px未満」
→ Google・Appleの推奨サイズ（タップ範囲）は全体で40px〜48px前後。 - 「左右余白が40pxと広すぎる」
→ スマホ実機で見た場合、どう映るかを想像しているかどうか。 - 「Webフォントなのに、フォント情報を送ってこない」
→ Webフォントの仕組みを理解せず、Adobeフォントの規約も読んでいない。
このデザイナーさん自体は悪い方ではなかったですし、この人自体を全否定したり、叩きたいのではありません。
CHECK!
コーディング知識がないままデザインをするとは、結果的に無駄なやりとりなど、コミュニケーションコストが増えるだけしかない。これって仕事の効率が悪いですし、お互いのためにもなりません。
この指摘に対する返答
言われている意図がよくわかりませんので、貴社で調整してください。後はおまかせします。
（この人本当にプロのデザイナーなのかな……？）
さきほどの上記内容を、言葉を選んだ冷静な対応で指摘をしたところ、このような返事が返ってきたんですね。
もう渡したし、自分のデザインに責任を持ちません。
「納品したから後はご自由に」はいただけないもので、結果的にそう言っているのと同じなんですね。これをプロの仕事と言えるでしょうか。
Webデザインは納品したから終わりではなく、納品してからがスタートです。
今回のケースはそこまでですが、（コーディングできない）Webデザイナーとコーダーが喧嘩するというのは大なり小なりあり、話が平行線で頭を抱えたこともありました。
Webデザイナーを名乗るなら絶対必要な知識
把握していない
人たちが多すぎる…
コードが書けないWebデザイナーは、Googleのガイドライン（モバイルフレンドリー）を読まず、端末知識もないままデザインを作るんですね。
それって監修や修正のコストが多くなりますし、ものすごく手間です。
- 【H見出し】H1見出しは1つだけなど、見出しの構成と役割が決められている。
- 【文字サイズ問題】推奨は16px、12px以下の文字多用はNG。9px以下は論外。
- 【CSSの限界問題】グラデーション枠線など、実現が大変なデザインもある。
- 【日本語Webフォント】日本語Webフォントを何種類も多用すべきではない。
- 【Android問題】2022年現在、Androidで明朝体はWebフォント必須。
- 【ボタンサイズ問題】縦横40px〜48px推奨。小さくなる場合は余白を考える。
Webデザイナーを名乗るなら、このあたりの知識は最低限ないと話にならないレベルです。
厳しい言いかたですみませんが、ここを理解していないWebデザイナーが多すぎます。
個人的にPhotoShopやillustratorで作るのはやめてほしい。画像以外はXDかFigmaだと嬉しい。
Googleの見解ではH1は明確な構成なら複数でも問題ないそうですが、あえてH1を複数にする理由もないため1つと記載します。
【重要発表】Googleがモバイル版とPC版を分離する事を発表！数ヶ月以内に実施の予定｜モバイル時代のSEO情報ブログ
スマホで見られないページは2021年にグーグルから消える!? MFI強制移行で【SEO情報まとめ】｜impress
Androidで明朝体フォントを表示させる方法｜will style.
フォントサイズはSEOに影響する！？｜Giga Forest
【スマホEFO】マウスオーバー表現がなくてもわかりやすいUIを作るコツ｜UI改善ブログ
h1タグは複数使用するとSEOに悪影響がある？最適な設定方法とは｜デジマケの教科書
DTPとWebデザインは違う
CHECK!
コーディングできないWebデザイナーは、Googleの仕様書も端末の癖も把握しておらず、DTP（チラシ・ポスターなど）とWebデザインは一緒だと勘違いしている。確かに基礎的な部分は同じですけれど、DTPとWebデザインは目的のみならず、中身も違うことを理解しなければなりません。
こちらの記事にも書いたように、WebデザインとDTPは緑茶と紅茶、焼きそばとカップ焼きそばぐらい違います。コーディングできないデザイナーほど、DTPとWebデザインを同一視します。
コーディングできないWebデザイナーはレイヤー整理もできない。コーダー側でグループ解除操作など、無駄な作業をさせるデザインデータを提出するよ。
PCデザインがメインは問題
当サイトも閲覧者の7割は
スマホユーザー
これも知っていただきたいこととして、「PCがメインでスマホがオマケ」みたいなデザインを出すのは、Webデザイナーとしてかなり問題です。
いまだにPCメインのWebデザインを出すのは、ユーザー分析もできないデザイナーと自己紹介しているようなもので、Web従事者なのにGoogleの発表を読んでいない証拠でもあります。
Google がモバイルファースト インデックスに取り組み始めてから数年がたちました。
これまでに、現在クロールされているほとんどのサイトに対してモバイルファースト インデックスを有効にしており、新規サイトについてはすべてデフォルトで有効にしています。
モバイル ファースト インデックス登録への対応準備｜Google
CHECK!
2022年現在は、スマホがメインでPCはオマケ。今の時代はスマホファーストで、GoogleはPCサイトをあまり評価しません。これを専門用語で『MFI』といいます。
【MFI】グーグルは今「モバイル・ファースト」でモバイル・ユーザーを重視｜コトドリ
モバイルSEOとは？重視される理由とモバイルファーストへの5つの対応策｜picks design
できるWebデザイナーは姿勢からして違う
コーディングできるWebデザイナーはデザインセンスがあるのみならず、スマホファーストで考え、行間・文字サイズ・余白など、人間工学や端末の仕様に従っていて規則的・論理的です。
- 日本語Webフォントが多いとLCP（読み込み時間）に影響がでるから数を絞る。
- Adobe Webフォントは権利関係がややこしいから、テキストに使わない。
- 人間の指はこのぐらいの大きさだから、アイコンが小さい場合は余白を広げる。
- 見出しは画像よりテキストがよく、コーディングが難しくない範囲でデザイン。
- グーテンベルク（WordPress投稿システム）の挙動を把握したデザインを考案。
- 12pxの文字サイズはGoogleから警告が出るから使いすぎに注意。
- ホバー（マウスを乗せるとデザインが変わる）は、スマホだとほぼ意味がない。
コーディングができるデザイナーはここをしっかり考えるので、見ていて気持ちがよく、コーディングもしやすいんですよね。
Webデザイン・コーディング両方をできる自分は、コーディングしながらデザインの荒業もする。推奨しないけど短期納期で便利。
Webデザインはアートではない
アートは自己表現
Webデザインは宣伝
Webデザインはアートではありません。プロの人ですら勘違いする人が少なからずいます。
CHECK!
ダサくても依頼主が満足し、コーディングしやすく、ユーザーが使いやすくSEOで有利・結果が出れば、それはいいデザイン。極論ではあるも、これがWebデザインの世界です。
もちろん、いいデザインであれば文句なしだよ。
しかしどんなに素晴らしいデザインと思っても、
- 依頼主が満足しない
- コーダーが苦しむ
- 使い勝手が悪い
- SEOの結果が出にくい
こういったWebデザインは「無価値」と判断されますから、特にこれからWebデザイナーを目指す人は、混同しないよう注意してください。
彼らの一番の被害者は誰か
本当にしんどそう
だったよ…
ここまで読めばわかるように、コーディングを一切考慮しないデザインで一番迷惑がかかるのは、それを請け負うコーダーの人たちです。
過去案件でもサイトにAdobe日本語Webフォントを5種類使用したデザインを提出した人がいて、コーダーの人が本気で苦しんだそうです。
その人が退職する前、
Webデザイナーの人に伝えて。こういうことされるのは本当に大変で迷惑だから。
こう言われたことを今でも覚えていますし、コーディング知識があれば、日本語Webフォントを3種類以上使用する時点でダメだと理解できます。
これはフォント管理の知識もなく、本当に「DTPと同じ感覚で作る」から生じた問題です。
なお、WebフォントにAdobeフォントは使用しないでほしいと思います。権利的な問題がややこしく、Googleフォントのほうが扱いやすいですから、そちらをつかってほしいですね。
DTP感覚だから、AdobeフォントをWebフォントにするには条件があるのを知らないんだよね。
Webデザイナーのコーディングはどこまですべきか？
全部やれとは言わない
ここまで、コーディングができないWebデザイナーについて厳しく言いましたが、
- JavaScriptを自作
- keyframeCSSの完全理解
- Sass（DartSass）が使える
- SEOを把握している
と、ここまでは言うつもりありません。
SEOは熟知すれば単体だけで食べていける世界だし、自分はJSが大の苦手。jQueryを勉強して使っているレベル。
ただ少なくとも、
CHECK!
動きはともかく、HTML/CSSで自分の作ったデザインを再現でき、モバイルフレンドリーや端末の仕様を最低限把握はするべき。Webデザイナーを名乗りたいなら、このぐらいはできてほしいと切実に思います。
重ねるように、それができるのとできないのとでは、デザインの質が大きく変わりますし、コミュニケーションも円滑です。
コーダーの方にも迷惑がかからず、気持ちよく仕事ができるでしょう。
そこからSEO知識やアニメーションの知識を身につければ、市場価値は一気に上がります。
最後に：Webデザイナーとコーダーが喧嘩しないために
経験浅くても
自称できるからね
「嫌われるWebデザイナー」になってしまうのは、コーディングできない（知識がない）デザイナーであり、一番の被害者は、その無茶ぶりをさせられるコーダーの人たちです。
コーディングできないデザイナーほど声をあまり聞こうとせず、
それはあなたたち（コーダー）の仕事でしょ？
「作ったからハイ終わり」という感じで、他人ごとのように思っている無責任なWebデザイナーをたくさん見てきました。
世の中には「コーディング知識は必須ではない」と語る人もいますけれど、
コーダーが苦しむデザインを出しながら、それでWebデザイナーだと堂々言っているのか。
という疑念を抱くのが本音です。
ゆえにWebデザイナーとコーダーが喧嘩するのは、Web制作業界だとよくあることみたいですね。
ちなみに、「海外ではデザインしかできない人をWebデザイナーとは呼ばない国もあり、日本のWebデザイナーはデザインしかできないから、給与が低い」と言われている話もあるそうです。
人や会社によって意見は分かれるでしょうが、この意見は一理あると思います。
そもそもWebデザイナーとコーダーが喧嘩するって、Webデザイナーがコーディング知識があれば、ある程度回避できる話。
もちろんコーダー側にもデザインの知見はあったほうが、やりとりの手間は減ります。
うわっ、日本のWebデザイナーの年収、低すぎ…？｜Stocker.jp
他の仕事で考えればわかること
- 絵に色彩・解剖学の知識はいらないのか
- 料理に科学の知見は不要なのか
- 営業で心理学は知らなくていいのか
これってさまざまな仕事にも言えることで、仕事ができる人は基礎がしっかりできているし、Webデザインもコードの知識は基礎なんですね。
基礎ができていない家は、根本から崩れたり欠陥住宅になるのと同じですね。
Webデザイナーを名乗るなら、作ったデザインを自分でコーディングできる知見と、モバイルフレンドリーの概念は知るべき。
仮に百歩ゆずって、学ぼうという姿勢は見せてほしいものです。
嫌われるWebデザイナーにならないためにどうすればいいのか、これからWebデザイナーになる場合は何をすればいいのか、この実体験が参考になれば幸いです。
