HP/LPのwebサイト制作ってどんな流れで作るの？
記事ビジネス・マーケティング
こんにちは。
「さっくり解説」のカルシスです。
今日は、
「webサイト制作を依頼したけど思っていたより納期が長い！」
「どうしてそんなに時間もコストもかかるの？」という疑問のために、
「webサイト制作の流れ」について
初めの打ち合わせから内部での動き、公開するまでの流れを
「ざっくり解説」していきます。
とはいえ、手順が多いので”ざっくり”ですがいつもより長めとなっています。
それから、難しい言葉が続いていたので、私なりに「カジュアルな言い換え」も付けさせていただきましたので、お気軽に見ていってください♪
では、早速いきましょう〜
STEP1：企画（まずはサイトの目的やターゲットなどの認識をすり合わせましょう）
Webサイトを制作する際には、「ただつくりたい」ではなく、目的を明確にする必要があります。
関係する部署や担当者が多く複雑な場合には、関係部署へのヒアリングや調整をし内容を明確にしましょう。
顧客との打ち合わせで以下の内容を作り上げていきます。
1. Webサイト制作の目的を明確化（どんなサイトにしたい？）
- サービス・商品サイトの場合、「売り上げを伸ばす」「サービスの認知度を上げる」など
2. ゴールの設定（最終的には何を得たいですか？）
- 目的の達成度合いを評価するための指標を設定しましょう。
- 数値化されているものほど改善しやすく、目標達成がしやすくなります。
3. ターゲットユーザーの明確化 （どんな人が訪れますか？）
- ターゲットユーザーの詳細な人物像（ペルソナ）を定めることが大切です。
- 同じ20代女性でも好みや生活スタイルが異なり、それによって想定内容にずれが生じることがあります。
4. 調査・分析（どんな方法でコミュニケーションをとることが多い？）
- ターゲットユーザーとの適切なコミュニケーション方法を調査・分析します。
- 広告、SNS、検索エンジンなどのオンライン施策や、店頭POP、雑誌、新聞などのオフライン施策を考慮します。
5. Webサイトのコンセプトの決定（では、こういうコンセプトで進めましょう！）
- 目的・ゴール・ターゲットユーザー・調査情報を基に、Webサイトの役割とコンセプトを決めます。
STEP2：Webサイト設計（具体的にどのようなパーツが必要なのか、どのような設計にするのか決めていきます）
企画が決まったら、どのようなWebサイトにするかの設計を行います。
こちらも顧客との打ち合わせ内容をもとに制作会社が行います。
1. UXデザインを行う（楽しい感じ？見やすい？かっこいい？どういう体験をしてもらいたい？）
- ターゲットユーザーに対してどのような体験を提供するかを設計します。
- カスタマージャーニーマップやユーザーシナリオを使用して判断の根拠を作ります。
2. コンテンツ企画を行う（どんなことを提供しますか？）
- UXデザインに基づいて、提供すべきコンテンツを考えます。
- サイト運営者の意図とユーザーのニーズを合わせ、心地よい体験が何かを考えます。
- SEO（検索エンジン最適化）対策のキーワード選定などを行います。
3. サイト構造を設計する（情報を整理整頓しましょう）
- ユーザーの閲覧に合わせた優先順位に基づきコンテンツを掲載する方法を決定します。
- ナビゲーション設計やラベリングを行い、ターゲットユーザーが快適に遷移できるようにします。
4. ページ構造の設計-ワイヤーフレームの制作（webサイトのイメージラフ案を作ります）
- サイトマップを基に、各ページの情報構成要素を実際のラフ案で並べていきます。
- ワイヤーフレームを作成することで、各メンバーが同じ理解を持てるようにします。
5. システムの設計を行う（サイトの骨組みに、どのようなものが必要か、どのタイプが適切かを考えます）
- 要件やサイト構造を考慮し、適切なシステムの導入方法を設計します。
- 必要な要件を満たすこと、予算内で実装可能か、セキュリティやメンテナンス性、拡張性を考慮します。
STEP3 : デザイン制作（見た目をどのように調整していくかを決めていきます）
1.デザインコンセプトの決定（キーカラー、フォント選び、ルール決めをして統一感のなるサイトづくりをします）
- ユーザーシナリオやUXデザインでの情報をもとにデザインのコンセプトを決めていきます。
2. 写真やイラストなどの素材を準備（撮影したり、0から作ったりします）
- 素材が既にある場合には、その素材に合わせたデザイン設計をしていきます。
- 素材がない場合には、撮影やデザイン制作を行います。
3.デザインカンプの制作（実際のサイト完成イメージが見れるようになります）
- 素材が集まったら、デザインコンセプトに沿って具体的なサイトのデザイン案を作成していきます。
STEP4 : システム開発とコーディング
webサイトとして機能するように、プログラミング言語を使用したコーディングや構築を行なっていきます。
1. フロントエンド（普段見ているサイトの表面的な部分です）
- ビジュアル面を調整する工程で、デザインカンプと同じものがインターネット上で見られるようにします。
- HTML、CSS、JavaScriptなどの言語を使用して、Webページのテキストや装飾を実装します。
2. バックエンド構築/サーバーサイド構築(普段見えないですが、常に動いている裏側のプログラムなどです）
- サーバーで動くプログラムを開発する工程です。
- ユーザーには見えない裏側の処理を担当し、例えば予約サービスではお店との連携や予約受付メールなどを処理します。
- WordPressやEC-CUBEなどのシステムを使用する場合は、システムのインストールや設定のカスタマイズも行います。
- サーバー設計やドメイン設定など、Webサイトの公開に必要なインフラの準備も担当します。
3. サーバー設定（レンタルサーバーなどを利用することもあり、契約内容によっては別途料金が必要になってきます）
- サーバーはデータの格納庫であり、情報を提供するためにプログラムが動くように設定する作業です。
- サーバー選定と契約、OSのインストール、ミドルウェアのインストール、ロードバランサーの設定、セキュリティ設定などを行います。
4. ドメイン設定（サーバーと同じく費用が発生することがあります）
- ドメインはURLで入力するサイトのアドレスのことで、ユーザーにとって覚えやすい文字列と紐づける作業です。
- サーバーに格納された情報がどこにあるかを示すため、ユーザーがサイトにアクセスできるようにします。
- ドメインの選定と契約、サーバーの選定と契約、サーバー設定、サーバーとドメインの紐づけなどが含まれます。
5. テスト
- フロントエンドやバックエンドのエンジニアの作業が完了したら、動作検証やデバッグを行います。
- ユーザーがWebサイトを閲覧する環境に応じて、デザインの表示やシステムの動作をチェックします。
- 問題点があれば修正が必要であり、テストと修正期間もスケジュールに組み込まれます。
LAST STEP！！！ : リリース（webサイトの公開です）
- テストで問題がなければ、Webサイトのリリースを行います。
- デザイナーやエンジニアが稼働できるように手配をし、万全を期してリリースを行います。
- リリース直後に公開されたサイトでさらなるテストを行い、微調整を行うこともあります。
お疲れ様でした！
ここまで読んでくださったあなたは強者です！！！
どうでしょう？
結構な量ありましたよね？
webサイト制作会社であれば、たくさんの人の能力で仕上がっていることが分かりますよね。
人件費がメインのコストになりますが、1件100万というのにも頷けるのではないでしょうか。。。
そして私のようにフリーで動いている人であれば、納期が3ヶ月、6ヶ月というのも「そうなるわな、、、」となりますよね。
「とにかく早くHPが必要だ！」という方は、制作会社を
「納期は急いでないから、なるべくコストを抑えてHP/LPが欲しい」という方は、私をご指名いただければと思います。
あなたのHP/LPにかける想いはどのようなものですか？
ぜひ、その想いを形にしてくださいね。
少しでもその手助けになれれば幸いです。
当ブログでは、ザックリとイメージをつけてもらえるように、最低限の内容でwebサイト制作にまつわる情報をカジュアルにご紹介していきます。
少しでも、参考になったという方は、「いいね」や「フォロー」をしていただけると励みになります。
前回もたくさんの方から、「いいね」をいただき非常に喜んでいるカルシスです。
本当にありがとうございます＾＾
これからもお役立てるよう頑張ります＾＾
また、カルシスでは、実績を積むための「まるっとデザインから公開までLP制作モニタープラン￥15000」を3名様限定で募集中です。
私は「デザイン / コーディング」をメインにフリーランス活動をしております。ですが、まだまだ成長途中でございます。
クライアント様に喜んでいただけるご提案ができるようになるために、現在は「SEO、分析スキル、マーケティング」について学んでいる最中です。
まだまだ駆け出しなため納期にお時間を頂戴する分、、、格安にてモニター様を募集しております。
気になった方は、まずはお気軽にメッセージいただければと思います。
