Webサイト制作の業務の流れ
shigeta
HTMLやCSSを習得した方で、実際の業務はどうするんだろう？と思う方向けに、普段の私の受注後〜納品までの業務の流れをまとめてみました。
プロジェクトの大小はありますが、会社勤めの場合・フリーランスなどの個人の場合、どちらも同じ流れで行います。
必要なスキル
- HTML / CSSの知識
- サイトによっては、javascriptやjQueryの知識
事前準備
デザインファイル受け取り
デザインを受け取ったら、まずはおおまかにデザインを見て、コーディングのための準備をしていきます。疑問点は、デザイナーさんに確認を行います。
- スマートフォンと、PCで同じHTMLでコーディング出来そうか？
- 動きのある部分はあるか、動きのイメージや希望はあるか？
- ヘッダーは固定か？
- スライドショーなどはあるかなど
- webフォントの使用の有無
コーディングの準備
コーディングに入る前に、効率化できる部分や、気をつける部分を把握しておきます。
- 対応ブラウザを確認する
- ヘッダー、フッター、ボタンなど、コンポーネント化できる要素を確認する
- 色やフォントサイズを共通化する
- 余白は共通化できればする
- 大まかなブロックを把握する
HTMLを書く
準備が終わったら、いざコーディングを始めていきます！
デザインからHTMLを書いていく
私は最初にすべてHTMLを書く流れが好きなので、先にHTMLを1ページまとめて書きます。
1ページごとでなくても、お好みでブロックごと（ヘッダー、メインビジュアル、お知らせエリア等）に分けても大丈夫です。
- タグとクラス名を書く
- 次に文章をデザインからコピペ
- 最後に画像をいれていく
- HTMLにおかしなことろがないか、確認をする
- チェックツールにかけてもok
HTMLにおかしなところがないか、確認をする
CSSを書く
- HTMLからCSSのセレクタを抜粋し、CSSファイルを用意する
- スマートフォンから、各ブロックごとに、コーディングを進める
- デザイン通りにコーディング出来ているか確認する
- デザインファイルと並べてみる
- ツールを使用して、透かして並べる
- PCのコーディングを進める
- デザイン通りにコーディング出来ているか確認する
- スマートフォンのコーディングが崩れていないか確認する
javascript・jQueryを実装する
- 動きが必要な箇所を実装していく
テストを行う
- 実機でテストを行う
- 様々なブラウザでチェックを行う
- デザイン通りにできているか？
- タブレットサイズ等、デザインにない画面サイズがおかしなことになっていないか？
- 動きのある部分は問題ないか？
- コンソールにエラーは出ていないか？
- 複数人でプロジェクトを行う場合は、ここで他のエンジニアによるコードレビューが入る
- レビュー結果を修正する
各種設定を確認する
- ogpの設定
- 画像の圧縮を確認
- paperにチェックツールがあった気がする
- プレビューサーバーにアップし、問題がないか確認する
確認依頼・納品
- デザイナー、もしくは依頼者に確認依頼を行う
- レビュー内容に沿って、修正を行う
- ファイル一式、もしくはサーバーへ直接アップロードを行い、納品完了
ABOUT ME
▷Web業界への転職方法
▷未経験からスキルをつける方法
▷仕事と子育ての両立
1歳と4歳のこどもの在宅ワーママ👶👦
SEからweb制作に転職して7年目💻️
Webディレクター/フロントエンドエンジニア
Webマーケティング/Webデザイン勉強中✏️