さまざまな社内スタッフや外注の方をつうじて、「好かれる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未満」
→ ガイドラインを読んでいない。 - 「左右余白が40pxと広すぎる」
→ スマホ実機で確認していない。 - 「Webフォントなのに、フォント情報を送ってこない」
→ Webフォントを理解していない。
上記内容は「コーディングができない外注デザイナー」とのやりとりをした実際の体験です。
このデザイナー自体を全否定したり、叩きたいのではありません。しかし仕事の効率が悪く、お互いのためにもならないでしょう。
言われている意図がよくわかりませんので、貴社で調整してください。後はおまかせします。
（この人本当にプロのデザイナーなのかな……？）
上記内容を言葉を選んで指摘をしたところ、このような返事が返ってきたんですね。
「納品したから後はご自由に」はいただけないもので、結果的にそう言っているのと同じなんですね。これをプロの仕事と言えるでしょうか。
Webデザインは納品したから終わりではなく、納品してからがスタートです。
（コーディングできない）Webデザイナーとコーダーが喧嘩するというのは大なり小なりあり、話が平行線で頭を抱えたこともありました。
Webデザイナーを名乗るなら絶対必要な知識
把握していない
人たちが多すぎる…
コードが書けないWebデザイナーは、Googleのガイドライン（モバイルフレンドリー）を読まず、端末知識もないままデザインを作るんですね。
それって監修や修正のコストが多くなりますし、ものすごく手間です。
- 【H見出し】H1見出しは1つだけなど、見出しの構成と役割が決められている。
- 【トンマナ】規則性を考えてコードやDOM量を節約できるデザイン。
- 【利用者層】PCよりもスマホデザインを重視する。PCはオマケ。
- 【文字サイズ問題】推奨は16px、12px以下の文字多用はNG。9px以下は論外。
- 【CSSの限界問題】グラデーション枠線など、実現が大変なデザインもある。
- 【日本語Webフォント】日本語Webフォントを何種類も多用すべきではない。
- 【Android問題】2022年現在、Androidで明朝体はWebフォント必須。
- 【ボタンサイズ問題】縦横40px〜48px推奨。小さくなる場合は余白を考える。
- 【権利問題】AdobeフォントのWebフォント利用には必須条件がある。
Webデザイナーを名乗るなら、このあたりの知識は最低限ないと話にならないレベルです。
厳しいながら、ここを理解しないWebデザイナーが多すぎるため、上記知識はWebデザイナー業界なら義務教育にすべきですね。
個人的にPhotoShopやillustrator作成はやめてほしいもので、画像以外はXDかFigmaだと嬉しいものの、後者のツールでスマホキャンバスを2倍にして提出する人にいい気分はしません。
Illustratorの古い知識でやる2010年代レベルの化石か、Retina対応の意味を履き違えています。
コーダーからすれば、2倍キャンバスからマージン・フォントサイズなどを再計算する手間を強要される嫌がらせです。コーディング知識がないからそういうことを平気でするんですね。
Googleの見解では構成次第でH1複数も問題ないそうですが、やる理由もないため1つとします。
【重要発表】Googleがモバイル版とPC版を分離する事を発表！数ヶ月以内に実施の予定｜モバイル時代のSEO情報ブログ
スマホで見られないページは2021年にグーグルから消える!? MFI強制移行で【SEO情報まとめ】｜impress
Androidで明朝体フォントを表示させる方法｜will style.
フォントサイズはSEOに影響する！？｜Giga Forest
【スマホEFO】マウスオーバー表現がなくてもわかりやすいUIを作るコツ｜UI改善ブログ
h1タグは複数使用するとSEOに悪影響がある？最適な設定方法とは｜デジマケの教科書
DTPとWebデザインは違う
DTP感覚でWebデザインをつくる人もいるそうですが……
それもあるし、コーディングできないWebデザイナーはレイヤー整理すらもしないからね……
DTPもWebデザインも基礎的な部分は同じですけれど、DTPとWebデザインは目的のみならず、中身も違うことを理解しなければなりません。
コーディングできないデザイナーほど、DTPとWebデザインを同一視します。
レイヤー整理をせずデザイン提出するのが証左でしょう。Webデザインはレイヤー整理をしてコーダーに余計な手間をかけさせないものです。
DTP感覚ゆえ、AdobeフォントのWebフォント利用条件を知らないのも致命的でしょう。
PCデザインがメインは問題
当サイトも閲覧者の7割は
スマホユーザー
さきに触れたように、「PCがメインでスマホがオマケ」みたいなデザインを出すのは、Webデザイナーとしてかなり問題です。
いまだにPCメインのWebデザインを出すのは、ユーザー分析もできないデザイナーと自己紹介しているようなもので、Web従事者なのにGoogleの発表を読んでいない証拠でもあります。
Googleは2010年代以降、PCサイトをあまり評価しません。これを『MFI』といいます。
Google がモバイルファースト インデックスに取り組み始めてから数年がたちました。
これまでに、現在クロールされているほとんどのサイトに対してモバイルファースト インデックスを有効にしており、新規サイトについてはすべてデフォルトで有効にしています。
モバイル ファースト インデックス登録への対応準備｜Google
【MFI】グーグルは今「モバイル・ファースト」でモバイル・ユーザーを重視｜コトドリ
モバイルSEOとは？重視される理由とモバイルファーストへの5つの対応策｜picks design
できるWebデザイナーの姿勢
- 日本語Webフォントが多いとLCP（読み込み時間）に影響がでるから数を絞る。
- PC・スマホの切り替えでコード量の負担にならないようにデザインを考える。
- DOMが増えないように、映えはするけど凝りすぎないように調整。
- Adobe Webフォントは権利関係がややこしいから、テキストに使わない。
- 人間の指はこのぐらいの大きさだから、アイコンが小さい場合は余白を広げる。
- 見出しは画像よりテキストがよく、コーディングが難しくない範囲でデザイン。
- グーテンベルク（WordPress投稿システム）の挙動を把握したデザインを考案。
- 12pxの文字サイズはGoogleから警告が出るから使いすぎに注意。
- ホバー（マウスを乗せるとデザインが変わる）は、スマホだとほぼ意味がない。
- レイヤー整理など、コーダーに優しいデザインデータづくりを心がける。
コーディングできるWebデザイナーはデザインセンスがあるのみならず、スマホファーストで考え、行間・文字サイズ・余白など、人間工学や端末の仕様に従っていて規則的・論理的です。
できるデザイナーは上記が普通にできるため、見ていて気持ちがよく作業もしやすいです。
Webデザイン・コーディング両方できる自分は、コーディングしながらデザインをする荒業もします。推奨しないものの短期納期では便利ですね。
Webデザインはアートではない
アートは自己表現
Webデザインは宣伝
CHECK!
ダサくても依頼主が満足し、コーディングしやすく、ユーザーが使いやすくSEOで有利・結果が出れば、それはいいデザイン。Webデザインはアートではありません。極論ではあるも、これがWebデザインの世界です。
もちろん、いいデザインであれば文句なしだよ。
しかしどんなに素晴らしいデザインと思っても、
- 依頼主が満足しない
- コーダーが苦しむ
- 使い勝手が悪い
- SEOの結果が出にくい
こういったWebデザインは「無価値」と判断されますから、特にこれからWebデザイナーを目指す人は、混同しないよう注意してください。
そしてコーディングを一切考慮しないデザインで一番迷惑がかかるのは、コーダーの人たちです。
過去案件でもサイトにAdobe日本語Webフォントを5種類使用したデザインを提出した人がいて、コーダーの人が本気で苦しんだそうです。
Webデザイナーの人に伝えて。こういうことされるのは本当に大変で迷惑だから。
退職前にそう言われたことを今でも覚えていますし、コーディング知識があれば、日本語Webフォントを3種類使用でダメと理解できます。
これはフォント管理の知識もなく、本当に「DTPと同じ感覚で作る」から生じた問題です。
なお、WebフォントにAdobeフォントは使用しないでほしいと思います。重ねるように権利的な問題がややこしく、Googleフォントのほうが扱いやすいですから、そちらを使ってほしいですね。
Webデザイナーのコーディングはどこまですべきか？
全部やれとは言わない
ここまで、コーディングができないWebデザイナーについて厳しく言いましたが、
- JavaScriptを自作
- keyframeCSSの完全理解
- Sass（DartSass）が使える
- SEOを把握している
と、ここまでは言うつもりありません。
CHECK!
動きはともかく、HTML/CSSで自分の作ったデザインを再現でき、モバイルフレンドリーや端末の仕様を最低限把握はするべき。Webデザイナーを名乗りたいなら、このぐらいはできてほしいと切実に思います。
重ねるように、それができるのとできないのとでは、デザインの質が大きく変わりますし、コミュニケーションも円滑です。
コーダーの方にも迷惑がかからず、気持ちよく仕事ができるでしょう。
そこからSEO知識やアニメーションの知識を身につければ、市場価値は一気に上がります。
最後に：Webデザイナーとコーダーが喧嘩しないために
経験浅くても
自称できるからね
嫌われるWebデザイナーってどういう人たちなんですか？
コーディングの知見がないデザイナーだね。無茶振りばかりするしDTP感覚だから非常に迷惑。
「嫌われるWebデザイナー」はコーディングできない（知識がない）デザイナーであり、一番の被害者はコーダーの人たちです。
コーディングできないデザイナーほど声をあまり聞こうとせず、「作ったからハイ終わり」という感じで、他人ごとのように思っている無責任なWebデザイナーをたくさん見てきました。
世の中には「コーディング知識は必須ではない」と語る人もいますけれど、
コーダーが苦しむデザインを出しながら、それでWebデザイナーだと堂々言っているのか。
という疑念を抱くのが本音です。
ゆえにWebデザイナーとコーダーが喧嘩するのは、Web制作業界だとよくあることみたいですね。
海外では「デザイン限定の人をWebデザイナーと呼ばず、日本のWebデザイナーはデザインのみだから給与が低い」との話もあるそうです。
人や会社によって意見は分かれるでしょうが、この意見は一理あると思います。
うわっ、日本のWebデザイナーの年収、低すぎ…？｜Stocker.jp
他の仕事で考えればわかること
Webデザイナーとコーダーが喧嘩するって話もあるそうですね。
何度も経験している。コーディングできないデザイナーは基礎を作らず家を建築するようなもの。
- 絵に色彩・解剖学の知識はいらないのか
- 料理に科学の知見は不要なのか
- 営業で心理学は知らなくていいのか
さまざまな仕事にも言えることで、仕事ができる人は基礎がしっかりできているし、Webデザインもコードの知識は基礎なんですね。
自分からすれば、Webデザイナーはコーディングの知見があり、Google・Appleガイドラインを読んでいるのは義務教育レベルで当たり前であり、百歩ゆずって学ぶ姿勢は見せてほしいものです。
嫌われるWebデザイナーにならないためにどうすればいいのか、Webデザイナーになる場合は何をすればいいのかの参考になれば幸いです。
