目次
はじめに
本書の目的
この文書は、これからWebサイトを作る初心者や担当者向けに、実際の手順と選べる方法を分かりやすく示すことを目的としています。技術的な説明は具体例で補い、実務で役立つ情報に絞ってまとめます。
想定読者とゴール
想定読者は個人や中小企業の担当者、初めて自社サイトを作る方です。読むことで「自分に合った作り方を選ぶ」「公開までの流れを理解する」「運用と簡単な対策ができる」を目標とします。
本書で扱う内容の一覧
- HTMLとCSSでの自作方法（基礎と例）
- WordPressやCMSの導入と運用
- ホームページ作成ツールの比較と活用法
- サイト公開のステップとドメイン・サーバー
- SEOの基本と運用時の注意点
- よくある質問とトラブル対処法
読み方のアドバイス
目的に応じて章を選んで読み進めてください。まずは第2章の準備項目を確認すると、スムーズに進められます。必要ならすぐ実践できる手順も用意しています。
Webサイト作成の基本的な流れと必要な準備
流れの全体像
Webサイト作成は次の順で進めます。目的設定 → 内容の計画（サイトマップ・ワイヤーフレーム）→ デザイン → 構築 → 公開 → 運用。順序に沿って進めると抜けや迷いが減ります。
各工程の具体的な作業
- 目的設定：誰に何を伝えるか、ゴール（問い合わせ・販売・案内など）を決めます。
- 内容の計画：ページ構成をサイトマップで描き、各ページの役割を書き出します。簡単な線画（ワイヤーフレーム）で配置を決めます。
- デザイン：色・ロゴ・写真の方針を決めます。テンプレートを使うと短時間で統一できます。
- 構築：HTML/CSS、またはWordPressや作成サービスで組み立てます。フォームや画像の配置を行います。
- 公開：サーバーにファイルを置き、ドメインを設定してアクセスできるようにします。
- 運用：定期的に更新し、バックアップとセキュリティ対策を行います。
必要な準備と用意するもの
- サーバー：サイトのデータ置き場。レンタルサーバーやクラウドを使います。
- ドメイン：『example.com』のようなURL。取得と設定が必要です。
- SSL証明書：https化で安全にアクセスできます。
- コンテンツ素材：文章、写真、ロゴなど。
- 管理手段：更新方法とバックアップの仕組み。
初めての方へのヒント
予算や技術力で手法を選んでください。まずは小さく始め、必要に応じて機能を増やすと無理がありません。
HTMLとCSSで自作する方法
簡単な手順
- テキストエディタでHTMLファイルを作成し、index.htmlで保存します。
- ブラウザで開いて表示を確認します。
- CSSファイルを用意して見た目やレイアウトを調整します（例: styles.css）。
- レンタルサーバーにファイルをアップロードして公開します。
HTMLの基本構造（例）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイトのタイトル</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>見出し</h1>
<p>本文の段落。</p>
</body>
</html>
上の例をindex.htmlで保存してブラウザで開いてください。
CSSの基本（例）
body { font-family: Arial, sans-serif; color:#333; }
h1 { color:#0066cc; }
.container { max-width:960px; margin:0 auto; }
HTMLのでを使い、CSSを適用します。
ファイルの保存と確認
- 文字コードはUTF-8を推奨します。
- ブラウザでリロードして変更を確認します。開発者ツールで表示崩れを検査できます。
公開方法
- レンタルサーバーの管理画面やFTP/SFTPでindex.htmlとCSSファイルをアップロードします。
- ドメインを設定すればURLで公開できます。無料のホスティングサービスを使う手もあります。
注意点
- 画像は相対パスとフォルダ構成を揃えてください。
- スマホ対応（レスポンシブ）を意識してメディアクエリを使うと閲覧性が上がります。
この章では自作の流れが分かるよう、具体例を中心に説明しました。
WordPressやCMSを使ったWebサイト作成
概要
WordPressは世界で最も使われるCMS（コンテンツ管理システム）です。専門知識が少なくても記事やページを作りやすく、デザインや機能を追加できる点が魅力です。例えばブログ運営や店舗の紹介ページ、簡単なECサイトにも向きます。
メリット
- テンプレート（テーマ）が豊富で外観を短時間で整えられます。
- 更新が簡単で、記事投稿や写真差し替えがすぐできます。
- プラグインで機能を追加でき、SEOやセキュリティ対策がしやすいです。
用意するもの
- 独自ドメイン（例: example.com）
- レンタルサーバー（自動インストール対応だと楽です）
- WordPress本体（多くのサーバーでワンクリックで導入可能）
作成手順（簡潔）
- ドメインを取得し、サーバーを契約します。
- サーバーの管理画面でWordPressをインストールします。
- テーマを選んでインストールし、ロゴや色を設定します。
- プラグインを入れて機能を追加します（例: SEO、バックアップ）。
- 固定ページ（会社概要、問い合わせ）と記事を作成し公開します。
テーマとプラグインの選び方
- テーマは目的（ブログ、企業、ショップ）に合ったものを選びます。無料でも十分なものがあります。
- プラグインは必要最低限に絞ります。重複や互換性に注意してください。
運用と保守
- 定期的にWordPressとプラグインを更新します。古いままだと危険です。
- バックアップを自動化して、万一に備えます。
- セキュリティ対策（管理者IDの変更や二段階認証の導入）を行います。
費用の目安
- ドメイン: 年間数百〜数千円
- サーバー: 月数百〜数千円
- 有料テーマやプラグインは別途費用がかかります。
最後に
WordPressは柔軟性が高く、多くの用途で使えます。初めての方はまず無料テーマと少数のプラグインで試してみることをおすすめします。
ホームページ作成ツール・サービスの利用
概要
ブラウザ上でドラッグ＆ドロップ操作だけで作成できるサービスが増えています。専門知識がなくても、短時間で見栄えの良いページを作れます。
主なサービス
- Wix：デザイン自由度が高く直感的です。テンプレートも豊富です。
- Jimdo：日本語サポートが手厚く、初心者向けです。
- ペライチ：ランディングページ作成に向いています。
- Squarespace：デザイン性重視で写真やポートフォリオ向けです。
主な特徴と具体例
- テンプレート多数：業種別のひな形から始められます。
- ドラッグ操作：画像やテキストをそのまま配置できます（例：Wixで見出しを移動）。
- モバイル対応：スマホ表示を自動調整します。
- EC機能や予約機能：簡単にショップや予約ページを追加できます。
利用手順（簡単4ステップ）
- アカウント作成
- テンプレート選択
- コンテンツ入力（文章・画像・フォーム）
- 公開と独自ドメイン設定
無料プランと有料プランの違い
- 無料：広告表示やサブドメイン制限、容量制限が多い
- 有料：独自ドメイン、広告非表示、機能拡張（EC、分析など）
選び方のポイント
- 目的（情報発信、集客、EC）を明確にする
- 予算と将来の拡張性を確認する
- デザインの好みや日本語サポートの有無を確認する
注意点
- デザインやデータの完全な移行が難しい場合があります。サービスに依存すると、将来乗り換えに手間がかかることを念頭に置いてください。
サイト公開と検索エンジン登録の方法
1. サイトを公開する基本手順
- ファイルをサーバーにアップロードします。方法はFTP/SFTPやレンタルサーバーの管理画面からのアップロード、あるいはWordPressの「公開」ボタンなどです。例：FTPクライアントでindex.htmlをアップロードして表示を確認します。
- ドメインと紐付けます。取得したドメインのネームサーバーをレンタルサーバーに向けるか、Aレコード／CNAMEを設定します。設定後、反映に数分〜数時間かかることがあります。
2. HTTPS（SSL）の設定
- HTTPSは必須です。ブラウザで「保護された通信」と表示されるため、信用につながります。
- 多くのサーバーはLet’s Encryptで無料SSLを簡単に設定できます。管理画面でワンクリック設定が可能です。
3. 検索エンジンへの登録方法
- Google Search Consoleにサイトを登録して所有権を確認します。例：HTMLファイルをアップロードするか、DNSのTXTレコードを追加します。
- サイトマップ（sitemap.xml）を作成し、Search Consoleで送信します。これによりクロールを促せます。
- robots.txtでクローラのアクセスを制御します。誤って全ページをブロックしないよう注意してください。
4. 基本的なSEOのポイント
- タイトル（title）と説明（meta description）に主要キーワードを自然に入れます。短く分かりやすく書いてください。
- URLは分かりやすくし、階層を整理します（例：/products/商品名）。
- 内部リンクで重要なページへ誘導し、サイト構造を整えます。
- 価値あるコンテンツを定期的に追加します。ユーザーに役立つ情報が最も重要です。
5. 公開後のチェックと運用
- 表示やリンク、フォームの動作を確認します。スマホ表示も必ずチェックしてください。
- Google Analyticsなどでアクセスを計測し、改善点を見つけます。
- 更新やバックアップを定期的に行い、安全に運用してください。
Webサイト作成時の注意点とよくある質問
セキュリティ対策
- CMSやプラグイン、テーマは定期的にアップデートしてください。古いままだと不正アクセスの原因になります。
- SSL化（https）を必ず行いましょう。訪問者の入力情報を保護できます。無料の証明書もあります。
スマホ対応とデザイン
- レスポンシブ対応を基本にしてください。スマホで見づらいと離脱します。
- フォントサイズやボタンの大きさを確認し、操作しやすく調整しましょう。
運用・更新のしやすさ
- 更新しやすい仕組みを選びます。CMSや編集画面が分かりやすいと継続できます。
- 画像や文章の保存場所を決め、担当者でルールを作ると作業が楽になります。
バックアップと復元
- 定期的にバックアップを取りましょう（例：週1回）。万が一のときに備えます。
- 保存は別の場所（外部サーバーやクラウド）にすると安全です。
表示速度とパフォーマンス
- 画像は軽くして読み込みを早めます。必要以上に高解像度にしないでください。
- キャッシュ設定や不要なプラグインの整理で高速化できます。
費用の目安
- 無料サービスで始められますが、独自ドメインやレンタルサーバーを使うと信頼性が上がります。
- 独自ドメイン＋レンタルサーバーは月額数百円からが一般的です。
よくある質問（Q&A）
Q: CMSの更新はどのくらいの頻度が必要ですか？
A: 新しい更新が出たらできるだけ速やかに行うのが安全です。週に1回は確認してください。
Q: SSLは無料で使えますか？
A: 無料の証明書があります。ホスティングで自動設定できる場合も多いです。
Q: バックアップを手動で行う必要はありますか？
A: 自動バックアップ機能があるならそれを使い、定期的に復元テストをしてください。
Q: スマホでの見え方はどう確認しますか？
A: 実際のスマホで確認するか、編集画面のプレビュー機能を使うと早くチェックできます。
よくあるWebサイト作成手法の比較
比較の前提
対象は個人〜小規模事業者の一般的なホームページです。費用は目安、難易度は初学者向けの直感的な評価です。
1) HTML/CSSを自作する方法
- 難易度：高い。コードを書く必要があります。
- 費用：安い。独自ドメインとサーバー代のみで済むことが多いです。
- デザイン自由度：非常に高い。細部までこだわれます。
- 更新のしやすさ：慣れるまで手間がかかります。
- SEO：適切に作れば強い。軽いページを作れます。
- 向く人：デザインにこだわりたい人、自分で学びたい人。
2) WordPressなどのCMS
- 難易度：中程度。初期設定は学習が必要ですが操作は楽になります。
- 費用：サーバー・テーマ・プラグイン費用がかかる場合があります。
- デザイン自由度：高い。テーマやカスタマイズで幅広く対応できます。
- 更新のしやすさ：管理画面から簡単に更新できます。
- SEO：拡張機能で対策しやすく、実績もあります。
- 向く人：更新頻度が高いサイト、機能拡張したい人。
3) 作成ツール・サービス（例：ドラッグ＆ドロップ型）
- 難易度：低い。テンプレートを選んで作れます。
- 費用：無料プラン〜有料プランまで幅があります。
- デザイン自由度：テンプレート中心で普通〜高め。
- 更新のしやすさ：直感的で簡単です。
- SEO：標準機能はありますが、柔軟性はCMSより劣ることがあります。
- 向く人：早く見栄えの良いサイトを作りたい人、技術に自信がない人。
選び方のポイント
- コスト重視なら自作、更新や拡張を重視するならCMS、手軽さを優先するなら作成ツールを検討してください。
