第1章: はじめに
はじめに
この文書は、初心者の方が安心してWebサイトを作れるように、全体の流れと具体的なステップをやさしく説明します。目的の明確化から公開、運用までを段階的に示し、各工程で押さえるポイントを解説します。
この文書の目的
Webサイト作成の初心者が実務に沿って進められるように、必要な作業と注意点を分かりやすく整理することを目的とします。どの段階で何を決めるべきかが一目で分かるように構成しています。
対象読者
・これから初めてサイトを作る方
・個人や小規模事業で自分で運営したい方
・外注する際に全体像を理解したい方
本書の読み方
章ごとに順番に読めば制作の流れが理解できます。必要な箇所だけを参照する使い方も可能です。各章で具体例を交えて説明しますので、実務にすぐ役立ちます。
Webサイト作成の目的を明確にする
なぜ目的を最初に決めるか
Webサイトを作る前に「何のために作るのか」をはっきりさせます。目的が定まらないと、デザインやコンテンツが散らばり、訪問者に伝わりにくくなります。目的は制作全体の指針になります。
よくある目的の例
- 商品やサービスの販売（EC）: 購入導線を分かりやすくします。
- 店舗・企業の認知拡大: 地図や営業時間、写真で信頼を作ります。
- お問い合わせ獲得: 問い合わせフォームや導線を最短にします。
- ブログ・アフィリエイト: 記事更新の仕組みと収益設計を整えます。
目的を具体化する方法
- 目標を数値で決める（例: 月間問い合わせ50件、売上20万円）
- 想定するターゲットを絞る（年齢・職業・課題）
- 成功指標（KPI）を設定する（コンバージョン率、滞在時間など）
目的に応じた優先順位と機能例
目的ごとに優先機能を決めます。販売なら決済導線、認知拡大ならSNS連携や写真掲載、問い合わせ重視ならフォーム最適化です。最初は優先度の高い機能から実装すると効率的です。
目的変更への対応
事業や反応に合わせて目的は変わります。定期的に数値を見て目的とKPIを見直す仕組みを作っておくと運用が楽になります。
サイトの計画・要件定義
目的の明確化
まず何のためにサイトを作るかをはっきりさせます。商品販売、問い合わせ獲得、情報発信など具体例を挙げ、成功指標（例：月間問い合わせ数、購入率）を決めます。
ターゲットユーザーの定義
年齢層や興味、利用環境（スマホ中心かPCか）を想像して書き出します。ペルソナを1〜3つ作ると設計がぶれません。
必要な機能と優先順位
必要な機能（例：カート、会員登録、予約、問い合わせフォーム）を列挙し、必須・優先・将来導入の3段階で整理します。MVP（最小実用製品）を決めると開発が進みやすくなります。
コンテンツと情報の方針
掲載する主な情報（会社紹介、商品説明、FAQなど）をまとめます。誰が作成・更新するか、文章や画像のトーンも決めます。
制約条件（予算・期間・技術）
予算や納期、使用するCMSや外部サービスの制約を明記します。対応ブラウザやセキュリティ要件もここで確認します。
クライアントヒアリングと要件定義書
クライアントがいる場合は質問リストを用意し、要望を丁寧に確認します。合意した内容は要件定義書として書面化し、開発範囲・納品物・受け入れ基準を明記して署名をもらいます。これで後工程のトラブルを防げます。
テストと運用の観点
要件段階でテスト項目や運用のルール（更新頻度、バックアップ、担当者）を決めておくと、公開後の運用がスムーズです。
サイト構造の設計（サイトマップ作成）
目的と全体像
サイトマップはサイト全体の設計図です。どのページを作るか、どの順で見せるかを決めます。早い段階で作ると、制作の無駄を減らせます。
ページ一覧を作るコツ
まず目的に沿って主要ページを列挙します。例：
– 会社サイト：ホーム／会社概要／サービス／料金／事例／ブログ／お問い合わせ
– EC：トップ／商品一覧／カテゴリ／商品詳細／カート／購入手続き／会員ページ
具体例を想定して、最低限必要なページを洗い出してください。
ページ間の関係を図示する
ページ同士の親子関係や導線を矢印で示します。重要なルート（例：トップ→商品一覧→商品詳細→購入）を優先して目立たせます。階層は深くしすぎないのが原則です。
ナビゲーション設計のポイント
グローバルメニュー、フッターメニュー、パンくずリストをどこに置くか決めます。訪問者が3クリック以内で目的に到達できるように意識してください。
優先度とコンテンツ量の調整
各ページの優先度（高・中・低）とおおよそのコンテンツ量を付記します。優先度が高いページから制作・確認を進めると効率的です。
チェックリスト（作成後に確認する項目）
- 目的に対して必要なページが揃っているか
- ページの導線が自然か（戻る・次へが分かりやすいか）
- メニューの表記が一貫しているか
- モバイルでの階層が問題ないか
以上をもとに、実際のワイヤーフレームやコンテンツ作成へ進んでください。
ドメイン・サーバーの契約・SSL設定
ドメインの選び方
- 短く覚えやすい名前にします。ブランド名や事業名を優先します。例: yoursite.com
- TLD（.com/.jp/.netなど）はターゲットに合わせて選びます。国内向けなら .jp、海外も視野に入れるなら .com
- ハイフンや長い語句は避けます。商標や既存ブランドとかぶらないか確認します。
- WHOIS（登録者情報）公開の可否やプライバシー保護の有無を確認します。
レンタルサーバーの選び方
- 初心者は共有サーバーやマネージドWordPressが手軽です。費用を抑えつつ簡単に始められます。
- トラフィック増加を見込むならVPSやクラウドを検討します。リソース（CPU/メモリ/ディスク）を確認します。
- バックアップ、自動更新、サポートの有無、PHPやデータベースのバージョン、FTP/SFTP・SSHの対応をチェックします。
ドメイン取得とサーバー契約の流れ
- ドメイン登録事業者（レジストラ）で空き確認・取得を行います。
- レンタルサーバーを選んで契約します（プラン選択・支払い）。
- ドメインのネームサーバーをサーバー提供会社のものに変更するか、AレコードでIPを指します。
- DNSの反映には数時間〜72時間かかることがあります。
サーバーの初期設定ポイント
- ドキュメントルート（公開フォルダ）やFTPアカウント、データベースを作成します。
- PHPのバージョンやタイムゾーンを適切に設定します。
- メールを使う場合はMXレコードやメールアカウントを準備します。
SSL（HTTPS）設定
- 無料のLet’s Encryptが一般的です。多くのレンタルサーバーが自動発行・自動更新に対応します。
- サーバー側でSSLを有効化したら、必ずHTTPからHTTPSへ恒久的リダイレクト（301）を設定します。
- サイト内の画像やスクリプトはHTTPSで読み込むように修正して、混在コンテンツを防ぎます。
- ワイルドカード証明書やEV証明書が必要な場合は有料証明書を検討します。
最低限のチェックリスト
- ドメイン取得完了／WHOIS設定確認
- サーバー契約／ドキュメントルート確認
- DNSが正しく設定されているか（A/AAAA/CNAME/MX）
- SSLが発行され、HTTPSへリダイレクトされているか
- FTP/SFTP・データベース・バックアップ設定があるか
以上を行えば、サイト公開に向けた基盤が整います。次はデザイン設計へ進みましょう。
デザイン設計（ワイヤーフレーム・デザイン案作成）
目的
ワイヤーフレームでページ構成と導線を明確にし、その上で配色・写真・タイポグラフィなど具体的なデザインを決定します。見やすく使いやすい画面を実現するための設計段階です。
手順（ステップ）
- 重要なページを洗い出す（トップ、サービス、問い合わせなど）
- 各ページの目的と主要要素を決める（見出し、CTA、画像）
- ワイヤーフレームを作成する（紙・ホワイトボードでも可）
- ワイヤーフレームを元にビジュアル案を作る（配色・フォント・素材）
- 関係者と確認し、フィードバックを反映する
ワイヤーフレーム作成のポイント
- レイアウトは優先順位で組む（重要な情報を上に）
- 導線（ナビ・ボタン）を明確にする
- スマホ表示を意識してブロックを縦に並べる
- 詳細は後回しにして構造に集中する
デザイン案作成のポイント
- 配色はブランドと目的に合わせて2〜4色に絞る
- フォントは読みやすさを最優先に選ぶ
- 写真やイラストは統一感のあるテイストにする
- 操作しやすさ（ボタンサイズ、余白）を確保する
ツールとファイル管理
- 紙やFigma、Adobe XDでワイヤー作成すると共有しやすい
- Photoshop、Illustratorで高精度の素材を作る
- バージョン管理はファイル名と履歴で明確にする
最終チェック項目
- 目的の導線が機能しているか
- スマホ・PCで見たときに崩れないか
- 画像・色味に統一感があるか
- 関係者の承認が得られているか
以上を踏まえて、ワイヤーフレームで骨格を固め、デザイン案で魅力を形にしてください。
サイト構築・コーディング
概要
HTML・CSS・JavaScriptで実際のページを作ります。CMSを使う場合は、この段階でインストールと初期設定を行います。見た目と動きを両立させ、公開に耐える状態にします。
開発環境の準備
ローカル環境（例：XAMPP、Local）やテキストエディタ（VS Codeなど）を用意します。バージョン管理はGitを使うと差分が追跡できて安心です。
コーディングの進め方
まずHTMLで構造を組みます。次にCSSでレイアウトと色を整え、メディアクエリでスマホ対応にします。JavaScriptは必要な動きだけを追加します（例：フォーム検証、モーダル）。
CMS導入（WordPressなど）
サーバーへアップロードしてデータベースを接続し、管理画面で基本設定を行います。テーマを導入して、子テーマでカスタマイズすると安全です。
ビルドと最適化
SassやWebpackなどで効率化します。コードは圧縮・画像は最適化して読み込みを速くします。ブラウザキャッシュ設定も検討します。
テストとデバッグ
主要ブラウザやスマホで見た目と動きを確認します。開発ツールでエラーを直し、基本的なアクセシビリティ（代替テキスト、キーボード操作）も確認します。
引き継ぎ用の整備
コードにコメントを付け、操作手順や設定をREADMEやドキュメントにまとめます。運用担当者が扱いやすい状態にしてください。
コンテンツ作成・入力
準備：コンテンツの種類と優先順位
まず掲載する内容を洗い出します。会社情報、サービス説明、よくある質問（FAQ）、お客様の声、ブログ記事、画像、動画などをリスト化し、訪問者に必要な情報順に優先順位を付けます。
キーワードと文章作成（SEOの基礎）
ターゲットが検索しそうな言葉を数個選びます。各ページに主キーワードを1つと関連語を数個使い、見出しや冒頭、まとめ部分に自然に入れます。見出しは短く明確に書き、段落は1テーマを3〜5文でまとめます。読みやすさを最優先にしてください。
画像・動画の扱い
画像は表示サイズに合わせて圧縮し、ファイル名や代替テキスト（alt）に内容を簡潔に書きます。動画は自サイトで重くならないよう外部サービス埋め込みを検討します。
メタ情報と内部リンク
ページごとにタイトルと説明（meta description）を設定します。内部リンクは訪問者が次に読むべきページへ誘導する役割を持たせ、リンクテキストは具体的にします。
CMSへの入力と運用フロー
テンプレートに沿って入力し、画像は適切なサイズでアップします。公開前にプレビューで表示確認し、担当者が確認する運用ルールを作ります。
校正と公開前チェック
誤字脱字、リンク切れ、表示崩れ、モバイル確認、読みやすさを必ずチェックします。必要なら第三者に読んでもらいフィードバックを受け取ります。
動作確認・テスト
概要
パソコンやスマートフォンなど、実際の端末で表示崩れやリンク切れがないか確認します。問題を見つけたら修正し、再度テストして安定性を確保します。
主なテスト項目
- 表示確認：ページレイアウト、画像の崩れ、フォントサイズを確認します。画面幅を変えて崩れがないかチェックします。
- リンク・ボタン：内部リンク・外部リンク・ボタンの遷移先を全て確認します。404やリダイレクトの検出も行います。
- フォーム機能：入力・バリデーション・送信・確認メールの受信を実機で検証します。
- メディア動作：動画や音声が再生されるか、読み込みが遅くないかを確認します。
- パフォーマンス：ページ表示速度を確認し、画像やスクリプトの最適化が必要か判断します。
- セキュリティ基本チェック：HTTPS化、外部スクリプトの読み込み確認、フォームのCSRF対策を確認します（専門家のレビューを推奨）。
- アクセシビリティ：画像のalt、キーボード操作、コントラストを簡単にチェックします。
テスト手順（例）
- PCブラウザで主要ページを順に開く。Chromeのデベロッパーツールでモバイル表示も確認します。
- スマートフォン実機で表示と操作を確認する。タップ領域やスクロール挙動をチェックします。
- リンクを一覧化してツールで一括チェックする（リンク切れ検出）。
- フォームは正常系・異常系の入力でテストする。
バグ報告と修正の流れ
- 再現手順を明確に記載します（環境、ブラウザ、手順）。
- 影響範囲と優先度を決めて対応順を決定します。
- 修正後は同じ手順で必ず再テストします。
リリース前チェックリスト（最低限）
- 主要ページの表示確認
- 重要リンクの動作確認
- フォーム送信とメール受信
- 代表的なスマホ画面での確認
よくある問題と対処例
- 画像がはみ出す：CSSのmax-width:100%を設定します。
- フォームが送信できない：必須項目のバリデーションとサーバー側ログを確認します。
- 外部サービスが読み込めない：APIキーやCORS設定を確認します。
テストは手間がかかりますが、公開後のトラブルを減らす重要な工程です。簡単なチェックを習慣にして品質を保ちましょう。
サイト公開
準備の最終確認
公開前に必ずチェックします。全ページのリンク、画像、フォーム、表示崩れを確認します。SSLやメタ情報（タイトル・説明文）も最終確認します。
公開手順（基本）
- サーバーへファイルをアップロードします（FTPや管理画面を使います）。
- ドメインのDNS設定をサーバーに向けます。反映に時間がかかることがあります。
- SSLを有効にします。無料の証明書でも問題ない場合が多いです。
公開直後の確認
公開後は実際のURLで動作確認します。フォーム送信、外部連携、スマホ表示、ページ速度をチェックします。問題が見つかったら速やかに修正します。
アクセス解析とSEO設定
Google Analyticsやサーチコンソールを導入し、サイトマップを送信します。検索結果での見え方（タイトル・説明）を調整します。
バックアップと監視
公開前後で完全なバックアップを取り、定期的に自動バックアップを設定します。エラー通知や稼働監視を導入すると安心です。
公開後の運用ポイント
更新頻度を決め、コンテンツを定期的に見直します。セキュリティパッチやプラグインの更新も忘れず行います。
よくあるトラブルと対処
DNS反映が遅い→時間を置く。表示崩れ→キャッシュクリアとブラウザ確認。SSLエラー→証明書再発行や設定確認。
サイト運用・保守
概要
公開後は運用と保守を続けて、成果を育てます。アクセス解析で状況を把握し、SEOやコンテンツを改善します。安定稼働と情報の鮮度を保つことが目的です。
日常の監視（毎日／随時）
- サーバー稼働やエラーの確認（例：監視ツールでの通知受信）。
- リンク切れやフォーム不具合のチェック。
アクセス解析とKPI（週次／月次）
- 計測指標：PV、セッション、直帰率、コンバージョン率。
- ツール例：Google Analytics、Search Console。指標の変化から改善点を見つけます。
SEO対策の継続（毎月）
- キーワード順位の確認、メタ情報の最適化、内部リンクの見直し。
- サイト速度やモバイル表示の改善も重要です。
コンテンツの追加・更新（週次／月次）
- 新規記事の公開、古い記事のリライトで情報を新しく保ちます。
- ユーザーの声や検索ワードを元に改善案を作ります。
セキュリティとバックアップ（週次／月次）
- CMSやプラグインの更新、SSL有効期限の管理。
- 定期バックアップと復元手順の確認を行います。
PDCAで改善する（四半期単位）
- 仮説→実施（A/Bテスト等）→検証→改善を繰り返します。
運用体制と外注の考え方
- 担当者を決め、作業チェックリストを作成します。
- 外注する場合は目的と成果物、納期を明確に伝えます。
実務チェックリスト（例）
- 毎日：稼働確認、重大エラー対応
- 週次：アクセス解析、簡易更新
- 月次：SEOチェック、バックアップ確認
- 四半期：大規模改善の計画と検証
日々の積み重ねでサイトは育ちます。地道な運用が成果につながります。
サイト制作にかかる期間の目安
概要
サイトの規模や要件で必要な期間は大きく変わります。ここでは代表的な目安と、工程ごとの大まかな時間配分、期間を左右する要因、短縮のコツを説明します。
規模別の目安
- ランディングページ（LP）：数日〜数週間（1ページ）
- 小規模サイト（10〜30ページ）：1〜3ヶ月
- 中規模サイト（30〜100ページ）：2〜6ヶ月
- 大規模・システム搭載サイト（100ページ以上、会員機能等）：半年以上
工程別の目安
- 企画・要件定義：数日〜数週間
- デザイン：1〜4週間
- コーディング・実装：1〜3ヶ月（規模により変動）
- コンテンツ作成：並行して進めると効率的（数週間〜数ヶ月）
- テスト・修正：1〜4週間
期間を左右する主な要因
- 要件の確定度（変更が多いと延びます）
- コンテンツ量と準備状況
- 外部サービス連携やシステム開発の有無
- レビュー回数と意思決定の速さ
- 人員とスキル（外注か内製か）
期間短縮の実用的な方法
- 最小限の機能で先に公開する（MVP）
- テンプレートや既存部品を活用する
- コンテンツを並行作業で準備する
- 決定者を早めに巻き込み、レビュー回数を減らす
スケジュール管理のポイント
- マイルストーンを明確にして期限を設定する
- バッファ（余裕日）を設ける（10〜20%を目安）
- 進捗を週次で確認し、遅れが出たら即対応する
ただし、上記はあくまで目安です。要件を整理すると、より正確なスケジュールが出せます。
第13章: まとめ
総括
Webサイト作成は「目的の明確化」から始まり、「計画・設計」「デザイン・構築」「公開」「運用・保守」まで一連の流れで進めます。各工程でポイントを押さえると、見やすく使いやすいサイトが作れます。目的をはっきりさせ、ユーザー視点で設計することが成功の鍵です。
実践チェックリスト
- 目的とターゲットを文書化する（例：商品紹介で問い合わせを増やす）
- 必要なページと機能を決める（例：お問い合わせフォーム、ブログ）
- デザインはワイヤーフレームで確認する
- レスポンシブ対応とSSLは必ず設定する
- 公開前に表示・動作・フォーム送信をテストする
- 公開後はバックアップ、更新、アクセス解析を続ける
運用のコツ
定期的なコンテンツ更新で訪問者を増やせます。セキュリティ更新やバックアップを習慣にしてください。アクセス解析で問題点を見つけ、小さな改善を続けると効果が積み重なります。
最後に
一度に完璧を目指すより、段階的に改善することをおすすめします。まずは小さく公開し、ユーザーの反応を見ながら育てていきましょう。
