実際の現場を知りたい！Web制作全体の流れまとめ【初心者向け】

2019/11/06 2019/11/07

私はWeb制作会社に5年勤めていました。
半年の利益が2000万を超えました。

Web制作会社でディレクター、デザイナー、プログラマーとWeb制作について全て一通りやってきました。その実際の経験をもとに制作の流れについてまとめていきます。

Web制作について知りたいなら、まずは全体像を掴めるといいです。
その上で、細部の勉強を進めていくととても効率的に学習できます。

Web制作をやりたいぞ！という人に読んでいただければ幸いです。

▼読んでほしい人

Web制作に興味のある人
Web制作初心者の人

Web制作において、サーバーとドメインは必須です。
10社以上使ってきてこれだ！というサーバーとドメインを紹介します。
実際私も、10年使ってます。

▼サーバー
エックスサーバー

▼ドメイン
お名前.com

実際のWeb制作現場の流れ

ヒアリング

自ら足を運び、お客様から目的を的確に吸い上げます。

第一にヒアリングは、必ず“自分“で行いましょう。
初心者の頃は、「なんでわざわざ行かないといけないんだ？」「聞いてきてくれればいいのに」と思うかもしれません。しかし、自分の足で現地に行くことで、会社の外観や規模、担当者さんのクセなど、目に入ってくる多くの情報があります。
実際に目で見る情報は、言葉で伝えられる情報よりよっぽど役に立つためです。

制作会社につとめていると、営業さんがヒアリングしてくるケースがあります。
Webディレクションについて分かっていない営業さんだと、ほぼ100％トラブルになると思っていいでしょう。

なぜなら、作り手側が抱く疑問と営業さんが抱く疑問では違いがあるからです。
自分の抱く疑問が解消されないまま進むと、いつかトラブルになりますので気を付けましょう。

私が10年かけて地道に作ったヒアリングシートを公開します。

ヒアリングシート

ヒアリング時にもっとも重要だと思うことは、第一目標である『見積もり』を出すという意識を忘れないことです。

見積もりを出すためには、全体のボリューム感、ページ数、動き等を確認する必要があります。このサイトを作るうえで必要になる時間がどれだけかかるか確認するための質問を重点的に行います。

工数計算・見積もり

サイトマップを作り、必要ページと要素をクライアントに確認します。

工数計算するときに必ずサイトマップが必要です。
サイトマップを作ることで、「これから作るサイト」を可視化します。

この時点で、「今から作るサイトはこういう想定です」とクライアントと認識を合わせることが重要になります。これを怠ると、あとで「こういうページはないんですか？」や「こんなページはいらないから安くしてほしい」などの要望が出てきてトラブルにつながります。

サイトマップはめんどくさくても必ず作ることをおすすめします。
それが保身につながるからです。

私の実際に使っているサイトマップを公開します。

サイトマップ

サイトマップができてしまえば、ページ数が自動的に算出できます。
その上で、時間のかかりそうな『メールフォーム』や『スライド』といった動的部分をオプションのような形で追加していくのがおすすめです。

競合サイトの調査

競合サイトの調査を行い、根拠のあるサイトを作ります。

競合サイトを調査することで、色合いにかたよりがないか、グローバルナビゲーションの並びはどうか、ピックアップされてるページはどうか等業種によって共通点がないか探します。

例えば、システム系のサイトは青系の色が使われることが多いということを見つけたとします。
それは、
・青は落ち着いて冷静に見える
・青には信頼感がわく効果がある
・青は男性に受けやすい
等、システム系で男性が多く、信頼感を生みたいサイトであれば、当然と言える選択がされています。

こういった説明をあとでクライアントに行います。
そのため、必ずこの時点で考えているデザインにする根拠を見つけてください。

サイト設計

ワイヤーフレームを使いページの中身を決めていきます。

ここでも、クライアントとの認識に差異がないかの確認が重要になります。
サイトマップをもとにページを作り、ページの中身を詰めていきます。

ワイヤーフレームは、adobe XDを使うと効率的に作ることができます。

adobe XD

さらに、エンドユーザーが求めるもの、クライアントが押したいものを明確化にします。

サイト設計をするうえで重要なことは、エンドユーザー目線が必要だということです。エンドユーザー目線になり、色やメニューの配置、トップページのコンテンツの配置等を考える必要があります。

それを押さえたうえで、クライアントが押したいものをブレンドしていきます。

これが逆にならないように注意しましょう。
あくまで、ユーザーが最優先です。見られないサイトを作っても価値がありません。
クライアント側から押したいものは後からでいいのです。

デザイン

確認作業をしっかりと行いながら進めます。

デザイン工程で、一番重要なことはポイントポイントで確認をとることです。
素人がやりがちなこととして、進める途中一切確認をとらずに進めてしまい、クライアントの意向とずれたものを作ってしまいます。すると、最終的にはボツを食らい、それまでの時間を無駄にしてしまいます。
そうならないためにも、ポイントでの確認は必要です。

進める順番としては、

トップページのデザイン完成→確認→クライアントOK
主要サブページ→確認→クライアントOK
その他のサブページ→確認→クライアントOK

といった形でクライアントに確認してもらいOKをもらいながら進めることをおすすめします。
後々のトラブルを避けられるため効率よく進めることができます。

デザイン工程のコツとして、あらかじめクライアントに参考サイトを2、3出してもらうといいでしょう。
クライアントの求めるサイトを瞬時に理解できます。

コーディング

自らベースを作り常に改善していく。

コーディングで必要なのはスピードだと考えています。
ここでいうスピードというのは、いかにタイピングを速くするかという話ではありません。
重要なのは、効率よく作るためのベース作りにあると私は思います。
下準備とも言いますね。

いかに洗練されたベースであるかによってスタートダッシュも切れるし、進みだしてからのスピードも段違いに早くなるからです。

そして、そのベースは毎回サイトを作るごとに他社のサイトを少しでも研究し、改善していくことがコーディングをする上で、最速で綺麗なコードを書くコツだと言えるでしょう。

おすすめとしては、1サイト作るとき1ヵ所だけでも改善をすることです。
その1ヵ所を積み重ねていけば、よりよいベースが出来上がり、ライバルに差をつけられるでしょう。

CMS導入

現在、Wordpressは必須科目です。

現場で働いていて、Wordpressで作ることが最も多かったです。
世界的に見て、WordpressのCMSシェア率は圧倒的に高く、全世界のWebの3割がWordpressで作られていると言われています。

Wordpressを組み込み、お知らせや商品などの動的部分を作ってあげます。
クライアントに更新してもらうサイトでは必然的に導入することになるでしょう。

納品

多いのがサーバーに直接アップロードすることです。
稀にデータ納品といい、データを丸ごと圧縮してクライアントに渡して納品とすることもあります。

ここまでが制作の一連の流れになります。

まとめ

賛否両論はあると思いますが、私が実際に現場で経験してきた制作工程を紹介しました。
実際に経験してきたうえでポイントを特に抑えさせていただきました。
ご参考になれば幸いです。

昔から、使っているサーバーをご紹介します。
提案の時に安いサーバーありますよっていうとけっこう喜ばれます。
私も7年前から使っています。