【現役が語る】嫌われるWebデザイナーにならないために【コーディング】｜ウマコセドットコム

さまざまな社内スタッフや外注の方をつうじて、「好かれる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がモバイル版とPC版を分離する事を発表！数ヶ月以内に実施の予定｜モバイル時代のSEO情報ブログ
スマホで見られないページは2021年にグーグルから消える!? MFI強制移行で【SEO情報まとめ】｜impress
Androidで明朝体フォントを表示させる方法｜will style.
フォントサイズはSEOに影響する！？｜Giga Forest
【スマホEFO】マウスオーバー表現がなくてもわかりやすいUIを作るコツ｜UI改善ブログ

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デザイナーになる場合は何をすればいいのか、この実体験が参考になれば幸いです。

寄付・ご支援のお願い

当サイトはみなさまの寄付・ご支援により、広告なしの実現やサイト運営・維持をおこなっています。

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

サイトに寄付する
Ofuse
¥550-

寄付に登録・ログインは不要です。文章を書かなくてもスタンプだけの寄付もできます。

記事の原寸大作品、サンプル黒塗り無しは支援サイトで閲覧できます。

FANBOXは表現規制・規約変更により作品が非公開になる場合があります。

支援サイトについて

プロフィール

赤竹ただきちTadakichi Akatake

仕事で「YMYL（医療・健康・お金）記事をほぼ生成AI任せに書く」という、「これありえないだろ……」という他社事案に遭遇し驚きを隠せない。

というのもGoogleは2016年にWelq事件があったから、YMYL記事は独自性・信ぴょう性を厳しくチェックするようになっているんだよね。

それにYMYL記事を生成AI任せに書くとペナルティになる可能性も発表していて、こういった記事では生成AIを使うのはいいにしても、検証・監修で補完することが必須。

これを理解せず「SEOを上げるお手伝いをします！」という業者がやるんだから、いくらなんでもリテラシーが低すぎる。それで検索ペナルティを受けたら損害賠償モノなんだけどなぁ。

イラストレーター・マークアップエンジニア（コーダー）・Webデザイナー・ライターのウサギ好き。多様な絵柄を描け、外国人でも絵でわかるマンガ、ウサギと口内描写にこだわりを持つ。

コーディングとWebデザインは両方可能。納期が短いなどいった案件では、「デザインとコーディングのアドリブ同時進行」という荒業もおこない、SEO施策を意識したマークアップも得意。

フリーランスとの進行ディレクション・指示や、面接担当の経験が幾度もあり、プロ・趣味問わず、絵描きを含めたクリエイティブの姿勢には少々シビア。

「自省・リテラシー・正しい批判の認知・意識向上」をライフワークとし、当サイト記事も「気づき・理解・学ぶ」を全体テーマとして執筆。

当サイトの記事は中学生でも理解できるように計算しながら執筆しており、ネット・SNS上で「わかりやすく参考になる」とご好評の声多数。

「言い訳せずに下手でも自分の弱さを認め、背かず自省して学ぶ意識を忘れない（＝謙虚な）人」は、年齢・性別問わず好きなタイプ。

【現役が語る】iOSブラウザは現代のIE6かもしれない【Webデザイン】

【考察】読解力がない人、文章が読めない人は攻撃的になりやすい？【機能的非識字】

記事一覧