2017.08.30web制作ってどんな流れでやるの??

初めまして。
現在、TRUNK株式会社(以下TRUNK)でデザイナー兼フロントエンドのインターンしているおすなです。


「コーディングの勉強を鬼のようにしてきた。」「webデザインなどを学んで作ってきた。」そういうい人は多いと思います。ですが、いざいざ受託などで仕事をしようとした時や複数人で制作しようとした時に「どう進めていったらいいか分からない」と悩む人は多いはず(自分もそうです。)

なので、今回は「技術は高めてきたものの制作の流れを知らない」人向けに「web制作ってどうやっていくん?」という話をしていきたいと思います。


web制作はフリーランスで全部1人でやってしまうタイプもありますが、企業などでは基本はチームで制作していきます。

チームの構成図はこうなってます。

チーム構成



suna_room2-01

それぞれの役割



・ディレクター
進行管理、制作指示

・プロジェクトマネージャー
見積もり、人材アサイン、全体進捗管理、予算 管理、渉外

・アートディレクター
デザインコンセプト・制作方針策定、レギュ レーション策定、クオリティチェック

・テクニカルディレクター
全体設計、クオリティチェック

・バックエンドエンジニア
バックエンドプログラミング、インフラ構築

・フロントエンドエンジニア
フロントエンドプログラミング、HTMLコーディング

・デザイナー
デザイン

・イラストレーター
イラスト

・テスター
テスト


僕なんかはここで言うと、デザイナーやフロントエンドのジャンルになります。
フリーランスの人はここの部分全てを1人やらないと行けないわけです




どんな流れで制作するのか?



全体の流れとしてはこうなってます。

suna_room2-02

1,企画書作成・要件定義
・サービス内容の決定
・ターゲット設定
・マーケットの調査
・サイトマップ作成
・トップデザインカンプ作成

2,見積もり
・工数の洗い出し
・予算設定
・詳細見積もり作成

3,キックオフ
・人材アサイン
・キックオフミーティング

4,情報の整理・分類
・必要情報の精査
・情報の分類・ラベリング
・画面遷移(画面リスト)作成・ナビゲーション設計

5,実装仕様策定
・実装仕様の策定
・システム基本設計(CMSの利用など)

6,画面設計
・画面設計(構成案)作成

7,制作
・その他画面デザイン作成
・htmlコーディング
・システム構築
・本番サーバ構築

8,テスト・確認
・テスト項目書作成
・テスト
・負荷テスト(本番サーバ)

9,検収
・クライアント側受け入れテスト

10,納品
・納品書・請求書作成


ざっくり書くとこの10個の項目になります。
デザイナー、エンジニアの方はここだと、5,6,7をメインで行うことになります。(場合によって4,8も)

このような構成、流れでサイト制作をしていくことが世の中では多くなっています。
「フリーで今後やっていきたい」、「複数人で制作を今後したい」と思っている人は上記で説明したような構成、流れで事をおすすめします。


19卒の学生必見! 無料プログラミングキャンプ!!


約1ヶ月間でプログラミングの基礎から学び、実践的なWebサービス、アプリ開発スキルを身につけられるプログラミングキャンプ参加者募集中です!

コース内容

・ Ruby(Rails)アプリ開発コース
・ Androidアプリ開発コース
・ HTML CSS JQuery マークアップコース
・ フロントエンドコース(React)

詳細、お申し込みはこちら
https://trunk.fm/camp

この記事を書いた人