🚀 はじめてのWebサイト制作

AIと一緒に作る、あなただけのポートフォリオサイト

はじめに

こんにちは！このチュートリアルでは、プログラミングが初めての方でも、AIの力を借りながら自分だけのWebサイトを作って公開する方法を、とってもやさしく説明していきます。

💡 このチュートリアルのゴール：
あなたのポートフォリオサイトを作成して、インターネット上に公開することです。約1〜2時間で完成します！

難しそうに感じるかもしれませんが、一つずつ丁寧に進めていけば必ずできます。一緒に頑張りましょう！

1. ChatGPTアカウント作成

まずは、プログラミングをお手伝いしてくれるAIアシスタント「ChatGPT」のアカウントを作りましょう。

手順

1 ChatGPTのサイトにアクセス
ブラウザで「chat.openai.com」と入力するか、検索エンジンで「ChatGPT」と検索してください。
2 「Sign up」をクリック
画面右上にある「Sign up」ボタンをクリックします。日本語で「登録」と表示されている場合もあります。
3 メールアドレスを入力
お持ちのメールアドレスを入力して「Continue」をクリックします。GmailやYahooメールなど、普段使っているもので大丈夫です。
4 パスワードを設定
8文字以上のパスワードを設定します。忘れないようにメモしておきましょう！
5 メール認証
登録したメールアドレスに確認メールが届きます。メール内のリンクをクリックして認証を完了させてください。
💡 ポイント：
ChatGPTは無料プランで十分です。今回のチュートリアルは無料プランで完結できます。

2. GitHubアカウント作成

次に、作ったWebサイトを保存・公開するための「GitHub」のアカウントを作成します。GitHubは世界中のプログラマーが使っているサービスです。

手順

1 GitHubのサイトにアクセス
「github.com」にアクセスするか、「GitHub」で検索してください。
2 「Sign up」をクリック
右上の「Sign up」ボタンをクリックします。
3 必要情報を入力
• メールアドレス
• パスワード（15文字以上または8文字以上で数字と小文字を含む）
• ユーザー名（これがあなたのGitHub IDになります。半角英数字で設定）
4 メール認証
メールに届いた6桁の数字を入力画面に入力します。
⚠️ 注意：
ユーザー名は後から変更できますが、URLの一部になるので、シンプルで覚えやすいものがおすすめです。

3. VSCodeインストール

Visual Studio Code（VSCode）は、プログラムを書くための無料のエディタです。とても使いやすく、世界中で人気があります。

手順

1 公式サイトにアクセス
「code.visualstudio.com」にアクセスするか、「VSCode」で検索してください。
2 ダウンロード
大きな青いボタン「Download for Windows」（Macの場合は「Download for Mac」）をクリックします。
3 インストール
ダウンロードしたファイルをダブルクリックして開きます。
• 「同意する」にチェック
• 「次へ」を数回クリック
• 「インストール」をクリック
• 完了したら「完了」をクリック
4 VSCodeを起動
デスクトップやスタートメニューからVSCodeを起動して、正常に開くか確認してください。
💡 ポイント：
VSCodeが英語表示の場合は、左側のメニューから「Extensions」を選び、「Japanese」で検索して日本語化できます。

4. LiveServerインストール

LiveServerは、作ったWebサイトをすぐに確認できる便利な拡張機能です。

手順

1 VSCodeで拡張機能を開く
VSCodeの左側にある四角が4つ並んだアイコン（Extensions）をクリックします。
2 Live Serverを検索
検索ボックスに「Live Server」と入力します。
3 インストール
「Live Server」by Ritwick Deyが一番上に表示されるので、「Install」ボタンをクリックします。
4 インストール完了を確認
「Install」ボタンが「Uninstall」に変わったら完了です。

5. Gitインストール

Gitは、ファイルの変更履歴を管理するツールです。GitHubと連携するために必要です。

Windowsの場合

1 Git公式サイトにアクセス
「git-scm.com」にアクセスするか、「Git download」で検索します。
2 ダウンロード
「Download for Windows」をクリックします。
3 インストール
ダウンロードしたファイルを実行し、基本的にはすべて「Next」をクリックして進めます。設定はデフォルトのままで大丈夫です。

Macの場合

1 ターミナルを開く
Spotlight検索（command + space）で「ターミナル」と入力して開きます。
2 Gitの確認
以下のコマンドを入力してEnterキーを押します：
git --version
バージョンが表示されれば、すでにインストールされています。
3 インストールが必要な場合
コマンドラインツールのインストールを促すダイアログが表示されたら、「インストール」をクリックします。

6. GitHub連携

VSCodeとGitHubを連携させて、簡単にファイルをアップロードできるようにします。

手順

