2021.10.16 2023.08.08

【現役が語る】嫌われるWebデザイナーにならないために【コーディング】

雑記、迷惑なWEBデザイナー,コーディングができないWEBデザイナー

さまざまな社内スタッフや外注の方をつうじて、「好かれるWebデザイナー」と「嫌われるWebデザイナー」がいることがわかりました。

そして、日本では「嫌われるWebデザイナー」が意外と少なくありません。

  • 嫌われるWebデザイナーとは
  • なぜ嫌われるのか
  • どう気をつけるべきか

現役Webデザイナー、またはその業界を目指す方は参考にしていただけますと幸いです。

  • 個人の見解です

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

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

背景

経験者は語る

結論から申しまして、

CHECK!

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

これが嫌われるWebデザイナーの一番の特徴です。

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

これは見下しているとか職業差別といったものではなく、さまざまな経験者の方、Webデザイナー当事者の方すらもおおむね一致の意見です。

プロの方の中には、

  • 「コーディング能力は必須ではない」
  • 「最低限の知識だけあれば十分」
  • 「分業・デザイン単体案件もあるから大丈夫」

このように語る人もいます。

しかし現場の意見を言わせていただくと、コーディングできないWebデザイナーは無茶なデザインを出すので、苦労をしいられるのも事実なんですね。

せめてコーディングの知識ぐらいは持ってほしいというか、自分の作ったサイトを自分で再現できるぐらいの見識は持ってほしい。

フキダシ2

コーディングができない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!

コーディング知識がないままデザインをするということは、結果的に無駄なやり取りが増えるだけしかない。

これって仕事の効率が悪いですし、お互いのためにもなりません。

この指摘に対する返答

フキダシ3

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

(この人本当にプロなのかな……?)

フキダシ2

さきほど上記の内容を言葉を選んだ冷静な対応で指摘をしたところ、このような返事が返ってきたんですね。

この「納品したし、後はご自由に」という考えかたはいただけません。

フキダシ3

もう渡したし、自分のデザインに責任を持ちません。

こう言っているのと同じで、Webデザインは納品したから終わりではなく、納品してからがスタートです。

今回のケースはそこまでですが、(コーディングできない)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にしてくれると嬉しい。

フキダシ2

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

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

Androidで明朝体フォントを表示させる方法|will style.

フォントサイズはSEOに影響する!?|Giga Forest

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

DTPとWebデザインは違う

CHECK!

コーディングできないWebデザイナーは、Googleの仕様書も端末の癖も把握しておらず、DTP(チラシ・ポスターなど)とWebデザインは一緒だと勘違いしている。

確かに基礎的な部分は同じですけれど、DTPとWebデザインは目的のみならず、中身も違うことを理解しなければなりません。

PCデザインがメインなのは問題

背景

当サイトも閲覧者の7割は
スマホユーザー

これも知っていただきたいこととして、「PCがメインでスマホがオマケ」みたいなデザインを出すのは、Webデザイナーとしてかなり問題です。

今の時代はスマホファーストで、GoogleはPCサイトを一切評価しません。

フキダシ1

CHECK!

2022年現在は、スマホがメインでPCはオマケ。

できるWebデザイナーは姿勢からして違う

コーディングできるWebデザイナーはデザインセンスがあるのみならず、スマホファーストで考えるし、行間・文字サイズ・余白など、人間工学や端末の仕様に従っていて規則的・論理的です。

  • 日本語Webフォントが多いとLCP(読み込み時間)に影響がでるから数を絞る。
  • Adobe Webフォントは権利関係がややこしいから、テキストに使わない。
  • 人間の指はこのぐらいの大きさだから、アイコンが小さい場合は余白を広げる。
  • 見出しは画像よりテキストがよく、コーディングが難しくない範囲でデザイン。
  • グーテンベルク(WordPress投稿システム)の挙動を把握したデザインを考案。
  • 12pxの文字サイズはGoogleから警告が出るから使いすぎに注意。
  • ホバー(マウスを乗せるとデザインが変わる)は、スマホだとほぼ意味がない。

コーディングができるデザイナーはここをしっかり考えるので、見ていて気持ちがよく、コーディングもしやすいんですよね。

Webデザインとコーディングの両方ができる自分は、コーディングしながらデザインという荒業もできるよ。推奨しないやりかただけど、納期が短い案件では便利。

フキダシ2

Webデザインはアートではない

背景

アートは自己表現
Webデザインは宣伝

Webデザインはアートではありません。プロの人ですら勘違いしている人が少なからずいます。

CHECK!

ダサくても依頼主が満足し、コーディングしやすく、ユーザーが使いやすくSEOで有利・結果が出れば、それはいいデザイン。

極論ではあるも、これがWebデザインの世界です。

もちろん、いいデザインであれば文句なしだよ。

フキダシ2

しかしどんなに素晴らしいデザインと思っても、

  • 依頼主が満足しない
  • コーダーが苦しむ
  • 使い勝手が悪い
  • SEOの結果が出にくい

