こんにちは。ロケッツ四号機です。
コンサルロケッツでは「フロントエンドエンジニア」という肩書きでやらせてもらっています。
仰々しい肩書きですが、つまりは「コーダー」です。
デザイナーが丹精込めて作成したデザインを、HTMLやCSSなどでWeb上に表現（コーディング）する仕事です。
ところで、おおくのWeb制作会社は「分業制」を採用しています。
分業制とは「デザイナーはデザインのみ」「コーダーはコーディングのみ」と、それぞれ各自の業務のみを専門に行うというものです。
分業制にはもちろんメリットが盛りだくさん！しかしそこには「課題」も残されています。
それは「自分の業務に関する知識『以外の』知識に乏しい」というものです。つまり・・・
「コーディングを知らない『デザイナー』」
「デザインを知らない『コーダー』」
われわれコーダーの立場からすると「コーディングを知らない『デザイナー』」の作成したデザインほど、コーディングしづらいものはないと思っています。
全国のWebデザイナーの方々、ホント偉そうなこと言ってすみません・・・けれど、まぎれもない事実！！
たぶん、そう感じているのは自分だけではないはず。
そこで、今回はぜひともWebデザイナーさんに「コーディングに目を向けてほしいな！」ということで、「Webデザイナーがコーディングを覚えるメリット」をご紹介。
■「工数の短縮」に繋がる
やはり一番のメリットは、この「工数の短縮」です。
「お前（コーダー）が遅いから工数かかってんだろーが」と言いたくなる気持ちも分かりますし、実際そういう側面は否定できません・・・。
しかし、コーディングを知らないデザイナーが制作するデザインは、当然ですが「コーディングを意識したデザイン」とは程遠い代物になっていることがほとんど。
たとえば（DTP経験者に多いのですが）単位がピクセル（px）でなくミリ（mm）だったり、カラーモードがRGBではなくCMYKだったり・・・。これは、そのままコーディングにうつることができないため再度デザイナーにデータを修正してもらわねばなりません（そのぶん余計な工数がかかるのは言うまでもない）。
ただ、ここで問題なのは「・・・出来ないことはないけれどコーディング的に無茶」と感じるデザインです。CSSのposition:relativeの多用が必要なデザインや、その他ソースコードに若干のムリ（スマートでないコード）を強いねば実現できないデザインなど「コーディングできなくはないけれど、デザイン通り実現しようとするとかなりの工数が必要」といったデザインを制作しがちなケースが後を絶ちません。
このような事例をあえてコーダー目線でプラスに捉えると、普段使用しない手法や技術でデザインを実現することの達成感を得られなくもないのですが・・・やはり仕事なので「工数」は大切です。
ヴィジュアル的にめちゃくちゃ美しいデザインの作成技術はもちろん必須ですが、その上でなおコーダー含め全体の「工数の短縮」を考慮できるデザイナーこそ、一流の「Webデザイナー」と呼べるのではないでしょうか。
■挙動を実現「できる/できない」の判断を行える
しばしばデザイナーの方々から、このような質問が飛んできます。
「このデザインのココの箇所を、こんな感じでビュイーンと動かしたいんだけど出来る？」
「ここをこんな感じの挙動にしたいんだけど、工数どれくらいかかる？」
このような質問を受けること自体、おそらくどのコーダーもとくに不満はないはずです。
しかし、時々こうも思うのです。
「その判断、デザイナー自身である程度判断できたら、自分自身がラクなのでは？」と。
いちいちコーダーに質問するのも手間（工数の無駄）だったり、ギクシャクした社内では「おめえこんなのもわからねーのかよw」とバカにされる不安が脳裏をよぎったり・・・。
しかしデザイナーがある程度コーディングの知識を身につければ、挙動ありきのデザインを組み立てることができるため、コーダーにデザインを渡す際も「ここを、●●の方法で▲▲の挙動にしてください」と一言添えるだけでOK。
デザイナー自身である程度の「できる/できない」の判断が行えるので、いちいち確認の手間（と気疲れ？）も省くことができます。
ただし特別なスキルを要する場合は、コーダーの技術で賄えるかどうかの相談は行ったほうが良いでしょう。
■挙動をコーダーに「具体的に」伝えることができる
これも先述の項目に通じることなのですが、たとえば「ここをホバーしたら画像がブワン！って表示するようにしたい」といったような、曖昧な言い回しがあったとします。たとえば見本となるサイトと照らし合わせて「ほら！こんな感じ！」と伝えることができればコーダーも「わかった！」となるはずですが、どのサイトをみてもデザイナー自身の思い描く挙動には「惜しい」感じのページしか見当たらない場合、やはり先述のように「曖昧な言い回し」でしか伝えることができず、コーダーもその場合「え？なにそれ？」となってしまいがち。
しかし、コーディングの知識があれば「CSSのAmiationを使えば実現できるはず！ここの要素をこうして・・・」などと伝えることができたり、さらにJavaScript（jQuery）の知識があればより詳細に挙動を伝えることができるかもしれません。
そうすることで、お互いの「認識の齟齬」を最低限におさえることへと繋がるはずです。
■デザインの幅を「広げる」ことができる
Webのみならず、DTPや工業デザイン、建築、ファッション・・・あらゆる「デザイン行為」には「制約（ルール）」がつきものです。またデザインという営みは、この「制約」があるからこそ、評価の対象となり得るし、なによりデザインという営みそのものが唯一無二の「価値」を帯びるのです。
Webの場合、最終的にはソースコードとして出力される「制約」があります。つまりWebデザイナーは、デザインの段階でそのことを見越しておく必要があります。けれども、デザイナーがその「制約」について熟知していない場合、そもそもどこまで、どのようにデザインして良いものかといった「判断の基準」がブレてしまいます。
Webそれ自体の「制約」を遵守することはもちろんのこと「HTML・CSS・JSなどで何が出来るのか？」といったコーディング上の「制約」を知っていれば、よりスキルや幅の広いデザインを組むことができるでしょう。
■社内の「コーディング要員」にもなれる
これは完全に会社都合のメリットかもしれませんが・・・一応。
社内のコーディングリソースが足りない時に、コーダーとしても業務にあたることができるというものです。
本格的なコーディング要員として駆り出されることもあるでしょうが、たとえば「ここのレイアウト崩れてるじゃん！」などの明らかなミスを発見した場合、しかも急ぎの場合は特にいちいちコーダーに頼らなくとも「これなら自分で直せる（けど頼むよマジで・・・）」となります。
■「フリーランス」を目指すならコーディングは必須
もしデザイナーのあなたが将来的にフリーランスのWebデザイナーを目指すのであれば、コーディングの知識は必須です。いざフリーランスで仕事を募集しても「デザインのみ」「コーディングのみ」といった案件よりも圧倒的に「デザイン+コーディング」のセット案件がほとんど。
「将来は独立してフリーでノマドってやる！」と意気込むWebデザイナーは、まず一刻も早くコーディングを覚えましょう。コーディングの出来るデザイナーはまさに「鬼に金棒」。
■さいごに
いかがでしたか？
デザイナーがコーディングを知ることは最終的に「デザインのスキルアップ」に繋がるのです。
自分もこれまでの経験上「コーディングが苦手・・・」というデザイナーの割合が多い印象を受けるのですが、はじめからハイレベルな技術（イチから全部コーディングするなど）に挑むのではなく、まずは基本的なHTMLとCSSについて覚えてみましょう。
そして次にJavaScript（jQuery）で「何ができるのか？」といった概略だけでも知っておくと、かなりスキルアップできると思います。
ちなみにコンサルロケッツのデザイナーは、基本的なコーディングの知識を備えた猛者ばかり。
つまり「鬼に金棒」。
金棒を持った鬼たちが、みなさまからのお問い合わせ、お待ちしております。
