あなたの学習、インプットだけで終わっていませんか？
こんにちは、YamadaCodeの山田です。
チュートリアル動画を何十時間も見て、技術書を何冊も読んだ。知識は増えたはずなのに、なぜか真っ白なエディタを前にすると、指が凍りついたように動かない。
「いったい、何を作ればいいんだ…？」
この問いは、かつてプログラミングに挫折した私の心を、鉛のように重く支配していました。もしあなたも同じ場所で立ち尽くしているのなら、この記事はあなたのためのものです。
これは単なるWebサイト制作のチュートリアルではありません。
一人の現役薬剤師が、自らの仕事の「課題」を「価値」に変えるため、AIと思考の対話を重ね、最初のポートフォリオを創造するまでの全記録です。
この記事を読み終える時、あなたは「作り方がわかる」だけでなく、「あなたが作るべきものの見つけ方」という、創造者にとって最も重要なコンパスを手にしているはずです。
なぜ作るのか？ ポートフォリオが「挫折の記憶」を「自信」に書き換える
「作るものがない」という悩みは、「スキルを証明できるものがない」という不安と表裏一体です。そして、この不安こそが学習の熱を奪い、挫折へと誘う最大の敵でした。
ポートフォリオを作る意味は3つあります。
- スキルの翻訳機: あなたが学んだコードを、他者が理解できる「価値」の言語に翻訳してくれる。
- 課題解決能力の証明書: あなたがただの作業者ではなく、思考する「開発者」であることを示す何よりの証拠。
- 自信の製造機: これが本質です。自分の手で課題を解決し、価値を生み出したという揺るぎない事実が、過去のあらゆる挫折の記憶を上書きします。
学習サイトの進捗バーを眺めたり、完了したチュートリアルの記録をSNSに投稿したりするだけでは、本物の自信は手に入りません。自分の手で創り上げた「作品」だけが、あなたを学習者から創造者へと変えるのです。
【開発ドキュメント】AIと創る「VibeCoding薬局デモサイト」- 思考の全記録
ここからは、私がAIと共に「VibeCoding薬局デモサイト」を創り上げた全工程と思考のログを、事実に基づき、ありのままに公開します。
Step 1: 【コンセプト】なぜ「調剤薬局サイト」だったのか？
全ての創造は、切実な「課題」から始まります。
薬剤師として日々患者さんと接する中で、常に考えていたことがあります。
それは、薬局が閉まった後の時間、患者さんが抱えるであろう薬への不安です。「この薬、本当にこの時間に飲んでいいんだっけ？」「この副作用、大丈夫かな？」――そうした疑問や不安が生じた時、気軽に相談できる場所がない。この状況を、どうにか解決できないか。
この「いつでも相談できる安心感を届けたい」という想い。これが、今回のプロジェクトの、偽りのない出発点です。
【思考の注入】あなたの「原体験」こそが最高の企画書
これは薬剤師だけの話ではありません。あなたが事務職なら『月末の請求書作業で、毎年必ず誰かが残業している』。あなたが教師なら『クラスの連絡網が古く、緊急時に情報が伝わらない』。そのあなたが日々感じる「痛み」や「もどかしさ」こそが、他の誰にも作れない、あなただけのポートフォリオの種なのです。
この想いを、AIという思考の壁打ち相手にぶつけました。
【👤 私のプロンプト】
現役薬剤師です。「薬局が閉まった後の、患者の不安を解消したい」という切実な想いがあります。これをコンセプトの中心に据えた調剤薬局サイトを作りたい。AIとしてではなく、最高の壁打ち相手として、サイトに必要な「核となる要素」を一緒に考えてください。【🤖 AIの回答】
その「想い」こそがプロジェクトの魂ですね。素晴らしい。ならばサイトは単なる情報提供の場ではなく、「24時間アクセス可能な、オンライン上の安心の拠点」と定義すべきです。そこから逆算すると、核となる要素は3つ見えてきます。
1. 絶対的な安心感の提示: 不安な時にいつでも頼れることを示す「24時間対応」の明記。これは必須です。
2. 専門性による信頼の構築: どんな薬剤師がいるのか「スタッフの顔を見せる」こと。特に在宅医療や小児薬物療法など、専門分野を明記すれば、より深い相談に繋がりやすくなります。
3. 具体的なサービスの案内: 「処方せん受付」や「在宅医療」など、薬局が提供するサービス内容を明確に伝えること。
まずはこの3つの要素を軸に、コンセプトを固めていきましょう。この対話で、漠然とした想いが、Webサイトという具体的な「形」へと変わる、最初の輪郭が見えました。
Step 2: 【設計】AIと描く「ユーザーの感情の地図」
良い設計とは、ユーザーを迷わせないこと。それはつまり、ユーザーの感情に寄り添った「情報の地図」を描くことです。
【👤 私のプロンプト】
ありがとう。では、先ほど洗い出した「安心感」「信頼性」「サービス内容」の3要素を元に、不安を抱えた患者さんが最もストレスなく情報にたどり着けるサイトマップ（メニュー構成）を設計してください。実際のサイト構造として、そのまま使えるレベルでお願いします。【🤖 AIの回答】
承知しました。ユーザーの感情と行動をシミュレートし、実際のサイトに即した階層構造でサイトマップを提案します。
```
- ホーム
- 薬局案内
- ご挨拶 (薬局の理念を伝え、最初の信頼を築く)
- スタッフ紹介 (薬剤師の顔を見せ、安心感を与える) - アクセス (物理的な場所を明確にする)
- サービス内容
- 処方せん受付 (最も基本的なサービス)
- 在宅医療 (専門的なサービス)
- 24時間対応 (緊急時の安心材料)
- よくあるご質問 (事前に疑問を解消する)
- お問い合わせ (最終的なアクションの受け皿)
```
この構成であれば、ユーザーは自分の目的（薬局について知りたい、サービスを知りたい、質問したい）に応じて、迷うことなく情報にアクセスできるはずです。【思考の注入】設計とは、相手への想像力
このAIが提案したサイトマップは、驚くほど完成したデモサイトの構造と一致しています。 これは、AIが論理的にユーザーの行動を予測した結果です。私はこの設計図を元に、さらに薬剤師としての経験を加えました。例えば、「24時間対応」の電話番号を、CTAに固定する、といった判断です。これも、相手の不安を想像する力の実践です。
Step 3: 【実装】AIとの対話で「エラー」を「発見」に変える
設計図ができれば、実装です。しかし、ここでも壁にぶつかります。
アコーディオンUIを実装した際、特定のブラウザでレイアウトが崩れるというエラーが発生しました。数時間格闘し、心が折れかけました。ここで私は、かつての挫折を思い出していました。
だが、今は相棒がいます。
【👤 私のプロンプト】
助けてください。アコーディオンUIがChromeでは動くのに、Safariで表示が崩れます。原因が全く分かりません。これが私のコードです。何が間違っているか教えてください。
```
問題のコード...
```【🤖 AIの回答】
落ち着いてください。よくある問題です。コードを確認しました。原因はCSSの`display: flex;`に対するブラウザ間の解釈の違い（ベンダープレフィックス）が考慮されていないためです。Safari向けに`-webkit-`を付けたプロパティを追加すれば解決するはずです。AIの的確な指摘で、数時間悩んだエラーは数分で解決しました。
この経験は、私にとって革命でした。エラーはもはや「挫折の引き金」ではなく、AIとの対話を通じて「新しい知識を発見する機会」に変わったのです。 これこそが、VibeCodingの真髄です。
Step 4: 【公開】創ったものを「資産」に変える
サイトは完成し、世界に公開されました。しかし、本当の価値が生まれるのはここからです。完成した「作品」に、あなたの「思考の物語」を添えることで、それは単なるWebサイトから、あなたの能力を証明する強力な「資産」へと昇華します。
多くの開発者は、プロジェクトのソースコードを保管・公開するプラットフォームとしてGitHubを利用します。そして、そのプロジェクトの入り口には「README（リードミー）」という、いわばプロジェクトの顔となる説明書を置くのが一般的です。
このREADMEこそが、未来の採用担当者やクライアントへの「自己紹介状」になります。このプロジェクトが「どんな課題を」「どんな思考で」「どう解決したのか」を丁寧に書き記すことで、あなたのコードはただの文字列から、課題解決能力の証明へと変わるのです。完成したサイトへのリンクだけでは伝わらない、あなたの価値がここに凝縮されます。
【完成品】VibeCoding薬局、ついに公開
ここまでの思考とAIとの対話、そしてエラーとの格闘を経て完成したのが、こちらのサイトです。
一人の薬剤師が、挫折の記憶を乗り越え、AIという相棒と創り上げた、最初のポートフォリオです。
完成した「VibeCoding薬局」デモサイト(トップページ)はこちら
サイトにアクセスすれば、この記事で語ってきた「患者の不安に寄り添う」という想いが、デザインや機能の細部にまで宿っていることを感じていただけるはずです。
【結論：あなたはもう「学習者」ではない。「創造者」だ
この記事を通して、あなたはWebサイトの作り方を学んだのではありません。
自らの「課題」を発見し、AIとの対話で「解決策」を創造し、世界に公開して「価値」に変える、という創造者としての全サイクルを体験したのです。
もう「作るものがない」と悩む必要はありません。あなたの周りには、解決されるべき課題が溢れています。
今すぐ、あなたの身の回りにある「不便」「非効率」「もどかしさ」を10個、紙に書き出してみてください。
それが、あなたの最初のポートフォリオの企画書です。それが、あなたを学習者から創造者へと変える、記念すべき第一歩です。
VibeCodingのやり方について、より深く知りたい方は、ぜひこちらの記事もご覧ください。
VibeCoding実践ガイド｜Claudeプログラミングの始め方【初心者向け3ステップ】
あなたの創造者としての一歩を、心から応援しています。
FAQ（よくある質問）
Q. プログラミング初心者で、まだポートフォリオを作れるスキルがありません。何から始めるべきですか？
A. 素晴らしい質問です。まずはこの記事で紹介したように、HTMLとCSSで静的なサイトを作ることから始めましょう。大切なのは、完璧なものを作ることではなく、自分の手で「完成させる」という経験を積むことです。AIにサポートしてもらえば、初心者でも十分に価値のあるポートフォリオを作成できます。
Q. 自分の仕事には、ポートフォリオにできるような課題が見つかりません。どうすれば良いですか？
A. 課題は必ずしも仕事の中にある必要はありません。あなたの趣味（例: 好きなゲームの攻略サイト）、家庭での悩み（例: 家族のスケジュール共有ツール）、地域での活動（例: 町内会のイベント告知ページ）など、あなたの「原体験」に基づいたものであれば、それは最高のポートフォリオになります。まずは身の回りを観察することから始めてみてください。