Webサイト制作の流れとポイントを事例付きで解説

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

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

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

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

• 市場調査
  ビジネス戦略に合致したWebサイト設計の方針を定めるために、市場調査を行います。
• 競合調査
  競合との差別化を明確にし、展開するサービスがどう優れているかを見つけ出しします。
• 競合Ｗｅｂサイトの分析
  他社サイトの戦略を分析し、Ｗｅｂサイトの改善や差別化を図ります。
• 既存サイトがある場合
  アクセス解析、事業の実績からユーザ属性やユーザニーズなどの現状分析を行い、事業の抱える課題やその解決策も検討します。
• 例

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

• 感情的なつながりの構築
  ターゲットユーザーがお客様のブランドに対して感じるべき感情を想定し、それを具体的な言語とデザインで表現します。
• ブランドメッセージ作成手順 例
  1. 情報の整理（調査・分析・戦略策定 工程 で実施）
     お客様のサービスの核となる価値、ターゲット層のニーズ、市場の状況などからポイントとなる要点を抽出
  2. 戦略の構築（調査・分析・戦略策定 工程 で実施）
     整理した情報から、ブランドが伝えたいメッセージやターゲット層にどう響かせたいかなどの戦略を構築
  3. メッセージのコンセプト化
     戦略に基づき、具体的なキャッチフレーズやスローガンのコンセプトを検討（ブランドの個性や差別化を強調）。
  4. 複数案の作成
     • 1つのメッセージに固執せず、複数の異なるアプローチでのメッセージ案を作成。
     • ターゲット層にどれが最も共感を呼び起こすかを検討。
  5. 内部評価
     作成した草案をチーム内で共有し、フィードバックを収集し、客観的な視点からの評価。
  6. 最終的選定
     最終的に選定した案を関係者に伝え、意見や要望を反映させてブラッシュアップ。
• メッセージの一貫性
  全てのページとコンテンツで一貫したブランドメッセージを展開し、ブランドの認知を強化。
  • 具体的には
    • 色、フォント、イメージなどのビジュアル要素を統一
    • ブランドのトーン（例：親しみやすい、専門的、革新的など）を統一
• 例

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

• サイトマップ作成
  既に作成済みのサイトマップに対して、企画立案の内容を踏まえて、Ｗｅｂサイトの全体構造とページ間の関連性を再確認します。
• ワイヤーフレーム作成
  具体的なページのレイアウトや要素の配置を設計します。
• 例

• 導線設計
  導線とは、例えば「求人募集」がサイトの目標であれば、トップページから採用ページを閲覧して「採用応募」に誘導するのが導線設計となります。
  導線はユーザビリティとコンバージョン率の向上に直結するため、非常に肝要な設計になりますが、Webサイト公開後も試行を繰り返しながら改善が必要となる設計の一つです。
  • Webサイト公開後の動線 試行例
    • A/Bテスト
      2つの異なる動線を設計し、どちらが効果的かを検証
    • ヒートマップ分析
      ユーザーがページ上でどの部分に焦点を当てているかを分析し、リンクやボタンを最適な位置に配置
• 例

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

• アクセシビリティ対策とは
  高齢者及び障害のある人を含む全ての利用者が、使用している端末、ウェブブラウザ、支援技術などに関係なく利用することができるように、ウェブコンテンツが確保すべきアクセシビリティの基準『JIS X 8341-3:2016』が定められています。そして障害のある人々が社会的な障壁なく自立した生活ができるようにすることを目的とする「障害者差別解消法」が2021年に改正され、2024年4月1日より事業者による障がいのある人への合理的配慮の提供が義務化されました。
• ユーザビリティの重要性
  ユーザビリティは、コンバージョン率やリピート率、離脱率、滞在時間、満足度などに大きく影響を与えます。
  ISO 9241-11によって「特定の利用状況において、特定のユーザーによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザーの満足度の度合い」と定義されています。
  • ユーザビリティ研究の第一人者であるヤコブ・ニールセン博士による定義
    • 学習しやすさ（Learnability）
      システムは、ユーザがそれをすぐ使い始められるよう、簡単に学習できるようにしなければならない
    • 効率性（Efficiency）
      一度学習すれば、あとは高い生産性を上げられるよう、効率的に使用できるものでなければならない
    • 記憶しやすさ（Memorability）
      ユーザがしばらくつかわなくても、また使うときにすぐ使えるよう覚えやすくしなければならない
    • エラー（Errors）
      エラーの発生率を低くし、エラーが起こっても回復できるようにし、かつ致命的なエラーは起こってはならない
    • 主観的満足度（Satisfaction）
      ユーザが個人的に満足できるよう、また好きになるよう、楽しく利用できなければならない
• 例

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

