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

【コーダー目線】LP制作・サイト制作の流れと手順コーダー
シンタロー
シンタロー

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

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

 

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

 

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

  • Webデザイナーからデザインカンプ(完成見本)をもらう
  • デザインカンプを元にHTMLでマークアップ
  • 書いたHTMLに対してスタイルを当てていく
  • 動きのある部分はJavaScriptやjQueryを用いて実装

 

コーディング完了後

  • ブラウザでの表示崩れや乱れ等がないか確認
  • テストアップしたあと、WebデザイナーとWebディレクターに確認を頼む
  • WebデザイナーやWebディレクターのOKが出れば、クライアントに提出
  • 上記問題がなければ、本番環境にデプロイ

 

順に説明していきます。

 

LP制作の流れと手順

シンタロー
シンタロー

全8つの手順について順番に説明していきます!

 

Webデザイナーからデザインカンプをもらう

ワイヤーフレームを元にWebデザイナーがデザインカンプを作り、そのデザインカンプをコーダーがもらいます。

 

ワイヤーフレームとは、デザインがなくサイトの構造を書いたもので、デザインカンプは完成見本のこと。

 

ワイヤーフレームの例

ワイヤーフレーム

 

デザインカンプの例

デザインカンプの例

 

基本的にデザインカンプは「.psd」という拡張子のファイルでもらい、このファイルをPhotoshopで開いてマークアップを進めていきます。

 

「.psd」では保存できないような大きなファイルの場合、「.psb」という拡張子になる

 

デザインカンプを元に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制作の流れをもう一度まとめると…

  1. Webデザイナーからデザインカンプ(完成見本)をもらう
  2. デザインカンプを元にHTMLでマークアップ
  3. 書いたHTMLに対してスタイルを当てていく
  4. 動きのある部分はJavaScriptやjQueryを用いて実装
  5. ブラウザでの表示崩れや乱れ等がないか確認
  6. テストアップしたあと、WebデザイナーとWebディレクターに確認を頼む
  7. WebデザイナーやWebディレクターのOKが出れば、クライアントに提出
  8. 上記問題がなければ、本番環境にデプロイ

 

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

 

関連記事

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

 

コメント