今回は初めてWEBサイトを依頼される方のために、WEBサイトの発注から公開までの流れをまとめました。

WEB開発会社によってプロジェクトの進め方は異なりますが、弊社では以下のような方法で作業を進めています。

WEBサイト開発の大まかな流れ

WEBサイトの開発は基本設計開発テスト・公開の流れで進めます。

基本設計ではサイトのページ構成、モックアップ、サイトの大枠となるテンプレートのデザイン、UIの設計などWEBサイトの基本となる土台を設計・デザインします。

開発段階では基本設計に基づいてサイトのコンテンツの登録、コーディング、各種機能開発、プラグインの導入、入力フォームの開発などWEBサイト開発の中心となる段階です。

テスト・公開では開発したWEBサイトの内容を確認し、動作テストを行なった上でサイトの公開を行います。

WEBサイト発注前にあらかじめご用意いただくもの

WEBサイトを発注するに当たってあらかじめご用意いただくものは次のようなものがあります

サイトのタイトル

会社ホームページの場合は会社名、サービスやオンラインショップの場合はそれらの名称がWEBサイトのタイトルとなります。

タグライン

タグラインは企業やサービスが何を提供するのかを一言で表したものです。有名なものでは次のようなものがあります。

ロゴ

ホームページに使用するために十分なクォリティのロゴ画像ファイルを準備してください。ファイル形式はJPG,PNG,PSDなどです。オリジナルのロゴファイルがAi形式やEps形式であればベストです。

サービス・ビジネス概要

自社の業務内容やサービス内容、商品一覧などを説明した会社案内パンフレットチラシPowerPointなどをご用意ください。

またその中で特に強調をしたい他社との差別化ポイント、商品やサービスの特徴、会社の特徴などがあればご指摘ください。

ドメイン・サーバーの有無

ホームページの開発依頼とは別個にすでにドメインやサーバーを取得している場合は、情報を提供していただきます。

ドメインはドメイン会社のコントロールパネルにログインするためのIDおよびパスワード、WEBサーバーも同様に、コントロールパネルにログインするためのIDおよびパスワードをご用意ください。

代表Emailアドレス

info@XXXXXXX.comやsupport@XXXXXX.co.jpなどのようにホームページで使用する代表Emailアドレスをご用意ください。

また企業用のFacebookやインスタグラムを契約する場合も代表Emailアドレスで取得をした方が無難です。

これまで担当者が自分のメールアドレスでFacebookやドメインを契約し、本人が辞めてしまったため後任者がアカウントがわからなくて右往左往してしまうというケースが頻繁に起こっています。会社の代表者とWEB担当者が管理できる代表Emailアドレスを取得することをお勧めします。

基本設計

基本設計ではホームページの基本となる土台を設計・デザインします。基本設計段階には下記のように複数のタスクがあります。

弊社 顧客
サイトマップ作成 サイトマップ作成(見積時作成) サイトマップ確認・承認
ドメイン設定 ドメイン候補の選択・提案 ドメインの選択
開発用WEBサーバー設定 開発用WEBサーバー設定作業・URLの通知 サーバーアクセス確認
サイトタイトル決定 サイトタイトルの提示
タグライン設定 タグラインの考案 タグラインの選択
ロゴ ロゴデータの用意(500px以上PNG/JPG, Ai/Psd)
Favicon Favicon作成(標準 / Retinaディスプレイ)
キーワード設定・調査 キーワード設定・キーワード調査 キーワード確認
モックアップ作成 モックアップ作成 モックアップ確認・承認
基本デザイン案作成(ホームページ) 基本デザイン案作成 基本デザイン案確認・承認
パーマリンク設定 パーマリンク設定
言語設定 言語プラグイン導入・設定・プラグイン翻訳
タイムゾーン設定 タイムゾーン設定
(オプション)
コピーライティング
翻訳

サイトマップ

サイトマップはWEBサイトの全体の構成を模式化した図です。弊社では見積時にWebサイト全体のボリュームを把握するためにサイトマップを作成します。

ドメイン

ドメインは新規取得する場合と今まで使っていたドメインを引き継ぐ場合があります。新規取得する場合は同じドメイン名を他者がすでに取得している場合は取得ができません。

現在使用しているドメインを継続して使用する場合は、DNSのログインIDとパスワードを準備します。

開発サーバー設定

Webサイトの開発は開発用サーバー上で行います。開発サーバーはインターネット上に繋がっており、IDとパスワードでロックされていますが、いつでも開発状況をインターネット経由で確認することができます。

キーワード設定・調査

