WEBサイトはどのようにして受注し、どのようにして作られていくのか
個人開発や小規模でサイトを制作する場合、営業から実装までを通しで行う場合があります。
その際の流れを参考までに書き残しておきます。
それぞれの環境で各自のサイト制作の流れがあると思いますので、参考程度にご覧ください。
1. 営業
周囲の関係者やそのまわりからサイト制作で困っている人はいないか確認していきます。
それらの方が見つかり、アポが取れたら、次に以下のような内容を聴取していきます。
ヒアリング内容
- ターゲット（年齢層、閲覧媒体）
- 予算、見積り
- サイト構成
- 参考デザイン（色味、雰囲気）
- 悩みヒアリング → 解決策提示（その解決にはサイトの中にこういう要素を入れたらいいなど提案できるといい）
2. 受注
顧客から見積もりのOKが出たら実装に取り掛かります。
3. ワイヤーフレーム
まずはサイトの骨組みとなるワイヤーフレームを作成していきます。
3-1. 参考サイトを決める
サイトの構成が似たような同業他社のWEBサイトや顧客から提示があったサイトを参考サイトとして選定します。
3-2. 参考サイトの構成分析
参考サイトの構成を分析します。
考え方
- サイト全体に含まれる要素の分析
- それぞれのサイトでどのページに配置されているか確認
- 今回のサイトで必要な構成をピックアップ
- 必要なページ数が自ずと浮かび上がる
- 4で冗長に感じた場合、自分で調整する
- 上から順に優先度が高いコンテンツに並べる
構成分析の際にテキストは「広告コピー」を意識して書き出すといいです。
広告に使われる文字には次のような種類があります。
| コピー名 | 説明 |
|---|---|
| キャッチコピー | キャッチフレーズやヘッドライン、見出しのような役割。最大文字サイズで表現される。 |
| サブキャッチコピー | キャッチコピーの補助的な役割。キャッチコピーに続いて書かれ、文字量は比較的多くなる。 |
| リードコピー | キャッチコピーからボディコピーへ自然に誘導するための文字 |
| ボディコピー | 本文のこと、長い説明文 |
| 見出しコピー | ボディコピーを複数の段落に分け、その段落を要約して強調するコピーのこと |
| テーマコピー（ショルダーコピー） | 商品名や企業名、イベントタイトルなどの肩にあたる部分に小さなサイズで入るコピー。小さくさりげないがインパクトは大きい。 |
3-3. サイトの構成決定
上記の構成分析をした上で情報を取捨選択し、サイトの構成を決定します。
3-4. ヒアリングシートの作成
サイトの作成において、会社の情報やキャッチコピーなど顧客から情報を聴取する必要がある項目があります。その場合は、顧客との打ち合わせで聞き出したり、Excelシートに質問を複数記入し、解答を入力してもらうような流れで情報を取得します。
3-5. 回答受け取り
ヒアリングシートの回答を受け取ります。
3-6. ワイヤーフレーム作成
ワイヤーフレームとは「ホームページのレイアウトやコンテンツの配置を決めるための設計図」のようなもの。
作成時の注意点
- 必ずしも全ページのワイヤーフレームを作る必要はない
- ページコンテンツがその他のページを同じような場合は作成の必要なし
- デザインにこだわり過ぎない
- あくまでも情報を整理することが目的なので線と文字だけで十分
- スマホ版は別のレイアウトを作成するのが理想的
ワイヤーフレームで文言を作成するときには、コピーライティングを意識するとサイト訪問者の心に響きやすくなります。
コピーライティングとは...
「言葉や文章を使って、人の心を動かすこと」を意味する。
次のサイトの「PASONA（パソナ）法則」や11のコツを意識するといいです。
4. デザイン
ワイヤーフレームを参考にデザインで肉付けをしていきます。
このときはじめにヒアリングした顧客の希望をできるだけ再現します。
5. コーディング
実際にコーディングしていきます。
6. 提出
顧客との間で提出と修正を繰り返し、最終的な納品にいたります。
Discussion