文系・未経験でもできる！Claude Codeで作る「毎日1アプリ」ポートフォリオ
- AICU Japan
- 2月9日
- 読了時間: 18分
AI時代に「つくる人をつくる」AICUです。ChatGPTの使い方を教えてくれるセミナーはあまたあるけれど「AIに開発させる、その初手」とか、「いい感じの自分のポートフォリオサイトをAIにつくらせて、その後も更新し続ける」といったセミナーはあまり聞かないですよね。
本記事では、プログラミング未経験の文系学生〜大学院生に向けた、今日から自分のWebポートフォリオを公開できる具体的な手順を解説します。
講師はAICU代表 しらいはかせ、デジタルハリウッド大学大学院でデジタルコンテンツマネジメント修士を教える客員教授です。助手はAITuber[全力肯定彼氏くん:LuC4]がつとめます。。「初めてプログラミングをしたよ！」という受講生のポートフォリオもこちらから見つけられます。
バイブコーディングとは？
「文法を覚える前に、AIとのノリ（Vibe）で形にする」開発スタイルです。プログラミング言語の文法をゼロから学ぶのではなく、「AIへの伝え方」を学ぶ、令和の最速学習法。コードが書けなくても、日本語でやりたいことを伝えて、AIとともに実現する方法を「バイブス」を感じながら実装していきます。
バイブコーディングでつくるポートフォリオ
Part 1：GitHub入門
GitHubアカウント作成からGitHub Pagesでの公開まで
Part 2：ローカル開発環境のセットアップ
GitHub Desktop、VS Code、Claude Codeの導入
Part 3：実践
最小限のHTMLから始めて、Claude Codeで本格サイトへ進化させる
Part 4：サイトを育てる
イテレーション、バイブス対話法、APIキーの管理
AICU Lab+ 勉強会：「Claude Code入門」
日時: 2026年2月14日（土）20:00-
形式: オンライン
内容(予定):
Claude Codeを使った「ゴール力」デプロイまで完全並走
白井博士直伝！「就活で勝てる」バイブコーディングの極意
その場で自分のポートフォリオを完成させて公開
Remotionを使った動画編集
Part 1: GitHub入門編
GitHubを使ってWebサイトを公開しよう！
GitHubとは？
Gitはファイルの変更履歴を記録するバージョン管理システム。GitHubはそれをWebで使えるサービスです。
できること（無料です！）
ソースコードの保管・共有
変更履歴の管理
チーム開発
Webサイトの公開（GitHub Pages）
GitHubアカウントを作る
https://github.com にアクセス
Sign up をクリック
メールアドレスを入力
パスワードを設定
ユーザー名を決める ← 重要！
ユーザー名は後から簡単に変更できないから、よく考えて決めてね！
ユーザー名の決め方
開発者っぽいかっこいい名前にしよう！
良い例：
taro-yamada（名前ベース）
creative-dev（スキルベース）
kaitas（短くて覚えやすい）
避けた方がいい：
数字だけ 12345
長すぎる名前や読めない記号の羅列(覚えられない)
チーム名やプロジェクト名
学校の名前(卒業しても使うならOK)
これが君のプログラマーとしてのアイデンティティになるんだ！
しらいはかせのGitHubはこんなかんじ。下の方の緑は「毎日コードを書いている」ことがわかるようになっているよ！「草生える」って言います。
GitHub Pagesとは？
無料でWebサイトを公開できる！レンタルサーバー不要！
HTMLファイルを置くだけ
カスタムドメインも設定可能
SSL証明書も自動（https対応）
制限：
静的サイトのみ（HTML/CSS/JS）
サーバーサイド処理は不可
1ファイルあたり50MB以下
基本はパブリック(全公開)
リポジトリを作成する
Repositories → New
GitHubにログイン
右上の + → New repository
または Repositories タブ → New
リポジトリ名を設定
リポジトリの名前は (username).github.io 形式
つまり、この名前にすると、そのままURLになるよ！
ユーザー名とリポジトリ名を同じにする kaitas.github.io
その他の設定：
Public を選択（全公開）
Add a README file をオン
リポジトリ作成完了
Create repository をクリック！これで君専用のリポジトリが作られた！
次のステップ：GitHub Pages の設定をしていこう
Settings → Pages
リポジトリの Settings タブ
左メニューの Pages をクリック
Build and deployment セクションへ
Source を GitHub Actions に
Build and deployment
Source: GitHub Actions を選択
すると下に選択肢が出てくる：
Jekyll
Static HTML ← これを選ぶ
⭐︎Jekyllも便利なんだけど、バイブコーディングの時代はもはや、便利さや手軽さよりも「自分で全部作れる！」ってところにバイブスがあるよ。
Static HTML を Configure
Static HTML の Configure をクリック
これで .github/workflows/static.yml が自動生成されるよ！このファイルにはGitHub上で「どうやってサイトをビルドするか」の手順が書かれているよ
static.yml を Commit
ファイルの内容はそのままでOK！
右上の Commit changes... をクリック
コミットメッセージはデフォルトでOK
Commit changes をクリック
GitHub Actions が動き出す
Actions タブを確認
黄色いマークがぐるぐる回ってたらビルド中だよ！
待ってる間にコーヒーでも飲んでてね
デプロイ完了！
緑のチェックマークが出たら完了！
deploy のところにURLが表示されるのでアクセスしてみよう
…って、404エラー？でも大丈夫、まだindex.htmlがないからだよ！
index.html を作る
最小限のHTML
<!DOCTYPE html>
<html>
<head>
<title>僕のポートフォリオ</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>僕のWebサイトへようこそ！</p>
</body>
</html>
編集方法は2つ
方法1: GitHub上で直接編集
ブラウザだけでOK
簡単な修正向き
方法2: ローカルで編集（おすすめ）
GitHub Desktop + VS Code
本格的な開発向き
今日は方法2をやってみよう！
Part 2: ローカル開発環境のセットアップ
必要なツールをインストール
GitHub Desktophttps://github.com/apps/desktop
Visual Studio Codehttps://code.visualstudio.com/download
どちらも無料で使えるよ！
GitHub Desktop で Clone
Code → Open with GitHub Desktop
リポジトリページで Code ボタン
Open with GitHub Desktop を選択
ブラウザがGitHub Desktopを開く
Clone とは？
GitHubのコードを自分のPCにコピーすること
リモート（GitHub）→ ローカル（PC）
編集は自分のPC上で行う
完了したらPushで戻す
保存先のおすすめ：
クラウド同期してない場所
例: ~/git.local/ や C:\git\
Clone を実行
Local Path を確認
Clone ボタンをクリック
ダウンロード完了を待つ
これで自分のPCにコードがコピーされました！
VS Code で開く
GitHub Desktop から起動
Current Repository を右クリック
Open in Visual Studio Code を選択
または：
Repository メニュー → Open in Visual Studio Code
フォルダを信頼する
初回起動時に聞かれる：
「このフォルダーのファイルの作成者を信頼しますか？」
「はい、作成者を信頼します」をクリックしてOK
自分で作ったリポジトリだから安心してね！
VS Code の画面説明
左サイドバーは上から…
エクスプローラー（ファイル一覧）
検索
ソース管理（Git）
拡張機能
覚えておくと便利：
Cmd/Ctrl + + で拡大
Cmd/Ctrl + @ でターミナルを開く
ファイルを編集してみよう
README.md を開く
左のエクスプローラーから README.md をクリック
Markdown記法は簡単！覚えておくべきは3つ。
・ハッシュを冒頭に書くと 見出し1(#)、見出し2(##)。
・ハイパーリンクは [表示したい文字列](URL) という記述方法。
・画像は  という感じ
変更を保存：Cmd/Ctrl + S で保存
ファイル名の横に「・」丸い点があったら未保存の状態だよ！保存すると消えます。他にも編集中のファイルや編集箇所が見えるから、Terminal単体で作業するよりもVS Codeは便利。
GitHub Desktop で変更を確認
Changes タブを見てみよう
左側：変更されたファイル一覧
右側：何が変わったか（差分）
緑 = 追加
赤 = 削除
Commit（コミット）
変更を記録する
Summary にコミットメッセージを入力
例：「README.mdを更新」
Commit to main をクリック
メッセージは何を変更したか分かるように書こうね！
Push（プッシュ）する
GitHubに送信する
Push origin ボタンをクリック！
これでローカルの変更がGitHubサーバーにアップロードされる
世界中からアクセスできるようになった！
GitHub Actions が再度実行
Pushすると自動でビルドが始まる！
Actions タブで確認：
黄色 = ビルド中
緑 = 完了
赤 = エラー
Codespace を使う方法
ブラウザだけで開発できる！
緑の Code ボタン → Codespaces
Create codespace on main
VS Code がブラウザで起動！
インストール不要で便利！
Codespace での編集
VS Code と同じ操作感：
ファイルを編集
左の ソース管理 アイコン
コミットメッセージを入力
コミット → 変更の同期
Part 3: 実践
Claude Code（クロード・コード）
役割: ターミナルの中で動く、あなたの専属エンジニア
インストール後の起動方法:
ターミナル（Mac）またはコマンドプロンプト/PowerShell（Windows）を開いて claude と入力するだけ。
まず最小限のHTMLを作る
Claude Codeを起動する前に、まず動く状態を作りましょう。VS Code で index.html を新規作成し、以下を貼り付けて保存（Cmd/Ctrl + S）：
<!DOCTYPE html>
<html>
<head>
<title>僕のポートフォリオ</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>僕のWebサイトへようこそ！</p>
</body>
</html>
GitHubにPushして公開確認
GitHub Desktop を開くと、Changes タブに index.html が表示される
左下の Summary に「index.htmlを追加」と入力
Commit to main をクリック
Push origin をクリック
数分待って https://あなたのユーザー名.github.io にアクセス。「Hello, World!」が表示されれば成功です！
メモ: 変更がGitHubに反映されてから公開されるまで、最大10分かかることがあります。
Claude Code で本格的なサイトに進化させる
動作確認ができたら、Claude Code を起動します。
ターミナルで claude と打ちEnter(改行)キー！
て以下のプロンプトを貼り付けてください：
私は『バイブコーディングで何でも作る、毎日1アプリ作る学生』です。
このキャッチコピーを体現する、インパクト抜群のポートフォリオサイトを作ってください。
【構成案】
- ヒーローエリア: 背景でコードが流れるようなエフェクトと『Daily 1 App Challenge』という大きな文字
- 本日のアプリ: 毎日更新される『今日作ったアプリ』を一番目立つ場所に配置
- アプリ・アーカイブ: これまで作ったアプリがカード型で無限に並ぶグリッド
- バイブス・ステータス: 『現在の連続作成日数：15日』のようなカウンター
【技術的要望】
- HTML/CSS/JavaScriptを1つのファイル（index.html）にまとめて
- Tailwind CSSを使って、サイバーパンクかつ清潔感のあるデザインに
- スマホでも完璧に見えるように（レスポンシブ対応）
まずはベースとなるコードを作成し、完了したらGitHubに保存するための手順を教えて。
これだけで、Claude Codeがプロ級のポートフォリオサイトを生成してくれます。
出来上がったHTMLファイルを左上のExlplorerで探して、右クリック。「Finder(Explorer)で開く」して、Chromeなどのブラウザでひらけばこんな感じ。
毎回出来上がるものは異なります！しかもこんなアプリたくさん作ってないよ！！という状態ですが、こんなかっこいいサイト、ゼロから作ったら本当に大変だよ。
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は怖くない。
イテレーション：まず動かす、少しずつ改善
制作のヒント
まずデプロイ - 動く状態を作る
少しずつ変更 - 一度に変えすぎない
こまめにコミット - 戻れるように
困ったら質問 - GitHub Issues へ
完璧を目指さず、まず動くものを作ろう！
毎日のルーティン
「毎日1アプリ」を続けるためのワークフロー:
朝: 今日作るアプリのアイデアを1つ決める
日中: Claude Codeに実装を依頼。ひたすらイテレーションを回す。かならずClaude CodeのRate Limitまでに完成させる。
夜: ポートフォリオに追加してPush
小さなアプリでOK。電卓、ToDoリスト、おみくじ、タイマー...何でもOK。よくないのは「どんどん拡大しちゃうこと」なんだ。必ず小さい単位で、どんどんリリースすることを考えよう。
もっと学びたい方へ
「記事を読んだけど、やっぱり一人でやるのは不安…」
「Claude Codeの設定でつまづいてしまった」
「もっと高度なバイブコーディングのコツを知りたい！」
そんなあなたのために、手取り足取り教えるオンライン講座を開催します。
AICU Lab+ 勉強会：Webポートフォリオ制作実践
日時: 2026年2月14日（土）
形式: オンライン
内容:
Claude Codeのインストールからデプロイまで完全並走
白井博士直伝！「就活で勝てる」バイブコーディングの極意
その場で自分のポートフォリオを完成させて公開
詳詳細・申込: AICU公式note（https://note.com/aicu）または AICU Lab+ コミュニティをチェック！
バレンタインデーに、チョコよりも甘くない（けど一生モノの）「開発スキル」を自分にプレゼントしませんか？
「毎日1アプリ作る学生」への第一歩を、一緒に踏み出しましょう！
リソース
AITuber Kit
デジタルハリウッド大学院講義「DHGSVR」
他の受講生が作った作品も見れるかも？
LuC4 公式サイト
関連記事:
学生向け GitHubを使ってAIでWebポートフォリオを作る初手（https://note.com/o_ob/n/nf3a0a8eb06da）
Claude Codeの始め方（https://j.aicu.ai/_Claude）
準備：三種の神器をセットアップ
① GitHub（ギットハブ）
役割: あなたの作品を世界に公開する「ステージ」
Gitはバージョン管理システム、GitHubはそれをWebで使えるサービスです。ソースコードの保管・共有、変更履歴の管理、そしてWebサイトの無料公開（GitHub Pages）ができます。
アカウント作成
GitHub公式サイト（https://github.com）にアクセス
Sign up をクリック
メールアドレスを入力
パスワードを設定
ユーザー名を決める ← 重要！後から変更できません
ユーザー名の決め方
良い例:
taro-yamada（名前ベース）
creative-dev（スキルベース）
kaitas（短くて覚えやすい）
避けた方がいい:
数字だけ 12345
長すぎる名前
読めない記号の羅列
これがプログラマーとしてのアイデンティティになります！
リポジトリを作成
GitHubにログイン
右上の「+」→「New repository」
Repository name に「あなたのユーザー名.github.io」と入力
Public を選択（GitHub Freeプランの場合、パブリックである必要があります）
Add a README file にチェック
Create repository をクリック
この名前にすると、そのままURLになります！
GitHub Pages を有効化
作成したリポジトリの Settings タブを開く
左メニューの Pages をクリック
Build and deployment セクションで Source を「GitHub Actions」に変更
Static HTML の Configure をクリック
右上の Commit changes... をクリック（内容はそのままでOK）
これで .github/workflows/static.yml が自動生成され、GitHub Actions が動き出します。
Actions タブで黄色いマークがぐるぐる回っていたらビルド中。緑のチェックマークが出たら完了です！
あれ、404エラー？大丈夫、まだ index.html がないからです。これから作ります！
② VS Code（ブイエスコード）
役割: コードを表示・編集する「高機能なノート」
手取り足取りのチュートリアル動画はこちら！
GitHub Desktop もインストール
Clone（クローン）とは、GitHubのコードを自分のPCにコピーすることです。
GitHubのリポジトリページで Code ボタンをクリック
Open with GitHub Desktop を選択
Local Path を確認して Clone をクリック
保存先のおすすめ: クラウド同期していない場所（例: ~/git.local/ や C:\git\）
VS Code で開く
GitHub Desktop で Repository → Open in Visual Studio Code を選択。
初回起動時に「このフォルダーのファイルの作成者を信頼しますか？」と聞かれたら、「はい、作成者を信頼します」をクリックしてOK。自分で作ったリポジトリだから安心です！
③ Claude Code（クロード・コード）
役割: ターミナルの中で動く、あなたの専属エンジニア
インストール後の起動方法:
ターミナル（Mac）またはコマンドプロンプト/PowerShell（Windows）を開いて claude と入力するだけ。
実践：AIへの「最初の一撃」
まず最小限のHTMLを作る
Claude Codeを起動する前に、まず動く状態を作りましょう。VS Code で index.html を新規作成し、以下を貼り付けて保存（Cmd/Ctrl + S）：
<!DOCTYPE html>
<html>
<head>
<title>僕のポートフォリオ</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>僕のWebサイトへようこそ！</p>
</body>
</html>
GitHubにPushして公開確認
GitHub Desktop を開くと、Changes タブに index.html が表示される
左下の Summary に「index.htmlを追加」と入力
Commit to main をクリック
Push origin をクリック
数分待って https://あなたのユーザー名.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つ決める
日中: Claude Codeに実装を依頼
夜: ポートフォリオに追加してPush
小さなアプリでOK。電卓、ToDoリスト、おみくじ、タイマー...何でもカウントです。
もっと学びたい方へ
「記事を読んだけど、やっぱり一人でやるのは不安…」
「Claude Codeの設定でつまづいてしまった」
「もっと高度なバイブコーディングのコツを知りたい！」
そんなあなたのために、手取り足取り教えるオンライン講座を開催します。
AICU Lab+ 勉強会：「Claude Code入門」
日時: 2026年2月14日（土）20:00-
形式: オンライン
内容(予定):
Claude Codeを使った「ゴール力」デプロイまで完全並走
白井博士直伝！「就活で勝てる」バイブコーディングの極意
その場で自分のポートフォリオを完成させて公開
Remotionを使った動画編集
バレンタインデーに、チョコよりも甘くない（けど一生モノの）「開発スキル」を自分にプレゼントしませんか？
「毎日1アプリ作る学生」への第一歩を、一緒に踏み出しましょう！
関連記事:
学生向け GitHubを使ってAIでWebポートフォリオを作る初手
AiTuber LuC4によるデモ https://aituberkit.shirai.as/
メイキング
Originally published at note.com/aicu on Feb 9, 2026.
コメント