基本のWEB制作の流れ

企画立案とは
クライアントがサイト立ち上げる時には、必ず何らかの目的があります。
例えば、
- 売上の向上(商品・サービスの販売促進)
- ブランドイメージの向上(企業や商品の信頼性アップ)
- 認知度の拡大(新規顧客へのアプローチ)
- 情報発信(商品・サービスの詳細説明や顧客サポート)
企画立案とはプロジェクトの初期段階でサイトの目的を明確にし
ターゲットを特定し
ターゲットのニーズに合ったコンテンツを企画するプロセスです。
ヒアリング
ヒアリングはお客様のニーズや目的、期待する成果を詳しく把握することが主な目的です。
通常はヒアリングシートを作成し、クライアント様に必要項目の入力(記入)していただくとともに、会話の中からもさまざまな情報を収集します。
「WEB制作 ヒアリングシート」で検索や画像検索するとサンプルが見られると思います。
ヒアリングシートはExcel、Word、Googleスプレッドシート、Googleドキュメントの他、最近ではGoogleフォームもよく利用されています。
今回は事前にいくつか情報をいただいています。
その他の情報は公開ヒアリングで質疑応答をしていただきます。
公開ヒアリングの前にどんな情報が必要かをグループワークで洗い出してもらいます。
調査分析
ヒアリングシートを元に市場調査、競合調査などを行います。
この調査分析は、サイト制作に必要な情報を収集し、分析する作業です。
主な目的は、クライアントの目標やニーズを理解し、競合状況やターゲットユーザーの特性を把握することです。
1.目的の確認 (ニーズと目標)
サイトを通じて達成したい目的や期待する成果を明確にします。
これにより、どのような方向性でサイトを設計するかを決定します。
具体的には、以下のような項目を洗い出します。
- クライアントが達成したい目的(販売促進、認知拡大、情報提供など)
- クライアントが期待する成果(売上向上、ブランドの信頼性向上など)を具体的な数値で
- ターゲットユーザー層(年齢、性別、職業、地域など)の特定
- クライアントのブランドイメージや、サイトを通して伝えたいメッセージの内容
これらをもとに、具体的な目標に向かって進むための方向性を決定します。
2.市場調査
業界の動向や市場の変化を把握し、サイト制作に必要な要素を明確にします。
特に、ECサイトの場合はクライアントが参入する市場の将来性なども調査します。
- 業界の動向や市場の変化(消費者の好み、新技術の登場)
- 市場に影響を与える規制変更やトレンドの確認
- 業界全体の市場規模や成長の見込み
3.競合分析
同業他社や類似サイトを調査して、競争環境を把握します。
競合サイトのデザインや機能、コンテンツを調査し、自サイトとの差別化要素を見つけます。
- 競合サイトの評価されているデザインや機能を調査
- 競合が採用している戦略や、強み・弱みを分析
- 新たな競合の登場や市場の変化を反映し、競争環境を更新
4.ターゲットユーザー調査
特定されたユーザー層の行動パターンやニーズを理解し、サイト設計のために必要なデータを収集します。
この調査で、ユーザーが求める情報や機能、デザインを明確にします。
- ユーザーの行動パターンやニーズを把握
- ユーザーが抱える課題や悩みを理解
- ユーザーのライフスタイルや価値観を調査
どのデバイスを使用しているかや、どの媒体を通じて情報を収集しているかを把握することで、さらに効果的なサイト設計が可能になります。
5.SEO分析
ターゲットユーザーが検索するキーワードを特定し、それをサイト設計に反映させるための対策を練ります。
- ターゲットユーザーが使用する検索キーワードを調査
- 競合サイトのSEO施策を分析し、成功事例や活用ポイントを導出
- SEO対策に基づいたキーワード選定とサイト設計
※SEOとは「Search Engine Optimization(サーチエンジンオプティマイゼーション)」の略で、日本語では「検索エンジン最適化」と訳されます。
具体的にはGoogleやYahooなどの検索で、検索キーワードに対してサイトが上位に表示されるようにするための対策や手法です。
6.技術的調査
サイトに必要な開発プラットフォームやツールを選定し、技術的な要件を明確にします。
これには、サイトの速度、モバイル対応、SEO、セキュリティなどが含まれます。
- サイト制作に適した開発プラットフォームやツールの選定
- 技術的な要件(速度、モバイル対応、SEO、セキュリティ)を確認
- サイト制作に必要な制約や課題を洗い出し、解決策を見つける
※Googleの調査では、サイトが表示されるまでに3秒以上かかる場合、約40%以上のユーザーが離脱するとされています。理想の表示速度は「2秒以内」で、
離脱率を防ぐためには目指すべき目標となっています。
参照:Find out how you stack up to new industry benchmarks for mobile page speed
情報整理
収集したデータを基に、サイト制作に向けた具体的な方向性を決定します。
ペルソナ、カスタマージャーニーマップなどの手法を使って、ターゲットに最適化されたサイト制作を実現します。
1.ターゲット分析
▪️ペルソナを作成する
ターゲットユーザー調査の結果を基に、詳細なユーザープロフィールを設定します。
ペルソナ(Persona)という架空の典型的な顧客像を作成し、どのようなユーザーがその商品を求めているのかを具体的に把握します。
例えば、ある化粧品ブランドが「20〜30代の働く女性向けにスキンケア商品を展開したい」と考えた場合、
単に「20〜30代の働く女性」といったターゲット層を定めるだけでは幅が広すぎて絞り込めません。
商品設計やマーケティング戦略を明確にするためには、より具体的な人物像(ペルソナ)の作成が必要です。

