【保存版】Webサイト制作の流れ
自社サイト発注する側の方は特に注意して欲しいです！サイトの見た目には反映されない部分があり、内部まで細かく見ないとタグが設置されているかどうかわからなかったりします。
私はWeb制作会社の代表をしており、数々のサイト制作に携わってきました。
サイト制作を失敗しないために、具体的な制作の流れを6ステップで分類しました。
それぞれ詳細に説明していきます。
Step1 戦略立案
└リサーチ
制作したいサイトにもよりますが、「競合取得」→「セクション分割」→「訴求軸＆訴求内容＆ターゲットの比較」という流れで進めます。
日頃から情報を取得してらっしゃる方はパッと思いつくかもしれませんが、基本的には競合となる会社をリサーチして、より具体的なイメージを持った方が良いです。ざっと下記の方法が考えられます。
・Google検索
・外部サイト利用
・各種SNSで検索
└現状調査
現在のサイトについて、ページ＆セクション構成、システムの構成、流入経路、流入数、CVR、ヒートマップ分析、
必要があればもっと上流の、3C、SWOT、STP、4P分析なども行います。
└課題の抽出
比較や現状調査をもとに現状ネックになっている部分を抽出します。その場合、「課題の重要度」「工数」について数値を付与し、各課題を点数で評価します。（どの課題から着手すべきかという優先順位が明確になります。）
└ターゲット・ペルソナの設定
既存事業のターゲットがある場合でもチャネル毎にユーザーの温度感は異なるので、一度明確に定義しなおした方が良い場合が多いです。ニーズを逆算してから、競合と比較して自社はユーザーにどのような価値を提供できているかという点を言語化します。
└目的・目標の設定
アプローチする課題について、どの程度を目標とするか決定します。例えばCVRについてであれば、ホワイトペーパーの場合は5％前後、資料請求やお問合せについては0.5~1%が目安となります。
└サイト外で関わる要因
リード獲得後、商談や受注獲得までの流れを明確にします。
また、サイトに到達するまでのユーザーの温度感は流入媒体によって異なるので、CPAが合っているかなど外部要因の確認をします。
Step2 全体設計
└使用技術
HTML,CSS,SASS,JavaScript,TypeScript,Vue.js,React.js,PHP,WordPress,Laravel,CakePHP,Python,Java,Rubyなど挙げればたくさんありますが、Web系の開発で使用する技術は上記の範囲に収まるものが多いと思います。
一般的なコーポレートサイト、ブランディングサイト、採用サイト、メディアであればWordPressを使用したり、LPであればHTML,CSSのみで構築する場合も多いです。
└使用プラグイン等
必要に応じて幾つか入れておくと良いです。WordPressプラグインの参考↓
https://www.conoha.jp/lets-wp/wp-recommendation-plugin/
└データベース構造
システム構築をする場合にはしっかりとデータベースをどのようにするか決める必要があります。これは技術的な部分になるのでエンジニアさんと相談していきます。
ただ、ビジネス的な観点も踏まえてそのデータが必要なのかどうかや、今後そのサービスがどのような拡張可能性があるかによって保持すべき情報とデータ形式が変わってきますので運用も考えた構成にカラムや親子関係を最適化します。
例えば、10万件以上の商品データを取得するスクレイピングシステム構築の際は、画像データを自社DBで保持する必要が本当にあるのかといった部分ですね。
└サイトマップ
全体の構造を一目で理解できることがベストなため、ディレクトリ構造を意識した上で、ページの遷移図を簡潔に記載します。お問合せページについては確認画面、サンクスページが必要かどうかを確認します。動的な部分つまり、CMS実装箇所についても確認します。
また、ユーザビリティの観点からグローバルメニューの項目はできる限り少なくします。本格的なSEO対策を行うべきサイトの場合にはXMLサイトマップを作成します。
複雑になりすぎると視認性が低下するため、階層構造の深さに注意します。各ページのネーミングはできるだけ共通認識が取れる名前をつけることでユーザーフレンドリーに作成します。
Step3 ワイヤーフレーム作成
└参考サイト選定
既に記載しましたが競合となる会社をリサーチして、より具体的なイメージを持った方が良いです。下記の方法が考えられます。
・Google検索
・外部サイト利用
・各種SNSで検索
また、デザインに関しては下記のサイトも参考になります。
上記は一部ですが、参考にご覧ください。自社サイトを発注する側の担当者さんは、参考サイトのどの部分が気に入っているのかも併せて伝えることで制作側との認識ミスを防ぐことができます。
└枠組み方向性
個別ページについてユーザーフローの設計をします。そのためにはユーザーがサイト上でどのように移動するかを理解する必要があります。また、CTAをどこに設置するかやページ遷移の流れを明確化します。訴求する内容に沿ってテキストや画像を配置していきます。
└打ち出したい部分
競合分析をした結果どの要素を最も打ち出すべきかを決めます。ビジュアルの綺麗さ、誠実さ、機能性、安心感など言語化します。言語化することによりコピーライティングにも反映でき、FVでの離脱を減らし、CVR向上に寄与します。
└対応範囲
ライティングや写真撮影、広告、サーバー契約や保守運用などを明確に確認します。目的に応じてクリティカルな部分はプロに任せた方が良いです。例えば、ユーザーにおしゃれな店内の雰囲気を伝えることがマストな場合、個人的に撮影した画像では良さを１００％伝えられない場合が多いので、プロに頼んで撮影した方が良いです。
Step4 デザイン作成
└方向性
クライアントとの初期ミーティングを設置し、プロジェクトの目的、目標、および期待を再確認し、方向性を確立します。
また、ブランディング要素の収集をします。クライアントの既存のブランドガイドラインやロゴ、企業のビジョンやミッションに関する資料を共有してもらい、デザインに組み込むべき要素を洗い出します。ターゲットの好みや嗜好を再確認し、それに基づいてデザインの方向性を検討します。チームでブレインストーミングを行い、デザインの方向性に関するアイデアを共有し合います。
└イメージ
クライアントとデザインの要素について具体的に議論し、視覚的な要素に基づいて方向性を明確化します。色、フォント、画像の雰囲気などを具体的に決定します。デザインの一貫性を保つために、使用する色やフォント、スタイルに関するルールを確立します。IOSアプリなどは必要があればモックアップの作成をする場合もあります。
進行中のデザインをクライアントに定期的に共有し、クライアントのフィードバックを積極的に取得することは制作のずれを無くすために最も重要な項目の一つだと考えております。例えば、LPであればFV＋１セクションで共有するなど細かいスパンで情報の共有をします。
└意図連携
意味のない効果の出ないサイトを作らないために、マーケティングやブランディングの施策含め、サイト制作の目的大枠を制作チーム全体で共通認識を持つことが重要です。各フェーズの情報や修正について全員が見れる体制を作る必要があります。私はスプシで管理していますが、esaやnotionなどのツールを使用しても良いと思います。
Step5 コーディング
└規則確認
コードの管理方法、命名規則、ブレイクポイント、CMS、フォーム自動補完などを明確にする。
└使用ライブラリ
Bootstrap、FontAwesome、jQueryなど使用するかどうか決めます。
└アニメーション
どの箇所にどの動きをつけるのか決めます。過度なアニメーションは逆効果になるので、必要に応じて付与します。
└CMS箇所
頻繁に更新したり動的に変更すべき部分にはCMSを組み込んだ方が良いです。例えばNewsやBlogなどの箇所には組み込んだ方が良いですね。
└GTM,GA4連携
GTMタグをサイト内に入れておくことで、GA4、FBピクセルタグ、ヒートマップなどのツールを非エンジニアでも簡単に導入できるのでタグを入れておきましょう。GA4ではユーザーがどの流入経路から訪れているかであったり、月間アクティブユーザーが先月と比較してどれくらい増加しているかを計測できます。また、ファネル分析も設定でき、ページごとにどの程度のユーザーが遷移しているかを計測できるので、改善施策考案に必須のツールです。
Step6 チェック
└レイアウト
デザインとの差異（要素抜け・大きい・小さい・広い・狭い）また、様々な横幅での崩れはないかチェックします。
└テキスト
金額・数量等の数字、人名・商品名・地名、日程・期間、電話番号に間違いはないか確認します。
└リダイレクト設定
サイトの刷新やドメインやサーバーを移行した時にリダイレクト設定を確認します。
└head内タグ
GTMタグや、Charset、Viewport、script、title、metaタグが適切に設定されているか確認します。
└代替テキスト
alt属性が正しく設定されているか確認します。
└デバイス＆OS
スマホでもしっかり表示されているかどうか、OS（IOS、Android、Mac、Windowsなど）やブラウザ（Charome、Safari、Firefox、Edgeなど）で正しいレイアウトで表示されているかどうか確認します。
└メール
テストメールを送信してみてしっかりと届くか確認します。届かない場合には送信先の再設定や、コードを改善する必要があります。
└表示スピード
サイト内の画像が多い場合などに入念にチェックします。ビジュアルを訴求したいサイトでは画像の解像度をかなり上げて配置している場合があります。
Googleが行った調査では、WEBページの読み込みに3秒以上かかるページからは53％の人がページを見る前に他のWEBサイトに移ってしまうという分析結果がありますので、遅くとも３秒以内にアクセスできる必要があります。読み込みが遅すぎる場合には、画像のファイルサイズを圧縮したり、下層にある画像を読み込み遅延させたり、アニメーションライブラリをなるべく使わないようにしたりします。
長文をここまで読んでいただきありがとうございました！
記事が良いと思っていただけたらイイネしていただけると大変励みになります🙏
Webの制作をお考えの方は無料相談のDMください（対応に限りがありますので、定員に達し次第受付を終了させていただく場合があります）↓
この記事が気に入ったらサポートをしてみませんか？