Written by Manabu Bannai

【Web制作の流れ】受託から納品までを4ステップでまとめた【保存版】

MARKETING PROGRAMMING

Web制作の流れは4つのステップに分解できます。
結論は次のとおり。

  • ステップ①:サービスのマーケティング設計
  • ステップ②:Webサイトのマーケティング設計
  • ステップ③:Webサイトの構造設計
  • ステップ④:Web制作

Web制作案件ってステップ④の部分と思われているけど、実際に重要なのはステップ①②③です。なぜなら、付加価値を出せる部分だから。

付加価値が出せないパターン

駆け出しプログラマー「コードが書けます!」

社長さん「インド人は時給5ドルだけど、何が違うの?」

駆け出しプログラマー「僕のコードはキレイです。」

社長さん「コード汚くていいからインド人に依頼するわ。」

付加価値が出せてるパターン

駆け出しプログラマー「コードが書けます!」

社長さん「インド人は時給5ドルだけど、何が違うの?」

駆け出しプログラマー「マーケティング設計からサイトのSEO設計も出来ます。その設計に基いて制作していきます。」

社長さん「お、そうなんだ。ちょっと詳しく聞かせてよ。」

というわけで、各項目を見てきましょう。

スポンサードサーチ


Web制作の流れ①:サービスのマーケティング設計

  • (1) サービスの強みを明確化する
  • (2) ペルソナ(利用ユーザー)を明確化する

(1) サービスの強みを明確化する方法

  • なぜ、そのサービスを利用すべきなのか?
  • 類似サービスとの違いはなにか?
  • 誰に利用して欲しいか?

具体例

例えば、オンライン英会話業界で最安値であり、インド人との英会話が魅力のサービスなら次のとおり。

なぜ、そのサービスを利用すべきなのか? 最安値なのでお財布に優しい。
類似サービスとの違いはなにか? インド人に特化していて、価格が最も安い点。
誰に利用して欲しいか? コスパよく英語力を伸ばしたい人。

ペルソナ(利用ユーザー)を明確化する方法

上記記事に詳しくまとまっています。ここでは簡略的にまとめますね。

ペルソナの背景

語学留学経験があり、基礎的な英会話スキルがある。現在は日本にいて、英語力の低下を懸念している。

ペルソナの抱えている問題意識

国際交流パーティなどに参加してもいいが、1回の参加費が4,000円するので躊躇している。英会話カフェなどもあるがいまいち興味が沸かない。

問題が解決できない理由

英語力の低下してもすぐに問題発生するわけではないので、問題解決を先送りしている。解決したほうがいいとは思うけど、、、ぶっちゃけめんどくさいという状況。

なぜ、インド人との英会話サービスを使うのか?

たまたまFacebookで動画を見かけた。1回5円という安さにも加え、主に裕福層のインド人と会話できることに興味を持ち、会員登録してみた。※英語を話せるインド人は裕福層限定の為、必然的に講師は裕福層になる。

だいぶサービスイメージが湧いてきましたよね?

Web制作の流れ②:Webサイトのマーケティング設計

  • (1) サイト名とドメインを決める
  • (2) タグラインとキャッチコピーを決める

(1) サイト名とドメインを決める方法

サイト名とドメインは直感でよいかと。インド人との英会話サービスを例に考えるとつぎのとおり。

  • サイト名:India de Eigo [インド de 英語]
  • ドメイン:india-de-eigo.com

(2) タグラインとキャッチコピーを決める方法

タグラインとキャッチコピーがごっちゃで解説されているサイトが多い。それぞれの定義は次のとおり。

  • タグライン:サービスが提供する価値を一言で説明する文章のこと
  • キャッチコピー:サービス価値を最大化するコピー(宣伝文)のこと

具体例

India de Eigo [インド de 英語]をもとに考えてみましょう。

  • タグライン:業界最安値でインド人に特化したオンライン英会話サービス
  • キャッチコピー:世界で最もスパイスの効いたオンライン英会話。1回5円という衝撃価格で登場。


ここまできたら簡易的はモックアップも作れます。尚、タグラインとキャッチコピーの位置関係はこういった感じです。

Web制作の流れ③:Webサイトの構造設計

  • (1) 必要ページをリストアップする
  • (2) サイトの構造設計をする ※SEOの重要ポイント
  • (3) サイト内のテキスト作成をする

(1) 必要ページをリストアップする方法


» エクセルシートを公開しています

基本的にはページ名、URL、ページの存在意義を明確化します。

特にページの存在意義の明確化は重要。これがないと、ページが増え続けて終わりなき開発プロジェクトになります。

(2) サイトの構造設計をする方法 ※SEOの重要ポイント


上記記事で解説しています。

(3) サイト内のテキスト作成をする方法

各ページをテキストを作っていく。すでに各ページの存在意義が明確化されているので、その意義を満たすような情報を詰めてい来ましょう。

基本的には競合サイトや似ているサイトを参考にしつつ進めると作業速度がアップしますね。

Web制作の流れ④:Web制作

  • (1) ワイヤーフレームを作成する
  • (2) サイトのロゴを作成する
  • (3) ラフデザイン&本番デザインを作成する
  • (4) コーディング&SEOの内部対策をする
  • (5) 動作確認&バグチェックしてリリース

ワイヤーフレームを作成する方法

ワイヤーフレームを作る価値や方法は上記記事にまとめました。

(2) サイトのロゴを作成する方法

ここまでのフローで明確化されたことが次のとおり。

  • サービスの強みとペルソナ(利用ユーザー)
  • サイト名とドメイン
  • タグラインとキャッチコピー

僕の場合はデザインは外注していまして、これらの情報をまとめてデザイナーさんに渡します。情報をもとにデザイナーさんがテーマカラーを決めて、ロゴ案をいくつか作っていく感じです。

(3) ラフデザイン&本番デザインを作成する方法


ラフデザインをざっくり作ってみました。※僕はデザイナーじゃないので適当です。ラフデザインで方向性を固めつつ、問題なければ本番デザインを固めましょう。

(4) コーディング&SEOの内部対策をする方法


基本的にはコーディングとSEOの内部対策はセットです。上記記事にガッツリまとめています。

動作確認&バグチェックしてリリース

バグがなければこれで完成!\(^o^)/ お疲れさんです!!

まとめ:Webサイト制作はマーケティングとセットが命


Web制作流れに加え、付加価値の高め方を解説しました。完全に制作のみで仕事をすると、時間単価が下がりやすいので注意が必要です。また、1人で全部こなすのは難しいので、フリーランス同士で仕事を回すのもありかなと。僕はデザイン部分は完全に友人にお願いしています。

まずは実際に案件をこなしてみるべき

ブログからプログラミング学習の問い合わせをよく受けるのですが、勉強ばかりしてても始まらないので、まずは案件をこなしてみるべきだと思います。勉強も大切だけど、実践から学ぶほうが早いです。
» 参考:スキルがないから◯◯できない? 足りないのは自信かも

推薦書籍

広告の基本的な考え方やターゲット(ペルソナ)に対する「共感」の生み方。広告を作る際に気をつける点が学べます。

人気記事無料あり:エンジニアの僕がおすすめするプログラミングスクール3社