1 VSCodeでターミナルを開く
VSCodeのメニューから「ターミナル」→「新しいターミナル」をクリックします。
2 Gitの初期設定
ターミナルに以下のコマンドを1つずつ入力してEnterキーを押します（your-nameとyour-emailは自分のものに置き換えてください）：
git config --global user.name "your-name"
git config --global user.email "your-email@example.com"
3 VSCodeでGitHubにサインイン
• VSCodeの左下にある人型アイコンをクリック
• 「Sign in to Sync Settings」を選択
• 「Sign in with GitHub」を選択
• ブラウザが開いたら「Authorize」をクリック
💡 ポイント：
名前は本名でなくてもニックネームで大丈夫です。メールアドレスはGitHubに登録したものと同じにしてください。

7. ディレクトリとファイルの作成

いよいよプロジェクトのフォルダとファイルを作成します！

手順

1 デスクトップにフォルダを作成
• デスクトップで右クリック
• 「新規作成」→「フォルダー」を選択
• フォルダ名を「my-portfolio」にする（半角英数字で入力）
2 VSCodeでフォルダを開く
• VSCodeを起動
• 「ファイル」→「フォルダーを開く」をクリック
• デスクトップの「my-portfolio」フォルダを選択して「フォルダーの選択」をクリック
3 index.htmlファイルを作成
• VSCodeの左側のエクスプローラーで「my-portfolio」の横にある「新しいファイル」アイコンをクリック
• ファイル名を「index.html」と入力してEnter
4 画像ファイルを追加（任意）
プロフィール写真を使いたい場合：
• 使いたい画像を「profile.png」または「profile.jpg」という名前に変更
• その画像をmy-portfolioフォルダにドラッグ＆ドロップ
⚠️ 注意：
フォルダ名とファイル名は必ず半角英数字で入力してください。日本語や全角文字は使えません。

8. GitHubリポジトリの初期化

作成したプロジェクトをGitHubで管理できるようにします。

手順

1 ソース管理を開く
VSCodeの左側にある枝分かれしたアイコン（Source Control）をクリックします。
2 リポジトリの初期化
「Initialize Repository」（リポジトリの初期化）ボタンをクリックします。
3 最初のコミット
• メッセージ欄に「first commit」と入力
• ✓（チェックマーク）をクリック
• 「はい」や「Always」を選択
4 GitHubに公開
• 「Publish Branch」ボタンをクリック
• 「Publish to GitHub public repository」を選択
• リポジトリ名はそのままでOK
💡 ポイント：
「public」は誰でも見られる設定、「private」は自分だけが見られる設定です。今回は公開するので「public」を選びます。

9. 開発用サーバーの起動

作成中のWebサイトをリアルタイムで確認できるようにします。

手順

1 index.htmlを開く
VSCodeで作成した「index.html」ファイルをクリックして開きます。
2 簡単なHTMLを入力
まず動作確認のため、以下のコードをコピーして貼り付けてください：
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テスト</title> </head> <body> <h1>Hello World!</h1> </body> </html>
3 Live Serverを起動
• index.htmlを開いた状態で右クリック
• 「Open with Live Server」をクリック
• ブラウザが自動で開いて「Hello World!」が表示されれば成功です！
💡 ポイント：
Live Serverを起動しておくと、ファイルを保存するたびに自動でブラウザが更新されます。とても便利！

10. AIと一緒にコーディング

さあ、いよいよChatGPTの力を借りて、本格的なポートフォリオサイトを作りましょう！

ChatGPTへのプロンプト例

以下のような指示をChatGPTにコピー＆ペーストして送信してみてください：

以下の要件で、単一のHTMLファイルでポートフォリオサイトを作成してください。 【基本要件】 - レスポンシブデザイン（スマホでも見やすい） - モダンでプロフェッショナルなデザイン - 日本語のサンプルテキストを使用 【構成】 1. ヘッダー - サイトタイトル「〇〇のポートフォリオ」 - ナビゲーションメニュー（各セクションへのリンク） 2. メインビジュアル - 大きな背景画像エリア - キャッチコピー - 簡単な自己紹介文 3. プロフィールセクション - 顔写真の配置場所（profile.pngを使用） - 名前 - 職業・肩書き - 簡単な自己紹介文 4. 経歴セクション - 学歴 - 職歴 - タイムライン形式で表示 5. スキルセクション - プログラミング言語 - ツール・ソフトウェア - スキルレベルをプログレスバーで表示 6. 作品・活動セクション - 3つの作品をカード形式で表示 - 画像、タイトル、説明文 7. 連絡先セクション - メールアドレス - SNSリンク（Twitter、GitHub、LinkedIn） - お問い合わせフォーム（見た目だけ） 8. フッター - コピーライト表記 【デザイン要件】 - カラーテーマ：青系グラデーション - フォント：日本語はメイリオ、英語はArial - アニメーション：スクロール時のフェードイン効果 - すべてのスタイルをstyleタグ内に記述 - JavaScriptも含めて単一ファイルで完結 コードを生成してください。

プロンプトのコツ

