はじめに

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

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

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

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

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

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

Astroとは？

Astro公式ドキュメント

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

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

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

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

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

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

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

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

node -v

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

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

テンプレート選定

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

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

「Resources」→「Themes」を選択

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

「Discover more themesボタン」を押す

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

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

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

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

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

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

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

「Live demoボタン」を押すと、テーマのデモを見ることができる

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

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

使用されている技術や必要環境など確認する

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

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

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

「Code」ボタンをクリックし、リポジトリのURLをコピー

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

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

cd Desktop

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

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

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

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

デスクトップにプロジェクトが作成される

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

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

npm install

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

npm run dev

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

ターミナルに表示された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の具体的な使用方法を解説していますので、あわせて参考にしてみてください。

カスタマイズの具体例

基本情報の変更

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

例えば 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の学習には以下の記事も参考にしてみてください。

デザインのカスタマイズ

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

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

デプロイ方法

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

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

Netlifyでのデプロイ

Netlify公式

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

  • ビルドの実行

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

npm run build

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

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

npm run preview
  1. GitHubにプロジェクトをアップロード
  • GitHubアカウントをお持ちでない場合は、まずGitHubの公式サイトでアカウントを作成してください
  • 新しいリポジトリを作成し、ポートフォリオのコードをアップロードします
  • 以下のコマンドを順に実行してください：
# 既存のリモート設定を自分のリポジトリに変更
git remote set-url origin [あなたのGitHubリポジトリURL]

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

Netlifyの公式サイトにアクセスし、GitHubアカウントでログインしてください。

各種必要項目の入力画面になるので、入力し「Continue to deployボタン」を押してください。

「Continue to deployボタン」を押す

Deploy your first project画面でGitHubを選択してください。

GitHubを選択

GitHubの認証ができたら、先ほど作成したリポジトリを選んでください。

次に下部のボタンを押してください。

下部のボタンを押す

すべての項目が「Complete」になればデプロイ完了です。

画面上部の「Open production deployボタン」からサイトを確認することができます。

「Open production deployボタン」からサイトを確認することができる

おすすめ教材

ちゃんと学ぶ、Astro

「Astroって最近よく聞くけど、どう使えばいいの？」そんな疑問に応えてくれるUdemy講座です。

環境構築からルーティング、API連携まで体系的に学べる内容で、実務でも使えるスキルがしっかり身につきます。

これからAstroを本気で使っていきたい方にぴったりの講座ですので、ぜひ確認してみてください。

講座の詳しい情報はこちら

さいごに

この記事でご紹介したように、Astroはコンテンツ重視のポートフォリオサイト作成に最適なフレームワークです。高速で軽量な特性に加え、SEO対策もバッチリなので、作品やスキルを効果的にアピールできますので、ぜひ参考にしてみてください。

何か分からないことがあれば、コメント欄やお問い合わせフォームからご質問ください。