参考になる方

Webサイト制作の前に行うべきポイント

Webサイトを制作するには、その方向性を定める必要がります。Webサイトを作ることで誰に、何を伝えて、最終的に実現したい目的を決めます。

(1) 目的を明確化にする

サイトの目的、ターゲットユーザー、およびターゲットオーディエンス（初心者向け、中級者向けなど）を定義します。

(2) サイト構成を考える

サイト制作において最初に作るのが「サイトマップ（サイトの構成図）」になります。
サイトマップでは、どこのにどんな情報があるのかのページ内容、ページ間の関係性、全体のページ数を洗い出します。
最終的には制作時の設計工程で決定するものですが、制作会社側に見積依頼をする時に必要となるため、事前に仮作成をします。

上記の例では、ひとつのページをタイトルで表しをツリー構造で表しています。

(3) 体制・予算を確立する

Webサイトの予算見積は、以下の項目を洗い出し、それぞれの予算を事前に確保します。

1. 予算決め
   サイト制作費用は、サイトの目的、サイト構成の他、依頼する制作会社によって大きく変わります。
   予算感を決めておくことで、お客様に適した制作会社を見つけることが可能になります。
2. Webサイト制作予算の見積時には、以下の様に項目を洗い出し、保守・運用や評価・改善費用も忘れずに予算を確保します。
   • 社内人件費（工数）
   • 制作会社に支払う費用
   • サーバーおよびドメインやSLLなどの年間利用料
   • 保守・運用費用（月額費用）
   • 評価・改善費用（月額もしくは適時費用）

1. 企画立案

明確化した目的を実現するためのWebサイトを制作するには、市場調査や競合調査を行い、自社の強みや弱み、ユーザーニーズなどを分析し、戦略を策定します。

(1) 調査・分析・戦略策定

市場の立ち位置と競合に対する強み・弱みを分析し、ブランド戦略を策定します。

当社では、お客様からご提供いただいた「製品・サービスの詳細情報」および「競合企業の特定」情報から、上級ウェブ解析士が市場と競合の調査・分析を行います。お客様のビジネス戦略に合致したＷｅｂサイトの戦略目標をご一緒に定める工程となります。

(2) ブランドイメージの作成

ターゲットユーザーにブランドの価値を明確に伝えるコアメッセージを作成します。

2. 要件定義

策定した企画の内容に基づいて、サイト構造設計後に、機能要件を定義します。 次に要件を満たすための プラットフォームおよび技術 選定 を行います。そしてサイト訪問の価値を高めるための コンテンツ戦略を策定 します。

(1) サイト構造設計

Ｗｅｂサイトの全体構造を最適化する工程です。
具体的なサイトマップの作成やワイヤーフレームの設計を通じて、Ｗｅｂサイトの各ページ間の関係やナビゲーションの流れを整理します。また同時に導線設計も行います。

(2) 機能要件定義

Ｗｅｂサイトが提供すべき具体的な機能とコンテンツを明確にリスト化する工程です。ここでは「アクセシビリティ対策」と「ユーザビリティ」も忘れずに非機能要件として含めます。

(3) プラットフォームおよび技術 選定

Ｗｅｂサイトの構築に使用する技術やプラットフォームを選定する工程です。
プラットフォーム選定によって、サイトの使いやすさ、保守性、拡張性などが大いに左右されます。

(4) コンテンツ戦略策定

コンテンツ戦略は、Ｗｅｂサイトで提供する情報の種類、量、配信方法を計画します。

３．ドメイン取得およびサーバー選定

制作したＷｅｂサイトをインターネット上に公開するために、ドメインの選定・登録 および サーバ を手配します。

(1)ドメインの選定・登録

(2)サーバ選定

5. 開発

WordPressのインストール、設定、カスタマイズ後に、コンテンツ・デザイン設計通りのビジュアルを実現するための「フロントエンド」と、機能要件定義でリスト化したことを実装するための「バックエンド」に分かれて開発を行います。

(1) WordPressのインストール

WordPressのインストールは、選定したホスティングサービスに応じて、多くの場合は自動インストールが可能なオプションが用意されています。それを活用することで、簡単にWordPressをインストールし、Ｗｅｂサイトを構築することができます。

(3) テーマ・プラグインの選定・カスタマイズ

機能要件定義で作成した機能リストに従い、テーマとプラグインを選定し、カスタマイズを行います。

1. テーマの選定
   • 当社保守対象のお客様が費用負担なしで、ご利用頂ける有償テーマ
     • snow-monkey
       安定した性能と拡張性があり、初心者から上級者まで幅広く利用されるテーマ
     • SWEEL
       シンプルで使いやすいデザインが特徴で、カスタマイズもマウス操作だけで可能でありブロガー向けテーマ
     • オリジナルテーマ
       お客様のご要望を具体的に聞きながら、完全にカスタマイズされたデザインで、企業のブランドイメージに完全に合致させるオーダメイド開発。他のテンプレートにはない、独自のデザインと機能を提供することが可能。
2. プラグインの選定
   • プラグイン選定
     必要な機能を効率的に追加するために、利用実績のある適切なプラグインの選定と設定が必要です。
   • 選定例
     • All In One WP Security
       セキュリティを強化するための多岐にわたる設定が可能なプラグイン
     • EWWW Image Optimizer
       画像の最適化を自動化し、サイトのロード速度を向上させます
     • WP Multibyte Patch
       マルチバイト機能による、日本語での表示を最適化。

(4) フロント開発

