【2025年最新】Astroで初心者でも簡単にポートフォリオサイトを作成する方法

2025年3月29日2025年4月1日

はじめに

「コーディングが苦手でも、かっこいいサイトが作れないかな…」
「foriioやNotionでポートフォリオを作っているけど、もっと差別化したい」
「せっかくのポートフォリオ、SEO対策もしっかりしたいけど何から手をつければいいか分からない…」

こんな悩みを持っている方は多いのではないでしょうか。

今回は、そんな悩みを解決できるAstroというフレームワークでポートフォリオを簡単に作成する方法をご紹介します。

Astroは静的サイトジェネレーターとして高速で軽量、そしてSEO対策も万全。特にコンテンツ重視のポートフォリオサイト作成には最高のツールです。

この記事では、コーディング初心者の方でも簡単にAstroのテンプレートを活用して、見栄えの良いポートフォリオサイトを作る方法を解説します。

環境構築から公開までの手順、テンプレート選びのコツ、そしてSEO対策まで全てカバーしているので、ぜひ参考にポートフォリオサイトを作って見てください。

Astroとは？

Astroは、高速で軽量なウェブサイトを作れる静的サイトジェネレーターです。

HTMLの基本知識があれば使えて、特にポートフォリオサイトの作成に最適です。

Astroの詳しい特徴や基本的な使用方法については、以下の記事で詳しく解説していますので、ぜひチェックしてみてください。

りょうまオンライン

実践で使えるAstroの基礎から応用まで完全解説 WordPressでWeb制作を始めた方に向けた、Astroの実践的な入門ガイドです。HTMLとCSSの知識を活かしながら、より高速なサイト制作を実現する方法を具体的に解説。環境構築か…

Astroでポートフォリオサイトを作る準備

Astroを使うには、Node.jsというソフトウェアが必要です。

手順はとても簡単で以下の3ステップで進めてください。

Node.jsの公式サイトにアクセス
「LTS」と書かれたボタンをクリック（安定版がおすすめです）
ダウンロードしたファイルを実行してインストール

インストールが完了したら、コマンドプロンプト（Windowsの場合）やターミナル（Macの場合）を開いて、以下のコマンドを入力してみましょう：

node -v

バージョン番号が表示されれば、インストール成功です

テンプレートのインストール

テンプレート選定

Astroには様々なテンプレートがあり、それを使用して作成していきます。

Astro公式サイトにアクセスして、「Resources」→「Themes」を選択してください。

「Resources」→「Themes」を選択する参考画像 — 「Resources」→「Themes」を選択

次に少し下にスクロールして、「Discover more themesボタン」を押してください。

すると様々なテンプレートが準備されています。

今回は無料で、ポートフォリオに向いているテーマを使用します。

右のサイドバーから「Categories」を「Portfolio」にします。

次に「Pricing」を「Free」しして「View resultsボタン」を押して絞り込みをしてください。

「View resultsボタン」を押して絞り込みをする — 「View resultsボタン」を押して絞り込み

ここから好きなテンプレートを選択してください。

テーマを選択し、「Live demoボタン」を押すと、テーマのデモを見ることが出来ます。

「Get startedボタン」を押すとテーマのGithubを確認することができるので、使用されている技術や必要環境など確認してみてください。

テーマによってはGSAPの有料プランが必要だったりしますので、翻訳等を使って確認してみてください。

使用されている技術や必要環境など確認する参考画像 — 使用されている技術や必要環境など確認する

自分の環境にインストール

テンプレートを選んだら、GitHubからクローンして自分の環境にインストールしていきましょう。

選んだテンプレートのGitHubページにアクセスし、「Code」ボタンをクリックし、リポジトリのURLをコピーします。

ターミナル（コマンドプロンプト）やエディタのターミナルを開いてください。

今回はわかりやすいようにデスクトップに作成していきたいので、以下のコマンドを実行しデスクトップに移動してください。

cd Desktop

次に以下のコマンドでリポジトリをクローンしてください。

git clone [コピーしたURL] my-portfolio

[コピーしたURL]の部分は、実際にコピーしたURLに置き換えてください。

するとデスクトップにプロジェクトが作成されますので、お使いのエディタで開いてください。

次に必要な依存関係をインストールします。

エディタでターミナルを開き、以下のコマンドを実行してください。

npm install

インストールが終わったら、開発サーバーを起動して、テンプレートが正常に動作するか確認します。

npm run dev

ターミナルに表示されたURLにアクセスすると、テンプレートが表示されます。

これで基本的なテンプレートのインストールは完了です。

カスタマイズの方法

テンプレートをインストールしたら、次に自分のポートフォリオサイトにカスタマイズしていきましょう。

基本的なディレクトリ構成

Astroプロジェクトの標準的なディレクトリ構成は以下のようになっています：

my-portfolio/
├── public/          # 静的ファイル（画像、フォントなど）
├── src/             # ソースコード
│   ├── components/  # 再利用可能なコンポーネント
│   ├── layouts/     # ページレイアウト
│   ├── pages/       # 各ページのファイル
│   ├── content/     # ブログ記事やプロジェクト情報などのコンテンツ
│   └── styles/      # CSSファイル
├── astro.config.mjs # Astroの設定ファイル
└── package.json     # プロジェクトの依存関係

