HTMLコーダーの「仕事」と「義務」

2008年12月10日

HTMLコーダーとは

HTMLコーダーとは、(X)HTML(※1)・CSS(※2)などを使用し、ウェブデザイナーがデザインしたものをブラウザ(※3)で見られるように、コードを書く(※4)人のことです。

※1．ウェブページを作成するためのマークアップ言語。
※2．ウェブページのデザイン・レイアウトを定義するための規格。
※3．Internet ExplorerやFirefox・Safariなどの、インターネットを閲覧するために使うソフトのこと。
※4．HTMLコーディングと言います。

HTMLコーダーの仕事

仕事の種類と内容

HTMLコーダーは普段どのような仕事をしているのでしょうか。ここからは仕事の種類と内容について紹介します。

ウェブサイトのHTMLコーディング

冒頭でも触れたように、ウェブデザイナーがデザインしたものをブラウザで見られるようにするためにHTMLコーディングしていきます。

ここで、Internet Explorer・Firefox・Safariなど複数のブラウザへの対応が求められます。

何故なら、ブラウザごとに表示の差違があり、Internet Explorerで表示されたものがSafariでは表示されないということが起こる上に、ユーザーもInternet Explorerだけを使っているだけではないからです。

この複数のブラウザへの対応がHTMLコーディングの一番難しいところであり、これが出来て一人前のHTMLコーダーと言えるところでもあります。

ウェブサイトの更新・保守

ウェブサイト公開後も、文章や画像を修正したり、追加でウェブページを作成したりと、ウェブサイトをより良くしていくための作業が発生します。公開までにかかった時間よりも、この更新・保守作業にかかった時間の方が長いということも珍しくはありません。

そのため、ウェブサイト公開後の更新・保守作業を視野に入れたHTMLコーディングの知識・技術が求められます。

この知識・技術についての具体的なことは別のコラムで書かせていただきます。

HTMLコーディングガイドラインの作成・改編

HTMLコーダー間でのやり取りがスムーズに行えるように、共通のHTMLコーディングガイドラインの作成と、その改編を行います。

一例としてガイドラインとして定めておくべき項目を以下に挙げます。

作成者・編集者署名の入れ方
文字コード
対応ブラウザ
ドキュメントタイプ
コードフォーマット
画像ファイルの命名規則
スタイルの命名規則
外部ファイル（画像やCSSなど）の管理ルール

ガイドラインについての具体的なことは別のコラムで書かせていただきます。

情報収集

仕事として認識することはあまりないかもしれませんが、情報収集も立派な仕事です。
ブラウザのシェアやW3C(※5)の動きは勿論のこと、SEO(※6)やCMS(※7)など親密性の高いものにもアンテナ張り、最新の情報を知っておくことが求められます。

※5．インターネットで利用される技術の標準化をすすめる団体のことです。
※6．サーチエンジン最適化（Search Engine Optimization）の略で、特定のウェブサイトをYahooやGoogleなど検索サイトでの検索結果の上位に表示させるための技術・工夫のことです。
※7．コンテンツマネージメントシステム(Content Management System)の略で、ウェブサイトの構築・管理に使われます。身近なところでいうとブログもCMSの一つです。

※ここからは会社によってHTMLコーダーの仕事か別職種かに分かれます

ウェブアクセシビリティに配慮する

ウェブページが「どんな人でも利用しやすいウェブサイトかどうか」の度合いのことをウェブアクセシビリティと言います。

例えば、視覚障害者の方がスクリーンリーダーを使用してウェブサイトを利用できるように、画像へ代替テキストを設定することや、リンクテキストを「こちら」ではなく、「○○についてはこちら」などといった分かりやすいものにすることでウェブアクセシビリティの高いウェブサイトが出来ます。

これらはHTMLコーディングの仕方に依存する部分が多いため、ウェブアクセシビリティへの配慮もHTMLコーダーに任せられることがあります。

CMSの構築

CMSの構築がある場合、大抵はHTMLコーダーがCMS用のテンプレートを作り、それをプログラマーがCMSに組み込んで構築します。

しかし、それでは伝達ロスが起きて効率が悪いため、CMSの中でも比較的に構築が簡単なブログCMSなどの構築はHTMLコーダーが担当することもあります。

