デザインデータからコーディングを行う流れを簡単解説

2021/10/28

コーディング

Webサイト制作で、デザインデータをブラウザで「見える化」する作業をコーディングといいます。このコーディングが、どのような流れで行われているかご存知でしょうか。

コーダーはデザインデータを受け取って、すぐにHTMLなどのソースコードを書き始めるわけではありません。ソースコードを書き始めるまでには、確認や準備をすることがいろいろあります。

本記事では、コーディングの作業手順について解説していきます。

Webサイト制作のコーディング作業ってなにするの？

コーディングの流れ

コーディングを行うときの元となるデザインデータを「デザインカンプ」「カンプ」と呼びます。デザインカンプとは、「Design Comprehensive Layout（デザイン・コンプリヘンシブ・レイアウト）」の略称で、“デザイン完成見本”の意味です。
※本記事では「デザインデータ」で統一します。

デザイナーから受け取るデザインデータは、デザイン作成ソフトを使用して作られています。ソフトにはいくつか種類があり、使用するソフトはプロジェクトやデザイナーによって異なります。
コーダーはデザインデータから、各要素のサイズ、色、配置などを確認しながら、コーディングを行います。

それでは、デザインデータを受け取ってからの作業工程を見ていきましょう。作業は大きく分けて、以下の4ステップです。

1. デザインの仕様確認
2. 作業ファイル・フォルダの作成（画像等のデータ格納含む）
3. コーディング開始
4. ファイル一式納品

コーディングの作業工程はコーダーによって異なりますが、確認しなければいけないポイントは、基本的に変わりません。本記事は、筆者自身の作業工程をもとに、解説しています。

STEP1. デザインデータから仕様を確認する

まず始めは、デザインデータからWebサイトの仕様を確認します。

デザインデータはあくまでも“完成見本”ですので、実際にブラウザ上で閲覧したときを想定しながら、仕様の確認を行うことが大切です。また、デザインデータでわからない点があれば、デザイナーに確認します。

①Webサイト全体のレイアウトの確認

Webサイト全体のレイアウトを確認するときは、HTMLの文書構造や、CSSでの装飾方法など、「Webサイトの構築」について検討します。いわば、Webサイトの「基礎作り」です。

特に、パソコンとスマートフォンなどのモバイル端末では画面サイズが違うため、パソコン用とスマートフォン用で、各要素のレイアウトが変わる可能性があります。Webサイトを閲覧する端末ごとに最適な表示をさせ、コーディング作業をスムーズに行うためにも、「基礎作り」はとても重要です。

レスポンシブデザインとは？Webデザインの基本解説！

②Webサイト内共通のスタイルを持つ要素の洗い出し

Webサイト全体を把握し「基礎作り」が終わったら、次はサイト内で共通するスタイルを持った要素を洗い出します。共通のスタイルは、以下の要素でよく使用されています。

• ボタン
• タイトル

共通のスタイルを持った要素には、HTMLやCSSのソースコードを共有できます。ソースコードを共有すると、作業工数の削減や、修正を行いやすくなるなどの保守性の向上に繋がります。

③使用するフォントやカラーの確認

次に、サイト内で使用するフォントとカラーを確認します。

フォントは、閲覧する端末ごとにインストールされているフォントが異なります。端末にインストールされていないフォントを使用する場合は、必要なフォントデータを準備します。

カラーは、文字色、背景色などを洗い出します。サイト内で1箇所しか使用していないカラーまで洗い出す必要はなく、サイト内で頻出するカラーをピックアップしておきます。

④動的要素の確認

最後に、ユーザーがマウスオーバーやクリックしたときの要素の変化や、画像をスライド表示させるなど、「動きのある要素」の仕様について確認します。

• マウスオーバー：対象要素にカーソルをかざすこと
• クリックイベント：対象要素がクリックされたときに変化を起こすこと
• カルーセル（スライダー）：複数の画像などをスライド表示させること

デザインデータは静止画のため、要素に変化や動きをつけたい場合、サイト内でどのような動きになるのかがわかりません。デザインデータ内に動きがわかるレイアウトが用意されていない場合は、デザイナーに仕様を確認します。

STEP2. ファイル・フォルダの作成

仕様の確認が完了したら、制作するWebサイト用のフォルダを作成します。作成したフォルダの中に、HTMLやCSSファイル、画像データなどを格納します。

一般的なフォルダ構成は次のとおりです。