💡 効果的なプロンプトの書き方：
1. 具体的に指示する：「きれいなデザイン」より「青系のグラデーション背景」
2. 構成を明確にする：必要なセクションを箇条書きで指定
3. 技術的な制約を伝える：「単一HTMLファイル」「レスポンシブ対応」など
4. 参考例を示す：「Appleのようなミニマルなデザイン」など

生成されたコードの使い方

1 コード全体をコピー
ChatGPTが生成したHTMLコード全体を選択してコピーします。
2 index.htmlに貼り付け
VSCodeのindex.htmlの内容をすべて選択（Ctrl+A）して、コピーしたコードを貼り付けます（Ctrl+V）。
3 保存して確認
Ctrl+S（MacはCmd+S）で保存すると、ブラウザが自動更新されて変更が反映されます。

カスタマイズのヒント

生成されたコードを自分好みに調整したい場合は、ChatGPTに追加の指示を出しましょう：

先ほど生成したコードを以下のように修正してください： - 背景色を緑系のグラデーションに変更 - フォントサイズを全体的に大きく - プロフィール写真を円形で表示 - ヘッダーを固定表示（スクロールしても上部に固定）
⚠️ 注意：
コードに赤い波線が表示されても、ブラウザで正常に表示されていれば問題ありません。

11. GitHubへプッシュ（アップロード）

完成したWebサイトをGitHubにアップロードしましょう。

手順

1 変更を保存
すべてのファイルが保存されていることを確認します（Ctrl+S）。
2 ソース管理を開く
VSCodeの左側の枝分かれアイコン（Source Control）をクリックします。
3 変更内容を確認
「Changes」の下に変更されたファイルが表示されています。
4 コミットメッセージを入力
メッセージ欄に「ポートフォリオサイト完成」など、わかりやすいメッセージを入力します。
5 コミット＆プッシュ
• ✓（チェックマーク）をクリックしてコミット
• 「Sync Changes」ボタンをクリックしてプッシュ
• 確認ダイアログが出たら「OK」をクリック
💡 ポイント：
コミットは「セーブ」、プッシュは「アップロード」のようなものです。こまめにコミットしておくと、いつでも前の状態に戻せます。

12. GitHub Pagesで公開

ついに、あなたのWebサイトをインターネット上に公開します！

手順

1 GitHubにアクセス
ブラウザで「github.com」を開いて、自分のアカウントでログインします。
2 リポジトリを開く
右上の自分のアイコンをクリック→「Your repositories」→「my-portfolio」をクリックします。
3 Settingsを開く
リポジトリページの上部にある「Settings」タブをクリックします。
4 Pagesの設定
• 左側のメニューから「Pages」をクリック
• 「Source」のところで「Deploy from a branch」を選択
• 「Branch」で「main」を選択
• 「/ (root)」を選択
• 「Save」ボタンをクリック
5 公開を待つ
ページ上部に「Your site is live at https://[あなたのユーザー名].github.io/my-portfolio/」というメッセージが表示されるまで、1〜2分待ちます。
⚠️ 注意：
初回の公開には最大10分程度かかることがあります。焦らず待ちましょう！

13. 表示確認

公開されたWebサイトを確認しましょう！

手順

1 URLにアクセス
GitHub Pagesの設定画面に表示されたURL（https://[あなたのユーザー名].github.io/my-portfolio/）をクリックします。
2 表示を確認
あなたのポートフォリオサイトが表示されれば成功です！
3 スマホでも確認
スマートフォンでも同じURLにアクセスして、レスポンシブデザインが機能しているか確認しましょう。

うまく表示されない場合

トラブルシューティング：
• 404エラーが出る：もう少し待ってから再度アクセス（最大10分）
• 古い内容が表示される：ブラウザのキャッシュをクリア（Ctrl+F5）
• 画像が表示されない：ファイル名の大文字小文字を確認
• レイアウトが崩れる：HTMLコードに間違いがないか確認

🎉 おめでとうございます！

あなたの最初のWebサイトが完成し、世界中からアクセスできるようになりました！

🚀 次のステップ：
1. 内容をカスタマイズ：自分の情報に書き換えて、本物のポートフォリオに
2. デザインを改良：ChatGPTに追加の指示を出して、さらに魅力的に
3. 新しいページを追加：ブログページや詳細な作品ページなど
4. 独自ドメインの設定：自分だけのURLを取得することも可能
5. JavaScriptで動きを追加：アニメーションや対話的な機能を実装

更新方法

サイトを更新したくなったら：

  1. VSCodeでindex.htmlを編集
  2. 保存（Ctrl+S）
  3. Source Controlでコミット＆プッシュ
  4. 数分待つと自動的に公開サイトも更新されます
💡 最後のアドバイス：
プログラミングは「習うより慣れろ」です。最初は難しく感じても、繰り返し練習することで必ず上達します。ChatGPTという強力な味方もいるので、どんどん挑戦してみてください！

素晴らしいWebサイト制作の第一歩を踏み出せましたね！
これからも楽しみながら学習を続けていってください。