HTMLコーディングとは

Webサイト(ホームページ)の制作には、様々な作業工程が存在します。
テクノロジやトレンドの変化に伴い、Webサイトに関する表現手段や方法も多様化する中、Webサイト制作の現場においてもその作業工程は細分化されてきており、かつ専門化してきています。したがって、それぞれ得意な領域ごとに企業もしくは担当が分業する場合も多くなってきています。Webサイト制作全体の流れは、大きく以下のようになります。

HTMLコーディングとは

コーディングとは、本来プログラミング言語を使ってソフトウェアの設計図にあたるソースコードを作成することを言いますが、Webサイト制作におけるHTMLコーディングは、HTMLやCSSのマークアップ言語やJavascriptを用いて、デザイン通りの見た目になるようコードを記述し、ブラウザで表示できる状態とすることを指します。HTMLにはバージョンがあり、2017年現在で最新のバージョンはHTML5となります。そのひとつ前であるHTML4.01も未だに根強く、少し前に作成されたサイトはHTML4.01でコーディングされていることも珍しくありません。ちなみにHTMLコーディングを行う人は一般的にコーダーと呼ばれます。

以前までは静的サイトという、各ページをベタ打ちで作ったサイトが主流でしたが、近年ではコンテンツの管理・構築が容易なCMS(コンテンツ マネジメント システム)を使用するケースが増えており、その導入からテンプレートの作成などもHTMLコーディング作業の工程に組み込まれるようになりました。また、検索エンジンでもアルゴリズムの変更があり、SEOの観点からもHTMLコーディングの品質が重要視されています。

どういうことかと言うと、見た目は同じでも中身のコード記述が雑なサイトなどは検索結果に悪影響を与えることもあるのです。そこにWordPressやEC-CUBEといったCMS導入すると、正しいコーディングで統一されたテンプレートを生成することができるので、SEO的にも有利なサイトにすることができます。現在無料・有料問わずたくさんのCMSが世に出ており、無料であっても高機能なものもあります。さらにプラグインと呼ばれる拡張機能もどんどん開発されているので、そういったCMSの特性を理解することもHTMLコーディングの知識として含まれるようになってきました。

HTMLとは

HTMLとは、Webサイトを形成・表示するための基礎となるマークアップ言語です。ブラウザ上で表示させるページのタイトルや見出し・本文・画像などの文書構造・骨組みを作るために使用されています。それぞれのテキストをタイトルや見出しの位置付けとなるタグで囲むことで、コンピュータに文章の意味が伝わり、検索エンジンもページに書いてある内容を把握する事ができます。

さらに、一般的にスタイルシート(CSS)も用いますが、CSSはタグで囲まれた文書構造を閲覧するユーザーが見やすく理解しやすく伝えるために、レイアウトを整えるために使用されます。HTMLコーディングとは、HTMLとCSSを両方用いることで、文書構造とレイアウトを効率的に整えることを指します。そうすることにより、ユーザーから見やすいページとなり、制作側が伝えたい事も効率よくユーザーに伝えることができます。最新バージョンとなるHTML5では音声やグラフィック、動画の実装が以前より容易になっており、今後の様々な機能の追加が期待されています。

HTMLの歴史

HTMLは、1989年にスイス・ジュネーブにあるCERN(欧州原子核研究機構)で誕生します。CERNは欧州12か国が共同で研究を行う機関です。この当時、何千もの研究者の間でお互いの研究の状況の確認・資料の共有を効率よく行える環境を整える必要がありました。そこで、www(World Wide Web)システムが開発され、世界で初めてのサーバーとブラウザが誕生します。膨大な量の研究論文資料を蓄積させ、その中から必要な情報をブラウザに表示させる仕組みが整い、各情報ページ同士をリンクさせて他のページへ行き来できるような、現在のWebの形が始まり、このページ間をリンクすることができるハイパーテキストを記述するために、マークアップ言語であるSGMLをベースとしてHTML(Hypertext Markup Language)が作られました。

HTMLはとても複雑だったSGMLをより簡潔にし、汎用性をもたせた言語として受け入れられていきます。その仕組みもシンプルで、基本的にテキストをタグで囲み、コンピュータにそのテキストの意味・重要度等の文書構成を認識させる仕組みでした。しかし、1995年以降から、インターネットが爆発的に普及し始め、それに伴ってWebブラウザやWebページの発展が進み、レイアウト・デザイン等の見た目が進化していきます。結果、従来の文書構造として使用方法のままだとHTML、CSSともに記述内容が煩雑になってしまったのです。

そこで、W3Cは煩雑化するHTML・CSSの記述のルールを見直し、HTMLバージョン4.01でHTMLコードは本文を、レイアウトやスタイルはCSSを使用するよう推奨されることになりました。

時代は進み、現在ではHTML5が生まれています。HTML5では、今まで複雑だったWeb上での動画表示などもHTMLのタグの記述で出来るようになるなど大きく発展しています。しかし、全てのサイトがHTML5になったわけではなく、一昔前に作成されたHTML4.01サイトもまだまだ残っています。HTML コーディングでは最新のHTML5はもちろん、HTML4.01もきちんと知っておく必要があります。

Web制作会社が行う制作の流れ

企画

