デザイナーがコーディングしてわかったこと

デザインを主に行っている私ですが、コーディングをする事もあります。そこで、デザイナーがコーディングする事で、良いところとデザイン制作で気を付けるべきポイントをコーダー目線で紹介したいと思います。

デザイナーがコーディングすると良いこと！

細かい所に気がつく

自分で作ったデザインカンプを基にコーティングしていくのですが、やはりデザインと実際にブラウザ上で操作してみて、疑問に感じる所も変わって来ると思います。（例えば、ＵＩ的な部分であったり、動きであったりなど）
その違和感に気づく事ができ、瞬時に修正できるのがデザイナーがコーディングをする一番の利点だと思いました。

デバイスの違い意識できる

Webサイトというものは、macであったり、Windows、ブラウザアプリではChromeからSafariなど、見る人の環境というのは人それぞれ違います。また制作する場合も、photoshopなど制作アブリもそうですし、ディスプレイから、ノートパソコンなど作る場合も、環境というのは人によって違ってきます。

デザイナーがコーディングを体験する事で、その違いというものをより理解する事ができ、またデザイン制作時に違いを考慮したデザインを行うことが出来るようになります。

コーダーの気持ちがわかる

デザイナーの気持ちは、デザイナーしかわからない。コーダーの気持ちはコーダーしかわからない。もしかしたら、そうなのかもしれません。それは、実際に体験していないからだと思います。実際にコーディングをしてみると、デザインデータから作っていく時にこういうところが不便だと感じる事が出来ます。

また、デザイナーとコーダーとのコミュニケーションや指示でも、先にこの事を伝えておけばよかったなど、要点がわかった上でのコミュニケーションをとることが出来ます。

コーディング上での修正するのが大変だと知ることが出来る

デザインのカンプ上で治すのと違いをコーディング上でレイアウト変更などするのは大変だと感じました。なので、デザイナー側もクライアント側も気を付けるべきなのですが、極力デザイン段階、またはワイヤーの段階でイメージをしっかりと固めておく必要があると感じました。

デザイン作る上で気を付けるポイント！

Photoshopの書体設定を使わない

例えば、英語の小文字を大文字にする場合、Photoshopの設定で変換できるのですが、基データは小文字なのでコーディング時に打ち直す必要が出てきます。

画像などは書き出しやすいようにする

レイヤーを分けて、色調などを調整する場合最後にグループ化するなど、データをひとつにまとめることで、いちいち選択しなくてすみ、スムーズに画像を書き出すことができます。

余白を揃える（pxを揃える）

構成によっては変わってくると思うのですが、使い回しの出来る場所などは、余白のサイズを揃えておくことで、1つのコードで対応出来るので、スムーズに構築することができます。

まとめ

デザイナーがコーディングを学ぶことで、自分で出来ることが増えるという利点もあるのですが、それ以外に、コーダーへの指示や、やり取りがスムーズにいく、どういうところが困るかなど気持ちがわかるなど、サイトを作る上でのコミュニケーションを円滑に進める事が出来ます。

新しいことにチャレンジするのは大変なこともありますが、それと同時に、得られることも沢山のありそうですね！