coding_test/
├── assets（HTMLファイル以外を格納するフォルダ）/
|   ├── css（CSSファイル一式）/
|   |   └── style.css
|   ├── js（JavaScriptファイル一式）/
|   |   └── script.js
|   └── img（画像一式※ページごとに格納）/
|       ├── common（サイト内共通画像）/
|       |   ├── logo.png
|       |   └── twitter-icon.png
|       └── top（トップページ使用画像）/
|           └── mv_img01.jpg
├── index.html（トップページ）
├── about/
|   └── index.html（概要ページ）
├── contact/
|   └── index.html（お問い合わせページ）
└── ※その他必要に応じてフォルダ・ファイル作成

STEP3. コーディング開始

ファイル・フォルダが作成できたら、いよいよコーディングを始めます。コーディングは次の手順で行います。

1. マークアップ（HTML記述）
2. ソートコードエラーチェック
3. 装飾（CSS記述）
4. 要素に動きをつける（JavaScript記述）
5. 検収・修正

①マークアップ（HTML記述）

始めは、HTMLでマークアップをします。マークアップは「文書の各要素がどのような意味・役割を持っているか」を考え、最適なHTMLタグを使用することが重要です。

メタ情報の設定

まずは、文字コード、タイトル、サイトの説明など、制作するWebサイトの基礎となるメタ情報について記述します。CSSやJavaScriptなどの外部ファイルの読み込みも、head要素内に設定します。

メタ情報に関する記述が終わったら、次は実際にブラウザ上に表示される部分をマークアップします。

【HTML】Webページには表示されないheadとは？

ブラウザ上に表示される部分（body要素内）のマークアップ

body要素内のマークアップで使用するHTMLタグには、「文書構造を明確にするタグ」と「レイアウト再現に必要なタグ」の2種類があります。

• 文書構造を明確にするタグ：header、footer、h1、ulなど
• レイアウトの再現に必要なタグ：div、spanなど

まずは、Webサイトの構造を明確にするために、見出し・リストなどのマークアップします。「Webサイト全体のレイアウト確認」の際に、しっかりと文書構造を考えておくと、この作業はスムーズに行えます。

文書構造のマークアップが完了したら、次はレイアウトの再現に必要なHTMLタグを設定します。「Webサイト全体のレイアウト確認」で考えたCSSの装飾方法に沿って、divタグなどを設定します。

最後に各ブロックのクラス名を設定します。クラス名を設定すると、同じHTMLタグを使用していても、異なる装飾を適用できます。クラス名は、「クラス名から役割がわかる」「共通スタイルのクラス名は使い回すことを意識して命名する」など、一定のルールを決めて設定します。

目には見えないけど重要な“マークアップ”について

②ソースコードエラーチェック

HTMLを書き終えたら、正しくマークアップされているかチェックを行います。自分自身でHTMLファイルの内容を確認するのは、「手間がかかる」「エラーを見落とす」などのデメリットがあります。そこでチェックには、【W3C Markup Validation Service】などのHTML文法チェックツールを使用します。

③装飾（CSS記述）

次はWebサイトの「見た目」をCSSで整えます。ここでは、あらためて「閲覧端末での最適な表示」を念頭において、CSSを記述することが重要です。
※「パソコン表示用の記述→モバイル端末表示用の記述」や「パソコン・モバイル端末表示用の記述を同時に行う」など、コーダーによって記述する順番は異なります。

CSSは、トップページの上から順番に書き始めても問題ありません。しかし、ヘッダー／フッター／サイト内共通のスタイルなど、複数のページに渡って同じレイアウトが使用されている要素から書き始めると、コードの重複が起こりません。「サイト内で頻出するスタイル→特定ページ内のみで使用されるスタイル」の順に記述していくのがオススメです。

④要素に動きをつける（JavaScript記述）

最後に、仕様に応じてCSSでは設定できない（あえて設定しなかった）要素に、JavaScriptを使って動きをつけます。

⑤検収・修正

HTML／CSS／JavaScriptの記述が完了したら、コーディング内容をテストサーバーにあげ、クライアントに検収してもらいます。デザインデータ通りにコーディングを行っていても、「文字サイズを大きくしてほしい」「画像を差し替えてほしい」など、修正が発生するのは珍しくありません。ブラウザ上での見た目や動きを確認してもらい、修正を行っていきます。

STEP4. ファイル一式納品

検収および修正が終わり内容に問題がなければ、完成版のファイル一式を納品して完了です。納品方法は、「ZIPファイル」「サーバーアップロード」などがありますので、指示に従って正しく納品します。

まとめ

今回は、デザインデータからコーディングを行うときの流れについて、簡単に解説しました。デザインデータを受け取った後に、コーダーが行っている作業が伝わったら嬉しいです。

Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。