僕のWebサイトへようこそ！
## 編集方法は2つ 方法1: GitHub上で直接編集 - ブラウザだけでOK - 簡単な修正向き 方法2: ローカルで編集（おすすめ） - GitHub Desktop + VS Code - 本格的な開発向き 今日は方法2をやってみよう！ --- ## Part 2: ローカル開発環境のセットアップ ## 必要なツールをインストール 1. GitHub Desktop [https://github.com/apps/desktop](https://github.com/apps/desktop) 2. Visual Studio Code [https://code.visualstudio.com/download](https://code.visualstudio.com/download) どちらも無料で使えるよ！ ## GitHub Desktop で Clone Code → Open with GitHub Desktop 1. リポジトリページで Code ボタン 2. Open with GitHub Desktop を選択 3. ブラウザがGitHub Desktopを開く ## Clone とは？ GitHubのコードを自分のPCにコピーすること - リモート（GitHub）→ ローカル（PC） - 編集は自分のPC上で行う - 完了したらPushで戻す 保存先のおすすめ： - クラウド同期してない場所 - 例: ~/git.local/ や C:\\git\\ ## Clone を実行 1. Local Path を確認 2. Clone ボタンをクリック 3. ダウンロード完了を待つ これで自分のPCにコードがコピーされました！ ## VS Code で開く GitHub Desktop から起動 1. Current Repository を右クリック 2. Open in Visual Studio Code を選択 または： Repository メニュー → Open in Visual Studio Code ## フォルダを信頼する 初回起動時に聞かれる： 「このフォルダーのファイルの作成者を信頼しますか？」 「はい、作成者を信頼します」をクリックしてOK 自分で作ったリポジトリだから安心してね！ ## VS Code の画面説明 左サイドバーは上から… - エクスプローラー（ファイル一覧） - 検索 - ソース管理（Git） - 拡張機能 覚えておくと便利： - Cmd/Ctrl + + で拡大 - Cmd/Ctrl + @ でターミナルを開く ## ファイルを編集してみよう [README.md](http://readme.md/) を開く 左のエクスプローラーから [README.md](http://readme.md/) をクリック Markdown記法は簡単！覚えておくべきは3つ。 ・ハッシュを冒頭に書くと 見出し1(#)、見出し2(##)。 ・ハイパーリンクは \[表示したい文字列\](URL) という記述方法。 ・画像は !\[ALTテキスト\](画像ファイル) という感じ 変更を保存：Cmd/Ctrl + S で保存 ファイル名の横に「・」丸い点があったら未保存の状態だよ！保存すると消えます。他にも編集中のファイルや編集箇所が見えるから、Terminal単体で作業するよりもVS Codeは便利。 ## GitHub Desktop で変更を確認 Changes タブを見てみよう - 左側：変更されたファイル一覧 - 右側：何が変わったか（差分） - 緑 = 追加 - 赤 = 削除 ## Commit（コミット） 変更を記録する 1. Summary にコミットメッセージを入力 例：「README.mdを更新」 2. Commit to main をクリック メッセージは何を変更したか分かるように書こうね！ ## Push（プッシュ）する GitHubに送信する Push origin ボタンをクリック！ これでローカルの変更がGitHubサーバーにアップロードされる 世界中からアクセスできるようになった！ ## GitHub Actions が再度実行 Pushすると自動でビルドが始まる！ Actions タブで確認： - 黄色 = ビルド中 - 緑 = 完了 - 赤 = エラー ## Codespace を使う方法 ブラウザだけで開発できる！ 1. 緑の Code ボタン → Codespaces 2. Create codespace on main 3. VS Code がブラウザで起動！ インストール不要で便利！ ## Codespace での編集 VS Code と同じ操作感： 1. ファイルを編集 2. 左の ソース管理 アイコン 3. コミットメッセージを入力 4. コミット → 変更の同期 --- ## Part 3: 実践 ## Claude Code（クロード・コード） 役割: ターミナルの中で動く、あなたの専属エンジニア こちらのリンク（[https://j.aicu.ai/\_Claude](https://j.aicu.ai/_Claude)）から入手できます。 インストール後の起動方法: ターミナル（Mac）またはコマンドプロンプト/PowerShell（Windows）を開いて claude と入力するだけ。 ## まず最小限のHTMLを作る Claude Codeを起動する前に、まず動く状態を作りましょう。VS Code で index.html を新規作成し、以下を貼り付けて保存（Cmd/Ctrl + S）：僕のWebサイトへようこそ！
## GitHubにPushして公開確認 1. GitHub Desktop を開くと、Changes タブに index.html が表示される 2. 左下の Summary に「index.htmlを追加」と入力 3. Commit to main をクリック 4. Push origin をクリック 数分待って [https://あなたのユーザー名.github.io](https://xn--l8jyc6ar47arjjfb7091f.github.io/) にアクセス。「Hello, World!」が表示されれば成功です！ メモ: 変更がGitHubに反映されてから公開されるまで、最大10分かかることがあります。 ## Claude Code で本格的なサイトに進化させる 動作確認ができたら、Claude Code を起動します。 ターミナルで claude と打ちEnter(改行)キー！ [](https://assets.st-note.com/img/1770679727-8s5RlNMbnVHvrpegqWZ3YwSm.png?width=2000&height=2000&fit=bounds&quality=85) て以下のプロンプトを貼り付けてください： 私は『バイブコーディングで何でも作る、毎日1アプリ作る学生』です。 このキャッチコピーを体現する、インパクト抜群のポートフォリオサイトを作ってください。 【構成案】 - ヒーローエリア: 背景でコードが流れるようなエフェクトと『Daily 1 App Challenge』という大きな文字 - 本日のアプリ: 毎日更新される『今日作ったアプリ』を一番目立つ場所に配置 - アプリ・アーカイブ: これまで作ったアプリがカード型で無限に並ぶグリッド - バイブス・ステータス: 『現在の連続作成日数：15日』のようなカウンター 【技術的要望】 - HTML/CSS/JavaScriptを1つのファイル（index.html）にまとめて - Tailwind CSSを使って、サイバーパンクかつ清潔感のあるデザインに - スマホでも完璧に見えるように（レスポンシブ対応） まずはベースとなるコードを作成し、完了したらGitHubに保存するための手順を教えて。 これだけで、Claude Codeがプロ級のポートフォリオサイトを生成してくれます。 [](https://assets.st-note.com/img/1770679790-Lbay1jXFcwWoDxE5rRd9NABn.png?width=2000&height=2000&fit=bounds&quality=85) 出来上がったHTMLファイルを左上のExlplorerで探して、右クリック。「Finder(Explorer)で開く」して、Chromeなどのブラウザでひらけばこんな感じ。 [](https://assets.st-note.com/img/1770683607-tdhG7BDk1RJICyNZLzFSEcQg.png?width=2000&height=2000&fit=bounds&quality=85) [](https://assets.st-note.com/img/1770683607-ofhqSXnlDHAP5FBMNKakEQ2m.png?width=2000&height=2000&fit=bounds&quality=85) 毎回出来上がるものは異なります！しかもこんなアプリたくさん作ってないよ！！という状態ですが、こんなかっこいいサイト、ゼロから作ったら本当に大変だよ。 サンプルコード [https://github.com/kaitas/DHGSVR/blob/main/daily-app-challenge.html](https://github.com/kaitas/DHGSVR/blob/main/daily-app-challenge.html) --- ## Part 4: サイトを育てる ## サイトを育てる「バイブス対話法」 コードができあがったら、Claude Codeにどんどん「ワガママ」を言いましょう。 - 「もっと派手にして！」→ 動きのあるアニメーションが追加される - 「就活向けに誠実な自己紹介も入れて」→ 信頼感のあるセクションが追加される - 「ダークモード対応にして」→ 切り替えボタンが実装される - 「今のコードをGitHubにPushして」→ 公開作業まで代行してくれる ## 変更を重ねる「イテレーション」 完璧を目指さないでください。「まず動かす → 確認する → 改善する → 繰り返す」がバイブコーディングの基本です。 1回目: 最小限のHTMLで公開 →「ここから始めよう」 2回目: Claude Code で見た目を改善 →「おお、かっこいい！」 3回目: スマホ表示を確認・修正 →「レスポンシブOK！」 4回目: 自己紹介を追加 →「就活に使える！」 こまめにCommit しておけば、いつでも前の状態に戻れます。 ### GitHub用語 **commit**「コミット」つまり貢献という意味。コードがある程度区切りが良くなってきたら、GitHubにその貢献をまとめておこう。作業単位ごとに細かくコミットしておくとあとで振り返れるよ。 **push**「プッシュ」これはコミットしたファイルを「納品して」という意味。 **.gitignore**「ドットギットイグノア」これはGitHubで管理すべきではないファイルを「無視する」指定をする。APIキーや個人情報はうかつにGitHubに置かないこと。世界中に公開されてしまうし、削除しても履歴が残ってしまうからね。 ## APIキーの取り扱い注意 絶対に守ってほしいこと ### 何が「秘密」なの？ 絶対に公開しちゃダメなもの： - APIキー（sk-xxxx, sk-ant-xxxx） - パスワード - アクセストークン 公開してOKなもの： - ソースコード（.envファイル以外） - 設定ファイルのテンプレート ### APIキーを漏らすとどうなる？ 他人があなたのAPIキーを使う ↓ あなたのアカウントに請求が来る！ - OpenAI: 1回の呼び出しで数円〜数十円 - 大量に使われると数万円の請求も... うかつに公開したら数分で悪用されることもあるよ！ ### どこに置けば安全？ 安全な場所： - GitHub ActionsのSecret → 暗号化されて保存 - Vercel 環境変数 → 暗号化されて保存 - ローカルの .env → .gitignore で除外 危険な場所： - ソースコード内 → GitHubで公開される - コミットメッセージ → 履歴に残る - スクリーンショット → SNSで拡散される(AIは画像を読めます) ## .gitignore の役割 .env ファイルを Git から除外 .gitignore ファイルの中身： .env .env.local .env.\*.local これがあるから .env はGitHubにプッシュされない Claude Code、Gemini、Codexには「AGENTS.md」には除外したいファイルをしっかり書いておく。なおドットで始まるファイル名は「見えないファイル」だけど VS Code や GitHub では見れるはずだよ --- ## まとめ：今日学んだこと - GitHub の基本：アカウント作成、Clone, Commit, Push - ローカル開発環境：GitHub Desktop、VS Code - Claude Code：AIへの指示でサイトを作る。CLIは怖くない。 - イテレーション：まず動かす、少しずつ改善 ## 制作のヒント 1. まずデプロイ - 動く状態を作る 2. 少しずつ変更 - 一度に変えすぎない 3. こまめにコミット - 戻れるように 4. 困ったら質問 - GitHub Issues へ 完璧を目指さず、まず動くものを作ろう！ --- ## 毎日のルーティン 「毎日1アプリ」を続けるためのワークフロー: 1. 朝: 今日作るアプリのアイデアを1つ決める 2. 日中: Claude Codeに実装を依頼。ひたすらイテレーションを回す。かならずClaude CodeのRate Limitまでに完成させる。 3. 夜: ポートフォリオに追加してPush 小さなアプリでOK。電卓、ToDoリスト、おみくじ、タイマー...何でもOK。よくないのは「どんどん拡大しちゃうこと」なんだ。必ず小さい単位で、どんどんリリースすることを考えよう。 --- ## もっと学びたい方へ 「記事を読んだけど、やっぱり一人でやるのは不安…」 「Claude Codeの設定でつまづいてしまった」 「もっと高度なバイブコーディングのコツを知りたい！」 そんなあなたのために、手取り足取り教えるオンライン講座を開催します。 ### AICU Lab+ 勉強会：Webポートフォリオ制作実践 - 日時: 2026年2月14日（土） - 形式: オンライン - 内容: - Claude Codeのインストールからデプロイまで完全並走 - 白井博士直伝！「就活で勝てる」バイブコーディングの極意 - その場で自分のポートフォリオを完成させて公開 詳細・申込: AICU公式note（[https://note.com/aicu）または](https://note.com/aicu%EF%BC%89%E3%81%BE%E3%81%9F%E3%81%AF) AICU Lab+ コミュニティをチェック！ --- バレンタインデーに、チョコよりも甘くない（けど一生モノの）「開発スキル」を自分にプレゼントしませんか？ 「毎日1アプリ作る学生」への第一歩を、一緒に踏み出しましょう！ --- ## リソース AITuber Kit [https://github.com/tegnike/aituber-kit](https://github.com/tegnike/aituber-kit) デジタルハリウッド大学院講義「DHGSVR」 [https://akihiko.shirai.as/DHGSVR/](https://akihiko.shirai.as/DHGSVR/) 他の受講生が作った作品も見れるかも？ LuC4 公式サイト [https://luc4.aicu.jp/](https://luc4.aicu.jp/) --- 関連記事: - 学生向け GitHubを使ってAIでWebポートフォリオを作る初手（[https://note.com/o\_ob/n/nf3a0a8eb06da）](https://note.com/o_ob/n/nf3a0a8eb06da%EF%BC%89) - Claude Codeの始め方（[https://j.aicu.ai/\_Claude）](https://j.aicu.ai/_Claude%EF%BC%89) ## 準備：三種の神器をセットアップ ### ① GitHub（ギットハブ） 役割: あなたの作品を世界に公開する「ステージ」 Gitはバージョン管理システム、GitHubはそれをWebで使えるサービスです。ソースコードの保管・共有、変更履歴の管理、そしてWebサイトの無料公開（GitHub Pages）ができます。 ### アカウント作成 1. GitHub公式サイト（[https://github.com](https://github.com/)）にアクセス 2. Sign up をクリック 3. メールアドレスを入力 4. パスワードを設定 5. ユーザー名を決める ← 重要！後から変更できません ### ユーザー名の決め方 良い例: - taro-yamada（名前ベース） - creative-dev（スキルベース） - kaitas（短くて覚えやすい） 避けた方がいい: - 数字だけ 12345 - 長すぎる名前 - 読めない記号の羅列 > これがプログラマーとしてのアイデンティティになります！ ### リポジトリを作成 1. GitHubにログイン 2. 右上の「+」→「New repository」 3. Repository name に「[あなたのユーザー名.github.io](http://xn--l8jyc6ar47arjjfb7091f.github.io/)」と入力 4. Public を選択（GitHub Freeプランの場合、パブリックである必要があります） 5. Add a README file にチェック 6. Create repository をクリック > この名前にすると、そのままURLになります！ ### GitHub Pages を有効化 1. 作成したリポジトリの Settings タブを開く 2. 左メニューの Pages をクリック 3. Build and deployment セクションで Source を「GitHub Actions」に変更 4. Static HTML の Configure をクリック 5. 右上の Commit changes... をクリック（内容はそのままでOK） これで .github/workflows/static.yml が自動生成され、GitHub Actions が動き出します。 Actions タブで黄色いマークがぐるぐる回っていたらビルド中。緑のチェックマークが出たら完了です！ > あれ、404エラー？大丈夫、まだ index.html がないからです。これから作ります！ ### ② VS Code（ブイエスコード） 役割: コードを表示・編集する「高機能なノート」 公式サイト（[https://code.visualstudio.com/download）からダウンロードしてインストール。](https://code.visualstudio.com/download%EF%BC%89%E3%81%8B%E3%82%89%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%A6%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%80%82) 手取り足取りのチュートリアル動画はこちら！ [https://www.youtube.com/watch?v=NiWHolT5HVI&t=3s](https://www.youtube.com/watch?v=NiWHolT5HVI&t=3s) ### GitHub Desktop もインストール GitHub Desktop（[https://github.com/apps/desktop）をインストールすると、コマンドを打たずにGitHubと連携できます。](https://github.com/apps/desktop%EF%BC%89%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E6%89%93%E3%81%9F%E3%81%9A%E3%81%ABGitHub%E3%81%A8%E9%80%A3%E6%90%BA%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82) Clone（クローン）とは、GitHubのコードを自分のPCにコピーすることです。 1. GitHubのリポジトリページで Code ボタンをクリック 2. Open with GitHub Desktop を選択 3. Local Path を確認して Clone をクリック > 保存先のおすすめ: クラウド同期していない場所（例: ~/git.local/ や C:\\git\\） ### VS Code で開く GitHub Desktop で Repository → Open in Visual Studio Code を選択。 初回起動時に「このフォルダーのファイルの作成者を信頼しますか？」と聞かれたら、「はい、作成者を信頼します」をクリックしてOK。自分で作ったリポジトリだから安心です！ ### ③ Claude Code（クロード・コード） 役割: ターミナルの中で動く、あなたの専属エンジニア こちらのリンク（[https://j.aicu.ai/\_Claude）から入手できます。](https://j.aicu.ai/_Claude%EF%BC%89%E3%81%8B%E3%82%89%E5%85%A5%E6%89%8B%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82) インストール後の起動方法: ターミナル（Mac）またはコマンドプロンプト/PowerShell（Windows）を開いて claude と入力するだけ。 ## 実践：AIへの「最初の一撃」 ### まず最小限のHTMLを作る Claude Codeを起動する前に、まず動く状態を作りましょう。VS Code で index.html を新規作成し、以下を貼り付けて保存（Cmd/Ctrl + S）：僕のWebサイトへようこそ！
### GitHubにPushして公開確認 1. GitHub Desktop を開くと、Changes タブに index.html が表示される 2. 左下の Summary に「index.htmlを追加」と入力 3. Commit to main をクリック 4. Push origin をクリック 数分待って [https://あなたのユーザー名.github.io](https://xn--l8jyc6ar47arjjfb7091f.github.io/) にアクセス。「Hello, World!」が表示されれば成功です！ > メモ: 変更がGitHubに反映されてから公開されるまで、最大10分かかることがあります。 ### Claude Code で本格的なサイトに進化させる 動作確認ができたら、Claude Code を起動して以下のプロンプトを貼り付けてください： 私は『バイブコーディングで何でも作る、毎日1アプリ作る学生』です。 このキャッチコピーを体現する、インパクト抜群のポートフォリオサイトを作ってください。 【構成案】 - ヒーローエリア: 背景でコードが流れるようなエフェクトと『Daily 1 App Challenge』という大きな文字 - 本日のアプリ: 毎日更新される『今日作ったアプリ』を一番目立つ場所に配置 - アプリ・アーカイブ: これまで作ったアプリがカード型で無限に並ぶグリッド - バイブス・ステータス: 『現在の連続作成日数：15日』のようなカウンター 【技術的要望】 - HTML/CSS/JavaScriptを1つのファイル（index.html）にまとめて - Tailwind CSSを使って、サイバーパンクかつ清潔感のあるデザインに - スマホでも完璧に見えるように（レスポンシブ対応） まずはベースとなるコードを作成し、完了したらGitHubに保存するための手順を教えて。 これだけで、AIがプロ級のポートフォリオサイトを生成してくれます。 ## サイトを育てる「バイブス対話法」 コードができあがったら、Claude Codeにどんどん「ワガママ」を言いましょう。 - 「もっと派手にして！」→ 動きのあるアニメーションが追加される - 「就活向けに誠実な自己紹介も入れて」→ 信頼感のあるセクションが追加される - 「ダークモード対応にして」→ 切り替えボタンが実装される - 「今のコードをGitHubにPushして」→ 公開作業まで代行してくれる ## 変更を重ねる「イテレーション」 完璧を目指さないでください。「まず動かす → 確認する → 改善する → 繰り返す」がバイブコーディングの基本です。 1回目: 最小限のHTMLで公開 →「ここから始めよう」 2回目: Claude Code で見た目を改善 →「おお、かっこいい！」 3回目: スマホ表示を確認・修正 →「レスポンシブOK！」 4回目: 自己紹介を追加 →「就活に使える！」 こまめにCommit しておけば、いつでも前の状態に戻れます。 ## APIキーの取り扱い注意 Claude Code や他のAIサービスを使う際、APIキー（sk-xxxx のような文字列）が必要になることがあります。skはsecret keyの略だよ。 ### 絶対に公開してはいけないもの - APIキー（sk-xxxx, sk-ant-xxxx） - パスワード - アクセストークン ### なぜ危険？ 他人があなたのAPIキーを使うと、あなたのアカウントに請求が来ます。GitHubに公開したら数分で悪用されることも。 ### 安全な管理方法 安全な場所: - ローカルの .env ファイル（.gitignore で除外されている） - Vercel などの環境変数設定画面 危険な場所: - ソースコード内に直接記述 - コミットメッセージに記載 - スクリーンショットでSNSに投稿 > .gitignore ファイルに .env と書いてあれば、そのファイルはGitHubにアップロードされません。Claude Code のプロジェクトには最初から設定されています。 ## 毎日のルーティン 「毎日1アプリ」を続けるためのワークフロー: 1. 朝: 今日作るアプリのアイデアを1つ決める 2. 日中: Claude Codeに実装を依頼 3. 夜: ポートフォリオに追加してPush 小さなアプリでOK。電卓、ToDoリスト、おみくじ、タイマー...何でもカウントです。 ## もっと学びたい方へ 「記事を読んだけど、やっぱり一人でやるのは不安…」 「Claude Codeの設定でつまづいてしまった」 「もっと高度なバイブコーディングのコツを知りたい！」 そんなあなたのために、手取り足取り教えるオンライン講座を開催します。 ### AICU Lab+ 勉強会：「Claude Code入門」 > 2026年2月14日のバレンタインデー、AIとコードへの愛が溢れる特別な夜がやってきます！AICULab+が贈る勉強会「Claude Code入門」が開催決定です🔥 [#ClaudeCode](https://twitter.com/hashtag/ClaudeCode?src=hash&ref_src=twsrc%5Etfw) [#VibeCoding](https://twitter.com/hashtag/VibeCoding?src=hash&ref_src=twsrc%5Etfw) [#AICULab](https://twitter.com/hashtag/AICULab?src=hash&ref_src=twsrc%5Etfw) [pic.twitter.com/QjgCUHHh1m](https://t.co/QjgCUHHh1m) > > — AICU - つくる人をつくる (@AICUai) [February 4, 2026](https://twitter.com/AICUai/status/2019185733953520106?ref_src=twsrc%5Etfw) - 日時: 2026年2月14日（土）20:00- - 形式: オンライン - 内容(予定): - Claude Codeを使った「ゴール力」デプロイまで完全並走 - 白井博士直伝！「就活で勝てる」バイブコーディングの極意 - その場で自分のポートフォリオを完成させて公開 - Remotionを使った動画編集 詳細・申込: AICU.jp [AICU Lab+](http://j.aicu.ai/ComfyJapan) コミュニティをチェック！ --- バレンタインデーに、チョコよりも甘くない（けど一生モノの）「開発スキル」を自分にプレゼントしませんか？ 「毎日1アプリ作る学生」への第一歩を、一緒に踏み出しましょう！ --- 関連記事: 学生向け GitHubを使ってAIでWebポートフォリオを作る初手 [https://note.com/o\_ob/n/n1ff6956cc84f](https://note.com/o_ob/n/n1ff6956cc84f)