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

コーディング
まるこ
まるこ

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

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

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

コーディングの流れ

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

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

主なデザイン作成ソフト

  • Adobe Photoshop
  • Adobe XD
  • Figma
  • Adobe illustrator

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

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

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

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

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

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

確認ポイント

  1. Webサイト全体のレイアウト
  2. Webサイト内共通のスタイルを持つ要素
  3. 使用するフォント、カラー
  4. 動的要素(クリックアクション等)

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

Webサイト全体のレイアウトを確認するときは、HTMLの文書構造や、CSSでの装飾方法など、「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タグを使用することが重要です。

マークアップの手順(2~4は同時に作業してもOK)

  1. メタ情報の設定(head要素内記述)
  2. Webサイトの構造を明確にする
  3. レイアウトの再現に必要なHTMLタグを設定
  4. クラス名の設定

メタ情報の設定

まずは、文字コード、タイトル、サイトの説明など、制作するWebサイトの基礎となるメタ情報について記述します。CSSやJavaScriptなどの外部ファイルの読み込みも、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文法チェックツールを使用します。

HTML文法チェックツール「W3C Markup Validation Service」
W3C Markup Validation Service

③装飾(CSS記述)

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

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

④要素に動きをつける(JavaScript記述)

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

JavaScriptを使ったメニューボタンの表示例
JavaScriptを設定している要素の例

⑤検収・修正

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

STEP4. ファイル一式納品

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

まとめ

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

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

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。