こういったWebデザインは「無価値」と判断されます。

特にこれからWebデザイナーを目指す人は、混同しないよう注意していただきたいですね。

彼らの一番の被害者は誰か

背景

本当にしんどそう
だったよ…

ここまで記事を読めばわかるかもしれませんが、コーディングを一切考慮していないデザインで一番迷惑がかかるのは、それを請け負うコーダーの人たちです。

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

その人が退職する前、

フキダシ3

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

こう言われたことを今でも覚えていますし、コーディング知識があれば、日本語Webフォントを3種類以上使用する時点でダメだと理解できます。

これはフォント管理の知識もなく、本当に「DTPと同じ感覚で作る」から生じた問題です。

なお、WebフォントにAdobeフォントは使用しないでほしいと思います。権利的な問題がややこしく、Googleフォントのほうが扱いやすいですから、そちらをつかってほしいですね。

DTP感覚だから、AdobeフォントをWebフォントにするには条件があるのを知らないんじゃないだろうか。

フキダシ2

Webデザイナーのコーディングはどこまでできればいいのか?

背景

全部やれとは言わない

ここまで、コーディングができないWebデザイナーについて厳しく言いましたが、

  • JavaScriptを自作
  • keyframeCSSの完全理解
  • Sass(DartSass)が使える
  • SEOを把握している

と、ここまでは言うつもりありません。

SEOは熟知すれば単体だけで食べていける世界だし、ぶっちゃけ自分はJavaScriptが大の苦手。jQueryを勉強して使っているレベル。

フキダシ2

ただ少なくとも、

CHECK!

動き(アニメーション)はともかく、HTML/CSSで自分の作ったデザインを再現でき、モバイルフレンドリーや端末の仕様を最低限把握するほどの知識は持つべき。

Webデザイナーを名乗りたいなら、このぐらいはできてほしいと切実に思います。

重ねるように、それができるのとできないのとでは、デザインの質が大きく変わりますし、コミュニケーションも円滑です。

コーダーの方にも迷惑がかからず、気持ちよく仕事ができるでしょう。

そこからSEO知識やアニメーションの知識を身につければ、市場価値は一気に上がります。

フキダシ1

最後に:Webデザイナーとコーダーが喧嘩しないために

背景

経験浅くても
自称できるからね

「嫌われるWebデザイナー」になってしまうのは、コーディングできない(知識がない)デザイナーであり、一番の被害者は、その無茶ぶりをさせられるコーダーの人たちです。

コーディングできないデザイナーほど声をあまり聞こうとせず、

フキダシ3

それはあなたたち(コーダー)の仕事でしょ?

「作ったからハイ終わり」という感じで、他人ごとのように思っている無責任なWebデザイナーをたくさん見てきました。

世の中には「コーディング知識は必須ではない」と語る人もいますけれど、

コーダーが苦しむデザインを出しておいて、それでWebデザイナーだと胸はって言っているのか。

フキダシ2

という疑念を抱くのが本音です。

ゆえにWebデザイナーとコーダーが喧嘩するのは、Web制作業界だとよくあることみたいですね。

そもそもWebデザイナーとコーダーが喧嘩するって、Webデザイナーがコーディング知識があれば、ある程度回避できる話。もちろんコーダー側にもデザインの知見はあったほうがいいけど。

フキダシ2

ちなみに、「海外ではデザインしかできない人をWebデザイナーとは呼ばない国もあり、日本のWebデザイナーはデザインしかできないから、給与が低い」と言われている話もあるそうです。

人や会社によって意見は分かれるでしょうが、この意見は一理あると思います。

他の仕事で考えればわかること

  • 絵に色彩学や解剖学の知識はいらないのか
  • 料理に科学の知見は不要なのか
  • 営業で心理学は知らなくていいのか

これってさまざまな仕事にも言えることで、仕事ができる人は基礎がしっかりできているし、Webデザインもコードの知識は基礎なんですね。

基礎ができていない家は、根本から崩れたり欠陥住宅になるのと同じ。Webデザイナーを名乗るなら、作ったデザインを自分でコーディングできるぐらいの技量と、モバイルフレンドリーの知識は最低限持つべき。

フキダシ2

仮に百歩ゆずって、学ぼうという姿勢は見せてほしいものです。

嫌われるWebデザイナーにならないためにどうすればいいのか、これからWebデザイナーになる場合は何をすればいいのか、この実体験が参考になれば幸いです。

うわっ、日本のWebデザイナーの年収、低すぎ…?|Stocker.jp

寄付のお願い

フキダシ3 ありがとう
ございます
  • 当サイトはみなさまのご支援により、広告なしの実現やサイト維持をおこなっています。

    記事や作品が気に入りましたら、支援サイトのご支援や寄付をよろしくお願いいたします。

記事・作品をシェア

https://umakose.com/notes/211016-1/

クリック・タップでコピーできます

1.シェアについて

