AICU media logoAICU media
日本語/English

文系・未経験でもできる！Claude Codeで作る「毎日1アプリ」ポートフォリオ

Cover Image for 文系・未経験でもできる！Claude Codeで作る「毎日1アプリ」ポートフォリオ
AICU media
AICU media

AI時代にChatGPTの使い方を教えてくれるセミナーはたくさんあるけれど「AIに開発させる、その初手」とか、「いい感じの自分のポートフォリオサイトをAIにつくらせて、その後も更新し続ける」といったセミナーはあまり聞かないですよね。

本記事では、プログラミング未経験の文系学生〜大学院生に向けた、今日から自分のWebポートフォリオを公開できる 具体的な手順を解説します。

https://www.youtube.com/watch?v=NiWHolT5HVI

講師はAICU代表のしらいはかせ、デジタルハリウッド大学大学院でデジタルコンテンツマネジメント修士を教える客員教授です。「初めてプログラミングをしたよ！」という受講生のポートフォリオもこちらから見つけられます。

白井博士 | ポートフォリオ

akihiko.shirai.as

https://akihiko.shirai.as/DHGSVR/

バイブコーディングとは？

「文法を覚える前に、AIとのノリ（Vibe）で形にする」開発スタイルです。プログラミング言語の文法をゼロから学ぶのではなく、「AIへの伝え方」を学ぶ令和の最速学習法。コードが書けなくても、日本語でやりたいことを伝えて、AIとともに実現する方法を「バイブス」を感じながら実装していきます。

準備：三種の神器をセットアップ

① GitHub（ギットハブ）

役割 : あなたの作品を世界に公開する「ステージ」

  1. [GitHub公式サイト](https://github.com/)でアカウントを作成

  2. 自分のユーザー名.github.io という名前で新しいリポジトリを作成

  3. 「Add a README file」にチェックを入れて作成

注意 : GitHub Freeプランの場合、リポジトリはパブリック（公開）である必要があります。

② VS Code

役割 : コードを表示・編集する「高機能なノート」

公式サイトからダウンロードしてインストール。

③ Claude Code

役割 : ターミナルの中で動く、あなたの専属エンジニア

こちらのリンクから入手できます。

インストール後の起動方法 : ターミナルを開いて claude と入力するだけ。

実践：AIへの「最初の一撃」

Claude Codeを起動したら、以下のプロンプトをそのまま貼り付けてください。

私は『バイブコーディングで何でも作る、毎日1アプリ作る学生』です。
このキャッチコピーを体現する、インパクト抜群のポートフォリオサイトを作ってください。

【構成案】
- ヒーローエリア: 背景でコードが流れるようなエフェクトと『Daily 1 App Challenge』という大きな文字
- 本日のアプリ: 毎日更新される『今日作ったアプリ』を一番目立つ場所に配置
- アプリ・アーカイブ: これまで作ったアプリがカード型で無限に並ぶグリッド
- バイブス・ステータス: 『現在の連続作成日数：15日』のようなカウンター

【技術的要望】
- HTML/CSS/JavaScriptを1つのファイル（index.html）にまとめて
- Tailwind CSSを使って、サイバーパンクかつ清潔感のあるデザインに
- スマホでも完璧に見えるように（レスポンシブ対応）

まずはベースとなるコードを作成し、完了したらGitHubに保存するための手順を教えて。

これだけで、AIがプロ級のポートフォリオサイトを生成してくれます。

サイトを育てる「バイブス対話法」

コードができあがったら、Claude Codeにどんどん「ワガママ」を言いましょう。

あなたの要望 → 結果 「もっと派手にして！」 動きのあるアニメーションが追加される 「就活向けに誠実な自己紹介も入れて」 信頼感のあるセクションが追加される「ダークモード対応にして」 切り替えボタンが実装される 「今のコードをGitHubにPushして」 公開作業まで代行してくれる

GitHubへの公開手順

方法1: GitHub Desktopを使う（初心者向け）

  1. GitHub Desktopをインストール

  2. 作成したリポジトリをクローン

  3. index.htmlを保存

  4. GitHub Desktopで変更をCommit

  5. 「Push origin」ボタンをクリック

方法2: Claude Codeに任せる（最速）

Claude Codeに「このファイルをGitHubにプッシュして」と伝えるだけ。初回は認証設定が必要ですが、一度設定すれば以降はコマンド一発です。

公開を確認

数分待って https://あなたのユーザー名.github.io にアクセス。

サイトが表示されれば成功です！

メモ : 変更がGitHubに反映されてから公開されるまで、最大10分かかることがあります。

毎日のルーティン

「毎日1アプリ」を続けるためのワークフロー:

  1. 朝 : 今日作るアプリのアイデアを1つ決める

  2. 日中 : Claude Codeに実装を依頼

  3. 夜 : ポートフォリオに追加してPush

小さなアプリでOK。電卓、ToDoリスト、おみくじ、タイマー...何でもカウントです。

もっと学びたい方へ

「記事を読んだけど、やっぱり一人でやるのは不安…」 「Claude Codeの設定でつまづいてしまった」「もっと高度なバイブコーディングのコツを知りたい！」

そんなあなたのために、手取り足取り教えるオンライン講座を開催します。

📅 AICU Lab+ 勉強会：Webポートフォリオ制作実践

  • 日時 : 2024年2月14日（水）

  • 形式 : オンライン

  • 内容 :

    • Claude Codeのインストールからデプロイまで完全並走

    • 白井博士直伝！「就活で勝てる」バイブコーディングの極意

    • その場で自分のポートフォリオを完成させて公開

詳細・申込 : AICU公式note または AICU Lab+ コミュニティをチェック！

バレンタインデーに、チョコよりも甘くない（けど一生モノの）「開発スキル」を自分にプレゼントしませんか？

「毎日1アプリ作る学生」への第一歩を、一緒に踏み出しましょう！

関連記事