【Web制作の流れ】受託から納品までを４ステップでまとめた【保存版】
Web制作の流れは４つのステップに分解できます。
結論は次のとおり。
- ステップ①：サービスのマーケティング設計
- ステップ②：Webサイトのマーケティング設計
- ステップ③：Webサイトの構造設計
- ステップ④：Web制作
Web制作案件ってステップ④の部分と思われているけど、実際に重要なのはステップ①②③です。なぜなら、付加価値を出せる部分だから。
付加価値が出せないパターン
駆け出しプログラマー「コードが書けます！」
社長さん「インド人は時給５ドルだけど、何が違うの？」
駆け出しプログラマー「僕のコードはキレイです。」
社長さん「コード汚くていいからインド人に依頼するわ。」
付加価値が出せてるパターン
駆け出しプログラマー「コードが書けます！」
社長さん「インド人は時給５ドルだけど、何が違うの？」
駆け出しプログラマー「マーケティング設計からサイトのSEO設計も出来ます。その設計に基いて制作していきます。」
社長さん「お、そうなんだ。ちょっと詳しく聞かせてよ。」
というわけで、各項目を見てきましょう。
Web制作の流れ①：サービスのマーケティング設計
- (1) サービスの強みを明確化する
- (2) ペルソナ（利用ユーザー）を明確化する
(1) サービスの強みを明確化する方法
- なぜ、そのサービスを利用すべきなのか？
- 類似サービスとの違いはなにか？
- 誰に利用して欲しいか？
具体例
例えば、オンライン英会話業界で最安値であり、インド人との英会話が魅力のサービスなら次のとおり。
| なぜ、そのサービスを利用すべきなのか？ | 最安値なのでお財布に優しい。 |
| 類似サービスとの違いはなにか？ | インド人に特化していて、価格が最も安い点。 |
| 誰に利用して欲しいか？ | コスパよく英語力を伸ばしたい人。 |
ペルソナ（利用ユーザー）を明確化する方法
Webサイト制作時にペルソナを作成する理由と作り方。チートシート付
「Webサイト制作時にペルソナ設計って必要なの？」「ペルソナってどうやって作るの？」こんな疑問に答えます。本記事ではペルソナ設計の理由から、効果的なペルソナ設計方法を解説します。僕の本業で使う資料なども具体例として掲載していますので、ペルソナ設計に迷っている方はぜひご覧くださいませ！
上記記事に詳しくまとまっています。ここでは簡略的にまとめますね。
ペルソナの背景
語学留学経験があり、基礎的な英会話スキルがある。現在は日本にいて、英語力の低下を懸念している。
ペルソナの抱えている問題意識
国際交流パーティなどに参加してもいいが、１回の参加費が4,000円するので躊躇している。英会話カフェなどもあるがいまいち興味が沸かない。
問題が解決できない理由
英語力の低下してもすぐに問題発生するわけではないので、問題解決を先送りしている。解決したほうがいいとは思うけど、、、ぶっちゃけめんどくさいという状況。
なぜ、インド人との英会話サービスを使うのか？
たまたまFacebookで動画を見かけた。１回５円という安さにも加え、主に裕福層のインド人と会話できることに興味を持ち、会員登録してみた。※英語を話せるインド人は裕福層限定の為、必然的に講師は裕福層になる。
だいぶサービスイメージが湧いてきましたよね？
Web制作の流れ②：Webサイトのマーケティング設計
- (1) サイト名とドメインを決める
- (2) タグラインとキャッチコピーを決める
(1) サイト名とドメインを決める方法
サイト名とドメインは直感でよいかと。インド人との英会話サービスを例に考えるとつぎのとおり。
- サイト名：India de Eigo [インド de 英語]
- ドメイン：india-de-eigo.com
(2) タグラインとキャッチコピーを決める方法
タグラインとキャッチコピーがごっちゃで解説されているサイトが多い。それぞれの定義は次のとおり。
- タグライン：サービスが提供する価値を一言で説明する文章のこと
- キャッチコピー：サービス価値を最大化するコピー（宣伝文）のこと
具体例
India de Eigo [インド de 英語]をもとに考えてみましょう。
- タグライン：業界最安値でインド人に特化したオンライン英会話サービス
- キャッチコピー：世界で最もスパイスの効いたオンライン英会話。１回５円という衝撃価格で登場。
ここまできたら簡易的はモックアップも作れます。尚、タグラインとキャッチコピーの位置関係はこういった感じです。
Web制作の流れ③：Webサイトの構造設計
- (1) 必要ページをリストアップする
- (2) サイトの構造設計をする ※SEOの重要ポイント
- (3) サイト内のテキスト作成をする
(1) 必要ページをリストアップする方法
基本的にはページ名、URL、ページの存在意義を明確化します。
特にページの存在意義の明確化は重要。これがないと、ページが増え続けて終わりなき開発プロジェクトになります。
(2) サイトの構造設計をする方法 ※SEOの重要ポイント
【SEOサイト設計】失敗しないために注意すべきこと
「SEO最適化されたサイト設計方法が分からない。」「そもそも、サイト設計の重要性が分からない。」こういった疑問を解消します。作るサイトが『コーポレートサイトなのか？』『Webサービスなのか？』『ブログやWebメディアなのか？』によって設計が変わってきます。切り分けつつ、具体例で解説しますね。
上記記事で解説しています。
(3) サイト内のテキスト作成をする方法
各ページをテキストを作っていく。すでに各ページの存在意義が明確化されているので、その意義を満たすような情報を詰めてい来ましょう。
基本的には競合サイトや似ているサイトを参考にしつつ進めると作業速度がアップしますね。
Web制作の流れ④：Web制作
- (1) ワイヤーフレームを作成する
- (2) サイトのロゴを作成する
- (3) ラフデザイン＆本番デザインを作成する
- (4) コーディング＆SEOの内部対策をする
- (5) 動作確認＆バグチェックしてリリース
ワイヤーフレームを作成する方法
【比較あり】Web制作にモックアップツールならmoqupsが神【愛用】
モックアップツールの利用価値から、おすすめツールをご紹介します。「モックアップツールなんて使わなくていいっしょ」「モックアップ作る前にラフデザイン作ればいいっしょ」と思っている人も少しだけお時間ください。もしかしたら考えが変わるかもです。
ワイヤーフレームを作る価値や方法は上記記事にまとめました。
(2) サイトのロゴを作成する方法
ここまでのフローで明確化されたことが次のとおり。
- サービスの強みとペルソナ（利用ユーザー）
- サイト名とドメイン
- タグラインとキャッチコピー
僕の場合はデザインは外注していまして、これらの情報をまとめてデザイナーさんに渡します。情報をもとにデザイナーさんがテーマカラーを決めて、ロゴ案をいくつか作っていく感じです。
(3) ラフデザイン＆本番デザインを作成する方法
ラフデザインをざっくり作ってみました。※僕はデザイナーじゃないので適当です。ラフデザインで方向性を固めつつ、問題なければ本番デザインを固めましょう。
(4) コーディング＆SEOの内部対策をする方法
SEO内部対策：その道４年の僕が徹底解説
SEOをゴニョゴニョしてたら４年くらい経過しました。現在はSEOでご飯を食べています。そんな僕が内部対策のポイントを公開します。ちょっと技術的な部分もありますが、わからなかったらWeb制作を勉強するか、エンジニアにお願いしましょう。
基本的にはコーディングとSEOの内部対策はセットです。上記記事にガッツリまとめています。
動作確認＆バグチェックしてリリース
バグがなければこれで完成！＼(^o^)／ お疲れさんです！！
まとめ：Webサイト制作はマーケティングとセットが命
Web制作流れに加え、付加価値の高め方を解説しました。完全に制作のみで仕事をすると、時間単価が下がりやすいので注意が必要です。また、１人で全部こなすのは難しいので、フリーランス同士で仕事を回すのもありかなと。僕はデザイン部分は完全に友人にお願いしています。
まずは実際に案件をこなしてみるべき
ブログからプログラミング学習の問い合わせをよく受けるのですが、勉強ばかりしてても始まらないので、まずは案件をこなしてみるべきだと思います。勉強も大切だけど、実践から学ぶほうが早いです。
» 参考：スキルがないから◯◯できない？ 足りないのは自信かも
推薦書籍
広告の基本的な考え方やターゲット（ペルソナ）に対する「共感」の生み方。広告を作る際に気をつける点が学べます。