ディレクションとも呼ばれる部分です。まずお客様からの問い合わせ・制作の依頼が入ると内容の確認やミーティングがスタートします。クライアントの業種や希望のデザイン、機能、予算や、Webサイトを制作する目的など、どのようなWebをイメージされているかを確認し、企画書が出来上がります。そしてその企画書を中心に、さらに相互の細い認識をすり合わせていきます。小さなサイトやランディングページを1枚作る程度だと、ざっくり進められることも少なくありませんが、大規模なサイトだと複数のメンバーが数ヶ月稼働することもあり、認識の相違があるままスタートすることはかなり危険です。クライアントからOKが出ると、正式に契約を結び、Web制作がスタートしていきます。

ガイドライン作成

Web制作を具体的に進めて行くうえで、ディレクトリマップのようなWebサイト全体の設計図が必要となります。そのためWeb制作会社はWebサイトの構成・構築を行うために基本的なガイドラインを作成します。

Webサイト全体の遷移図・UI(見た目)やUX(見やすさ・使いやすさ)などの図式化、テキストや写真の必要なものを事前にリスト化して把握するなど、作業に無駄な時間をかけないようにするため、Web制作の現場では必須の作業となります。また、実際にページ内にどのようなコンテンツを配置するか大まかなレイアウトを決めるワイヤーフレームも、このガイドラインと合わせて作成されます。

デザイン

作成されたワイヤーフレームとガイドラインを元に、WebデザイナーがWebサイトのデザインを作成します。
photoshopやillustratorを使って、主にTOPページと下層ページの2枚のデザインデータを作成していくのが一般的です。最近は多くのWebサイトがスマートフォンを意識しており、スマートフォン用のデザインデータも並行して作成する事が増えています。フリーランスのWeb制作者はデザイナーも兼ねることがありますが、効率化のために分業制を進めているWeb制作会社などはデザイナーとHTMLコーダーは別になっていることが多いです。

コーディング

作成したデザインデータがクライアントに了承されると、実際にデザインデータ通りのWebサイトを作成するHTMLコーディング作業を行います。最近は色々な動きやスタイルを使用するサイトが増えているため、HTMLコーディング作業にもJavascriptの実装が含まれています。また、メンテナンス性やサイト管理の簡素化のためCMS導入が主流となっており、その設定やテンプレート作成なども当然HTMLコーディング作業に含まれています。HTMLコーダーの作業量が以前に比べて増えており、社内でリソースが確保できないWeb制作会社も少なくありません。そのような時はHTMLコーディングの作業を外部に代行することも多く、ディレクションまでは自社もしくはディレクターが行い、制作は外注により代行をする、という制作会社も珍しくありません。

動作確認・サーバーへアップ・公開・納品

HTMLコーディング作業後のWebサイトは、複数のブラウザで問題なく同じように表示されているかチェックされます。チェックが問題なければ、サーバーのテスト環境へのアップロードを行い、最終確認が終わると本番環境へアップロードされ、納品されます。要望があった際は、サーバーの準備・ドメインの設定やECサイトの決済システムの導入などもWeb制作会社にて行います。小規模なサイトやHTMLメルマガなどはHTMLファイルでやり取りされることもあります。

運用・保守

クライアントによっては、ニュースリリースやコンテンツ追加があった時のWebサイトの更新作業、Webサイトの運営を代行する運用・保守までWeb制作会社に依頼することがあります。ECサイトでは頻繁に入れ替わる商品のデータを登録したり、企業サイトでは人事異動の情報を更新したり、採用情報を追加したりと、Webサイトは作ったら終わりではないからです。SEO対策の観点からも定期的な更新は検索結果に有利に働きます。ちなみに、CMSを導入すると、HTMLの知識が無い方であっても、基本的な修正・更新作業が簡単になり、外注が不要となります。HTMLレベルで修正が必要となる箇所が発生した場合、HTMLコーディングを外注することになってもCMSのおかげで作業がある程度一律化しているので、外注費用を削減することができます。

HTMLコーディングの代行に特化したシーサーコーディング

時代の変化に伴い、Web制作は複雑化しています。専門のWeb制作会社でも分業制を進めており、そもそも全工程を1つの会社で行うケースは減りつつあります。特にデザイン以降の段階ではSEO対策も意識したHTML、CSSの知識が求められています。さらにユーザビリティ向上に有効な動きを実装するためには、Javascriptについても理解が必要となります。HTMLおよびHTML5コーディングの工程は、専門のコーディング知識だけではなく、CMSの選定~組み込み・テンプレートの作成などが必須ですが、全体の流れの中では比較的容易に切り出せるため、外注先を探している制作会社が増えています。

HTMLコーディングサービス「シーサーコーディング」は、Web制作の中でもHTMLコーディングの工程に特化しており、完全オンライン対応にて、ハイクオリティ・ローコストで代行いたします。もちろんHTML5も対応可能です。ディレクションやデザイン以降のリソースに不安を感じている、小ロットだがなるべく安く代行を依頼したい、といったご要望がありましたらぜひお気軽にご相談ください。

   

HTMLコーディング代行サービス「シーサーコーディング」は、完全オンライン対応により、お客様に合った高品質・低価格のHTMLコーディングを実現します。まずはお気軽にご相談下さい。

Copyright © 2017 CyberTech Okinawa. All Rights Reserved.

レスポンシブ用メニューボタン