やってみよう！WEBサイト制作第2弾 #01 サイト制作の流れ

WEB制作の流れ

WEBサイトを作成するには、コーディングだけでなく様々な工程を必要とします。#01ではWEBサイトを制作するまでの流れをザックリ解説します。

WEBサイト制作を始めるときに整理しておきたい３つのポイント

WEBサイトは単にコードが書ければできるものでも、デザイン力があればできるものでもありません。「目的の明確化」、「ターゲット像の定義」、「予算、運用計画」と３つのポイントを常に意識していきましょう。

１．目的を明確化する

WEbサイト制作の企画フェーズにおいては、まず「なんのためにWEBサイトを制作するのか」といった目的を明らかにしなければなりません。企業サイトなら「自社製品やサービスの認知向上」、飲食店なら「集客」などお客様によって目的が微妙に違います。WEBサイトを制作する目的を明確化すれば、そこから逆算して、やるべきことや取り組むべき課題もはっきりしてきます。WEBサイトを制作する目的が曖昧なままでは、企画、制作のフェーズで方向性が定まらないため具体的な成果が全く出ません。　

２．ターゲット像を定義する

次にWEbサイトのターゲットを絞り込んで明確に定義し、具体的かつ詳細なペルソナ像を設定する必要があります。ターゲットを設定しないまま制作をしても、どのような人のニーズも満たさないWEBサイトになりかねません。BtoC/BtoB/や業界、ジャンルによって着目すべき項目は変化します。

• 年齢
• 性別
• 職業
• 所得
• 居住地
• 家族構成
• 趣味
• 悩み・ニーズ

このような属性を明確に定義することによって、ターゲットへの訴求力が高いWEBサイトを企画できます。

３．予算・運用計画

WEBサイト制作において最も重要な部分です、例えば予算１０万円でSEO対策やＯＧＰ設定など制作以外の運用設定はあまりにも予算をオーバーしてるといえます

WEBサイト制作の６つの流れ

WEBサイト制作の流れは以下の６つのプロセスです。

• １．調査・分析・企画
• ２．設計・UI/UX
• ３．コンテンツ・デザイン制作
• ４．実装・システム開発
• ５．リリース・保守運用
• ６．評価・改善

各プロセスについて以下で解説します。

調査・分析・企画

新規で制作を始める場合は、想定するターゲットの行動やニーズ、競合サイトの調査から始めましょう。既存のサイトの場合はアクセス状況やユーザー行動事業実績からわかる顧客属性やニーズの分析を行います、それにもとづき、事業の抱える課題やその解決策を探りだしましょう。

次に調査・分析の結果やターゲット像などを踏まえつつ、WEBサイトのコンセプトを企画します。WEBサイトのコンセプトはコンテンツや構造設計、デザインなどWEBサイト制作の全般にかかわるためとても重要です。

それから、WEBサイト制作の計画書（要件定義）を作成しましょう。計画書にはWEBサイトの概要、制作要件とシステム要件、課題、スケジュール、などを組み込みます。

設計・UI/UX

Webサイトの設定にあたっては階層を整理し、全体の構造を設計してサイトマップに落とし込みます。その際はUI/UXの最適化や導線設計を意識しましょう。

UI（ユーザーインターフェース）とはWebサイトのデザインや視認性、操作性など、Webサイト訪問者に「わかりやすさ」「使いやすさ」を提供するものです。また、UX（ユーザーエクスペリエンス）はWEBサイトを通じた顧客体験を指し、UIもUXに含まれ、UI/UXの最適化は、Webサイトを訪れたターゲットユーザーはスムーズにニーズを満たすために重要です。

コンテンツ・デザイン制作

Webサイトの企画にもとづき、ターゲットの属性による訴求効果も意識したうえで、Webサイト全体に共通するデザインのコンセプトを決めます。デザインコンセプトはWEBサイトに使用するフォントやカラースキーム、レイアウト、画像素材、テキスト（文章）といったビジュアル要素要素を選定し、配置する際の基準となります。

Webサイトに掲載するコンテンツには動画・画像やイラスト、テキストなどさまざまな方法があります。ターゲットの属性に受け入れられやすいコンテンツや内容を選ぶことが大切です。ターゲットに伝えたいコアメッセージを整理したうえで各コンテンツを制作しましょう。

実装・システム開発

企画した通りのビジュアルや機能を備えたWebサイトになるように、システム開発と機能の実装が必要です。システム開発は「フロントエンド」部分と「バックエンド」部分に分かれます。

「フロントエンド」の開発においては、主に、HTMLやCSS、JavaScriptといったプログラミング言語を使って、Webサイトを訪問したユーザーの「目に直接触れるビジュアルを調整」します。Webサイトの閲覧環境はユーザーによって異なるため、どのような端末、OS、ブラウザで閲覧しても適切に表示するためにHTMLコーディングが重要です。HTMLコーディングはWebサイトの表示速度やSEO（検索エンジン最適化）、更新作業や運用のしやすさなどにも影響します。

「バックエンド」開発はユーザーの「目には触れないWEBサイトのプログラムを構築する」作業です。日常的に更新することが前提のWebサイトであれば運用を考慮し、WordPressなどオープンソースのCMSを使う場合もあれば、オリジナルのシステムを構築する場合もあります。また、サーバーや社内システムとの連携といったインフラ部分の設計も重要です。

リリース・保守運用

Webサイトをリリースする前に、「動作検証（デバッグ）やブラウザチェックといったテストを実施」します。テストにおける主なチェックポイントは以下の4つです。

• 1.サーバーやネットワーク、データベースは正常に機能するか
• 2.主要な複数ブラウザで正常に動作するか
• 3.パソコン、スマートフォン、タブレットなどマルチデバイスで正常に動作するか
• 4.問い合わせフォームや検索機能などのシステム要件は問題ないか

テスト後は見つかったバグの修正を行うため、「あらかじめ修正期間もスケジュールに組み込んでおく必要」があります。要件定義書に記載された項目を満たすWebサイトが完成て初めて本番公開となります。

評価・改善

Webサイトをリリースした後も、アクセス状況やCVR（コンバージョン達成率）の監視を継続したうえで、システムの微調整やコンテンツの更新を継続していくことが重要です。Webサイト制作と並行して、「アクセス解析ツールなどWEBサイトの保守運用を行う体制」も、事前に構築しておく必要があります。

アクセス解析は定期的に行いましょう。そのうえで、「CVRをより高めたい」「目的のページの閲覧率を上げたい」「SEOによる流入を増やしたい」といったWebサイトの課題を洗い出し、追加施策を講じていかなければなりません。

また、必要に応じてコンテンツの配置を変更したり、テキストのリライト（修正加筆）をしたりといったコンテンツ内容のメンテナンスも実施していきましょう。