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

全8つの手順について順番に説明していきます!
Webデザイナーからデザインカンプをもらう
ワイヤーフレームを元にWebデザイナーがデザインカンプを作り、そのデザインカンプをコーダーがもらいます。
ワイヤーフレームとは、デザインがなくサイトの構造を書いたもので、デザインカンプは完成見本のこと。
ワイヤーフレームの例

デザインカンプの例

基本的にデザインカンプは「.psd」という拡張子のファイルでもらい、このファイルを Photoshop で開いてマークアップを進めていきます。
デザインカンプを元に HTML でマークアップをしていく
Webデザイナーからもらったデザインカンプを Photoshop で開いたら、デザインからどのようにコーディングしていけばいいかを考えます。

どのような構造になっているか一通り分かったら、HTML で一気にマークアップ!
HTML に対して CSS でスタイルを当てていく
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制作の流れをもう一度まとめると…
- STEP1Webデザイナーからデザインカンプ(完成見本)をもらう
- STEP2デザインカンプを元に HTML でマークアップ
- STEP3HTML に対して CSS でスタイルを当てていく
- STEP4動きのある部分は JavaScript や jQuery を用いて実装する
- STEP5コーディング完了後、各ブラウザで表示崩れや乱れ等がないか確認する
- STEP6テストアップしたあと、WebデザイナーとWebディレクターに確認を依頼する
- STEP7WebデザイナーやWebディレクターのOKが出れば、クライアントに提出する
- STEP8上記問題がなければ、本番環境にデプロイ!
今後コーダーとしてWeb制作会社で働く方の参考になれば幸いです!
コメント