開発するサイトのキーワードをページごとにピックアップし、それらのキーワードがWeb上でどの程度の競合があるのかを調査します。例えば「ダイエット」は重要キーワードのため競合が多いことは容易に想像できますが、「ダイエット ナチュラルサプリ」とキーワードを絞り込む事によって自社へのアクセスを獲得することが期待できます。

モックアップ

モックアップはWEBページを構成する要素を模式図にまとめたものです。モックアップはデザイン案ではありません。各WEBページをどのような内容をどのように配置していくのかを、大まかにレイアウトをしたものです。この段階で行うべきチェックポイントは、ページごとの内容に漏れがないか、各ページ間のフローは大丈夫か、ボタンやリンクが正しく配置されているかといった点です。

基本デザイン案作成

モックアップに基づいて基本デザイン案を作成します。基本デザインではカラースキームの設定、フォントの設定、ヘッダ、フッタ、サイドバーのデザイン、ボタンや地色の配色など、WEBサイト全体を通じて規定されるデザインルールを設定足ます。

この段階ではなるべく方向性の異なるデザインを複数提出し、WEBサイトをどのような方向性のデザインにするのかを検討します。

注意:いったん基本デザインが決まった後、開発段階に入ってから基本デザインを変更・修正するとコストアップや納期遅れの原因となります。各段階ごとに結論を出して次の段階に進めることが重要です。

パーマリンク設定

パーマリンクとはホームページの各ページをどのようなURLで表現するかを決めたルールです。パーマリンクはシステムにもSEOにも影響がある項目なので、開発の最初の段階で決めたルールを守ることがポイントです。

言語設定・タイムゾーン設定

WEBサイトで使用する言語とタイムゾーンを設定します。

コピーライティング・翻訳(オプション)

WEBサイトの各ページに表示するタイトル、デスクリプション、ボディテキスト、ヘッダなどのライティングを行います。ここで重要なのは検索キーワードを意識した文章を作成すること、共起語や類義語を考慮したテキストを使用すること、文章量は多すぎず、少なすぎず、必要十分な量を簡潔に書くこと、ヘッダとボディを構造的に記述することなどです。

開発

開発段階ではWEBサイトのコンテンツを作成し、各種機能を構築します。

BSC 顧客
ページテンプレート デザイン・コーディング テンプレートデザイン確認
投稿テンプレート デザイン・コーディング テンプレートデザイン確認
ヘッダテンプレート デザイン・コーディング テンプレートデザイン確認
フッタテンプレート デザイン・コーディング テンプレートデザイン確認
サイドバーテンプレート デザイン・コーディング テンプレートデザイン確認
詳細ページデザイン・コーディング デザイン・コーディング テンプレートデザイン確認
入力フォーム 入力フォーム作成・テスト
SEOタイトル設定 設定
メタディスクリプション設定 設定
フォーカスキーワード設定 設定
コーナーストーンコンテンツ設定 設定
詳細ページチェック 詳細ページチェック・承認
リンクチェック(内部・外部) チェック
画像Altチェック チェック
モバイル最適化 モバイル最適化 チェック
(オプション)
カスタムポストタイプ 開発 動作確認・承認
外部システム連携 開発 動作確認・承認
その他カスタム開発 開発 動作確認・承認

テンプレート開発

基本デザインが基づいて、ヘッダ、フッタ、サイドバー、ボディなどのコーディングを行い、WEBサイトのテンプレートを作成します。ここでの作業ポイントはデザインに忠実にコーディングを行うこと、スペースや上下左右揃えが整っていること、画面サイズ、モバイルなど様々な環境に対応していること、主要ブラウザ、Windows、Macなど様々な環境で正しく表示されることなどです。

詳細デザインページ

テンプレートが完成したらいよいよ各詳細ページのコンテンツ制作を行います。主に、テキストの配置、画像の配置、ビデオ配置、カラムや行の設定、ボタン設定、リンク設定などWEBサイトの中心をなすページを構築していきます。

この段階になるとお客様側も具体的なホームページのイメージをつかみ、詳細内容を検討することが可能になります。

文言やタイトルに変更が生じる場合はこの段階で対応します。

入力フォーム

CTA(Call to Action)はWEBサイトの営業効果を高めるために大変重要な要素です。入力フォームの設計、提示方法、表現方法によってフォームに入力してくれる顧客の率が大きく変わります。ユーザーが入力フォームに登録するなどのアクションを起こすことをコンバージョンと言いますが、高いコンバージョン率を維持するためには入力フォームの設計・開発は重要な要素です。

SEO設定

WEBサイトを検索結果の上位を狙うためには、検索エンジン最適化(SEO)が必要です。SEO対策のためにはできることを地道にやっていくことが最低限必要となります。

SEOタイトル設定: 検索キーワードを考慮したSEOタイトルを設定します。

メタディスクリプション設定: 各ページの要約を記載した文章を作成します。

