通常Webサイトを作る場合においては、デザイナーやコーダーなど様々な役割の人が関わりますが、フリーランスのWebデザイナーなどの中にはすべてを一人でこなす人も多くいます。そこで今回は「Webデザイナーだけど、コーダーにも興味がある」、「独学でやっているが、方法として問題ないか？」といった疑問や悩みを減らすべく、現役Webコーダーが普段から気をつけていることを前・後編にわけ、ご紹介して行きたいと思います。
目次
■下準備として必須なコーディング環境はどうしている？
Webコーダーがコーディングの際に使用している環境は主に2つあります。
- Adobe Dreamweaver
- Webサイトのローカル環境構築のためのMAMP(Mac)やXAMPP(Windows)
その他にも”Dreamweaver”の代わりにフリーのコーディングソフトを使うコーダーもいますが、Webデザイナーの方からすると通常Adobe製品の”Illustrator”や”Photoshop”を使っているかと思うので、Dreamweaverのほうが使いやすいかと思います。
ローカル環境に関しては、使っているOSが「Mac」か「Windows」かで使用ソフトが変わります。
どちらも自分のパソコンにWebサーバーと同じ環境を作ることができるので、直接サーバーにあげながらコーディングするのではなく、まずはローカル環境でサイト構築して最終的にWebサーバーにUPします。
■WebディレクターとWebデザイナーとの意識合わせ
Webコーダーはイメージ写真などでもあるように、一見１日中黒い画面と向き合ってずっとキーボードを打っているかのイメージもあるかもしれませんが、分業の場合はWebデザイナーやWebディレクターと頻繁にミーティングを行います。
その際に大事なのが、「デザイナーが作った内容がコーディングする上で問題のないデータになっているか」や「サイトの動きとしてコーディングに問題がないか」をチェックしたり、クライアントからの要望や動きがあれば「それは事実上可能なのか？」可能であるならば「デザインとして、コーディングとしての方向性はどうしたらよいか」などの全体の連携と構成の確認が大切になります。
当然おわかりだと思いますが、これはコーダーだけではなくデザイナーにも言えることで、デザイン上ではコーディングのことも頭にいれながら、コーダーの意見も取り入れてデザインをまとめていく必要があるのです。
■Webデザイナーからのデザインをスライスする前に気を付けたいこと
仕上がったデザインを確認後、まず、すぐにスライスしないようにしましょう。
全体を確認しながら見出しやリストになる部分など、コーディングする際にどのような構造にしていくか？をイメージして整理する必要があります。
筆者の場合は渡されたデザインデータに、コーディングする時のイメージを直接デザインに書き込んだりしています。
デザインも自分で行う場合は、デザイン時からコーディングのことも考えつつ、デザインとしては成立するがコーディングする場合には問題ないか、という疑問意識を持ちながら書き込んだりすることもあります。
そして、IllustratorやPhotoshopのレイヤーわけの際にも、「コーディング順にフォルダを整理」したり「フォルダ名をclass名にする」など、細かいことではありますが、作業を行う上での効率や気遣いを考えながら行う”くせ”をつけておくと、仮に自分以外が作業する場合でも、スムーズに移行しやすく、またミスの防止にも役立ちます。
また、デザインにズレは生じていないか、画像ばかり多用するデザインになっていないか、なども必ずチェックします。デザイン上でのズレは1px程度のものであれば視覚的にも問題ないかもしれませんが、コーディングしていくとたった1pxズレたものが目についてしまうことも多いので、そのようなズレはスライス時に必ず確認し、修正しておくようにしましょう。
■まとめ
実際、コーディングをしていくとWebデザイナーの時は気づかなかったことや、コーディングとデザインをすることの両視点から見られるようになっていきます。そして、どこに注意をしておかなければならないか”見た目”と”構築”のバランスなどもわかるようになり、自分以外の人に仕事を振る場合や、最終的にディレクターとしてのスキルアップなどにも役立つことでしょう。
後編では、さらにコーディング時の”HTML”や”CSS”について気をつけておくべきことやコーディング後の再チェックに関することなどをご紹介しようと思います。
