コーディング開始から納品までの流れを解説

この記事ではWebサイトのコーディング開始から納品までの流れを解説します。

コーディング開始から納品までうまくイメージできない人でも、この記事を読むとイメージが分かるようになります。

コーディング前の準備、コーディング時、コーディング後の確認など、各工程で注意するポイントについても解説していきます。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

コーディング開始から納品までの流れ

コーディング開始から納品までの流れを簡単にまとめると、次のような流れになります。なお、コーディングのやり方は人それぞれなので、ここで解説するのは一例です。

また、前提としてデザインカンプは不足なく完成されており、それをもとにしてコーディングするとします。

かずき先生

案件によってはコーディングファイルはすでに用意されている場合があります。テンプレートやコーディング規約を渡されることもあるので、それに従いましょう！

要件によっては、ここにCMSの追加などが入ってきます。

デザインカンプデータを確認・共通パーツなどの洗い出し・画像の書き出し

デザインカンプは主にFigma、AdobeXD、PhotoShop、Illustratorなどの形式で作られることが多いです。どの形式のデザインカンプであっても、ここではコーディング準備のためのデータとして、同じように扱います。

デザインカンプのPC幅とSP幅とインナー幅

PC幅のデザインカンプとSP（モバイル端末）幅のデザインカンプがあるなら、デザインカンプの横幅が何ピクセルで作られたものか確認します。

SPデザインのデザインカンプでは横幅が375px幅や390px幅、PCデザインでは1280px幅や1440px幅、1920px幅で作られていることが多いです。これらのデザインカンプ幅によって、コーディング時のブレイクポイントを決定します。

ブレイクポイントとは、画面幅に応じてCSSを切り替えるときに使用する切り替えポイントのことです。

ブレイクポイントの例としては、下記のような設定があります。ブレイクポイントはプロジェクトによって変わり、複数設定されることもあります。下記は参考値として覚えておきましょう。

モバイルファーストの場合

• min-width: 576px
• min-width: 768px
• min-width: 992px
• min-width: 1200px
• min-width: 1400px

PCファーストの場合

• max-width: 575px
• max-width: 767px
• max-width: 991px
• max-width: 1199px
• max-width: 1399px

（ブレイクポイント参考値：BootStrapのブレイクポイント）

また、コンテンツの最大幅のことをインナー幅といいます。画面幅がインナー幅より大きいときは、左右中央に配置されるようにコーディングします。

共通パーツの洗い出し
デザインカンプをトップページ、下層ページも含めて全体的に上から下まで確認し、共通パーツを洗い出します。共通パーツとは、例えばデザインカンプ全体で使われているボタンや見出しパーツ、下層FVなどのことです。

また、全体で使われていなくても、複数のページで使われているパーツなども洗い出します。

これらのパーツをあらかじめ洗い出しておくことで、効率的にコーディングできるようになります。

共通パーツの例

• セクションタイトル、見出し
• ボタン
• ヘッダー、フッター
• パンくずリスト
• 下層FV
• お知らせ一覧やブログ一覧で使われる記事リンクやブログカード
• トップに戻るボタン...など

なお、洗い出したパーツは、クラス名も決めておくと作業に取り掛かりやすいです。

かずき先生

ここの作業は全体の工数に大きく影響するため、時間がかかってもしっかり洗い出しましょう！

急がば回れってやつですね。

画像書き出し

デザインカンプから必要な画像を書き出します。書き出す画像は2倍書き出しで書き出します。

用途や画像によって書き出し形式が変わってきます。それぞれのメリットとデメリットを表にまとめましたので、こちらの表を見ながら各画像の書き出し形式を判断してください。

画像書き出しの例

書き出した画像は、そのまま使用するには画像ファイルサイズが大きいです。そのまま使用するとWebサイトの表示速度低下の原因になるので、書き出した画像は「TinyPNG」や「iLoveJPG」のサイトなどで画像圧縮しましょう。

コーディングファイルの環境構築

次に、デザインカンプから使われている色やフォントを読み取り、コーディングファイルに記述していきます。書き出し圧縮した画像も忘れずにファイルに格納します。

フォントの設定

フォントはGoogleフォント、Adobeフォント、フリーフォントなど種類があります。また有料フォント、無料フォントなどの違いもあります。

例えば、GoogleフォントならCDN、Adobeフォントなら埋め込みコード、などフォントによって読み込み方に違いがあるので注意しましょう。CDNとは「Content Delivery Network（コンテンツデリバリーネットワーク）」の略称で、外部ファイルをリンク1つで使用することができる仕組みのことです。

フォントをダウンロードして使用する場合、@font-faceプロパティを使うのが便利です。

コーディング開始から納品までの流れを解説

色の設定

