サイトコーディングと
Webディレクターの役割

Webサイト制作で必須となるコーディング。
専門家であるWebコーダーに作業をしてもらうのが一般的ですが、Webディレクターの役割としてはどのような指示を出したら良いのでしょうか。そのポイントをまとめました。

サイトコーディングとは？

コーディングとは、サイト制作の指示書に沿ってソースコードを書く作業です。
コーディングでは、HTMLやCSSなどのマークアップ言語・プログラミング言語を用い、Webサイトの設計図となるデータファイルを作成。ブラウザでWebサイトを閲覧できる形に仕上げていきます。

このコーディングで必須となるのがマークアップ言語とプログラミング言語ですが、主な種類には以下のようなものがあります。

HTMLとは？

Webページを作成するために用いられる最も基本的なマークアップ言語。HTMLタグを使ってサイト上に文字や画像を表示させ、サイトの土台を作っていくものです。
一般的なブラウザで目にするWebサイトのほとんどは、このHTMLを使って作られています。

CSSとは？

CSSとは、Webサイトのレイアウトやデザインなどを指定する言語。HTMLと組み合わせて使うもので、HTMLで作成した文章や見出しのカラー・背景色・サイズなどを変更するときに使用します。

PHPとは？

PHPとは、Webページに動的な指示を与えるためのプログラミング言語。新着記事を自動的にトップページに表示させたり、問い合わせフォームを生成したりするときなどに使用します。HTMLと組み合わせられるのも特徴です。

サイトコーディング時の
Webディレクターの役割は？

サイトコーディングの技術を持ったWebディレクターもいますが、プロジェクト全体を監督するWebディレクターがサイトコーディングにかかりきりになるわけにはいきません。
そのため、実際の作業は専門のWebコーダーに依頼するのが一般的です。 Webディレクターはプログラムの詳細を指示書（仕様書）に記載し、コーダーに渡すのが仕事。
これはサイトコーディングの知識があまりなくてもできますが、HTMLやCSSといった基本的な知識はあった方がより精度の高い指示書が書けます。作りたいサイトのイメージを伝えやすくなり、より具体的な依頼が出せるようになるため、基礎だけでも勉強しておくと役立つでしょう。

サイトコーディングの
ディレクションの流れ

Webディレクターの役割であるコーディングディレクションには、どのような作業が含まれるのでしょうか。スムーズに指示を出せるよう、流れを把握しておきましょう。

デザインFIX～
コーディング指示書作成

Webサイトのデザインがあがってきたら、Webディレクターが確認したのち、クライアントにチェックしてもらいます。ここでデザインがFIX（最終決定）したら、いよいよコーディング作業に移ります。

コーディング指示書には、デバイステキストの指示・JavaScriptの指定・実装して欲しい機能など、Webサイトをどう作りたいかをすべて記載。文書でうまく伝えられない場合は、参考となるデザインデータを添付するようにします。指示書の内容通りにコーディング作業が進むため、分かりやすく明確な指示書を作成しましょう。

コーダーへ依頼

指示書と同時に、ワイヤーフレーム・テキスト・画像・デザインのパーツなどをひとまとめにし、Webコーダーへコーディングを依頼します。
ファイル名のつけ方・画像の保存形式・パスの指定方法など、制作上のルールについても決めておくと良いでしょう。

コーディング内容のチェック

コーディングが完了したらテストサーバーにアップロードし、ブラウザで閲覧できるかどうかをチェック。

崩れやエラーがないかを確認したり、コンテンツの余白や文字サイズなど、細かな調整箇所がないかチェックしたりしていきます。
クライアントにも作成したページを見てもらい、問題があれば修正を行います。

サイトコーディングの
ディレクションでのポイントと注意点

Webディレクターが気をつけたい、コーディングディレクションの注意点をまとめました。

スケジュールの把握と管理を徹底する

コーディング作業が終わらなければ、Webサイトは公開できません。スケジュール通りにプロジェクトを進めるためにも、スケジュールの把握と管理は徹底的に行いましょう。
進捗状況をこまめにチェックし、必要があれば適宜スケジュール調整を行うようにしてください。

クライアントにルールを確認する

どのようなWebサイトを制作するか、そのルールをクライアントに確認しておきましょう。
サイトが完成してから「ここを変更したい」などといわれると、コーディングだけでなくデザインからやり直しになることもあります。

最低限コーディングの基礎を
身につけておく

コーディングの知識や技術がなくてもディレクションはできますが、やはり具体的な指示を出すためにもコーディングの基礎くらいは身につけておきたいもの。HTML・CSSはもちろん、PHPやJavaScriptの機能についてもある程度は理解しておきましょう。
コーダーとのコミュニケーションも円滑になります。