ワイヤーフレームに従って、デザイン通りの見た目をWebブラウザ上で表示し、機能要件定義で定めたユーザビリティやアクセシビリティを実現するために、HTML、CSSで視覚化し、Javascriptなどでアニメショーンや機能を追加します。

(5) バックエンド開発

機能要件定義で作成した機能リストに応じて、開発が必要な機能をPHP等で個別開発します。

1. カスタム投稿型の開発
   • WordPressでは標準の投稿型以外に、独自の投稿型を開発することができます。
     これにより、特定のビジネス要件やコンテンツ構造に合わせた柔軟な表示が可能。
   • また複数のカテゴリを組み合わせる等の検索機能の開発も可能。
   • 例
     事例、セミナー、お役立ち資料、製品カタログ、イベントカレンダー、FAQセクションなど
2. 特定機能のカスタム開発
   • Ｗｅｂサイトの目的に合わせて、一般的なプラグインではカバーしきれない特別な機能を開発。
   • 例
     • 会員専用エリアの構築、特定のデータの自動取得と表示、業務用APIとの連携など
     • API連携事例
       Stripe（ストライプ）と連携してクレジットカード決済、kintoneアプリ連携

6. テスト

テスト工程はＷｅｂサイト制作において非常に重要な工程であり、機能の安定性、使用感、セキュリティが保証されるかを確認します。

(1) 機能テスト

全ての機能が正常に動作するかを徹底的にテストします。以下は機能テストの詳細なプロセス例です。

1. 機能の確認
   Ｗｅｂサイトで提供される各機能、例えばフォームの送信、商品の購入、コンテンツの表示などが正しく動作するかを確認します。
2. エラーハンドリング
   ラーが発生した場合の処理が適切であるかをチェックします。ユーザーが理解しやすいエラーメッセージの表示などを確認します。
3. 使用感のチェック
   操作の流れがスムーズであるか、ユーザーが迷わずに目的の操作ができるかなどの使用感を評価します。

(2) 動作環境のチェック

色々なデバイスからアクセスできる様に、またさまざまなユーザーがＷｅｂサイトを快適に利用できるように、デバイスの互換性確認を行います。

1. スマートフォン
   iOS、Androidでの表示と操作をテスト
2. タブレット
   タブレットの画面サイズと操作感を考慮したテスト
3. デスクトップ
   主要な画面解像度での表示を確認
4. ブラウザの互換性
   主要ブラウザ: Google Chrome、Firefox、Safari、Microsoft Edgeなど主要なブラウザでの表示と動作をテスト
5. 使用感のチェック
   操作の流れがスムーズであるか、ユーザーが迷わずに目的の操作ができるかなどの使用感を評価します。

(3) アクセシビリティの確認

1. 視覚障害の配慮
   スクリーンリーダーとの連携、コントラスト比の確認
2. 操作性の配慮
   キーボードだけの操作など、異なる入力方法に対応するテスト
3. miCheckerの利用
   総務省が提供しているWebアクセシビリティ評価ツールであるmiCheckerを用いて、アクセシビリティ対応びついて確認

7. 公開

制作会社の開発およびテスト完了後、お客様主体での最終確認を行った後、リリース作業を行いＷｅｂサイトを公開します。

(1) 公開前の最終チェック

公開前の最終チェックは、お客様が主体的に行う大切な工程です。

• エラーと不具合の確認
  • リンク切れや画像の表示不具合
  • タイポグラフィ（書体、文字サイズ、行間など）や文法の誤り
  • インタラクティブ（双方向性）要素の動作チェック
• 法的遵守の確認
  • プライバシーポリシーの存在と内容確認
  • 著作権、商標などの法的権利の確認
  • 必要な免責事項の表示

最終チェックの後、お客様の承認を得て、Ｗｅｂサイトを公開します。

(2) リリース

リリースはＷｅｂサイト制作プロジェクトの最終段階で、インターネット上に公開します。
この工程は、あらゆる努力が形になり、情報発信される瞬間です。

1. リリースの工程
   公開設定
   ドメインの設定やサーバーの設定を確認し、公開前の最終チェックが完了していることを確認し、ウェブサイトを一般に公開する準備を整えます。
2. アナウンス
   サイト公開を告知するプレスリリースやSNSの投稿など、公開のお知らせを行います。

目的達成のために、公開後に行うベきポイント

Webサイトの目的を達成するためには、公開後の「保守運用」と「評価・改善」が重要なポイントとります。

(1) 業務運用

(2) システム保守／運用

1. バージョンアップ対応
   WordPressの場合、Wordpress本体、テーマ、プラグインがバージョンアップされた場合、テスト環境での確認後に適用
2. セキュリティ対策
   定期的なセキュリティチェック、不正アクセス監視など、サイトの安全性を維持するための措置。
3. ドメインおよびサーバ更新
4. 開発環境の保持とバックアップの取得
   万が一のデータロスやサーバ障害に備えて、データの定期バックアップを実施
5. クライシス対応
   サイトダウンなどの緊急時対応

(3) 評価・改善

特に集客を目的としたＷｅｂサイトの場合は、定期的に「アクセス解析⇒Webサイトの課題を洗い出し⇒仮説検討⇒対策」を繰り返すことが必要になります。

1. アクセス分析
   Google Analyticsなどを用いたアクセス解析で、ユーザーの行動やサイトの効果を評価し、改善策を検討。
   公開設定
2. SEO最適化
   検索エンジン最適化のための定期的な分析と改善、キーワード戦略の見直し、内部リンクの最適化など。