• プラットフォーム例
  • WordPress
    • 特徴
      オープンソースのCMSで、数多くのテーマとプラグインが提供されており、カスタマイズの自由度が高い。
      ※日本でのCMSにおけるWordPressのシェア 82.3% (2023/8/18 W3Techs より)
    • 用途
      ブログ、企業サイト、ポートフォリオサイト、Eコマースなど、多岐にわたり使用される。
    • 導入の容易さ
      GUIが直感的で、非技術者でも基本操作が可能。
      多くのホスティングサービスでワンクリックインストールが提供されている。
      カスタマイズにはプログラミングの知識が求められることが多い。
  • EC-CUBE
    • 特徴
      日本国内で開発されたオープンソースのEコマースプラットフォーム。
      カスタマイズが容易で、多くのプラグインが利用できる。
    • 用途
      中小規模のオンラインショップから、大規模なECサイトまで対応。
      特に日本市場向けの販売を行う際に最適化されている。
    • 導入の容易さ
      基本的な設定はGUIで行えるが、細かいカスタマイズにはプログラミングの知識が必要。
  • Wix
    • 特徴
      WixはクラウドベースのＷｅｂサイトビルダーで、ドラッグ&ドロップの操作で容易にページを構築できるのが特徴です。
      プログラミングの知識がなくても美しいデザインのＷｅｂサイトを作成することができます。
    • 用途
      小規模なビジネス、個人ブログ、ポートフォリオサイトなど幅広い用途に使用されています。
    • 導入の容易さ
      Wixは非常に初心者に優しく、テンプレートから選ぶだけで素早くサイトが立ち上がるため、導入の敷居は低い。
      カスタマイズもGUIベースで直感的に行えるが、カスタマイズには限界があり。
• 例

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

• コンテンツの価値提供
  ターゲットオーディエンスのニーズに合った有用なコンテンツを提供し、サイト訪問の価値を高めます。
• ユーザーエンゲージメントの強化
  興味深い、関連性の高いコンテンツを通じて、ユーザーとのエンゲージメントを強化します。
• SEO戦略との一体化
  コンテンツ戦略をSEO戦略と一体化させることで、検索エンジンでの視認性を向上させます。
• 法的コンプライアンスの確保
  コンテンツの作成と配信にあたっては、法的な側面も考慮する必要があります。個人情報保護法、著作権法、業界固有の規制など、関連する法規に準拠してコンテンツを運用することで、リスクを回避し信頼性を高めます。
• 例

• このコンテンツ戦略の策定 工程は、Ｗｅｂサイトの目的とターゲットオーディエンスに密接に結びついており、サイト全体の方向性と一貫性を保つために不可欠なステップです。

ドメイン選定は、ＷｅｂサイトのURLとなるドメイン名を選び、取得するプロセスです。このドメイン名は、企業やブランドの名前、サービス内容などを反映させ、覚えやすく、認識しやすいものにすることがポイントです。
また、ドメイン取得に際しては、信頼性やサポート体系が整っているレジストラ（ドメイン名登録業者）やウェブホスティングサービスを選びます。

• ドメインの重要性
  ドメイン名はＷｅｂサイトの顔とも言える部分で、ブランドイメージを強く反映させることができます。また、検索エンジン最適化（SEO）にも影響を与えるため、選定は慎重に行う必要があります。
• 取得プロセスの概略
  1. 目的とターゲットに合致したドメイン名の検討
  2. 選定したドメイン名の利用可能性のチェック
  3. 信頼性のあるレジストラやウェブホスティングサービスでの取得と設定
• 例

サーバ選定は、Ｗｅｂサイトを公開するためのサーバーを選び、セットアップする工程です。
サーバには専用サーバー、共有サーバ、VPS、クラウドサーバ などの選択肢があり、Ｗｅｂサイトの規模、目的、トラフィック予測、技術要件、パフォーマンス要件、初期費用および運用費用 などに基づいて選びます。

• サーバ選定の重要性
  サーバはＷｅｂサイトの安定稼働と高速な応答に直結します。また、セキュリティ対策、バックアップ体系、技術サポートなども重視すべきポイントです。
• 選定プロセス
  1. サイトの規模、目的、技術要件、パフォーマンス要件、予算などを把握
  2. メールサーバー利用 有無
  3. ホスティングタイプの選定（専用サーバー、共有サーバ、VPS、クラウドサーバ など）
  4. 信頼性とサポート体系のあるホスティングサービスの選定
• 選定ポイント例
  1. サポート体制（メール、電話（時間帯））
  2. 稼働率保障 SLA(品質保証制度) および 障害時対応（自動切替等）
  3. SSLサーバー証明書（種類、費用）
  4. パフォーマンス要件（ページロードタイム、同時接続数等）
  5. 予算（初期費用および運用費用）に合ったプランの選定
• 次の選定ポイントは、開発時にWordPressのプラグイン等を利用して組み込むことも可能です。
  1. WAF(不正アクセスによる攻撃からＷｅｂサイトを保護)
  2. 自動バックアップ（世代数、外部バックアップ有無）
  3. Web改ざん検知（不正な改ざん検出）
• 例

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

a)サイト情報の設定

b) パーマリンク設定

c) 検索エンジンへの表示設定

d) コメントの設定

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

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

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