赤竹ただきち(以下、当管理者)が運営するウマコセドットコム(以下、当サイト)の内容をシェアする場合、個人サイト・ブログ・サービス・SNSを問わず、URLなどを記載して出典元を明記ください。

明記していただければ、社会通念上の範囲内でご自由にシェアが可能です。

2.記事の引用(転載)

記事内の文章を引用される場合、URL元を明記し引用要素(blockquote)内に記載してください(なおサイト内のコピペは悪用・言い逃げ対策のため不可にしていますので、ご了承ください)。

掲示板やSNSの場合は、文頭に「>」などをつけ、オリジナルコンテンツ(コピーコンテンツ)ではないことを明確にしてください。

要約のための一部改変は、記事の意図を大幅に変えなければ可能とします。

3.キャラクターの使用

当サイトに掲載されているオリジナルキャラクターの使用は、創作性が高い非営利の個人に限り、イラスト・マンガなどに使用できます。非営利・個人の定義はこちらをご参照ください。

制作費・人件費の範囲内であれば、有償配布や支援サイトの掲載も可能としますが、AIで作成した作品で当管理者の絵だと誤認させる、有償行為をするのはご遠慮ください。

4.禁止行為

以下の行為が見られた場合は、個別のご連絡や法的処置などといった対応をとらせていただく場合があります。

A.二次利用・加工・改変

本サイトの画像・イラスト・文章・ブログレイアウトなどの悪意ある二次利用・加工・改変行為や、信用毀損・反社会的など、社会通念上問題のある目的での利用。

B.不適切な拡散

特定のキーワードや文面に反応するなど、不適切な拡散行為の禁止(誤った解釈のみならず、〈自他問わず〉いわれなき風評被害や誹謗中傷につながる恐れがあるため)。

C.誹謗中傷

当サイト・他者・企業などを誹謗中傷する目的での引用。また煽り・マウント行為といった、意見・提起・指摘ではなく、人格・風評を著しくおとしめようとする行動も含む。

5.著作権

当サイトは著作権の侵害を目的とするものではありません。

画面のスクリーンショットや二次創作物の知的所有権はそれぞれの権利者・団体に帰属しており、各利用規約を確認した上で掲載しています。

有料二次創作は権利元の創作ガイドラインを厳守するように努めていますが、問題があれば当サイトのお問い合わせよりご報告ください。

6.トラブル

当サイト記事のシェアなどが要因で発生したトラブルなどについては、一切の責任を負いかねます。あくまでも参考・一意見として扱ってください。

当管理者まで直接ご意見・ご指摘を希望される場合は当サイトのお問い合わせからご連絡願います。

制定日:2017/2/24
改定日:2023/6/5

シェア・引用の前に「規約・ポリシー」をご一読ください(同意したものとみなします)。

特定の単語・見出しで拡散、他者を誹謗中傷・マウント・バッシング目的のシェアは固くお断りいたします。

シェア内容が問題だと判断した際、個別にご連絡を差し上げる場合があります。

社会通念上のモラル・リテラシー・マナーを守っていれば、ご連絡をすることはございません。シェア・引用をしていただき、誠にありがとうございます。

プロフィール

    • フキダシ2
    • 赤竹ただきちTadakichi Akatake
  • 岩橋良昌氏と真木よう子氏のエアガンで撃った撃ってない論争で学ぶべきは、「大人の対応ができないリテラシーの低い人たちが、SNSをやるとどうなるか」の教訓じゃなかろうか。

    わざわざ火種になることを書く上に売り言葉買い言葉、相手を「重度の精神障害」と刺激させる弁解もいただけない。片方を鵜呑みにして当事者を人格否定するユーザーも論外。

    どちらが真実かという事実確認は第三者の外野がすべきではないとして、40過ぎた社会人同士が、大人の対応が出来ていなければSNSのリスクも理解していない事実の部分は問題ね。

    そういう人がSNSで気軽に発信できてしまうのが今の時代。自分の記事を愛読してくれてる人は、こうはならないように一緒に学んでいきたいと思う。

イラストレーター・コーダー+WEBデザイナー・ライターの京都生まれなウサギ好き。多様な絵柄を描け、外国人でも絵でわかるマンガ、ウサギと口内描写にこだわりを持つ。

コーディングとWebデザインは両方可能。案件によっては「デザインとコーディングの同時進行」の荒業もおこない、SEOを意識したマークアップも得意。

「自省・リテラシー向上・正しい批判」をライフワークとし、当サイト記事も「中学生でもわかりやすい、気づき・理解・学ぶ」を全体テーマとして執筆。

これは微力ながら閲覧者に考える・学ぶ助力のほか、自身も学ぶ目的も含み、実社会・ネット・SNSでも「わかりやすく参考になった」とご好評の声多数。

「下手でも自分の弱さを認め、自省し学び、その姿勢を相手への敬意として表すことも忘れない人」は、年齢・性別問わず好きなタイプ。

自省についての解説を読む

リテラシーについての解説を読む

正しい批判についての解説を読む