CSSにカラーコードを記述します。Sassを使用する場合は色を変数で管理できますし、CSSを使用する場合は、CSSのカスタムプロパティで管理することができます。

Sassで変数管理する場合

$white: #fff; /* 変数にカラーコードをセット */
p {
  color: $white; /* プロパティに変数を使用する場合 */
}

CSSでカスタムプロパティで管理する場合

:root {
  --color-white: #fff;　/* 変数にカラーコードをセット */
}

p {
  color: var(--color-white);　/* プロパティに変数を使用する場合 */
}

色を変数管理すると、カラーコードで覚えなくていいので効率的にコーディングできます。

CSSのカスタムプロパティに関しては下記の記事を一読ください。

コーディング開始から納品までの流れを解説

JavaScriptやjQueryのライブラリ
また、JavaScriptやjQueryのライブラリなどを使用する場合は、ライブラリの読み込みなども準備しておきましょう。例えば、デザインカンプを見てスライドショーの実装が必要になりそうな場合には、slickやSwiperを使用して実装するか、それとも自作するか判断します。

slickやSwiper、GSAPなどの使い方は以下の記事をお読みください。

コーディング開始から納品までの流れを解説

【JavaScript】Swiperの使い方とオプション・カスタマイズ方法について解説

GSAPを使ってアニメーションをつけよう

共通パーツのコーディング

コーディングファイルの環境構築を終えたら、洗い出した共通パーツをコーディングしていきます。

共通パーツをコーディングする場合、パーツだけのhtmlファイルで管理したいので、例えばcomponents.htmlファイルを作成し、パーツ専用のhtmlファイルの中にコーディングしていきます。

パーツだけのhtmlファイルで管理すると、後の工程のページコーディング時にパーツが見やすくなるので、パーツのページを確認しながら効率的にコーディングできます。

かずき先生

共通パーツは、この時点でレスポンシブまで完了させます。また、ホバースタイルがあるパーツなどもこの時点で構築します。

パーツ単位で構築を完了させておくことで、ページコーディング時の作業工数を軽減することができます。

共通パーツのコーディングの注意点

共通パーツをコーディングする場合、テキストパーツには外側のマージン（余白）と幅や高さなどを設定しないようにしましょう。余白や幅などを設定してしまうと、パーツを使い回したいとき、そのスタイルを打ち消す・上書きする記述が必要で、結果的にCSSの記述量が増えてしまいます。

コーディングする際は、CSS設計を意識してコーディングすると保守性が高まります。

CSSにルールを設けてさらに保守性を高めよう part1

各ページのコーディング

共通パーツのコーディングを終えたら、作成した共通パーツを組み合わせながら、各ページのコーディングをしていきます。

コーディングする場合は、次のようなイメージで進めるといいでしょう。画面が２つあると作業がしやすいですが、画面１つでも切り替えながら作業することができます。

画面１では、components.htmlの画面、index.htmlの画面、そしてデザインカンプを開きます。そして画面２では、VSCodeでパーツのコーディングが終わったcomponents.htmlと、これから作成するページごとのhtmlファイルを開きます。

それぞれの画面を見ながら、VSCodeで各ページをコーディングしていきます。

パーツが必要な場面がきたら、components.htmlか、components.html画面の検証ツールを開いてパーツのhtmlをコピーし、index.htmlファイルの該当開所に貼り付けて作業を進めていきます。

なお、components.htmlは納品時には不要なファイルなので、データ提出時には除けておきましょう。

各ページのコーディングの注意点

WordPressサイトを構築する場合、テキストや画像、コンテンツの要素（例：ブログカードなど）が動的に変わる場合があります。

例えば、サムネイル付きブログカードは、サムネイルの部分に大きい画像や小さい画像、縦長・横長の画像が入る可能性を考慮して、どんな画像が入っても見た目が崩れないようにコーディングする必要があります。

また、見出しや本文のテキストの増減によってレイアウトが崩れないようにする必要もあります。

これらはコーディングしながら、異なる画像サイズの画像を入れてみたり、テキストの量を減らしたり増やしたりするなどして、表示を確認しながらコーディングするといいでしょう。

例えば画像サイズが動的に変わってもレイアウトが崩れないようにコーディングするなら、aspect-ratioプロパティが便利です。

aspect-ratioプロパティとは？使い方について解説

JavaScript / jQueryなどの処理

各ページのコーディングをしながらJavaScriptやjQueryの処理を記述する人もいれば、最後に記述する人もいます。

JavaScriptが必要になる箇所は例えば、以下のようなものがあります。

• ハンバーガーメニュー  / メガメニュー
• タブ
• トップに戻るボタン
• アコーディオンメニュー
• スライドショー
• モーダルウィンドウ
• アニメーション...など

かずき先生

