Webディレクターになるには?調べるなら【ディレタマ】 » 「Webディレクターとは?」なんでも事典 奥深きWebディレクターの世界 » WebディレクターとWeb制作工程 » サイトコーディングと
Webディレクターの役割

サイトコーディングと
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の機能についてもある程度は理解しておきましょう。
コーダーとのコミュニケーションも円滑になります。

Point
【ひとこと】指示書の作成と
スケジュール管理をしっかりと!

コーディング作業をスムーズに進めるためにWebディレクターが心がけたいのは、適切な指示書の作成とスケジュール管理。
こちらの意図がWebコーダーにしっかりと伝わるような指示書を作り、そして問題なく作業を進めてもらえるような環境づくりに努めましょう。また、コーディングについて自主的に勉強するという姿勢も忘れずに。

なお、私たち全研本社のWeb制作現場には、CSSやHTMLの知識を持っているコーディングマスターも在籍しているため、内製でコーディングを進めるケースも多々あります。コーディングマスターによるコーディング研修も行っていますので、基礎から学べて長く役立つ知識が手に入りますよ。

未経験からWebディレクターに
なれる会社の求人を見てみる!

新人Webディレクターの働く現場に突撃!
デスクでカメラ目線で微笑むさとゆり
先輩とミーティング中のさとゆり
構成ラフ考え中… 先輩とミーティング

「Webサイト制作ってどう進めているの?」
「Webディレクターはどんな仕事をするの?」
 これを読めばイメージが掴めます!

クライアントの課題解決のために、市場を分析、ターゲットを設定して企画を練り、コンテンツを創るWebディレクター。…と言われても、「Web制作がよくわからないから、いまいちイメージが湧かない!」という皆さんに、新人Webディレクターの一日を追いかけながら、Web制作の現場やWebディレクターの仕事の一部をご紹介します♪

hello 新人Webディレクターさとゆり
新人Webディレクター

さとゆり

前職はラジオディレクター兼ライター。Web業界未経験でWebディレクターになり丸1年♪ガッツと取材力が武器!

デスクでカメラ目線で微笑むさとゆり
先輩とミーティング中のさとゆり
構成ラフ考え中… 先輩とミーティング