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