これらの機能は、Webサイトを構築する上で出てくる頻出パーツです。最終的に、これらの機能をスムーズに実装できるようになれれば、コーダーとして一人前といえます。

テストサイトアップ前のチェック

テストサイトにアップロードする前に、コーディングファイルの各種チェックを行います。

確認するのは以下の項目です。

JavaScriptやjQueryで機能を構築したら、エラーが出ないか、想定通りに動作するかなどを確認しましょう。

HTMLのチェックに便利なツール
HTMLの閉じタグチェックは、Chrome拡張機能の「HTMLエラーチェッカー」が便利です。

HTMLエラーチェッカー

HTMLエラーチェッカーは、現在見ているWebページのHTMLをチェックし、閉じタグがない、開きタグが不足している、などの簡単なチェックを行ってくれます。

HTMLの文法チェックは下記のサイトで行えます。

https://validator.w3.org/

確認方法は、以下の3つがあります。

• Webサイトのページをチェックしたい場合
  →「Validate by URL」にサイトURLを貼り付け
• ファイルをチェックしたい場合
  →「Validate by File Upload」にファイルをアップロード

• コードで確認したい場合
  →「Validate by Direct Input」にhtmlコードを貼り付け
  →CheckボタンクリックでHTMLをチェック

例えば「Validate by Direct Input」で、次のようなHTMLをチェックするとします。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <a href="">
    <a href="">aタグの中にaタグ</a>
  </a>
</body>
</html>

Validate by Direct Input のタブの入力欄にチェックしたいHTMLコードを貼り付けます。

Checkボタンをクリックすると、下記の画面が表示されます。

Error部分が修正する必要がある箇所です。

CSSのチェックに便利なツール
CSSの文法チェックは下記のサイトで行えます。

https://jigsaw.w3.org/css-validator/

CSSもHTML文法チェックと同様の操作で確認できます。

ベンダープレフィックスが必要な場合は、下記のサイトを使用しましょう。

https://autoprefixer.github.io/

左側に「ベンダープレフィックスを付与したいCSS」を貼り付けると、右側に「ベンダープレフィックスが付与されたCSS」が表示されます。

画面下部のBrowserslistで、ブラウザのどのバージョンまで対応するか設定することができます。

例えば、browserslist last 4 versionsでは、最新バージョンから4つ前まで対応したベンダープレフィックスが付与されます。

テストサイトで実機表示確認

コーディングファイルのチェックが終わったらテストサイトにアップロードし、パソコンやモバイル端末で実機での表示確認をしましょう。

テストサイトにアップロードする場合はBasic認証の設定や、headタグにnoindexやnofollowの記述をして、テストサイトを検索エンジンから表示させないようにしましょう。

開発時にはnoindex、公開時にはINDEX, FOLLOWの記述をして検索エンジンにインデックスされるように設定します。

  <!-- 開発中 -->
  <meta name="robots" content="noindex">

  <!-- 公開時 -->
  <!-- <meta name="robots" content="INDEX,FOLLOW"> -->

サイトの表示確認では、パソコンならWindowsとMac、モバイル端末ならAndroidやiOSで表示確認をしましょう。

主要ブラウザで表示確認

パソコンとモバイル端末実機で、Chrome、Safari、Firefox、Microsoft Edgeなど各種ブラウザで表示を確認します。パソコンで見る場合、検証ツールで少なくとも360px幅から2000px以上まで各ブラウザで表示確認していきます。

ローカルで見る場合と、実機で見る場合とでは表示が変わることがあるので、必ず確認しましょう。

もしスタイル崩れやエラーなどが発生した場合は、ローカルでファイルを修正し、再度テストサイトに修正ファイルをアップロードして表示確認をします。

チェックを終えたら、クライアントにテストサイトを共有し、表示を確認してもらいましょう。ここでも修正箇所や指摘があれば修正して、再度確認してもらいます。

コーディングデータの納品

修正が全て終えたら、データの納品です。

納品方法はさまざまあります。納品方法は事前に確認しておきましょう。

自分で公開作業を行う場合は、Basic認証の設定を解除したり、headタグのnoindexの記述を削除し、INDEX, FOLLOWの記述に変更しておきましょう。

「テストサイトのサーバーにアップロードして納品」の場合は、例えば制作会社やWebディレクターなどが用意したテスト用のサイトにアップロードして納品完了です。公開作業は制作会社のWeb担当者やWebディレクターが行うことになります。

かずき先生

その他、Githubにデータを送信して納品、という場合もあります。

まとめ：納品までに確認事項が多いので注意しましょう

コーディング開始から納品までの流れを解説しました。コーディング前の準備、コーディング時、コーディング後のチェックなど、それぞれ注意するべきポイントがあるので、各工程に応じて適切な開発を行いましょう。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー