個人Webサイト、どう作る？ — Astro × Vercelで実現する個人ポートフォリオ

Astro × Tailwind CSS × Vercel で作る個人サイトのボイラープレート

はじめに

「自分のWebサイトを作りたいけど、どこから始めればいいかわからない」

そんな悩みを抱えていませんか？

この記事では、私が運営するこのサイト「khides.com」を参考に、個人サイト構築でよくある疑問への回答をまとめていきます。

すぐに始めたい方へ

このサイトと同じ技術スタックで作られたボイラープレートを公開しています。クローンしてすぐに開発を始められます。

GitHub - khides/website-boilerplate

技術選定の背景を知りたい方は、この記事を読み進めてください。

この記事で解決できる疑問：

そもそも個人サイトって必要？
技術は何を選べばいい？
環境構築って難しくない？
デザインはどうすればいい？
公開にお金はかかる？

個人サイトって本当に必要？SNSじゃダメ？

必須ではないけど、あると世界が広がります。

SNSやブログサービスも便利ですが、自分だけの場所を持つことには特別な意味があります。

項目	SNS・ブログサービス	自分のサイト
所有権	サービス側	自分
カスタマイズ	制限あり	自由
永続性	サービス終了リスクあり	自分次第
ブランディング	他のユーザーと並列	独自のドメインで差別化

自分の名刺代わりになり、ポートフォリオとして機能し、思考を発信する拠点になる——それが個人サイトの価値です。

そもそも、どんな方法がある？

個人サイトを作る方法は、大きく2つに分かれます。

方法	代表例	メリット	デメリット
ノーコード	WordPress、Wix、STUDIO	コード不要、すぐ始められる	月額費用、カスタマイズに限界
コーディングあり	Astro、Next.js、Hugo	高速、無料運用可、自由度高い	学習コストがかかる

ノーコード（WordPress等）を選ぶべき？

WordPressは世界で最も使われているCMS（Contents Management System）で、情報も豊富です。CMSとは、Webサイトのコンテンツ（文章、画像など）をブラウザ上の管理画面から作成・編集・管理できるシステムのこと。コードを書かずに記事を投稿したり、デザインを変更したりできます。

ただし、個人ポートフォリオにはWordPressはオーバースペックな場合も。

観点	ノーコード（WordPress等）	コーディングあり
初期コスト	サーバー代（月500〜1,000円〜）	無料（Vercel等）
表示速度	動的生成のため遅くなりがち	静的HTMLで高速
セキュリティ	プラグイン脆弱性のリスク	静的ファイルのみで安全
カスタマイズ	テーマ・プラグイン依存	コードで自由自在
学習コスト	低（GUI操作）	中〜高
保守	プラグイン更新・バックアップ必須	ほぼ不要

ノーコードが向いている人：コードを書きたくない、すぐに始めたい、ブログ更新頻度が高い

コードを書くのが向いている人：コードを書ける/書きたい、高速なサイトが欲しい、無料で運用したい

この記事では、コードを書いて構築する方法を解説していきます。

コードを書くなら、どのアーキテクチャを選ぶ？

「コードを書いてサイトを作る」と決めたとして、次に迷うのがアーキテクチャの選択です。

方式	正式名称	仕組み	代表例
SSG	Static Site Generation	ビルド時にHTMLを生成	Astro、Hugo、Gatsby
SSR	Server-Side Rendering	リクエスト時にサーバーでHTML生成	Next.js、Nuxt.js
SPA	Single Page Application	ブラウザでJavaScriptが描画	React、Vue、Angular

個人ポートフォリオにはSSGが最適

観点	SSG	SSR	SPA
表示速度	◎ 最速（事前生成済み）	○ サーバー処理あり	△ JS読み込み後に描画
SEO	◎ 完全な静的HTML	○ 対応可能	△ 追加対応が必要
サーバー費用	◎ 不要（CDNのみ）	× 常時稼働が必要	◎ 不要
リアルタイム性	△ 再ビルドが必要	◎ 常に最新	◎ 動的に更新可能
複雑さ	◎ シンプル	△ サーバー管理必要	△ 状態管理が複雑

ポイント：個人サイトやブログは「コンテンツが頻繁に変わらない」「リアルタイム性が不要」「SEOが重要」という特性があります。これはまさにSSGの得意分野。

SSRが必要なケース：ユーザーごとに異なるコンテンツを表示（ECサイト、SNSなど）
SPAが必要なケース：複雑なUIインタラクション（管理画面、Webアプリなど）

個人ポートフォリオには、SSGで十分。むしろ最適解です。

何から始めればいい？どの技術を選ぶ？

「読む」がメインのサイトなら、Astroがおすすめ

なぜAstroなのか

Astroは2022年頃から注目されているフレームワークです。最大の特徴は「必要な部分だけJavaScriptを使う」という設計思想。

ブログやポートフォリオのような「読む」がメインのサイトでは、ほとんどのページが静的HTMLで十分。動きが必要な部分（メニューの開閉、フォームなど）だけReactを使えばいいんです。

他のフレームワークとの比較：

フレームワーク	向いているケース	学習コスト
Astro	ブログ、ポートフォリオ、LP	低〜中
Next.js	Webアプリ、動的コンテンツ多め	中〜高
Hugo	超シンプルなブログ	低

このサイト（khides.com）の技術スタック

このサイトで採用している技術スタックはこちら：

役割	技術	選んだ理由
フレームワーク	Astro	静的サイト生成、表示が高速
UIライブラリ	React	動きのある部分だけ使用
スタイリング	Tailwind CSS	効率的なCSS設計
ホスティング	Vercel	無料、高速、簡単デプロイ

環境構築は難しい？

必要なのは以下の2つだけ：

Node.js（v18以上）— JavaScriptの実行環境
Git— バージョン管理

インストールが終わったら、ターミナルで以下を実行：

npm create astro@latest my-portfolio
cd my-portfolio
npm run dev

ブラウザで http://localhost:4321 を開くと、Astroのウェルカムページが表示されます。

デザインはどうすればいい？

まずはシンプルに。Tailwind CSSで効率よく。

この記事では、デザインの設計方法論については触れずに、技術的なポイントだけ触れておきます。

このサイトではTailwind CSSを使っています。CSSを直接書く代わりに、HTMLにクラスを追加するだけでスタイリングできるので、開発効率が格段に上がります。

// tailwind.config.mjs（要点のみ）
export default {
  theme: {
    extend: {
      colors: {
        brand: '#D28363',      // メインカラー
        surface: '#FFFCFA',    // 背景色
        ink: '#3D3330',        // テキスト色
      },
    },
  },
};

カラーパレットを定義しておけば、text-brandやbg-surfaceのようにクラス名で色を指定できます。一貫性のあるデザインが簡単に実現できます。

ブログ機能はどう実装する？

AstroのContent Collectionsを使えば、Markdownで記事が書けます。

Astroには「Content Collections」という機能があり、Markdownファイルで記事を管理できます。

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()).default([]),
  }),
});

export const collections = { blog: blogCollection };

あとは src/content/blog/ フォルダにMarkdownファイルを置くだけ。タイトルや日付はファイルの先頭（frontmatter）に書きます。

新しい記事を追加するのも簡単——ファイルを作って、GitHubにpushすれば自動で公開されます。

多言語対応はどうやるのか？

後から追加するより、最初から設計しておくと楽

このサイトは日本語と英語の両方に対応しています。正直、手間は2倍以上かかります。でも、こんなメリットがあります：

海外の方にもリーチできる
英語での発信力をアピールできる
技術的なチャレンジとして面白い

Astroのi18n設定は意外とシンプル：

// astro.config.mjs（i18n部分のみ）
i18n: {
  defaultLocale: 'ja',
  locales: ['ja', 'en'],
  routing: {
    prefixDefaultLocale: true, // /ja/ と /en/ でルーティング
  },
}

URLが /ja/blog なら日本語、/en/blog なら英語。翻訳テキストはJSONファイルで管理しています。

SEO対策は何をすればいい？

最低限、メタタグとOGP設定をしておきましょう。

SEO（検索エンジン最適化）で最低限やるべきこと：

タイトルとdescription— ページごとに設定
OGP画像— SNSでシェアされたときに表示される画像
構造化データ— Googleに内容を正しく伝える

<!-- src/layouts/BaseLayout.astro（要点のみ）-->
<head>
  <title>{title}</title>
  <meta name="description" content={description} />

  <!-- OGP -->
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={ogImage} />

  <!-- 構造化データ -->
  <script type="application/ld+json" set:html={JSON.stringify(schema)} />
</head>

難しく考えなくて大丈夫。まずはこの3つを押さえておけば、あとから改善していけます。

どうやって公開する？費用は？

Vercelなら無料で、しかも簡単に公開できます。

公開までの流れ：

GitHubにリポジトリを作成
Vercelにサインアップ（GitHubアカウントでログイン）
リポジトリをインポート
「Deploy」をクリック

以上です。数分で世界中からアクセスできるようになります。

カスタムドメイン（例：yourdomain.com）を使いたい場合は、ドメインを別途購入してVercelに設定します。年間1,000〜2,000円程度で取得できます。

公開後のメンテナンスは大変？

記事の追加はファイルを作るだけ

記事を追加する流れ

src/content/blog/ja/ に .md ファイルを作成
タイトルや日付を書く
本文をMarkdownで執筆
git push する
Vercelが自動でビルド＆デプロイ

定期的にやること

# 依存パッケージの更新確認
npm outdated

# セキュリティチェック
npm audit

月に1回くらい、パッケージを最新に保っておくと安心です。

おわりに

「自分のサイトを作りたい」と思っている方へ。最初から完璧を目指す必要はありません。

まずは小さく始めて、少しずつ改善していくのがおすすめです。この記事で紹介した技術スタックなら、初心者でも十分に取り組めます。

このサイトと同じ技術を使用したボイラープレートは以下で公開しています。ぜひ参考にしてください。

質問やフィードバックがあれば、お問い合わせからお気軽にどうぞ。

ソースコード

khides/website-boilerplate