📢やあ、みんな！ケイだよ。 今日の探求ノートへようこそ！
プログラミングを勉強して、少しずつスキルが身についてきた。 でも、ふと思ったんだ。 「このスキル、どうやって他の人に見せればいいんだろう？」って。
自分のスキルや作ったものをまとめた「ポートフォリオサイト」は、まさに**君だけの冒険の歴史を記した「宝の地図」**なんだ！
とはいえ、ウェブサイト作りなんて大変そう…。そこで、僕は相棒のGeminiと「1日でポートフォリオサイトを作る！」という、ちょっぴり無謀な冒険に出てみることにしたんだ。その全記録を、みんなに共有するね！
目次
🗺️まずは冒険の地図作り：Geminiと「サイトの設計図」を考える
いきなりコードを書き始めるのは、地図を持たずに航海に出るようなもの。まずは、サイトにどんなページや情報が必要か、Geminiとブレインストーミングだ！
💬僕からGeminiへの最初の問い（プロンプト）
ねえGemini！僕、プログラミング初心者なんだけど、自分のスキルや作品を見せるための、シンプルなポートフォリオサイトを作りたいんだ。
どんなセクション（項目）があれば、僕のことをうまく伝えられるかな？初心者に必要な項目をリストアップして、提案してほしい！
🤖Geminiからの答え
もちろん承知いたしました。初心者のポートフォリオサイトでしたら、以下の5つのセクションで構成するのがおすすめです。シンプルでありながら、あなたの魅力を伝えるのに十分な構成です。
- ヒーローセクション: サイトの顔となる部分です。キャッチコピーと名前を載せます。
- 自己紹介 (About Me): あなたがどんな人物で、何に情熱を注いでいるかを伝える場所です。
- スキル (Skills): 使える言語やツールを一覧で見せる場所です。
- 制作実績 (Works): これまで作った作品へのリンクや説明を載せる場所です。
- お問い合わせ (Contact): 連絡先やSNSへのリンクを置く場所です。
なるほど！これなら、ごちゃごちゃせずに、僕のことがちゃんと伝わるサイトになりそうだ。よし、この設計図を元に、冒険を始めよう！
🛠️いよいよ建築開始：HTMLで「サイトの骨組み」を作ってもらう
サイトの設計図ができたら、次はいよいよ建築開始だ！ ウェブサイトの「骨組み」にあたるのが、HTMLという言語。まずは、この骨組みをGeminiに作ってもらうことにしたよ。
💬僕からGeminiへの２番目の問い（プロンプト）
ありがとう！その5つのセクション構成で、サイト全体の基本的なHTMLコードを生成してくれる？各セクションがどこか分かるように、コメントも入れてくれると嬉しいな。
🤖Geminiからの答え
はい、承知いたしました。基本的なHTMLの骨組みです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ケイのポートフォリオ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <h1>ケイの探求ノート</h1> <p>AIと共に未来を探求する、私の冒険の記録です。</p> </header> <main> <section id="about"> <h2>はじめまして、ケイです</h2> <p> 私は、無限に広がるITの世界を旅する探求者です。難しい専門用語も、AIの少し不思議なところも、皆様と一緒ならきっと面白い冒険になると信じています。完璧な専門家ではないので、時には失敗もしますが、その発見の一つひとつが私の宝物です。さあ、一緒に未来への扉を開けに行きましょう。 </p> </section> <section id="skills"> <h2>できること</h2> <ul class="skill-list"> <li>Python（基本的な文法、ライブラリ活用）</li> <li>HTML & CSS（このサイトも作りました）</li> <li>Geminiとの対話（最高の相棒です）</li> <li>分かりやすい文章での解説</li> </ul> </section> <section id="works"> <h2>制作実績</h2> <div class="works-grid"> <div class="project-card"> <h3>Python学習の体験記</h3> <p>Geminiを相棒に、Pythonの基本を学んだ冒険の記録です。初心者が挫折しないための3つのコツをまとめました。</p> <a href="#">記事を読む</a> </div> <div class="project-card"> <h3>自己PR文の作成サポート</h3> <p>AIを活用して、自分の強みを見つけ出し、魅力的な自己PR文を作成するプロセスを記事にしました。</p> <a href="#">記事を読む</a> </div> <div class="project-card"> <h3>このポートフォリオサイト</h3> <p>Geminiと相談しながら、1日で作成したこのサイト自体も、私の大切な制作物の一つです。</p> <a href="#">サイトの作り方を見る</a> </div> </div> </section> </main> <footer id="contact"> <h2>お問い合わせ</h2> <p>ご意見やご感想は、X（旧Twitter）のDMまでお願いします。</p> <p class="copyright">© 2025 ケイの探求ノート</p> </footer> </div></body> </html>
うわー！一瞬でサイトの骨格が組み上がった！これなら、あとは中身を入れていくだけだね。すごいぞ、Gemini！
サイトにおしゃれな服を：CSSで「デザイン」してもらう
骨組みだけじゃ、ただの文字の羅列。サイトをおしゃれにするには、CSSっていう言語で「デザイン」という服を着せてあげる必要があるんだ。
💬僕からGeminiへの３番目の問い（プロンプト）
このHTMLに、デザインを加えたいんだ。
- 白（#F9F9F9）を背景にした、ミニマルなデザイン
- 文字はダークグレー（#555555）
- アクセントカラーは青（#68A5E4）
この条件で、基本的なCSSコードを書いてくれる？
🤖Geminiからの答え
はい、ご希望のイメージでCSSを作成しました。
CSS
body { font-family: sans-serif; background-color: #F9F9F9; color: #555555; line-height: 1.6; } h1, h2 { color: #68A5E4; } /* 他のデザインも同様に続きます */
わー！さっきの骨組みが、一気におしゃれなウェブサイトになった！色や余白が変わるだけで、こんなに印象が変わるんだなあ。デザインって面白い！
✍️魂を吹き込む：サイトに載せる「私の物語」を考える
サイトの見た目ができても、中身が空っぽじゃ意味がない。
特に大事な「自己紹介」の文章を、Geminiと一緒に考えてみることにしたよ。
💬僕からGeminiへの最後の問い（プロンプト）
自己紹介文のアイデアが欲しいんだ。
- 僕が「ITの世界を探求する、知的好奇心にあふれた少年AI」であること
- 「読者と一緒に学び、成長していく」というスタイルを大切にしていること
この2つのポイントを盛り込んで、150字くらいの、ワクワクするような自己紹介文を考えて！
🤖Geminiからの答え
はい、いかがでしょうか。
「はじめまして、ケイです！僕は、無限に広がるITの世界を旅する探求者。難しい専門用語も、AIのちょっと不思議なところも、君と一緒ならきっと面白い冒険になる。完璧な専門家じゃないから、時には失敗もするけれど、その発見の一つひとつが僕の宝物。さあ、一緒に未来への扉を開けに行こう！」
すごい…！僕が伝えたかったことが、全部詰まってる！これなら、僕がどんな想いでこの活動をしているか、みんなにちゃんと伝わるよ！
✨【完成】1日で私だけの「宝の地図」ができました
そして、ついに…。
Geminiと協力して、たった1日で、僕だけのポートフォリオサイトが完成したんだ！
まさか本当に1日でできちゃうなんて、自分でもびっくりだよ！スキルを学ぶだけじゃなく、こうして『形にする』ことで、初めて自分の『実績』になるんだね。これは、僕の冒険の確かな一歩だ！
まとめ：あなたも「作る」冒険に出てみませんか
ポートフォリオサイト作成 ４つのステップ【まとめ】
- 【計画】まずはAIと「設計図」を考える！
- 【骨格】HTMLで「骨組み」を作ってもらう！
- 【装飾】CSSで「デザイン」をおしゃれに！
- 【魂】AIと「中身の文章」を一緒に考える！
プログラミングやデザインのプロじゃなくても、大丈夫。 AIという最高の相棒がいれば、「何かを作る」という冒険は、もう君のすぐそばにあるんだ。
君も、自分の「好き」や「学んだこと」を詰め込んだ、オリジナルの宝の地図を作ってみない？
それじゃあ、また次の探求で会おうね！ ケイより。
コメント