
この記事ではLP制作・サイト制作の流れとその手順について書いています!
この記事を書いている僕自身、Web制作会社でコーダーとしてアルバイトしております。
実際にコーダーとしてアルバイトする前までは、どのように仕事を進めていくのかよくわかっていなかったので、そのような方に向けて書きました。
簡潔にまとめるとLP制作・サイト制作は下記のような流れで進めていきます。
- Webデザイナーからデザインカンプ(完成見本)をもらう
- デザインカンプを元にHTMLでマークアップ
- 書いたHTMLに対してスタイルを当てていく
- 動きのある部分はJavaScriptやjQueryを用いて実装
コーディング完了後
- ブラウザでの表示崩れや乱れ等がないか確認
- テストアップしたあと、WebデザイナーとWebディレクターに確認を頼む
- WebデザイナーやWebディレクターのOKが出れば、クライアントに提出
- 上記問題がなければ、本番環境にデプロイ
順に説明していきます。
LP制作の流れと手順

全8つの手順について順番に説明していきます!
Webデザイナーからデザインカンプをもらう
ワイヤーフレームを元にWebデザイナーがデザインカンプを作り、そのデザインカンプをコーダーがもらいます。
ワイヤーフレームとは、デザインがなくサイトの構造を書いたもので、デザインカンプは完成見本のこと。
ワイヤーフレームの例
デザインカンプの例
基本的にデザインカンプは「.psd」という拡張子のファイルでもらい、このファイルをPhotoshopで開いてマークアップを進めていきます。
デザインカンプを元にHTMLでマークアップしていく
WebデザイナーからもらったデザインカンプをPhotoshopで開いたら、デザインからどのようにコーディングしていけばいいかを考えます。
どのような構造になっているか一通り分かったら、HTMLで一気にマークアップ!
書いたHTMLに対してスタイルを当てていく
HTMLで一通りマークアップし終えたら、CSSでスタイルを当てていきます(SCSSを使うことが多い)
動きのある部分はJavaScriptやjQueryを用いて実装していく

HTMLとCSSを使って一通りマークアップし終えたら、動きのある部分を実装!
具体的にはスライダーやアコーディオンメニュー、ハンバーガーメニューなどが多いです。
LP制作やサイト制作で表現されるパターンはだいたい似たようなものが多いので、よくコードを使いまわしています。
ブラウザでの表示崩れや乱れ等がないか確認
デザインカンプを元に全てコーディングを終えたら、あとは各ブラウザで表示崩れ等がないかチェックします。

基本的に、Chrome・IE・FireFox・Safari・Edgeで確認!
特にIEでは表示崩れが起きていることが多いので要チェックです。
テストアップしたあと、WebデザイナーやWebディレクターに確認を頼む
コーディング後、各ブラウザでチェックして問題がなければ、WebデザイナーやWebディレクターに確認してもらいます。
確認してもらうためにはコーディングしたファイルをあげないといけません。そこで本アップする前にテストサーバにファイルを上げます。
テストサーバでは基本的にログインIDやパスワードを設定するので、それらを知らない外部の人は見ることができません。
WebデザイナーやWebディレクターのOKが出れば、クライアントに提出
テストアップしたページのデータに問題がなければ、クライアント(お客様)に確認してもらいます。
ここで、
- 「思っている形と違う」
- 「この部分をもう少しこんな感じにしてほしい」
と修正が来る場合も多いので、そこを修正して再度テストアップし、WebデザイナーやWebディレクターに確認をもらい、クライアントに再度確認してもらいます。
上記問題がなければ、本番環境にデプロイ
クライアントからもOKが出れば、本番サーバにファイルをアップします。これで外部の人もURLにアクセスだけでWebページを見ることができます。
LP制作・サイト制作の流れと手順のまとめ

ここまでLP制作・サイト制作の流れ、手順について書いてきました。
大体のLP制作の流れの想像はついたでしょうか?
LP制作の流れをもう一度まとめると…
- Webデザイナーからデザインカンプ(完成見本)をもらう
- デザインカンプを元にHTMLでマークアップ
- 書いたHTMLに対してスタイルを当てていく
- 動きのある部分はJavaScriptやjQueryを用いて実装
- ブラウザでの表示崩れや乱れ等がないか確認
- テストアップしたあと、WebデザイナーとWebディレクターに確認を頼む
- WebデザイナーやWebディレクターのOKが出れば、クライアントに提出
- 上記問題がなければ、本番環境にデプロイ
今後コーダーとしてWeb制作会社で働く方の参考になれば幸いです!

コメント