Geminiとペアプログラミング？このブログの作り方
ども、薄荷（ハッカ）です。
ITエンジニアという大枠の中では割と経験年数あるのですが、Astroの経験はほぼ無し。
そんな私が、Astroを使って2時間でこのサイトを作り上げました。
短時間で作り上げられた理由は、もちろんGoogleの生成AIアプリ『Gemini』を使ったから。
この前にも1つプロトタイプでサイトを作ってみたのですが、そのときは会話のやり取りが何度も発生し、コードの精度も悪くて、サイトができるまでに1日以上かかりました。
このときに失敗したと思ったのが、情報の投げ方。
その反省を生かして、今回はプロンプトをしっかりと準備しました。結果、ほぼ手戻りなくサイトを作り上げることができました！
実際に投げた最初のプロンプト
これが実際に投げたプロンプトです。
あなたはWebのフロントエンド開発に長けています。また、ステップバイステップで教えるのが得意です。
私は、Astroを使ってサイトを作りたいと思っており、あなたにステップバイステップで作り方を教えてほしいと考えています。スキルレベルは、HTMLやCSSを手打ちしたことはあるものの、JavaScriptは少し書けるレベル、Astroは使ったことがないという状況です。
ペアプログラミングでサイトを作っていきたいので、まずは以下の要件を読み、実装計画を作ってください。不明点があれば質問ください。
●要件定義
・サイト目的：
・サイト名：
<技術要件>
・コーディング：Astro
・ビルド：Github
・ホスティング：Cluodflare
・レスポンシブレイアウト
・その他技術要件：
1.マークダウン記法で記事を投稿できるようにしたいので、MDXを使用したい
2.記事にタグづけしたい
3.記事内にコードを記述できるボックスと、ボックスの中のコードをコピーできるボタンをつけたい
4.Amazonアフィリエイトを使うため、アフィリエイト用にデザインされたボックスが欲しい
5.おすすめ記事を1本選べる機能が欲しい
6.コードのメンテナンスがしやすいよう、適宜コードにコメントを入れてほしい
<レイアウト仕様>
・レイアウト：ヘッダ＋ボディ＋フッタ
・ボディレイアウト：1カラムかつ、ボディの中の要素はすべて幅が80%（最大1000px）
・フォント：Inter
・ページ構成：Topページ、各記事の詳細ページ、タグごとに絞り込んだ記事一覧ページ
※各ページの使用は後述
・カラーパレット：以下のとおり
役割色名/コード用途・意図
Main Color/瑠璃色 (#004898)/ヘッダー、ボタン、アクセント。ブランドの象徴。
Base Color/オフホワイト (#F8FAFC)/背景色。純白（#FFF）よりコントラストを抑え、目の負担を軽減。
Text (Main)/ダークスレート (#1A202C)/本文。真っ黒を避け、瑠璃色と親和性の高い暗灰色に。
Text (Sub)/クールグレー (#718096)/日付やカテゴリ、フッターの補助テキスト用。
Link Color/瑠璃色 (#004898)/インラインリンク。下線を併用し、色覚特性に配慮。
Accent/Alert/琥珀色 (#D97706)/重要な通知や「New」バッジ。青の補色で視認性抜群。
<ページごと仕様>
・ヘッダ
1.左側にサイト名があり、トップページへのリンクになっている
・フッタ
1.任意のリンクを貼れる
2.ブログ内に設定されているタグ一覧が表示され、タグをクリックすると、そのタグがついた記事一覧が表示される
・TopページBody部分
1.ファーストビューにおすすめ記事が100%幅で表示される
2.スクロールすると、新着記事の一覧が表示される。
新着記事はアイキャッチ＋記事タイトルで1つのボックスで表示される。ボックスは幅300px、高さ250px程度。ボックスはfloatになっており、画面幅に合わせて自動的に整列する
・記事詳細ページのbody部分
1. 文字間が適切に空き、読みやすいこと
・タグごとに絞り込んだ記事一覧ページbody部分
1.アイキャッチ＋記事タイトルで1つのボックスで表示される。ボックスは幅300px、高さ250px程度。ボックスはfloatになっており、画面幅に合わせて自動的に整列する。
2.20件でページングする。
以上マークダウンで書いたほうがわかりやすくね？とか、長くてトークン無駄遣いするのでは？とか、いろいろ改善ポイントありそうですが、このくらいの情報を最初に渡すことで、一発で以下のような実装計画を出してくれました。
- Step 1: 環境構築とデプロイの開通テスト
- Step 2: 共通レイアウトとデザインの基礎
- Step 3: 記事管理の仕組み作り (Content Collections + MDX)
- Step 4: トップページの構築
- Step 5: 各種ページの動的生成
- Step 6: 特殊なUIコンポーネントの実装
- Step 7: 最終調整
実装計画が出てきた後は、1ステップずつやり取りしながら実装していきました。
生成されたコードは精度が高く、ほぼコピペで実装できました。正直、私やっとここまで洗練できた！とうれしくなりました。
プロンプトに関する考察
今回気をつけたのは、以下の2点です。
- 情報の粒度
- 細かい情報の整理
情報の粒度
一番意識したのはここ。特に『森の情報から木の情報』を意識しました。
サイト全体の情報やページ全体の構成から、各ページの構成に落とす形ですね。
自分がなにかを作るときも、ざっくり役割や全体感をイメージしてから、細部を詰めると思います。
それと同じ流れで、どんな目的で作るものなのか、どんなページがサイトの中にあるのかを把握してから各ページの説明に入りました。
細かい情報の整理
また、細かい部分ではテキストのフォント指定や色指定、各コンポーネントのサイズなど、具体的な情報を細かく渡しました。
自分がコーディングするって言ったら、このくらいないと再現できないもんなぁ。
一番悩んだのが色指定。実はこれもGeminiの力を借りました。
最初のプロンプトを投げたチャットとは別にWebデザイナーのGemを作り、自分で決めたメインカラーをもとにデザインを相談しながら決めました。
色選びと色の使い方を表形式でまとめてくれたので、冒頭のプロンプトにも組み込みやすくて助かりました。
後日談
Astro知らなくても、こんなにあっさりサイトができたのがちょっと怖くて、作ったあとにAstroの本を買って勉強してます。
Astro フロントエンド開発の教科書(技術評論社)【PR】
Amazonで見る
実際に動かしつつ、Geminiが入れてくれたコメントも見つつでコードやディレクトリ構成を先に見ていたこともあり、すんなり頭に入ってきます。
はじめて触れる言語をこんな感じで学ぶのもアリかもしれませんね。
今度はAstroも使いつつ、多少複雑なWebアプリや業務アプリの開発などもやってみようと思います。