まだWEBデザイナー（＋マークアップコーダー）の仕事をして1年ほどではありますが、さまざまな社内スタッフや外注の方をつうじて、「好かれるWEBデザイナー」と「嫌われるWEBデザイナー」がいることがわかりました。
そして、日本では「嫌われるWEBデザイナー」が意外と少なくありません。
- 「嫌われるWEBデザイナーとは」
- 「なぜ嫌われるのか」
- 「どう気をつけるべきか」
現役WEBデザイナー、またはその業界を目指す方は、（経験は浅いですが）参考にしていただけますと幸いです。
嫌われるWEBデザイナーはコーディングできない
経験者は語る
結論から申しまして、
CHECK!
デザインだけで、コーディングが一切できない（コーディング知識がない）人。これが嫌われるWEBデザイナーの一番の特徴です。
- 【コーディング】HTML・PHP・CSS・Java Scriptなどを用いて、デザインをブラウザ上に実装する業務・スキル。
これは見下しているとか職業差別といったものではなく、様々な経験者の方、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前後。30px未満のボタンは押しにくい。 - 「左右余白が40pxと広すぎる」
→ スマホ実機で見た場合、どう映るかを想像しているかどうか。 - 「WEBフォントなのに、フォント情報を送ってこない」
→ WEBフォントの仕組みを理解していない。デザインとコーディングのフォント挙動は全く違う。
このデザイナーさん自体は悪い方ではなかったですし、仕事自体を全否定したり、叩きたいのではありません。
CHECK!
コーディング知識がないままデザインをするということは、結果的に無駄なやり取りが増えるだけしかない。これって仕事の効率が悪いですし、お互いのためにもなりません。
この指摘に対する返答
さきほど上記の内容を言葉を選んだ大人の対応で指摘をしたところ、
「言われている意図がよくわかりません」
「貴社で調整してください」
「後はおまかせします」
コーディングができないデザイナーのやりとり
この「納品したし、後はご自由に」という考えかたはいただけません。
「自分のデザインに責任を持ちません」と言っているのと同じで、WEBデザインは納品したから終わりではなく、納品してからがスタートです。
今回のケースはそこまでですが、（コーディングできない）WEBデザイナーとコーダーが喧嘩するというのは大なり小なりあり、話が平行線で頭を抱えたこともありました。
DTPとWEBデザインは違う
一緒にされるのは困る
コーディングできないWEBデザイナーに見られるのは、「DTP（チラシ・ポスターなどの印刷物デザイン）とWEBデザインは一緒だと勘違いしている」ことです。
確かに基礎的な部分は同じですけれど、DTPとWEBデザインは目的のみならず、中身も違うことを理解しなければなりません。
- 【ウェブバイタル】極力2.5秒以内に表示させる工夫が必要（LCP）。
- 【ファーストビュー】最初の表示が重要。あらゆるデバイスの縦幅も考慮。
- 【SEO】見出しの構成など、デザイン段階で階層化させ、検索優位性を向上させる。
- 【スマホが主流】2022年現在、GoogleはPCサイトを一切評価しない。
- 【制約問題】グラデーション枠線など、手間や実現できないデザインもある。
- 【ブラウザ問題】iOSとAndroidで挙動が異なる。特にiOSは融通がきかない。
- 【フォント問題】Androidでは明朝体が表示されず、使うならWEBフォント必須。
- 【文字サイズ問題】Googleの規定で、13px以下の文字サイズ多用はNG。10px以下は論外。
- 【ボタンサイズ問題】Apple・Googleの規定では、縦横40px〜44pxが推奨サイズと定めている。
- 【リンクボタン】ホバー（マウスを乗せるとデザインが変わる）は、スマホだとほぼ意味がない。
WEBデザイナーを名乗るなら、コーディング知識のみならず、このあたりの知識は最低限ないと話にならないレベルです。
あと、PhotoShopやillustratorでデザイン作るのは基本的にやめてほしい。コーディングするときめっちゃしんどいから、XDかFigmaにしてくれると嬉しい。
【重要発表】Googleがモバイル版とPC版を分離する事を発表！数ヶ月以内に実施の予定｜モバイル時代のSEO情報ブログ
スマホで見られないページは2021年にグーグルから消える!? MFI強制移行で【SEO情報まとめ】｜impress
Androidで明朝体フォントを表示させる方法｜will style.
フォントサイズはSEOに影響する！？｜Giga Forest
PCデザインをメインに出すのは問題
当サイトも閲覧者の7割は
スマホユーザー
これも知っていただきたいこととして、「PCがメインでスマホがオマケ」みたいなデザインを出すのは、WEBデザイナーとしてかなり問題です。
今の時代はスマホファーストで、GoogleはPCサイトを一切評価しません。
CHECK!
2022年現在は、スマホがメインでPCはオマケ。できるWEBデザイナーは姿勢からして違う
逆にコーディングできるWEBデザイナーのデザインは、デザインセンスがあるのみならず、スマホファーストで考えるし、行間・文字サイズ・余白など、Googleのガイドラインに従っていて規則的・論理的です。
見ていて気持ちがよく、コーディングもしやすいんですよね。コーディング知識があるとないのとでは大きく違います。
WEBデザインはアートではない
アートは自己表現
WEBデザインは宣伝
WEBデザインはアートではありません。プロの人ですら、ここも勘違いしている人が少なからずいます。
CHECK!
ダサくても依頼主が満足し、コーディングがしやすく、ユーザーが使いやすくてSEOで有利かつ結果が出れば、それはいいデザイン。極論ではあるものの、これがWEBデザインの世界です。
もちろん、いいデザインであれば文句なしです。しかしどんなに自分自身が素晴らしいデザインと思っても、依頼主が満足しない、コーダーが苦しむ、ストレスが溜まってSEOが低いデザインは「無価値」と判断されます。
特にこれからWEBデザイナーを目指す人は、混同しないよう注意していただきたいですね。
彼らの一番の被害者は誰か
本当にしんどそう
だったよ…
ここまで記事を読めばわかるかもしれませんが、コーディングを一切考慮していないデザインで一番迷惑がかかるのは、それを請け負うコーダーの人たちです。
入社前の案件で話しますと、サイトにAdobe日本語フォントを5種類（バナーやスライド画像ではなく、文章出力する部分）使用したデザインを提出した人がいて、フロントエンドの人が本気で苦しんでいたそうです。
「WEBデザイナーの人に伝えて。これ本当に大変で迷惑だから」と言われたことを今でも覚えています。
コーディング知識があれば、日本語WEBフォントを2種類より多く使用する時点でダメだとすぐ理解できますし、フォント管理の知識もなく、本当に「DTPと同じ感覚で作っている」から生じた問題です。
なお、WEBフォントにAdobeフォントは使用しないでほしいと思います。権利的な問題がややこしく、Googleフォントのほうが管理も楽で、導入もしやすいですから、そちらをつかってほしいですね。
WEBデザイナーのコーディングはどこまでできればいいのか？
全部やれとは言わない
ここまで、コーディングができないWEBデザイナーについて厳しく言いましたが、
- 「JavaScriptを自作できる」
- 「transformCSSは使えて当然」
- 「keyframeCSSの完全理解」
- 「Sassが使えるのは必須」
と、ここまでは言うつもりありません。ぶっちゃけ自分はJavaScriptが大の苦手で、jQueryを勉強して使っているレベル。
ただ少なくとも、
CHECK!
動き（アニメーション）はいいから、せめてHTML/CSSで自分の作ったデザインを最低限再現できるレベルか、その知識は持ってほしい。WEBデザイナーを名乗りたいなら、ここは最低限できてほしいと切実に思います。
重ねるように、それができるのとできないのとでは、デザインの質が大きく変わりますし、コミュニケーションも円滑です。コーダーの方にも迷惑がかからず、気持ちよく仕事ができるでしょう。
そこからSEO知識やアニメーションの知識を身につければ、市場価値は一気に上がりますね。
最後に：WEBデザイナーとコーダーが喧嘩しないために
経験浅くても
自称できるからね
「嫌われるWEBデザイナー」になってしまうのは、コーディングできない（知識がない）デザイナーであり、一番の被害者は、その無茶ぶりをさせられるコーダーの人たちです。
コーディングできないデザイナーほど、その声をあまり聞こうとせず、他人ごとのように思っている印象を何度も受けました。
日本におけるWEBデザイナーは未経験・無資格でも働け、DTPデザイン経験しかない人でも、WEBデザイナーを「自称」できてしまいます。
だからこのような事態になっているんだろうと思いますし、WEBデザイナーとコーダーが喧嘩してしまうのは、WEB制作業界だとよくあることみたいですね。
ちなみに、「海外ではデザインしかできない人をWEBデザイナーとは呼ばない国もあり、日本のWEBデザイナーはデザインしかできないから、給与が低い」と言われている話もあるそうです。
人や会社によって意見は分かれるでしょうが、この意見は一理あると思います。
CHECK!
WEBデザイナー名乗るならアニメーションはしなくてもいいけど、自分で作ったデザインを自分でコーディングできるぐらいの技量か、知識は持つべきだ。こう言いたくなるのが本音ですし、百歩譲って、学ぼうという姿勢は見せてほしいものです。
嫌われるWEBデザイナーにならないためにどうすればいいのか、これからWEBデザイナーになる場合は何をすればいいのか、この実体験が参考になれば幸いです。
うわっ、日本のWebデザイナーの年収、低すぎ…？｜Stocker.jp
当サイトはみなさまのご支援で、広告なしの実現やコンテンツ維持を行っています。情報がお役に立てたり、気に入った作品がございましたら、ご支援をお願いいたします。
利用規約
個人情報保護
当サイトや赤竹ただきち（以下、当管理者）宛に送られたメールの内容や差出人、アクセス解析で得た個人情報などは、差出人・閲覧者当人の承諾がない限り、当サイト内やほかのサービスで公開することはいたしません。
絵や記事のシェア
当サイトの絵や記事をシェアされる場合、個人サイト・ブログ・サービス・SNSなどを問わず、URLなどを記載して、出典元を明記ください。明記していただければ、ご自由にシェアしていただいて構いません。
ただし、記事の場合は下記の『禁止行為』のとおり、記事を読まない、特定のワードに反応したようなシェア行為はお断りいたします。
記事の引用（転載）ルール
記事内の文章を引用（転載）される場合、URL元を明記した上で引用要素（blockquote）内に記載してください。掲示板やSNSの場合は、文頭に「>」などをつけ、オリジナルコンテンツ（コピーコンテンツ）ではないことを明確にしてください。
要約のための一部改変は、記事の意図を大幅に変えなければ可能とします。
メールの内容・取り扱い
メールはご意見・ご指摘・ご感想・依頼・営業メールのみ受けつけますので、あらかじめご了承ください（当サイトを利用した宣伝・委託行為はお断りいたします）。
下記の『禁止行為』のとおり、メール内容に当管理者や他者へのヘイト行為といった、誹謗中傷が見られた場合、返信を控えさせていただくほか、悪質と判断した場合は法的処置をとる場合があります。
禁止行為
以下の行為が見られた場合は、法的処置などといったしかるべき対応をとらせていただく場合があります。
【二次利用・加工・改変行為の禁止】
本サイト内の画像・イラスト・文章・ブログレイアウトデザインなどの悪意ある二次利用・加工・改変行為や、信用毀損・反社会的・社会通念上問題のある目的での利用。
【二次利用・加工・改変行為の例外】
シェアや引用（転載）のルール遵守など、社会通念上問題がないケースや、または要約のための文章改変・紹介や参考、プレビュー画像としてのスクリーンショット撮影・トリミング（切り取り）しただけの場合は例外として扱う。
【安易な拡散行為の禁止】
特定のキーワードや単語に反応し、記事を読まないままの安易な拡散行為の禁止（誤った解釈のみならず、〈自他問わず〉いわれなき風評被害や誹謗中傷につながる恐れがあるため）。
【誹謗中傷行為の禁止】
当サイト・他者・企業などを誹謗中傷する目的での引用行為。また、当管理者あてのメールやSNSのメッセージ・コメントなどにおいても、意見・指摘ではなく誹謗中傷目的のもの。当管理者や他者の人格・風評を著しくおとしめる行為。
著作権
当サイトは著作権の侵害を目的とするものではありません。スクリーンショットや二次創作物の知的所有権はそれぞれの著作者・団体に帰属しており、各利用規約を確認した上で掲載しています。
有料二次創作に関しては、権利元の創作ガイドラインを厳守するように努めていますが、問題があれば当サイトのお問い合わせよりご報告ください。
オリジナル作品や当サイトのレイアウトデザイン・掲載文章の著作物は当管理者が有しており、『禁止行為』のとおり、シェア・引用（転載）のルールが守られていないもの、悪意ある二次利用・改変行為を禁止します。
トラブル
当サイト記事のシェアなどが要因で発生したトラブルなどについては、一切の責任を負いかねます。あくまでも参考・一意見として扱ってください。
また、直接ご意見・ご指摘を希望される場合は、当サイトのお問い合わせからご連絡願います。
リンクについて
当サイトはリンクフリーですが、バナー画像以外の画像直リンク行為や、インラインフレーム表示は固くお断りいたします。
制定日：2017/2/24
改定日：2022/3/3
シェア・引用をされる前にご一読ください（内容に同意したものとみなします）