HTMLコーディングの流れ

ここまで仕事の種類と内容について紹介してきました。ここからは実際にどのような流れでHTMLコーディングがされているのか紹介します。

原稿とデザインデータが完成していることを前提とします。

1．HTMLで文書構造のマークアップ: ライターからあがった（またはクライアントからいただいた）原稿の文書構造を考えながらマークアップしていきます。
マークアップとは、原稿の文章に対して
「ここは見出し（h1～h5）、ここは段落（p）、ここはリスト（ulやol）、ここは引用（blockquote）、ここはハイパーリンク（a）」
といった、意味付けをすることです。
2．画像の切り抜き: 次の工程のために、どのような画像が必要なのかを考えてデザインデータから切り抜きます。
3．スタイルシートでデザイン・レイアウトなどの視覚的な表現: 1～2の工程で作成したものを利用し、スタイルシートでデザイン・レイアウト組みをしていきます。この工程でデザイナーがデザインしたものへと一気に近づいていきます。
4．ブラウザチェック: 1～3の工程を経て、それがデザイン通りに表示されるかを複数のブラウザでチェックします。デザイン通りになっていなかった場合は、2～4の工程を繰り返し、完成を目指します。
5．総合チェック
6．完成

一般的にはこのような流れでHTMLコーディングがされ、ウェブページが作られていきます。場合によっては、この流れの中にシステムの組み込みなどが入ります。

HTMLコーダーの義務

様々な仕事がある中で、HTMLコーダーとして負う義務があります。

ミスがないHTMLコーディング

HTMLコーディングのミスは、直接ウェブページとして反映されてしまいます。
前工程まで問題なく進んでいても、ここでミスをしてしまうとすべて台無しになってしまいます。

最終工程を担うものとしてミスのないHTMLコーディングをしましょう。

ウェブサイトのクオリティ

HTMLコーダーは、ライターやデザイナーが作成したものを受け取り、HTMLコーディングという形で組み上げていきます。そのため、各工程で作成したものを一番目にするのもHTMLコーダーです。

ライターが作成した原稿は、文章や文書構造について見ることがありますし、デザインに至っては、フォントの種類・大きさ・色を調べるのは勿論のこと、デザインをピクセル単位で計り、ウェブページを組み上げていきます。

そういう職種だからこそ、各工程でのミスや「こっちの方がいいんじゃないか」を発見してウェブサイトのクオリティ向上を目指しましょう。

ウェブサイトの仕様

ウェブページの実質的な作成者として、ときにはウェブサイトの仕様について質問されることがあります。

そのときに、

対応しているブラウザ
ドキュメントタイプ
使用した文字コード
HTMLコーディングのルール
ディレクトリ構造
ファイルの命名規則
スタイルの命名規則

などの仕様について説明できなければいけません。

やりたいことを実現できる技術を持つ

デザイナーがいくら素晴らしいデザインを作っても、HTMLコーダーがそれを実現できなければ意味がありません。

家を建てる際に、設計者が描いた図面を見て建築者が「できない」というでしょうか。

HTMLコーダーにおいても同じことが言えます。デザイナーがデザインしたものを実現できるよう、常に知識や技術の向上に努めましょう。

ワークフローの改善

HTMLコーダーはウェブサイト制作における最終工程だからこそ気づけることがあります。例えば、「原稿やデザインデータの渡し方をこうすれば効率的に出来る・ミスがなくなる」といった提案を進んで行い、ワークフローの改善に努めましょう。

まとめ

HTMLコーダーといっても、HTMLコーディングが出来ればそれでいいわけではありません。HTMLやCSSと親密性が高い下記の技術や知識についても理解しておく必要があります。

Java scriptやPHPなどのプログラム言語
ブログを初めとするウェブサイトを構築・管理するCMS
SEOやユーザビリティ・アクセシビリティ
ウェブデザイン

これらを理解することで、他職種とのやり取りをスムーズに行えますし、何よりHTMLコーダーとしての価値も上がります。また、これからのHTMLコーダーはこれらの知識を持つだけではなく、実際に使えることが求められて来るのではないでしょうか。