目次
Web制作で必要なコーディングとは？
Web制作におけるコーディングとは、デザインデータをもとに、後述するHTMLやCSSでページの構成や装飾、JavaScriptで動的な変化をつけるコードを書く作業を指します。
Web制作は、デザインを作るだけでは完結しません。デザインをもとにコーディングを行うことで、ブラウザ上でデザイン通りの見た目を再現でき、Webサイトとして実際に公開できます。
Webサイトを公開するために、コーディングは必要不可欠な工程といえます。
Web制作で使う代表的な言語
Webサイトを作るために必要な言語と、それぞれの役割をご紹介します。
HTML
HTML（HyperText Markup Language）とは、Webページをマークアップするために作られた言語です。
マークアップは目印をつけるという意味があり、文章の各部分がどのような役割（見出し・段落・表など）を持つかを、コンピュータが理解できるよう構造的に定義するのがHTMLの役割です。
公開されているWebサイトには、必ずHTMLによって文章構造が定義されています。HTMLを利用することで、ブラウザがページ内の文章構造を理解して、閲覧しやすい形に表示してくれます。
また、検索エンジンにサイト構造を正しく伝えることでSEO対策にも繋がるため、HTMLは適切に利用することが重要です。HTMLはその性質上、マークアップ言語とも呼ばれます。
CSS
CSS（Cascading Style Sheets）とは、Webページを装飾するための言語です。HTMLは文章構造を定義するための言語であるのに対し、CSSはその定義した構造に対しての見栄えを調整できます。
たとえば、文字のサイズや色、配置した画像のサイズや背景色など、HTMLで記述した要素に対して自在に装飾を施せます。また、PCやスマホでサイトデザインを分ける「レスポンシブデザイン」も、CSSを利用することで画面幅に応じたスタイルの設定が可能です。
CSSはその性質上、スタイルシート言語とも呼ばれます。Webサイトのコーディングにあたって、HTMLとCSSは常にセットであると覚えておきましょう。
JavaScript
JavaScriptは、ブラウザ上で動作するプログラミング言語です。HTMLやCSSとは異なり使用は必須ではないものの、Webページに動きを付ける場合には必ず使用します。
たとえば、次のような動的表現をJavaScriptが可能にします。
- 画像をスライドさせる
- 画面上にポップアップでメッセージを表示する
- テキストボックスに入れた項目のエラーチェックを行う
JavaScriptは、HTMLやCSSと比べると難易度は高く、実装可能な機能も数多いです。そのため、開発スピードを上げたり、より効率的なコードでの実装を可能にしたりする「ライブラリ」が提供されています。
汎用的な機能が使いやすくまとめられている「jQuery」や「React.js」などは、人気のライブラリです。
コーディングのポイント
コーディング時には、いくつか押さえておくべきポイントがあります。作業時には考慮に入れておきましょう。
コーディングのルールを守る
コーディング時は、原則、言語の最新バージョンのルールを守りましょう。たとえば、HTMLの標準仕様は2021年1月まで「HTML5」でしたが、現在は「HTML Living Standard」に変わりました。
それぞれ大きな違いはないものの、利用できるタグについての追加や変更があったため、基礎と合わせて最新の標準仕様を把握しましょう。
コーディングの規約に沿ってコーディングする
コーディング規約とは、コーディングの際に遵守するように定められた規約です。たとえば、HTMLやCSSの場合、クラス名の付け方やタグの囲い方、インデント、空白の有無などがコーディング規約として定められています。
また、保守性や品質の確保の観点からも、コーディング規約は重要視されます。企業によっては独自のコーディング規約を設けているところもあり、プロジェクト内での開発を円滑に進めるためにも欠かせません。
HTMLやCSSについてのコーディング規約はGoogleからも発表されているため、保守性を高めるためにも普段のコーディングから意識しましょう。
参考：Google HTML/CSS Style Guide
クロスブラウザチェックする
コーディング後、ブラウザ上で見た目を確認する際は複数のブラウザを使った「クロスブラウザチェック」を行いましょう。Webサイトは、各ブラウザや表示端末ごとの仕様により、コーディング通りの見た目とならないケースがあります。
たとえばGoogle ChromeやFireFoxは、ブラウザごとにmarginやpaddingが独自に設定されている場合があります。「reset.css」などを読み込ませてブラウザの標準スタイルを打ち消すことも可能です。
どのブラウザでも、スタイルが正しく適用されているかは必ず確認しましょう。
コーディングとプログラミングの違い
コードを書くという点では、コーディングとプログラミングは同じものと捉えられがちですが、それぞれ作業範囲に違いがあります。
コーディングは「マークアップ言語やプログラミング言語を使ってソースコードを作成する作業」を指します。
一方、プログラミングは「コーディングの前後にある設計やテスト、デバッグを含めた全般的な作業」という、コーディングも含めた広い作業範囲を指します。
コーディングを行う人をコーダー、プログラミングを行う人をプログラマーと呼びます。コーダーとしての作業も可能なプログラマーと違い、コーダーは必ずしもプログラミングができるとは限りません。
コーディングとデザインの違い
Web制作において、デザインは「Webサイトの表示の見た目を設計する」作業です。一方、コーディングは「設計されたデザインをもとに、それをWebブラウザ上で表示されるようにコードを書く」作業を指します。
そのため、デザインデータがなくてもコーディングだけを行えばWebサイト自体は制作できます。
しかし、実際の制作工程では「クライアントの要望や意見を聞き、デザインに反映させてクライアントに確認してもらう」といったやり取りが発生するため、デザインの工程も欠かせません。
また、デザインデータがあることで、コーディング作業も円滑に進められます。コーディングとデザインは作業内容に大きな違いはありますが、満足度の高いWebサイトを制作するにはどちらも重要な作業工程です。
Webデザイナーもコーディングできたほうがいい？
Webデザイナーの定義は「Webサイトのデザインを行う人」ですが、コーディング業務もできるに越したことはありません。その理由は以下の通りです。
仕事の幅が広がる
Webデザイナーがコーディング業務も行えると、デザインからコーディングまで一貫して同じ人に任せられます。そうすれば、デザイナーからコーダーへの作業伝達時の認識の齟齬などもなく効率的に作業が進められます。
企業としても人件費などのコスト削減が期待できるため、コーディングもできるWebデザイナーは重宝されて仕事の幅が広がります。
Web制作の全体の流れが把握できる
デザインからコーディングまで作業できることで、Web制作全体の流れを把握できます。
全体の流れを把握することで、どの作業にどれくらいの工数が掛かるのかも推測できます。そのため、工数の短縮を考慮した効率のよい作業が可能です。
現実的なWebデザインが作れるようになる
コーディングの知識があると、実装可能で現実的なWebデザインを作れます。
また、コーダーとデザインについてやり取りする際も、アニメーションなどの具体的な挙動について専門用語を交えて正確に伝えられるため、認識齟齬のリスクが低減されます。
Webコーダーの仕事内容
コーディングを行う人を「コーダー」といい、Webサイト制作に関するコーダーを「Webコーダー」といいます。
Webコーダーは、Webデザイナーが制作したデザインデータをもとに、HTMLやCSS、JavaScriptなどを用いてソースコードを記述して、Webブラウザ上で見られるよう構築するのが主な仕事です。
コーダーとフロントエンドエンジニアの違い
コーダーと似た職種に「フロントエンドエンジニア」があります。
フロントエンドとは、Webサイトでユーザーが直接触れる部分を意味します。つまり、画面の表示や操作制御などの設計や構築を行うのが、フロントエンドエンジニアの仕事です。
ユーザーが見える部分の設計という面ではコーダーも同じですが、フロントエンドエンジニアはコーダーよりもJavaScriptなどのプログラミング言語の扱いに長けていなければなりません。加えて、CMSを扱えるスキルもフロントエンドエンジニアには必要です。
コーダーとバックエンドエンジニアの違い
ユーザの目に見えないデータベース設計など、サーバーサイドの開発や運用を担当する職種がバックエンドエンジニアです。
コーダーやフロントエンドエンジニアが作ったユーザーが操作する表面的な部分に対し、実際の中身の処理を開発していくのがバックエンドエンジニアの仕事です。
Webコーダーが身につけるべきスキル
Webコーダーとして活動するにあたって、身につけておくべきスキルについてご紹介します。
デザインコーディング
デザインをもとにコーディングを行うのがコーダーの仕事です。
そのため、デザイナーから渡されたデザインカンプ通りに正確にコーディングする技術が求められます。「padding」や「margin」の幅、文字サイズなど、px単位で正確にデザインカンプを再現できるようにしましょう。
WordPressなどのCMS
CMS（コンテンツ管理システム）は、専門知識なしでWebページを追加・編集できるため、さまざまなサイトで導入されています。
特に、CMSの中でもWordPressを使ったサイト制作案件は多く、実装知識を身につけることで仕事の幅も広がります。
最低限のSEO知識
コーディングにはこれといった1つの正解があるわけではなく、さまざまな方法があります。しかし、SEOについては最低限の知識を持っておき、意識したコーディングを行いましょう。
例えば「<h1>や<h2>といった見出しタグ」や「<section>や<nav>といったセクショニング・コンテンツ」を使ってそれぞれの構造に意味を持たせるセマンティックなコーディングは、検索エンジンにページ内容を深く理解してもらうためにも重要です。
また、ページの表示速度はSEOにも大きく関わるため、読み込む画像を軽量化しておくことも効果的な手段といえます。
コーディングの勉強方法
コーディングの勉強方法はさまざまにあります。ここでは、書籍やサービス方法を使った勉強方法をご紹介します。
書籍
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
コーディングについての知識をゼロから体系的に学べる書籍です。HTMLやCSSをはじめ、レスポンシブデザインや2カラム型、タイル型Webサイトの制作手順、またフォントや配色などのデザインについての基礎知識も解説しています。
制作現場での実際の仕事の流れについても説明しているため、コーディング初学者はもちろん、コーダーとしての仕事に興味がある方にもおすすめの一冊です。
これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本
HTML、CSSの基本について、動画による補足を交えつつ、丁寧に解説しています。サンプルとして掲載されている4つのWebサイトを、本書を読み進めながら実際に制作できます。
Webサイトの公開方法や、サンプルサイトのデザインデータも配布しているため、+αの学習が可能な1冊です。
オンラインサービス
Progate
Progateは、スライドを使った解説で、テンポよく学習を進められるオンライン学習サービスです。ブラウザ上で直接コーディングすることが可能なため、ローカルでの環境を用意する必要もなく簡単に学習を始められます。
すべてのレッスンを受講する場合は有償プランに入る必要がありますが、HTML&CSS、JavaScriptの講座については、初級編が無料で受講可能なため、気になる方は一度体験してみてはいかがでしょうか。
ドットインストール
ドットインストールは、プログラミングを動画レッスンで学べる学習サービスです。コーダー向けのHTML、CSS、JavaScriptの学習も、実際の流れに沿って動画で解説しています。
動画も1本あたり3分前後となっているため、すきま時間でも無理なく学習できるのが特徴です。有償プランでは、受講可能レッスン数の増加や、現役エンジニアへの質問機能など、さまざまなサポートがつきます。
無料会員でも、各レッスンの初級編は閲覧できるため、興味のある方はまず動画をご覧になってみてはいかがでしょうか。
まとめ
Web制作におけるコーディングは、デザインをブラウザ上に反映させてインターネット上に公開するための重要な役割を果たします。
Web担当者として、まずはHTMLやCSS、JavaScriptといった言語がどのような役割を担うか、その概要だけでも押さえるようにできるようにしましょう。
