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

シンタロー

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

この記事を書いている僕自身、Web制作会社でコーダーとしてアルバイトしております。

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

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

コーディング完了後

順に説明していきます。

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制作会社で働く方の参考になれば幸いです！

関連記事

知識が0の状態からコーダーになるなら、どういう風に勉強していくか

この記事では「コーダーとして働くために必要な技術やスキル、勉強方法」について書いています。この記事を書いている僕自身は、現在(2020/01/17)、Web制作会社でコーダーとしてアルバイトしており、2020年4月からはWebエンジニアとして働く予定です。

aka-shin.com

2020.01.18