はじめに
この章では、本書の目的と使い方をわかりやすく説明します。ホームページ作りの本は、「手早く見栄えよく作りたい人」と「仕組みから学んで自分で作りたい人」でおすすめが変わります。本書は、目的別（サービスを使う／コードを書く）とレベル別（超初心者／少し慣れている人）に分けて、本の選び方を丁寧に案内します。
誰に向いているか
- 初めてホームページを作る人：操作手順や画面キャプチャが多い本がおすすめです。具体的な手順を追いながら進められます。
- すこし慣れている人：仕組みやコードの説明がある入門書で、応用力を身につけられます。
ここで学べること
- サービス利用派の本の特徴（テンプレート、短時間で公開できる点）
- コーディング学習向け本の特徴（HTML/CSSの基礎、手を動かす練習）
- 会社やお店のサイト向け本のポイント（構成、SEOや更新運用の注意）
読み方のコツ
まず目的を決めてください。見た目優先ならサービス本、学びたいならコーディング本を選びます。目次やサンプル、更新日、付録のファイル有無を確認すると失敗が少なくなります。
以降の章で、目的別・レベル別に具体的な本の選び方を詳しく紹介していきます。ぜひ自分に合った一冊を見つけてください。
まず決めたいこと
最初に決める一つの問い
ウェブサイト作りを始める前に、まず「とにかく簡単に公開したいか」「仕組みを学んで自分で作りたいか」を決めてください。目的がはっきりすると、後から本を選ぶときに迷いにくくなります。たとえば「ブログをすぐ始めたい」「名刺代わりのページが欲しい」「将来は機能を増やしたい」など、目標を具体的に書き出すとよいです。
簡単に作りたい人（サービス利用）
WordPress（サービス型）、Wix、Jimdoなどのサービスは、テンプレートを選んで文字や画像を入れるだけで公開できます。メリットは手間が少なく、短時間で見た目の良いサイトができる点です。デメリットは細かい自由度が限られることです。例：一日で店舗の案内ページを用意したい場合はWixやJimdoが向きます。ブログ中心ならWordPressが使いやすいことが多いです。
仕組みから学びたい人（コーディング学習）
HTMLやCSSの基礎を学ぶと、自分で細かいデザイン調整や動きのある表現ができます。最初は簡単な一枚ページを作って、徐々にJavaScriptやレスポンシブ対応を学ぶ流れが実践的です。学ぶ意欲があるなら、実際に手を動かして小さなサイトを作る本がおすすめです。
本を選ぶときのチェックリスト
- 目的に合っているか（すぐ公開か学習重視か）
- サンプルや作例が豊富か
- 最新版または発行日が新しいか
- コードや素材のダウンロードがあるか
まず方針を決めることで、次の章で紹介する本がより役立ちます。
とにかく簡単に作りたい人向け
はじめに
とにかく手早く、コーディング不要でサイトを作りたい方向けの方法を紹介します。画面を見ながら操作を真似できる入門書は初心者に向きます。
WordPressで簡単に作る
入門書はテーマ選びや固定ページ、ブログ投稿、問い合わせフォームの設置を画面キャプチャで丁寧に解説します。基本の流れは次の通りです。
– レンタルサーバーとドメインを用意する。
– テーマ（テンプレート）を選ぶ。見た目がほぼ決まるので写真や色を変えるだけでOKです。
– 固定ページ（会社概要、サービス）を作る。
– ブログ投稿で新着情報を更新する。
– 問い合わせフォームはプラグインで追加（例：Contact Form 7、WPForms）。
入門書は画面毎に手順が載るため、知識ゼロでも進めやすいです。
Wix／Jimdoで簡単に作る
これらはブラウザ上でドラッグ＆ドロップしてデザインできます。特徴は次の通りです。
– テンプレートを選んで、要素を置くだけで見た目が整う。
– サーバーや更新はサービス側で管理してくれる。
– 画像やテキストをクリックして編集する感覚で作業できる。
コーディングが不安な人や短時間で形にしたい人に向きます。
選び方のポイント
- 将来の拡張や細かい調整が必要ならWordPress。テンプレートを変えたり機能を増やせます。
- とにかく簡単さと手早さを優先するならWix／Jimdo。扱いやすさが魅力です。
- 費用、独自ドメインの有無、サポート体制も確認してください。
簡単チェックリスト
- 目的（会社案内、店舗、ブログ）を決める
- テンプレートを1つ決める
- 必要なページを3〜5つに絞る
- 問い合わせフォームとアクセス情報を必ず載せる
- スマホ表示を確認する
これで最短で見栄えの良いサイトを作れます。
コーディングから学びたい人向け
HTMLとCSSを手で書くと、ホームページの仕組みが体で覚えられます。タグの意味や文字・画像の配置、レイアウトの仕組みを一通り学べます。以下は具体的な学び方と練習案です。
HTML/CSSで何を学べるか
- HTML：見出し、段落、リンク、画像、リスト、フォームなど基本構造。意味を持つタグ（見出しはh1など）を知ります。
- CSS：色・余白・フォント・配置を決める方法。ボックスモデルや配置（Flexbox）でレイアウトを作れます。
学習の基本ステップ
- 基本タグを手で書いて確認する（index.htmlを作る）。
- CSSを別ファイルで読み込み、色や余白を変える。背景色を変えるだけでも効果を実感できます。
- レイアウト（ボックスモデル、Flexbox）を練習する。
- レスポンシブ（幅に応じた調整）をメディアクエリで学ぶ。
具体的な練習課題
- 自己紹介ページ：名前・写真・連絡先を並べる。フォントや余白を調整。
- 写真ギャラリー：画像をグリッドで並べてレスポンシブ化。
- 問い合わせフォーム：入力欄と送信ボタンを作る（動作確認は後回しでも可）。
道具とコツ
- CodePenやローカルのエディタ（VSCode）で試す。ブラウザの開発者ツールで要素を確認してください。小さく作って確かめながら進めると学習が早いです。
よくあるつまずき
- レイアウトが崩れたら、まず余白や幅を疑う。CSSの適用順やスペルミスもよくある原因です。要素を一つずつ確認して直してください。
会社・お店のサイトを作りたい場合
どんな本を選ぶか
会社・お店向けの本はコーポレートサイトや店舗サイトに特化したものを選びます。ページ構成や問い合わせ導線、集客の考え方が載っている本が実務に役立ちます。実例が多い本を優先してください。
まず決めること（目的とターゲット）
何を達成したいか（来店、問い合わせ、予約、採用など）を明確にします。ターゲット層を具体的に想定すると、文章や写真、導線が決めやすくなります。
ページ構成と導線の基本
基本のページは「トップ」「サービス・商品」「料金」「会社情報」「アクセス」「お問い合わせ」。問い合わせや予約へのボタンは全ページで見える位置に置きます。電話やLINEなどの連絡手段はワンクリックで使えるようにします。
デザインと信頼感を作るポイント
写真は実物を使い、プロフィールや実績を掲載しましょう。色やロゴは統一し、読みやすいフォントを選ぶと信頼感が上がります。
集客と運用（簡単な対策）
ローカル検索のために住所・営業時間を明記し、Googleマイビジネス（現Googleビジネスプロフィール）と連携します。メニューや料金は明確に。更新しやすい仕組み（CMS）を選ぶと長期的に楽になります。
本を選ぶときの具体的ポイント
- 実例が豊富か
- ページ構成や導線の解説があるか
- 更新や運用の章があるか
- デザインや写真の撮り方が載っているか
これらを基準に本を選べば、実用的でビジネスに強いサイト作りができます。
本の選び方のポイント
発行日と版を確認する
ウェブやツールは変わりやすいので、できるだけ新しい発行日や新版を選んでください。古い本だと画面の配置や操作手順が違うことがあります。
タイトルに使いたいサービス名が入っているか
WordPress、Wix、Jimdoなど、実際に使うサービス名がタイトルに含まれていると、目的に合った説明や手順が見つかりやすいです。
初心者向けの表現を探す
「初心者向け」「はじめての」「入門」などの表記がある本は、基礎から図解で丁寧に解説します。初めての方はこうした表現を基準に選ぶと安心です。
目次やサンプルページを確認する
目次で作りたいサイトの項目（公開、デザイン、フォームなど）が含まれているか確認してください。サンプルページやダウンロードファイルがあると実践しやすくなります。
レビューや評価、付属素材も見る
読者レビューで分かりにくい点や誤りの指摘がないか確認します。テンプレートや画像素材、解説用ファイルが付いている本は学習がスムーズです。
より絞り込みたいとき
作りたいサイトのイメージ（ブログ、店舗、予約サイトなど）や自分のレベルを伝えると、より具体的なおすすめを提案できます。
