WEBデザイナーがコーディングまで担当する理由って何だと思いますか？
緊急事態宣言毎にスニーカーを一足購入するようにしている、デザイナーK改め…デザイナー眼鏡です👓
おかげさまでデザインチーム内からnoteを執筆するデザイナーが増えてきたのですが…「イニシャルバッティング問題」が発生したため、今後は各自HNを名乗るようにしました。
是非弊社にご縁があった場合は私の特徴的な眼鏡をご確認してください///
さて！現在私はデザインチーム採用に携わっているのですが、本当に素晴らしい応募を多数いただき、書類選考をしながら刺激をうける今日この頃です。
しかし！素晴らしいポートフォリオながら泣く泣く選考対象外にせざるを得ない場合もあります…それは何か？
「コーディング経験が無いWEBデザイナーさん」
です。
私もエイシスに入社する前は、分業体制の会社が多かったのですが、エイシスデザイナーは基本的に「デザイン」「コーディング」を行っています。
何故WEBデザイナーがコーディングまで担当する必要性があるのか？
転職活動をされていて気になっている方も多いと思うので言語化してみたいと思います。
1. UI/UXを考慮したデザインができる。
デザインしたページを、WEBブラウザで表示するために必要なマークアップをすることをコーディングといいます。
大事なのは「どんな閲覧環境下でも同じ表示ができる」です。
※よく紙媒体と比較されますね…。
余談ですが私も昔DTPチックなLPサイトを作りこみすぎ…コーディング時間とのトレードオフを考慮し、ページ全体を等間隔にスライスで切り書き出していた過去もあります…orz
入社間もない頃の案件でコードも酷いですが成仏がてら晒します👇
(※こちらは英語サイトのLPページになります。)
素敵なデザインを作っても、コーディング不可なデザインはブラウザ上で表示（再現/実現）できません、しかしコーディングが出来るデザイナーであれば下記メリットがあります！
①「コーディングで実現可能かどうかの判断ができる🔭」
②「デザイン・コーディングどちらの特性も考慮したデザインができるので、デザインの幅が広がる🌎」
またWEBサイトは「スマホ」「タブレット」「PCなど」さまざまな端末で閲覧されます。
ディスプレイサイズによってレイアウトが変わるレスポンシブページ制作もコーディング知識がないと、スマホ・タブレット・PCの3種類の差分デザインを作る事態になりかねません…。これでは時間が足りませんね。
現在20代は自宅にPCは所持せず、スマホだけ所有というケースも多いです。コーディング知識があれば「スマホ」「タブレット」「PC」ユーザーを取りこぼさないサイトデザインがひとつのデザインで実現できるので生産性も向上します。
2. 時間短縮につながる。
分業体制の組織にいた頃は、コーダーにデザインを渡す時に大量の指示をしなければなりませんでした…例えば…
❓画像の書き出し形式は？サイズは？色数は？
（JPG？PNG？透過？画質は？200％書き出しでスマホでも流用？）
❓文字についての指示について色々
（カラーコード全部用意してください！見出しの文字サイズは？
行間指定はいくつ？）
❓ラベルの数は？クラス名はどうつける？
❓数字を流し込む場合”、”は必要か？不要か？
（1000pt？、1,000pt？）
❓長文テキストが流し込まれた場合の処理は？
（改行するの？三点リーダー処理？）
❓マウスをホバーした時の変化は？
（色を変えるの？opacityで半透明化？）
❓CSSアニメーションの細かな動きは？
（当時スケブに絵コンテやGIFアニメを用いて説明をしていました///）
渡したデザインを阿吽の呼吸でコーディングしてもらえるのは稀なケースです。
現在XD等プロトタイプツールである程度の指示ができますが、デザイナーがコーディングも担うことで、極論その指示設定の工数を削減できます。
CSSアニメーションを実装する際も、「素材画像」を作れちゃうデザイナーがコーディングで設定できた方がクオリティもスピードも上がります。
（リテイクも当然減りますね♪）
「時短」に繋がるという事は…デザイン準備段階で「調査」や「調整」の時間を割けることが実現できますね！
3. SEOに強いサイトを作れる。
せっかく素敵なページを作成しても、アクセスされなければ市場価値は上がりません…デザイン時にしっかりSEOを考慮した作りをし、コーディング時にSEOに適したマークアップをすることで大衆の目に入りやすくなります。
関連してページのmetaデータなどもデザイナーが設定することで、表記揺れを防ぐこともでき、チェックやリテイクの工数も削減できます。
4. 自分自身のキャリアに繋がる。
結局の所、行動は自分自身に還ってきます。
将来ディレクション等に転属する場合も、フリーランス転向や会社を転職する時もコーディングが出来るデザイナーであれば、可能性は広がるのではないでしょうか？
そして、もし分業体制の会社に転職する場合は、
「ユーザーとコーダーに寄り添えるデザインを意識して作れる」
とても働きやすいと評されるデザイナーになっているはずです。
5. コーディングが「苦手」だと、ご縁はないの？
そんなことはありません！
弊社では基本的なコーディングを理解していればOKです！
デザインチームでも
「デザインが得意なメンバー」
「コーディングが得意なメンバー」
さまざまな人材が属しています。
コーディングや設計が強いメンバーは苦手なメンバーに対して、
→ 定期的に勉強会などを開催しスキルアップ！
→ 気楽にチャットやビデオツールでサポート対応！
→ 成果物の「コードレビュー」で安心のチェック体制！
を実践しております。
また、同じチームにFE（フロントエンドエンジニア）がいますので、CSS設計やJSなどを頼れる環境があるのも強みです！
「JSは良くわからないけど、この参考サイトの動きを真似してみたい…」
そんな場合もFEが快く協力してくれますよ！
まとめ
1. UI/UXを考慮したデザインができる。
2. コーダー用に指示書が不要のため工数削減につながる。
3. SEOに強いサイトを作れる。
4. 自分自身のキャリアに繋がる。
5. コーディングが苦手でも大丈夫！
エイシスでは勉強会やサポートでカバーします。
エイシスでは新サービスを立ち上げています
コーディングが苦手でも大丈夫！百戦錬磨の諸先輩たちが優しく教えてくれる株式会社エイシスでは、秋葉原から世界へ二次元コンテンツを共に盛り上げていく仲間を募集しています。
「新サービスを立ち上げていきたい！」「新しいサービスのデザインに携わりたい！」などデザインチームの仕事やエイシスの社風に興味をお持ちいただけましたら是非お気軽にご応募くださいませ。
この記事が気に入ったらサポートをしてみませんか？