【コーダー目線】LP制作・サイト制作の流れと手順について

この記事では、LP制作・サイト制作の流れとその手順について書いています！

この記事を書いている私自身、大学生の時にWeb制作会社でコーダーとしてアルバイトしていました。

実際にコーダーとしてアルバイトする前までは、どのように仕事を進めていくのかよくわかっていなかったので、そのような方に向けて書いています。

簡潔にまとめるとLP制作・サイト制作は下記のような流れで進めていきます。

順に説明していきます！

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制作の流れをもう一度まとめると…

今後コーダーとしてWeb制作会社で働く方の参考になれば幸いです！