フォーカスキーワード設定: 各ページごとに検索対象となるキーワードを設置します。

コーナーストーンコンテンツ設定: コンテンツの中でも重要なページはコーナーストーンコンテンツとして設定を行います。

チェック

一通りコンテンツの作成が終わったらサイト内のページ間のリンク、外部ページへのリンクが正しく動作しているかどうかをチェックします。また配置した画像にAlt設定(画像にキーワードを設定すること)ができているかどうかを再設定します。

モバイル最適化

近年、モバイルフォンからのWEBアクセスが増え、サイトによっては60%〜70%のアクセスがモバイルからの場合があります。基本的に全てのサイトはレスポンシブデザインで構築し、PCでもモバイルでも最適化された状態で構築しますが、PC上では可能な表現がモバイル上では正しく表現されない場合もあります。そのため、ホームページおよび各ページごとにiPhone、Andoroid、タブレットでWEBサイトを表示し、表示レイアウトの崩れはないか、スペースや上下左右揃えは正しく出来ているか、文字が小さくなりすぎないか、ボタンやリンクがモバイルからでも簡単にクリックできるか、CTAがモバイルからも簡単にできるかなどをチェックし、最適化を行います。

カスタムポストタイプ(オプション)

WordPressサイトでは基本的に投稿とページで構成されていますが、業務用のサイトの場合は、簡易なデータベース機能を持たせる場合があります。例えば、作品ポートフォリオ、ツアーデータベース、不動産物件一覧などです。この方なデータベースをWEBサイト上に構築する場合はカスタムポストというタイプのデータベースを構築しなければなりません。

カスタムポストタイプを使用したWEBサイトの場合は、データベースの設計、開発、テストを行います。

外部システム連携

弊社ではWEBサイトを単独で構築するのではなく、各種外部クラウドシステム、例えば、Google Sheet、Mailchimp、Salesforce.com, Facebookなどと連携し統合した業務環境を構築する場合があります。

このような外部システムとの連携にはAPIを使用しますが、テストサーバー上でこれら外部システムと連携し、データの入出力が正しく行われるかどうかを検証します。

テスト・公開

テスト段階ではいよいよWEBサイトの本番公開に向けての各種チェック作業を行います。

BSC 顧客
本番サーバーマイグレーション 移動作業
Google Analytics設定 設定
Google Search Console設定 設定
XMLサイトマップ設定 設定
Robots.txt設定 設定
ログインURL変更設定 設定 ログインURL確認
リンクチェック チェック
画像表示チェック チェック
誤字脱字チェック チェック
入力フォームテスト チェック 入力フォームテスト
SNS連携テスト チェック
モバイルテスト チェック モバイル表示確認・承認

本番サーバーマイグレーション

テストサーバーでのWEBサイト開発が完了すると、いよいよ本番サーバーに移転を行います。開発用サーバーと本番サーバーはURLが異なるため、本番環境において各種画像の表示やレイアウトの表示が正しく出来ているかどうかを確認します。またhttpsサーバーに移行することによってリンク切れや表示崩れが生じないようにします。

Google Analytics/Search Console設定

Google AnalyticsやGoogle Search ConsoleはWEBサイトへのアクセス状況を把握するために必須の作業です。本番サーバー移転に伴ってこれら各種サービスの設定をこないます。また弊社ではNightwatchなどのSEOツールを設定する場合もあります。これらの外部システムとの連携を行います。

XMLサイトマップ設定・Robot.txt設定

WEBサイトが更新される都度、Googleに対して更新情報をXMLサイトマップを作成して送信します。また検索エンジンロボット(クローラー)にWEBページへのアクセスを許可/制限するためのRobots.txtの生成と設定を行います。

リンクチェック/画像表示チェック/誤字脱字チェック

公開前に最終のリンクチェック、画像チェック、誤字脱字チェックを行います。

入力フォームテスト

本番環境から入力フォームが正しく動作するかどうかのチェックを行います。

SNS連動テスト

ホームページに投稿した記事がFacebookやTwitterと連動するかどうかをテストします。

モバイルテスト

本番環境でモバイルページが正しく表示されるかどうかをテストします。

公開

新サーバーへのロックを解除して一般公開します。

まとめ

駆け足ですがホームページを作成するためのプロセスをご紹介しました。

一般的にランディングページで2〜3週間、一般的な会社ホームページでは4〜6週間、カスタムポストタイプやECサイトの構築には5〜7週間ほどかかります。

ホームページ作成で納期が不足する理由の一つは、各段階で決まったことを後の段階になってから修正しなければならない状況になるためです。各ステップごとに着実に確認作業をして、次の段階に進めていくことが、WEB開発をスムーズに進めるための秘訣です。