▪️なぜペルソナを作成するのか?
ペルソナを設定することで、ターゲット層の中でもどのような人物がこの商品を最も求めているのかを明確にします。
「20〜30代の働く女性」と言っても様々なライフスタイルや価値観の人がいるので、ターゲットのニーズは多様化しています。
どのようなシーンで商品を必要としているかを明確にするために、具体的な顧客像を描く事が必要なのです。
例えば、フルタイムで働きながらジムにも通う加藤美沙子さんのような人物を想定すると、以下のようなニーズが浮かび上がります。
- 朝は7時起床、8時には家を出て通勤=朝は忙しくスキンケアに時間をかけられない
→ 時短で使えるオールインワンジェル - 仕事終わりはジムで汗をかく
→ 汗をかいても崩れにくい - 週末は友人とカフェ巡りやショッピングを楽しむ
→ おしゃれで持ち運びやすいパッケージ - 外回りが多く、エアコンや紫外線で肌が乾燥しやすい=乾燥対策が必要
→ 保湿もできるマルチケア成分配合
このように、ペルソナを設定することで、ターゲットのライフスタイルに寄り添った商品設計やマーケティングが可能になり、的確な戦略を立てることができるようになるのです。
▪️最適なペルソナ設定をするには?
ペルソナを適切に設定するためには仮説ベースの情報を精査し、できる限り実態に近づけることが重要です。
通常は以下のようなステップで、より精度の高いペルソナを作成していきます。
◎既存データの活用
- 自社の過去の顧客データ(購入履歴、問い合わせ内容など)を分析
- SNSやアンケート結果など、公開されているデータを参考にする
- 競合のターゲット分析を行い、共通する要素を抽出する
※WEBの場合はアクセス解析やユーザー行動データなども活用して適切なペルソナを設定します。
▪️カスタマージャーニーマップの作成
カスタマージャーニーマップはペルソナ(具体的な顧客像)を元に作成します。
カスタマー ジャーニー マップは顧客体験を可視化し、顧客が製品やサービスを利用する過程における感情、思考、行動を理解するためのツールです。
フェーズ | ユーザー行動 | ユーザーの思考・感情 | タッチポイント | 課題・改善案 |
---|---|---|---|---|
認知(Awareness) | Instagram広告を目にする。スキンケア商品の「時短」「簡単」を強調した内容が目を引く。 | 忙しい朝にぴったりの商品があるかもと興味を持つ。 | SNS広告、インフルエンサー投稿 | 課題:自分に合ったスキンケアを見つけるのが難しい。 改善案:広告で短時間で効果があると強調し、ターゲットのニーズに合うポイントを訴求。 |
興味・検討(Consideration) | 公式サイトを訪問し、商品詳細ページで「忙しい朝でも1分でスキンケア完了」との説明を確認。 | 商品が自分の生活スタイルに合いそうだと感じる。商品の詳細をもっと知りたいと思う。 | 公式サイト、レビューサイト、比較サイト | 課題:どのスキンケア商品が最も効果的か、具体的な情報が欲しい。 改善案:商品ページにレビューや詳細な成分・使い方を追加し、疑問を解消。 |
意思決定(Decision) | 昼休みにレビューをチェックし、初回限定割引と送料無料キャンペーンを確認。購入の決断。 | 割引とキャンペーンにお得感を感じ、購入を決定。 | ECサイト、購入ページ、クーポン | 課題:購入するかどうか悩む時間が長くなると気が散る。 改善案:購入意欲を高める「限定」や「時間限定」のオファーを目立たせる。 |
行動(Action) | 商品をカートに追加し、簡単に決済完了。 | 短時間で購入できたことに満足感を感じる。 | 決済ページ、購入完了メール | 課題:購入後、次のステップ(配送)までの情報が不足している。 改善案:配送情報や購入確認をわかりやすく、即時に提供する。 |
継続・共有(Retention & Advocacy) | 商品が到着し、簡単にスキンケアできたことに満足。SNSに投稿し、友人に勧める。 | 自分の生活にぴったりな商品を見つけ、シェアしたいという気持ちになる。 | SNS、口コミサイト、レビュー投稿 | 課題:商品に満足しても、次回購入への動機づけが弱い。 改善案:リピーター向けの割引や特典を用意し、SNSシェアを促進する。 |
◎ユーザーの行動ステップを洗い出す
ユーザーが商品・サービスを知り、購入し、利用し、リピートするまでのプロセスを分解します。
「認知」「興味・検討」「意思決定」「行動」「継続・共有」といったフェーズに分類し、各フェーズでユーザーがどのような行動をとるかを整理します
◎ユーザーの思考・感情を記録する
各フェーズでユーザーが何を考え、どのような感情を抱くのかを記録します。
- 例:「興味・検討」段階では、比較検討しながらメリット・デメリットを考えている
- 顧客が抱く疑問、不安、期待などを細かく記載
◎タッチポイントを特定する
ユーザーがブランドや商品と接触するポイント(タッチポイント)を明確にします。
- 例:広告、SNS、検索エンジン、公式サイト、レビューサイト、実店舗 など
- どのタッチポイントが重要かを分析し、最適化を検討
◎課題と改善策を考える
各フェーズにおけるユーザーの課題や障壁を洗い出し、それに対する施策を考えます。
- 例
- 認知フェーズ → 広告のターゲティングを改善
- 検討フェーズ → 競合比較コンテンツを充実
- 購入フェーズ → スムーズな決済フローを設計
◎視覚化してマップを作成する
整理した情報を表やフローチャートにまとめ、チームで共有しやすい形にします。
2.コンテンツの検討
ここまでの手順でサイトを使う人がどんな情報や機能を求めているのかを導きだします。
それを踏まえて文章、画像、動画、ボタンやリンクなど、どんな要素が必要かを考えます。
▪️コンテンツマップの作成
コンテンツマップとは、サイトのコンテンツ構成を可視化した図のことです。
Webサイトの構成を把握し、追加すべきコンテンツを明確にするために役立ちます。コンテンツマップを作成することで、コンテンツを有効な順序で追加していったり、チーム内での情報共有を円滑にしたりする効果があります。
リカレントスクール広島校基本情報
所在地: 〒730-0015 広島県広島市中区橋本町9−7 Dolce Square 3F
営業時間: 平日9:00~18:00
電話番号: 082-221-7580
目的:「認知度・知名度を高める」
要望1 本校の特徴を紹介してください
充実した就職支援体制
早期就職支援体制 入校後月1回約1時間のキャリアコンサルタントによる個別キャリアコンサルティング
訓練修了後3か月まで個別のキャリアコンサルティングで就職活動を支援します
訓練修了後3か月まで土曜日は自習ができます。ポートフォリオの手直し及びプリントアウトも可能
講座関連の資格試験も学内で団体受験を実施
企業実習の実施
要望2 受講生インタビューを入れて下さい
・入校のきっかけ
・今後の就職の目標
・予習復習に費やした体験
・入校してよかったと思うこと
・就職支援の授業で役にたったこと
・創造社リカレントスクール広島校を選んだ理由
コース一覧
実践で学ぶJava+Pytonプログラマー育成化(公共職業訓練)
DX時代に対応するIT活用オフィスワーク+Web更新習得科(公共職業訓練)
実践で学ぶJava+Pytonプログラマー養成化(求職者支援訓練)
これから始める!WEB動画編集&ホームページデザイン科(求職者支援訓練)
グラフィック・WEBデザイナー養成科(求職者支援訓練)