【WEB制作の流れ】ホームページを作るときってどんな作業があるの？｜スタッフブログ

【WEB制作の流れ】ホームページを作るときってどんな作業があるの？

こんにちは。最近、ウマ娘プリティダービーというアプリにドハマりして競馬に興味をもっているディレクターのイノウエです。
ウマ娘、ゲームの効果により今SNSで爆発的な人気になっていて、競馬業界の救世主とも言えるほどマーケティングとしては最高の結果だと思います。皆さんも是非やってみて"うまぴょい"しましょうね。

さて今回のテーマですが、私はお客様と打ち合わせをしていると、

「ホームページって簡単にできるものなの？」
「ホームページどうやって作ってるの？」

と、こんな話になることが多いです。確かに紙みたいに印刷をするわけでなく実際に手に取るものでないので、ホームページがわからないお客様からすると得体の知れないものでしょう。
そこで今回はホームページを作る際にどのような作業工程があるのかご紹介したいと思います。

1.企画・見積もり

まず、お客様（クライアント）からWEBサイトの制作依頼があります。
依頼後、お客様と打ち合わせを行い、WEBサイトを作る目的・内容などを聞き、
サイト全体のボリュームや予算感、スケジュールなどを確認していきます。

クライアントの目的
・自社が作成したゲームの商品を紹介したサイト。
・お知らせ、キャラクター、武器、モンスターを紹介するページがほしい。
・ニンテンドースイッチのゲームなので幅広い層のユーザーを取り囲みたい。

これらの情報を元に、企画・提案資料を作成していきます。

2.サイト構成

企画・提案資料を元にサイト全体の構成（トップページ・各ページの内容）をサイトマップやワイヤーフレームを作成します。

サイトマップはページ全体を俯瞰できるツリー状になった資料のことです。実際はこんなにオシャレではないです。

ワイヤーフレームはホームページの設計図です。各ページをブロックで配置決めをして、どの要素（画像・テキスト・リンクなど）があるかがわかる資料のことです。わかりやすさ重視でいきましょう。

3.制作準備

サイトの構成を作成しているときと同時進行（後の場合もある）で、お客様の方で以下の情報を用意してもらう必要があります。

・写真
・テキスト
・ロゴデータ
・イラスト
・サーバ情報（お客様が所有している場合）

写真、イラストなどは有料画像サイトから購入する場合もあります。
これらの情報が大方揃うと、いよいよサイトデザインに取り掛かります。ふう・・・

4.サイトデザイン

デザイナーに今までの作業で集まった情報を元にデザインを作成してもらいます。
デザインは基本、PC（パソコン）版とSP（スマートフォン）版の2種類です。

出来上がったデザインは自信をもってお客様に確認・修正を行います。とても良いデザインですね。

5.コーディング

デザインが出来上がるとコーディング（構築）という作業に移ります。
コーディングはデザインを実際のWEB上に表示させるための作業です。
この作業では主にHTML・CSS・Javascript・PHPといったプログラミングが使用されます。さっぱりわからない人は魔法だと思ってください。

また新着情報などをホームページに更新するような機能を追加する場合はシステム開発があり、管理画面からホームページを更新できるようになります。

6.確認

ホームページがweb上で確認ができるようになったら公開前にブラウザで確認を行います。
ブラウザは要件に応じて変わりますが、主にGoogle Chrome、Firefox、Edge、Safariなどです。
PCだけでなくスマートフォン（iPhone、Androidなど）での確認も忘れてはいけません。確認大事！ほんと！