コーディング

コーディングとは、コンピューターが処理できるように、決められた言語や構文に従ってコードを書く作業を指す言葉です。

Web制作の現場で「コーディング」という場合は、デザインや仕様をもとにHTML・CSS・JavaScriptなどを記述し、Webブラウザーで表示・操作できるWebページとして実装する作業を指すことが多くあります。

ただし「コーディング」という言葉の範囲は案件や会社によって異なります。HTML・CSSを中心とした実装だけを指すこともあれば、JavaScript、CMS組み込み、テンプレート開発などを含めて呼ぶこともあります。

Web制作ではデザインをブラウザー上で動く形に実装する

Webサイト制作では、デザインカンプや仕様書が完成しただけでは、Webブラウザーで閲覧できるWebページにはなりません。

デザインで決められた、

• 見出し
• 文章
• 画像
• ボタン
• メニュー
• レイアウト
• 色
• 余白
• アニメーション
• フォームなどの操作

を、Web技術を使って実装する必要があります。

この作業を、Web制作では「コーディング」と呼ぶことが多くあります。

IT全般での「コーディング」より狭い意味で使われることがある

IT用語としてのcodingは、プログラムやソースコードを書く行為を広く指します。

一方、日本のWeb制作で「コーディング費」「コーダー」といった言葉が使われる場合、HTML・CSSを中心としたフロントエンド実装を指すことがあります。

ただし、これは職種名や業務範囲として標準化された区分ではありません。

JavaScriptの実装まで含む会社もあれば、WordPressのテンプレート実装、PHPなどのサーバーサイド処理を別工程として分ける会社もあります。

見積もりや発注では、「コーディングに何が含まれるか」を具体的に確認する必要があります。

HTML：Webページの構造を作る

HTML（HyperText Markup Language）は、Webページの構造や意味を記述するために使われるマークアップ言語です。MDNはHTMLをWebの基本的な構成要素として、Webページのコンテンツを記述・定義するものと説明しており、WHATWGのHTML Living StandardでもHTMLをWorld Wide Webの中核となるマークアップ言語と位置付けています。[1][4]

例えば、

• 見出し
• 段落
• リスト
• 画像
• リンク
• 表
• フォーム

などを、適切なHTML要素を使って構造化します。

CSS：見た目やレイアウトを設定する

CSS（Cascading Style Sheets）は、Webページのスタイルやレイアウトを指定するために使われるスタイルシート言語です。[2]

例えば、

• 文字の大きさ・色
• 背景
• 余白
• 横並び・縦並び
• レスポンシブレイアウト
• ホバー表現
• アニメーション

などをCSSで実装します。

JavaScript：操作や動きを追加する

JavaScriptは、Webページでよく使われるスクリプト言語として知られるプログラミング言語です。[3]

例えば、

• メニューの開閉
• タブ切り替え
• スライダー
• モーダル
• フォーム制御
• 非同期通信
• 動的なコンテンツ更新

などに使われます。

Webデザインは、Webサイトの見た目や情報の見せ方、ユーザーの導線などを設計する作業です。

コーディングは、そのデザインや仕様をWebブラウザーで表示・操作できる形へ実装する工程です。

例えばデザイナーが、

• 見出しはこの大きさ
• 画像はこの位置
• スマートフォンでは縦並び
• ボタンにマウスを重ねると変化する

といったデザインを作成した場合、コーダーやフロントエンド担当者がHTML・CSS・JavaScriptなどを使って実装します。

ただし、実際の制作体制では、ひとりの制作者がデザインとコーディングの両方を担当する場合もあります。

Web制作では便宜的に分けて呼ぶことがある

Web制作の現場では、

• HTML・CSSを中心とした画面実装 → コーディング
• PHPやJavaScriptなどを使った複雑な処理 → プログラミング・システム開発

のように分けて呼ぶことがあります。

ただし、JavaScriptもプログラミング言語であり、フロントエンド開発でもプログラミングは行われます。

そのため「コーディングとプログラミングは別の作業」という技術的な線引きがあるわけではありません。

見積項目や職種を分けるために、Web制作会社が独自の範囲で使い分けているケースもあります。

デザインを見た目だけで再現しない

Webページは画像ではありません。

ユーザーが文字を読んだり、リンクを押したり、フォームを操作したり、スマートフォンやパソコンなど異なる環境で閲覧したりします。

そのため、見た目を合わせるだけでなく、

• HTMLの構造
• 操作しやすいUI
• デバイスごとの表示
• キーボード操作
• アクセシビリティ
• ページ速度
• 保守しやすさ

なども考慮されます。どこまで対応するかは、サイトの目的や要件によって異なります。

HTMLは意味に合った要素を使う

HTMLは単に見た目を作るためのコードではなく、コンテンツの構造や意味を表現します。[1]

WHATWGのHTML Living Standardでは、HTMLをWorld Wide Webの中核となるマークアップ言語と位置付けています。[4]

見出しには見出し要素、リンクにはa要素といったように、内容の意味に合ったHTMLを使うことは、保守性やアクセシビリティの面でも役立ちます。

複数の画面サイズに対応する

現在のWebサイトは、パソコンだけでなくスマートフォンやタブレットなど、さまざまな画面サイズで閲覧されます。

画面幅に応じてレイアウトを変更するレスポンシブWebデザインなどを利用し、異なる端末でも情報を利用しやすい状態にする方法があります。

ブラウザーで動作確認する

コードが正しく書かれていても、ブラウザーや端末、画面サイズ、入力方法によって表示・操作が異なる場合があります。

そのため制作時には、

• 主要なWebブラウザー
• パソコン
• スマートフォン
• 各種画面幅

などで表示や操作を確認します。確認対象の範囲は、サイトの想定ユーザーや要件に応じて決めます。

WordPressでもコーディングが必要になる場合がある

WordPressを利用したWebサイトでも、オリジナルデザインを実装する場合は、HTML、CSS、JavaScript、PHPなどを使ってテーマやテンプレートを実装することがあります。

既存テーマをそのまま利用する場合と、オリジナルテーマを開発する場合では、必要なコーディング量は大きく異なります。

ノーコードでもコードが完全になくなるとは限らない

ノーコード・Web制作サービスでは、画面上の操作でレイアウトやコンテンツを作成できるため、HTMLやCSSを直接記述する量を減らせます。

一方で、サービスの機能を超えたカスタマイズや外部サービス連携などでは、コードが必要になる場合があります。

「ノーコード」と「コーディング」は二者択一ではなく、サイトの要件に応じて使い分けるものです。

「コーディング」という言葉だけでは業務範囲が分かりにくいため、発注時には次のような点を確認します。

• 対象ページ数
• レスポンシブ対応の範囲
• JavaScriptによるアニメーションやUI
• フォーム実装
• CMSへの組み込み
• ブラウザー確認
• 公開作業
• 修正対応の範囲
• ソースコードの納品方法

例えば「10ページのコーディング」といっても、単純な固定ページと、複雑なアニメーションやCMS連携を含むページでは作業量が異なります。

デザインだけでなく、必要な機能や公開後の運用まで含めて仕様を整理することが重要です。

• [1] MDN Web Docs「HTML: ハイパーテキストマークアップ言語」
• [2] MDN Web Docs「CSS: カスケーディングスタイルシート」
• [3] MDN Web Docs「JavaScript」
• [4] WHATWG「HTML Living Standard - Introduction」

※2026年9月28日確認