主なカスタマイズ対象のファイル・フォルダ

`public/` フォルダ

ここには画像やフォント、faviconなどの静的ファイルを配置します。

画像の追加: 自分のプロフィール写真やプロジェクトのスクリーンショットをここに配置します
favicon: サイトのファビコンを public/favicon.ico または public/favicon.svg として配置します

`src/pages/` フォルダ

Webサイトの各ページを定義するファイルが入っています。

index.astro: トップページの内容
about.astro: 自己紹介ページ
projects.astro: プロジェクト一覧ページ
contact.astro: お問い合わせページ

これらのファイルを編集して、自分の情報や希望するレイアウトに変更します。

`src/components/` フォルダ

再利用可能なUIパーツが入っています。

Header.astro: サイトのヘッダー
Footer.astro: サイトのフッター
ProjectCard.astro: プロジェクト一覧でのカードコンポーネント
ContactForm.astro: お問い合わせフォーム

これらのコンポーネントを編集して、デザインや機能をカスタマイズします。

`src/content/` または `src/data/` フォルダ

多くのテンプレートでは、コンテンツやデータを管理するためのフォルダがあります。

テンプレートによって名前や構造が異なる場合があります。

projects/: プロジェクト情報を含むMarkdownファイル
blog/: ブログ記事を含むMarkdownファイル
data.jsまたはsite.js: サイト全体の設定（タイトル、説明、SNSリンクなど）

`src/styles/` フォルダ

CSSファイルが入っています。グローバルスタイルや特定のコンポーネント用のスタイルを編集できます。

これらのファイルを編集し、オリジナルのポートフォリオを作成してみてください。

以下の記事ではAstroの具体的な使用方法を解説していますので、あわせて参考にしてみてください。

りょうまオンライン

Astroの学習は以下の教材がおすすめです！

短時間で濃密な内容を学べるうえ、解説が丁寧で、理解しやすいと高評価のベストセラー講座です。

カスタマイズの具体例

基本情報の変更

多くのテンプレートでは、サイト全体の情報を一つのファイルにまとめています。

例えば src/data/site.js や src/content/config.js などの名前です。

// src/data/site.js の例
export const siteConfig = {
  name: "あなたの名前",
  title: "Web開発者 & デザイナー",
  description: "ポートフォリオサイトの説明文",
  url: "https://yourwebsite.com",
  ogImage: "/images/og-image.jpg",
  links: {
    twitter: "https://twitter.com/yourusername",
    github: "https://github.com/yourusername",
    linkedin: "https://linkedin.com/in/yourusername"
  }
};

このファイルを探して編集することで、サイト全体の基本情報を変更できます。

少しJavaScriptの知識が必要になるので、JavaScriptの学習には以下の記事も参考にしてみてください。

りょうまオンライン

忙しい社会人でもできる！JavaScript習得のための最適な学習順序 JavaScriptを独学で学ぶ方のための、効率的な学習ロードマップを解説。基礎から実践まで、忙しい社会人でも確実にスキルアップできる具体的な学習方法を紹介します。

デザインのカスタマイズ

多くのテンプレートはTailwind CSSを使用していますので、関係ファイルを修正することでカラーやフォントを変更することができます。

Tailwind CSSについては以下の記事で解説しています。

りょうまオンライン

【Tailwind CSS入門】初心者でも今日から使える実践ガイド Tailwind CSSはユーティリティファーストのCSSフレームワークで、HTMLに直接クラスを追加するだけでスタイリングができます。従来のCSSとは異なり、開発効率を向上させなが…

デプロイ方法

ポートフォリオサイトが完成したら、次はインターネット上に公開（デプロイ）してみましょう。

Astroで作成したサイトは、様々なホスティングサービスでデプロイすることができます。ここでは初心者の方にも使いやすいNetlifyでのデプロイをご紹介します。

Netlifyでのデプロイ

Netlifyは無料で利用でき、GitHubと連携することで簡単にデプロイできる人気のサービスです。

ビルドの実行

デプロイ前に、ローカル環境でプロジェクトをビルドして問題がないか確認しましょう

npm run build

ビルドが成功すると、distディレクトリにサイトのファイルが生成されます。

ローカルで確認したい場合は以下のコマンドを実行して、ビルド結果をプレビューできます

npm run preview

GitHubにプロジェクトをアップロード

GitHubアカウントをお持ちでない場合は、まずGitHubの公式サイトでアカウントを作成してください
新しいリポジトリを作成し、ポートフォリオのコードをアップロードします
以下のコマンドを順に実行してください：

# 既存のリモート設定を自分のリポジトリに変更
git remote set-url origin [あなたのGitHubリポジトリURL]

# コードをコミットして自分のリポジトリにプッシュ
git add .
git commit -m "ポートフォリオサイトのカスタマイズ"
git push -u origin main