タイトル: Webサイト作成
SEOタイトル: Web サイト作成完全ガイド (ドメイン/サーバ/CMS/SEO 2026 年版)
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>Web サイト作成は <strong>① 目的・ペルソナ・KPI 設計 → ② ドメイン → ③ ホスティング → ④ 構築方式 → ⑤ HTTPS / SEO / 計測</strong> の 5 段階</li><li><strong>ドメイン</strong>: お名前.com / Cloudflare Registrar / Google Domains (現 Squarespace Domains) / Value Domain</li><li><strong>ホスティング</strong>: レンタル (Xserver / ConoHa WING / さくら) / VPS (AWS Lightsail / さくら VPS) / PaaS (Vercel / Netlify / Cloudflare Pages)</li><li><strong>構築方式</strong>: CMS (WordPress / Ghost / Drupal) / 静的サイトジェネレータ (Hugo / Astro / Next.js / Nuxt) / ノーコード (Wix / Squarespace / STUDIO / Notion Sites)</li><li><strong>必須セットアップ</strong>: HTTPS (Let's Encrypt) / GA4 / Search Console / sitemap.xml / robots.txt / OGP</li></ul></td></tr></table>
<h2>Web サイト作成の全体像</h2>
<p>2026 年の Web サイト作成は、選択肢が爆発的に増えています。個人ブログから企業コーポレートサイト、EC、メディアまで <strong>目的・規模・運用体制・予算</strong> によって最適解が変わるため、まず以下の 5 段階で設計します。</p>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>段階</th><th>決めること</th><th>典型選択肢</th></tr></thead>
<tbody>
<tr><td>① 目的・KPI</td><td>誰に何を届け、何を測るか</td><td>PV / CVR / 問合せ数 / 滞在時間</td></tr>
<tr><td>② ドメイン</td><td>独自ドメイン取得</td><td>お名前.com / Cloudflare / Value Domain</td></tr>
<tr><td>③ ホスティング</td><td>サーバの種類</td><td>レンタル / VPS / PaaS / 静的ホスティング</td></tr>
<tr><td>④ 構築方式</td><td>CMS / SSG / ノーコード</td><td>WordPress / Astro / Wix</td></tr>
<tr><td>⑤ 計測・SEO</td><td>HTTPS / 計測 / サイトマップ</td><td>GA4 / Search Console / OGP</td></tr>
</tbody>
</table>
<h2>① 目的とペルソナ・KPI 設計</h2>
<p>サイト構築前に必ず言語化しておくべき項目です:</p>
<ul>
<li><strong>サイトの目的</strong>: 集客 / 問い合わせ / 販売 / 採用 / 情報発信 / ポートフォリオ</li>
<li><strong>ペルソナ</strong>: 年齢、職業、悩み、利用デバイス (モバイル比率)</li>
<li><strong>KPI</strong>: 月間 PV / 直帰率 / 滞在時間 / 問い合わせ件数 / 売上</li>
<li><strong>更新頻度</strong>: 月数回 / 週次 / 日次 → CMS 要否の判断軸</li>
<li><strong>運用体制</strong>: 一人 / 複数人 / エンジニア有無</li>
</ul>
<h2>② ドメイン取得</h2>
<p>ドメインは年間 1,000〜2,000 円の <strong>独自ドメイン</strong> を取得します。サブドメイン無料サービス (xxx.wixsite.com 等) は SEO とブランド面で不利。</p>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>レジストラ</th><th>特徴</th><th>向き</th></tr></thead>
<tbody>
<tr><td>お名前.com</td><td>国内最大手、TLD 種類豊富、初年度激安</td><td>初心者 / 日本企業</td></tr>
<tr><td>Cloudflare Registrar</td><td>原価販売・更新料も安い、Whois 代行無料</td><td>コスト最重視 / エンジニア</td></tr>
<tr><td>Squarespace Domains (旧 Google Domains)</td><td>UI シンプル、Google ワークスペース連携</td><td>個人 / 海外</td></tr>
<tr><td>Value Domain</td><td>GMO 系、DNS 設定が柔軟</td><td>中級者</td></tr>
<tr><td>AWS Route 53</td><td>AWS と統合、API 操作</td><td>クラウド運用</td></tr>
</tbody>
</table>
<p><strong>TLD の選び方</strong>: 一般用途は <code>.com</code> / <code>.net</code> / <code>.jp</code>。個人ブログは <code>.dev</code> / <code>.app</code> / <code>.me</code> も人気。SEO 的に TLD 差はほぼ無い。日本企業の信頼性なら <code>.co.jp</code>。</p>
<h2>③ ホスティング選び</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>方式</th><th>例</th><th>月額目安</th><th>得意</th></tr></thead>
<tbody>
<tr><td>レンタルサーバ</td><td>Xserver / ConoHa WING / mixhost / さくら</td><td>500〜1,500 円</td><td>WordPress / 一般企業サイト</td></tr>
<tr><td>VPS</td><td>さくら VPS / ConoHa VPS / AWS Lightsail</td><td>700〜3,000 円</td><td>カスタムスタック / 自由度重視</td></tr>
<tr><td>クラウド (IaaS)</td><td>AWS EC2 / GCP / Azure</td><td>従量課金</td><td>大規模 / スケール要</td></tr>
<tr><td>PaaS</td><td>Vercel / Netlify / Cloudflare Pages / Render</td><td>無料〜</td><td>SSG / Next.js / Nuxt</td></tr>
<tr><td>マネージド WP</td><td>Kinsta / WP Engine</td><td>3,000 円〜</td><td>本格 WordPress</td></tr>
</tbody>
</table>
<p>2026 年現在、<strong>静的サイト + CDN (Cloudflare Pages / Vercel)</strong> は無料枠が広く、個人〜中小規模ならまずこれで充分。WordPress を選ぶなら国産レンタル (Xserver / ConoHa WING) が安定。</p>
<h2>④ 構築方式</h2>
<h3>CMS (Content Management System)</h3>
<p>記事の追加・編集を管理画面から行えるシステム。エンジニア不在でも運用可能。</p>
<ul>
<li><strong>WordPress</strong>: シェア世界 1 位、テーマ・プラグイン豊富、ブログ〜EC まで万能。プラグイン依存とセキュリティが課題</li>
<li><strong>Ghost</strong>: ブログ・ニュースレター特化、シンプル、Node.js 製</li>
<li><strong>Drupal</strong>: 大規模・多言語サイト向け、行政・教育機関で人気</li>
<li><strong>Movable Type</strong>: 国産、企業サイトで根強い需要</li>
<li><strong>Strapi / Sanity / Contentful</strong>: Headless CMS (API 配信)、フロントを別フレームワークで作る場合</li>
</ul>
<h3>静的サイトジェネレータ (SSG)</h3>
<p>Markdown 等のファイルから HTML を事前生成。高速・高セキュリティ・低コスト。エンジニアが書くか、ヘッドレス CMS と組み合わせる。</p>
<ul>
<li><strong>Hugo</strong>: Go 製、ビルド爆速、ブログ・ドキュメント向け</li>
<li><strong>Astro</strong>: 2026 年人気、コンテンツ系最強、Island Architecture</li>
<li><strong>Next.js</strong>: React、SSG / SSR 両対応、Vercel と相性抜群</li>
<li><strong>Nuxt</strong>: Vue 版 Next.js</li>
<li><strong>SvelteKit</strong>: Svelte 製、軽量で人気上昇中</li>
<li><strong>Gatsby</strong>: 老舗、メンテモード気味</li>
</ul>
<h3>ノーコード</h3>
<p>コード不要、ブラウザだけで構築。デザイン自由度はテンプレ次第。</p>
<ul>
<li><strong>Wix</strong>: テンプレ豊富、AI で初期生成、月 1,500 円〜</li>
<li><strong>Squarespace</strong>: デザイン重視、海外で人気</li>
<li><strong>STUDIO</strong>: 国産、Figma に近い操作感</li>
<li><strong>Notion Sites</strong>: Notion をそのまま公開、ドキュメントサイト向け</li>
<li><strong>Webflow</strong>: 自由度最高だが学習曲線あり</li>
<li><strong>ペライチ</strong>: LP 特化、国産</li>
</ul>
<h2>⑤ 必須セットアップ</h2>
<h3>HTTPS (SSL/TLS)</h3>
<p>2026 年現在、HTTPS 化は SEO・セキュリティ・ブラウザ警告回避の <strong>必須要件</strong> です。多くのホスティングが <strong>Let's Encrypt 無料証明書</strong>を自動更新で提供。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># Let's Encrypt (certbot) で自前 VPS に証明書発行
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com
# 自動更新 (cron)
sudo certbot renew --dry-run</code></pre>
<h3>Search Console 登録</h3>
<p>Google 検索でのインデックス状況・クエリ・順位を確認できる無料ツール。サイト公開直後に必ず登録します。</p>
<ol>
<li><a href="https://search.google.com/search-console" target="_blank" rel="nofollow noopener">Search Console</a> にアクセス</li>
<li>「プロパティを追加」→ ドメインプロパティ推奨</li>
<li>DNS TXT レコードで所有権確認</li>
<li>sitemap.xml を送信</li>
</ol>
<h3>GA4 (Google Analytics 4)</h3>
<p>2023 年に旧 UA から完全移行。イベントベース計測が標準。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- GA4 タグ (Google tag) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script></code></pre>
<h3>SEO の基本</h3>
<ul>
<li><strong>title / meta description</strong>: ページ固有・キーワード含める・60〜120 文字</li>
<li><strong>見出し (h1〜h3)</strong>: 構造的に</li>
<li><strong>sitemap.xml</strong> / <strong>robots.txt</strong></li>
<li><strong>構造化データ (JSON-LD)</strong>: 記事・FAQ・パンくず</li>
<li><strong>OGP</strong>: <code>og:title</code> / <code>og:image</code> で SNS シェア時の見栄え</li>
<li><strong>Core Web Vitals</strong>: LCP / INP / CLS のスコア</li>
<li><strong>モバイルファースト</strong>: Google はモバイル版を主インデックス</li>
</ul>
<h2>UI / UX の基本</h2>
<ul>
<li>ファーストビュー (FV) で <strong>誰向け・何のサイト</strong>かを 3 秒で伝える</li>
<li><strong>レスポンシブ</strong>でモバイル比率 60〜80% に対応</li>
<li>CV (問合せ/購入) ボタンを <strong>各セクション末</strong>に配置</li>
<li>読み込み 3 秒以内、画像は WebP / AVIF</li>
<li>フォントは可読性 (16px+)、行間 1.6〜1.8</li>
<li>カラーは 3 色程度に絞る</li>
</ul>
<h2>WordPress vs 静的サイト 早見表</h2>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e8f5e9"><th>観点</th><th>WordPress</th><th>静的 (Astro/Hugo + Vercel)</th></tr></thead>
<tbody>
<tr><td>更新の手軽さ</td><td>◎ 管理画面</td><td>△ Git push 必要</td></tr>
<tr><td>表示速度</td><td>△〜○ (キャッシュ次第)</td><td>◎ CDN 配信</td></tr>
<tr><td>セキュリティ</td><td>△ 脆弱性多い</td><td>◎ サーバレス</td></tr>
<tr><td>ランニング</td><td>レンタル 1,000 円/月</td><td>無料〜</td></tr>
<tr><td>カスタマイズ</td><td>◎ プラグイン</td><td>○ コード次第</td></tr>
<tr><td>運用知識</td><td>低</td><td>Git / Node.js</td></tr>
</tbody>
</table>
<h2>FAQ</h2>
<p><strong>Q: 個人ブログを最安で始めたい</strong><br />
A: ドメイン (Cloudflare 約 1,200 円/年) + Cloudflare Pages 無料 + Hugo / Astro。年間 1,500 円で運用可能。</p>
<p><strong>Q: WordPress と Wix どちらが SEO に強い？</strong><br />
A: 構造的には WordPress の方が SEO カスタマイズ余地が大きい。ただし Wix も近年改善され、月数千 PV 規模なら差は出にくい。記事品質の方が圧倒的に重要。</p>
<p><strong>Q: 制作会社に依頼すべきか自作すべきか</strong><br />
A: 10 ページ以下のコーポレートサイトなら STUDIO / Wix で自作可能。20 ページ以上の本格サイトや EC は制作会社推奨。</p>
<p><strong>Q: サーバを借りる前にデザインを確認したい</strong><br />
A: Figma でモックアップ → ステークホルダー確認 → 実装、の順序が業界標準。</p>