はじめに
本書の目的
このドキュメントは、初心者がWebサイトを作成する際に知っておきたい基本と手順をわかりやすくまとめたガイドです。専門用語は最小限に抑え、具体例を交えて説明します。初めてでも実際に手を動かせるように構成しています。
誰に向けたものか
・自分の情報を掲載する個人や小さな店舗の方
・仕事で簡単なサイト作成が必要になった方
・学習としてHTMLやWordPressに触れたい方
これらの方が、目的に合った方法を選べるように書いています。
本書で扱う内容
サーバーやドメインの役割、サイト作成の大まかな流れ、主な作成方法（WordPress、ホームページ作成ツール、HTML/CSS、テンプレート活用）を順に解説します。各方法の特徴や手順、注意点を具体的に示します。
読み方のポイント
まずは全体像を把握し、目的に応じて該当章を詳しく読むことをおすすめします。実際に手を動かす際は、章末の手順を順に試してみてください。
Webサイト作成に必要な基礎知識
サーバーとは
サーバーはWebサイトのデータを置く場所です。写真や文章、プログラムを保存して公開します。個人ならレンタルサーバーを契約すると簡単に始められます。たとえば月額数百円から利用できます。
ドメインとは
ドメインはWebサイトの住所（例: example.com）です。独自ドメインを使うとブランド性や信頼感が高まります。無料のサブドメイン（example.provider.com）よりも見た目が良くなります。
家の例えで理解する
サーバーは“土地”でドメインは“住所”です。良い土地を借り、分かりやすい住所を付けることで訪問者が来やすくなります。
実際の準備手順（簡単）
- レンタルサーバーを選ぶ（容量、料金、サポートを確認）
- ドメインを取得する（好きな名前を登録）
- ドメインの設定でサーバーを指す（DNS設定）
選び方のポイント
- 料金と性能: 継続しやすい料金と必要な容量を確認します。
- サポート: 初心者向けのサポートがあると安心です。
- 将来性: メールやSSL（HTTPS）対応があるか確認します。
Webサイト作成の大まかな流れ
Webサイト作成は大きく4つのステップで進みます。ここでは、それぞれの役割と具体的な作業を分かりやすく説明します。
1. イメージ作り（目的・内容・デザイン検討）
まず目的をはっきりさせます。販売、情報発信、名刺代わりなど目的で必要なページや機能が変わります。ターゲットやページ構成（トップ、サービス、問い合わせ）を紙やメモで整理し、簡単なワイヤーフレームを描くと作業が楽になります。
2. サーバーとドメインの用意
公開先のサーバーを選び、ドメイン（例：yourshop.com）を取得します。レンタルサーバーは費用やサポート、SSL対応を確認してください。会社によっては簡単な設定代行がある場合もあります。
3. Webサイト作り（データ・デザイン作成）
テキストや画像を用意し、実際のページを作ります。WordPressや作成ツール、またはHTML/CSSで作る方法があります。スマホ表示の確認やリンク、フォームの動作チェックを忘れずに行います。
4. 完成・公開（アップロードして公開）
サーバーにファイルをアップロードし、ドメインと紐づけます。表示確認を行い、必要ならSSLやリダイレクト、アクセス解析を設定します。公開後も定期的にバックアップと更新を行うと安心です。
Webサイト作成の主な3つの方法
1. WordPressを利用する（初心者にもおすすめ）
WordPressは誰でも使いやすく、テンプレート（テーマ）や機能追加（プラグイン）が豊富です。ブログ、会社サイト、ネットショップの導入例が多く、将来の拡張にも向きます。必要なのはドメインとレンタルサーバーだけで、初期費用は抑えられます。注意点は定期的な更新やセキュリティ対策が必要なことです。
2. ホームページ作成ツールを利用（手軽で速い）
WixやJimdoのようなサービスは、ドラッグ＆ドロップで直感的に作れます。専門知識がなくても短時間で公開でき、サーバー管理も不要です。月額料金で運用することが多く、独自機能の追加や移行は制約を受ける場合があります。小規模な店舗案内やイベント告知に向きます。
3. HTMLとCSSで自作する（自由度が最も高い）
コードを書いて作る方法です。レイアウトや動きまで細かく決められ、軽く高速なサイトが作れます。学習と制作に時間がかかり、保守も自分で行います。ポートフォリオや独自表現が必要なサイトに向きます。
選び方の目安
- 短時間・簡単なら：ホームページ作成ツール
- 将来の拡張や中規模運用なら：WordPress
- 独自デザインや学びたいなら：HTML/CSS自作
まずは目的・予算・運用体制を明確にして選ぶと失敗が少ないです。
WordPressを利用する方法
概要
WordPressは初心者でも扱いやすいCMS（更新しやすい仕組み）です。レンタルサーバーとドメインがあれば手軽にサイトを始められます。多くのレンタルサーバーは「クイックスタート」機能を用意し、10分ほどでインストールが完了します。
7つの手順
- レンタルサーバー契約
- 国内の例：エックスサーバーやConoHaなど。料金や表示速度を比べて選びます。
- ドメイン取得・設定
- 独自ドメイン（例：example.com）を取得し、サーバーに割り当てます。
- SSL設定
- 無料のLet’s EncryptでSSLを有効化し、URLをhttpsにします。
- WordPressインストール
- サーバーの簡単インストール機能か、手動で行います。クイックスタートなら初心者でも短時間で完了します。
- テーマインストール
- デザインはテーマで変更します。無料テーマ（例：Cocoon）や有料テーマを使えます。
- 初期設定
- サイトタイトル、パーマリンク（URL形式）、表示設定、管理者メールなどを整えます。
- デザイン・コンテンツ作成
- 固定ページや投稿を作り、メニューやウィジェットで見やすく配置します。お問い合わせフォームはプラグイン（例：Contact Form 7）を利用すると簡単です。
補足
定期的にバックアップと更新を行えば、運用が安定します。
ホームページ作成ツールを使う方法
概要
HTMLの知識がなくてもドラッグ＆ドロップで直感的に作れます。管理画面で文章や画像を入れるだけでHTMLが自動生成され、デザインやレイアウトはテンプレートから選べます。短時間で見栄えの良いサイトを作りたい方に向きます。
選び方のポイント
- 操作性：編集画面が分かりやすいか確認します。実際に無料トライアルで触ると良いです。
- テンプレートの種類：業種や目的に合うテンプレがあるかを見ます。
- 料金体系：無料プランや有料プランの差、ドメインやSSLの有無を比較します。
- 機能：フォーム、予約、ECなど必要な機能があるか確認します。
- モバイル対応：スマホ表示が自動で整うか必ずチェックします。
主な機能
- ブロック式編集（画像やテキストを配置）
- レスポンシブ自動調整
- SEO設定（タイトルやメタ説明の編集）
- 連絡フォーム、予約、決済連携
- 独自ドメイン接続、SSL対応
作り方の流れ（簡潔）
- サービスに登録する
- テンプレートを選ぶ
- テキスト・画像を差し替える
- 必要な機能（フォーム等）を追加する
- プレビューで確認し公開する
利用時の注意
- デザイン自由度に限界があります。細かい独自調整は難しい場合があります。
- 将来他サービスへ移すなら、データ移行の可否と費用を確認してください。
- 無料プランは広告表示や機能制限があることが多いです。
活用例
個人のポートフォリオ、飲食店のメニューと予約、商品販売の簡易EC、イベントのランディングページなどで特に力を発揮します。
HTMLとCSSで自作する方法
概要
HTMLはページの骨組みを作り、CSSは見た目を整えます。ゼロから自由に作れるので学習効果が大きく、細かいデザイン調整が可能です。動的機能はJavaScriptなどが必要です。
必要な準備
- テキストエディタ（例：VS Code、Sublime、メモ帳）
- 表示確認用ブラウザ（Chrome、Firefoxなど）
- 保存用フォルダとファイル（index.html、styles.css）
基本の手順
- ファイルを作る：index.html と styles.css を同じフォルダに保存します。
- HTMLの骨組みを書く：
- <!DOCTYPE html>、head（title、meta）を設定し、bodyに見出しや段落、画像、リンクを置きます。
- CSSで見た目を作る：
- styles.css に色、余白、フォント、大きさを指定して link で読み込みます。
- 例：.header { background:#f2f2f2; padding:20px; }
- ブラウザで開いて確認：保存後にブラウザでファイルを開き、表示やレイアウトをチェックします。
- 公開する：FTPやホスティング、GitHub Pages などでアップロードします。
実作業のコツ
- レスポンシブ対応は meta viewport とメディアクエリで行います。
- クラス名は分かりやすく付け、CSSはまとめて管理すると保守が楽です。
- ブラウザの開発者ツールで要素の調整や原因調査を行います。
発展ポイント
フォームや動的表示はJavaScript、サーバー処理が必要ならPHPなどを学ぶと表現の幅が広がります。まずは小さなページを作って慣れることをおすすめします。
HTMLテンプレートを活用した作成方法
はじめに
HTMLの基礎があれば、テンプレートを使うと手早く見栄えの良いサイトを作れます。既存のHTMLや画像を差し替えるだけで形になります。
テンプレートの種類と入手先
- 無料テンプレート：配布サイトやGitHubで入手できます。例：ランディング、ブログ、企業サイト用。
- 有料テンプレート：デザインや機能が豊富でサポート付きです。
使い方の基本ステップ
- テンプレートをダウンロードし、解凍します。
- index.htmlなどの文章を自分用に置き換えます（会社名や紹介文）。
- 画像はimgフォルダのファイルを差し替えます。ファイル名が変わる場合はHTML内の参照も更新します。
- CSSで色や余白を調整し、必要ならHTMLに要素を追加します。
- ブラウザで確認して問題なければサーバーへアップロードします。
カスタマイズのコツ
- ナビゲーションやフッターは共通部分なのでまず整えます。
- レスポンシブ（スマホ対応）を確認し、必要ならメディアクエリで調整します。
- 小さな変更はCSSで済ませ、大きな構造変更はHTMLを編集します。
注意点
- ライセンスを確認し、商用利用や改変の可否を守ってください。
- JavaScriptや外部フォントの参照切れに注意し、相対パスを正しく設定します。
- 編集前にバックアップを取り、段階的に動作確認を行ってください。
