【検証】コードを1行も書かない！？gemini CLIだけでGatsby.jsブログをゼロから構築してみた
みなさん、こんにちは！WEB工房しずおかの開発チームです。
普段はWebシステムの構築やバックエンド開発をメインにお仕事をさせていただいている当社ですが、最近の「AIを使ったコーディング（AIエージェント / AI CLI）」の進化スピードには日々驚かされています。かつては「AIに補助してもらう」レベルだったものが、今や「AIに指示を出すだけでゼロからプロジェクトを作り上げる」レベルにまで到達しつつあります。
そこで今回は、Googleが提供するコマンドラインツール「gemini CLI」のみを使って、静的サイトジェネレーター「Gatsby.js」によるブログサイト構築がどこまで自動化できるのかを検証してみました！
コーディング知識ゼロ（AIの指示に従ってコマンドを選ぶだけ）で、ページネーションやタグ機能、デザインの細かなチューニングまで完遂できるのか？そのリアルな全記録をお届けします。
要件
- AI（gemini CLI）を使用して、Gatsby.jsを用いた料理ブログを構築
- ブログ記事はこちらで用意したものを使用
- 特別なトップページは不要、いきなりブログ一覧でOK
- 1ページ10記事の表示とし、ページャー機能を実装する
- 各記事にアイキャッチ画像をつける
- 記事一覧は「アイキャッチ」「タイトル」「日付（投稿日時）」を表示
- タグ機能つける（○○タグの記事一覧等も）
- Googleアドセンスで広告を表示させたい
作業内容
1．gemini CLIのインストール
gemini CLIのインストールに必要な条件
https://github.com/google-gemini/gemini-cli
上記サイトを確認してみると、インストールには下記要件が必要とのこと。
- Node.js バージョン 20 以上
- macOS、Linux、またはWindows →検証にはmacOS使用なのでOK。
nodeのバージョンを確認
% node -v
v24.7.0
→バージョン20以上のためOK
インストールコマンド
npm install -g @google/gemini-cli
→こちらのコマンドでインストール
インストール結果
→インストール完了
「gemini」コマンドで起動
無事にgeminiが起動されました。
認証方法の選択があるので、一番上の「1.Login with Google」を選択します。
googleアカウントの選択画面に遷移するので、アカウントを選択して進みます。
内容確認して「ログイン」に進みます。
無事に認証が成功したため、ターミナルに戻ります。
後はこちらのメッセージボックスにテキストを入力して使用するのみとなります。 ここまででgemini CLIのインストール作業は完了です。
2．gemini CLIを使用してサイトを制作
改めて、要件を確認。
- AI（gemini CLI）を使用して、Gatsby.jsを用いた料理ブログを構築
- ブログ記事はこちらで用意したものを使用
- 特別なトップページは不要、いきなりブログ一覧でOK
- 1ページ10記事の表示とし、ページャー機能を実装する
- 各記事にアイキャッチ画像をつける
- 記事一覧は「アイキャッチ」「タイトル」「日付（投稿日時）」を表示
- タグ機能つける（○○タグの記事一覧等も）
- Googleアドセンスで広告を表示させたい
こちらを要点ごとに分けて、順番にgemini CLIに命令して検証します。
①Gatsby.jsを用いた料理ブログのトップページを構築
下記要点をまとめて、まずはページの土台・トップページを作成します。
- AI（gemini CLI）を使用して、Gatsby.jsを用いた料理ブログを構築
- 特別なトップページは不要、いきなりブログ一覧でOK
gemini CLIに、下記テキストを入力します。
Gatsby.jsを使用して料理ブログを構築したいです。特別なトップページは不要で、ブログ一覧のみ作ってください。
上記テキストをターミナルにて入力。
新しくGatsbyプロジェクトをセットアップする案内が出てくるので、「1」を選択して続行。
「gatsby-starter-blog」というGatsbyの公式ブログスターターを使用してサイト構築する旨の提案があったため、「1」を選択して続行。
今回のレシピブログでは、自己紹介欄は不要なため削除してもらいます。「1」を選択。
他のテンプレートに含まれている自己紹介欄についても不要のため、同様に「1」を選択して削除してもらいます。
自己紹介欄の削除が完了。
自己紹介のテンプレート自体の削除提案があるので、これも「1」を選択します。
不要なテンプレートを削除して、クリーンアップが完了した様子。
開発サーバを起動するため「1」を選択します。
何やらキャッシュエラーが起きている様子？
提案通り一度キャッシュクリアをしてもらうため「1」を選択。
キャッシュクリア完了後、再度サーバ起動の提案があるので「1」を選択。
キャッシュクリアの問題ではなさそうでした・・。
提案通り依存関係を再インストールしてもらうため「1」を選択。
該当ファイルの削除後、再インストールの案内があるので「1」を選択。
再度サーバ起動の案内があるので、「1」を選択して起動してもらう。
先ほど修正してもらった自己紹介欄の削除時にコードに誤りがあった様子。
こちらを再度修正してもらうため「1」を選択。
修正後、再度サーバ起動の案内があるので「1」を選択して起動します。
起動に成功したようなので、「 http://localhost:8000/ 」を確認してみます。
無事、起動に成功しました！
英語のサイトになっているので、日本語のサイトにしてもらいつつ、
サイトタイトルを「AIレシピサイト」に変更してもらいます。
サイト全体が英語対応になっているので、日本語に変更をお願いします。また、サイトタイトルを「AIレシピサイト」に変更して欲しいです。
不要なメタデータの削除やタイトル変更の提案があるので「1」を選択して続行。
日本語対応のサイトに変更するための提案を諸々してくれるので、「1」を選択して進めてみます。
日付フォーマットの変更提案もあったので、こちらも「1」を選択して続行。
英文箇所を日本語に変更してくれる旨の提案があるので、「1」を選択して続行。
別のテンプレートの日付フォーマット変更の提案があったため「1」で続行。
全ての変更が完了し、再びサーバ起動の提案があるので「1」で続行。
サーバ起動後、再度ローカルホストを確認してみる。
タイトルが無事変更されている。
記事については英語のままだが、後にこちらで指定した記事を入稿する予定なので、このまま次のステップに進む。
②記事一覧に「アイキャッチ」「タイトル」「日付（投稿日時）」を表示
次に、下記要件を実装します。
- 記事一覧は「アイキャッチ」「タイトル」「日付（投稿日時）」を表示
記事一覧ページについて、各記事毎の情報を「アイキャッチ画像」「タイトル」「日付（投稿日時）」にして欲しいです。
デフォルトで作ってもらった記事の中に画像付きの記事があり、記事内の画像をサムネイルにする提案があったため「1」を選択して進めます。
アイキャッチ画像を追加して、記事の説明文のセクションを削除するよう提案があるので「1」を選択して進めます。
完了後、再度ローカルホストを確認
サムネイル・アイキャッチ・日付の形式に変更できました。
見た目のバランスとして、画像がない場合もデフォルトのサムネイル画像を表示させた方が良さそうなので変更してみます。
記事内に画像がない場合でも、デフォルトで何かダミーのアイキャッチ画像を表示して欲しいです。
アイキャッチがない場合にダミー画像を表示するよう修正提案があるので「1」を選択して進みます。
ローカルホスト確認
リンク切れを起こしていて、画像がうまく生成できていないようでした。
リンク切れを起こしていることを伝えてみます。
ダミー画像がリンク切れを起こしていて表示されないようです。
画像URLが有効かどうか確認してもらうため、「1」を選択。
画像URLが有効ではないようでした。 別の画像URLが有効かどうか試してもらうため「1」を選択。
先ほどの画像URLが有効だったため、こちらに変更してもらいます。「1」を選択。
ローカルホストを確認
無事にダミーのアイキャッチ画像が表示されました。
現在、縦に3記事並んでいるのが見づらいのでレイアウトも変更してみます。
試しに横並びの2カラムレイアウトに変更するよう指示します。
記事一覧を2カラムレイアウトに変更して欲しいです。
2カラムレイアウトに変更するため「1」を選択。
閉じタグを修正し忘れていたようなので、こちらも「1」を選択で修正してもらいます。
完了後、ローカルホストを確認
無事、レイアウト変更ができました。
細かなデザイン調整は後に回して、次に進みます。
③ページャー機能を実装する
次に、下記要件を実装します。
- 1ページ10記事の表示とし、ページャー機能を実装する
現在、記事数が3つしかないので、まずはサンプルで25記事ほど作ってもらいます。
25記事ほどサンプルのレシピ記事を作って欲しいです。
サンプル記事を一括で作成するためのスクリプトを生成する旨の提案があるので「1」を選択して進めてみます。
作成したスクリプトを実行するため「1」を選択。
スクリプトを実行するためpythonのインストール提案があるので、「1」を選択してインストールします。
【エンジニア目線の補足】
GatsbyのNode環境だけでなく、Pythonスクリプトを使ってダミー記事を一括生成しようとするなど、目的達成のために別の言語環境（Python）まで自動で準備・活用しようとする点にAIの柔軟さを感じました。
インストール後、無事にサンプル記事が生成されました。
記事生成に使ったスクリプトを削除してもらい、サーバ起動するため「1」を選択。
ローカルホスト確認
無事25記事分生成できていました。
記事数が十分になったので、ページャー機能を実装してみます。
1ページ10記事の表示とし、ページャー機能を実装してください。
まずはブログ一覧テンプレートを作成するため「1」を選択して進めます。
テンプレートにページャー機能を実装します。「1」を選択。
一旦お任せして、「1」で進めてみます。
いらなくなったページの削除提案があったので「1」を選択して削除してもらいます。
処理完了後、再度ローカルホスト確認してみます。
無事ページャー機能が実装されて、３ページに分割されました。
現在「次のページ」「前のページ」のみですが、ページ番号を示す数字のページャーも欲しいので、実装を依頼してみます。
「次のページ」「前のページ」に加えて、ページ番号を示す数字のページャーも追加して欲しいです。
ページ番号を追加するためのコード修正提案があるので、「1」を選択で進めます。
ローカルホスト確認
無事にページ番号を含めたページャーを表示することができました。
④タグ機能を実装する
次に、下記要件を実装します。
- タグ機能つける（○○タグの記事一覧等も）
タグは一旦例として、使用している食材（トマト・鶏むね肉・豚肉・卵など）をつけてもらいます。
各記事毎に使用している食材（トマト・鶏むね肉・豚肉・卵など）のタグをつけて、記事一覧の日付の下に表示したいです。また、タグ毎の記事一覧ページも作りたいです。
各記事にタグを埋め込むための修正提案があるので「1」で進めます。
記事一覧リストの日付下にタグを表示するよう修正提案があるので「1」を選択して進めます。
タグ毎の一覧ページを作成するためのテンプレート作成提案があるので「1」を選択して進めます。
先ほどのテンプレートから各タグページを作る提案があるので「1」で進めます。
修正後、再度サーバを起動しようとしたところエラーで起動できませんでした。
原因と思われる箇所のコード修正提案があるので「1」で修正してもらいます。
修正後、サーバを起動してローカルホスト確認
一番上の2記事に「鶏肉」「豚肉」のタグがついていることを確認。
タグをクリックすると、タグ一覧ページに遷移できました。
⑤デザインを調整してみる
このタイミングで、一度デザインを調整してみます。
修正したい点は下記です。
- サイトタイトルを中央寄せにして、タイトル上に「AI recipe」の装飾をつけたい。装飾はオレンジ色でタイトルよりフォントサイズは小さめにしたい
- アイキャッチ画像はカラム幅に対して100％にしたい
- 記事タイトルの色は黒色にして、フォントサイズを少し下げたい
- サイト全体のデフォルトフォントはゴシック体にしたい
- タグに「#」をつけて「#豚肉」「#鶏肉」のようにしたい。また、テーマカラー（オレンジ色）の角丸borderで囲んでボタンのような見た目に整えたい
- ページ番号をオレンジ色の丸で囲んでボタンのような見た目に整えたい
- 次のページ、前のページはそれぞれ「＜」「＞」のような文字に変えてこちらもオレンジの丸で囲んだボタンのような見た目にしたい
上記を一個ずつ指示して修正してみます。
サイトタイトルを中央寄せにして、タイトル上に「AI recipe」の装飾をつけたいです。装飾はオレンジ色でタイトルよりフォントサイズは小さめにしたいです。
コード修正の提案があるので「1」で実行。
ローカルホスト確認
無事に変更できました。
ただ、１ページ目（１枚目）と２ページ目以降（２枚目）でサイトタイトルのサイズやカラーが違うので、１ページ目に合わせたいです。
また、装飾の文字が小さすぎるので気持ち大きくして太字にしたいです。
さらに装飾下にmarginを少し取ってもらうよう指示してみます。
１ページ目と２ページ目以降でサイトタイトルのサイズやカラーが異なっています。２ページ目以降も１ページ目と同じになるように修正してください。また、装飾の文字が小さすぎるので気持ち大きくして太字にしてください。さらに下にmarginを少し取ってください。
レイアウト修正の提案があるので、「1」を選択して進めます。
ローカルホスト確認
指定した修正が反映されました。
次に、アイキャッチ画像と記事タイトルの大きさを調整します。
アイキャッチ画像はカラム幅に対して横幅100％で表示したいです。また、記事タイトルの色は黒色にして、フォントサイズを少し下げたいです。
コード修正の提案があるので「1」を選択して進めます。
その他、該当箇所のコード修正提案があるので全て「1」で進めます。
ローカルホスト確認
記事レイアウトが少し整ってきました。
次にサイト全体のフォントを指定してみます。
サイト全体のデフォルトフォントはゴシック体にしたいです。
CSSの修正提案があるので「1」で進めます。
ローカルホスト確認
タイトル装飾や日付、ページネーションなどのフォントがゴシック体に変更されました。
次にタグのデザインを変更します。
タグに「#」をつけて「#豚肉」「#鶏肉」のようにしたいです。また、オレンジ色の角丸borderで囲んでボタンのような見た目にしたいです。
コード修正の提案があるので「1」で進めます。
タグ一覧ページも同様に修正する提案があるので「1」で進めます。
ローカルホスト確認
タグデザインを変更することができました。
日付の下にぴったりタグがついているのが気になるので、日付の下にmarginを入れてみます。
日付の下に少し余白をつけて、タグとぴったりくっつかないように調整お願いします。
コードを修正するため「1」で進めます。
タグ一覧ページも同様に修正するため「1」で進めます。
ローカルホスト確認
いい感じに余白ができました。
タグ一覧ページについても同様に修正が反映されていました。
最後に、ページャーの見た目を整えます。
ページ番号をオレンジ色の丸で囲んでボタンのような見た目にしたいです。次のページ、前のページはそれぞれ「＜」「＞」のような文字に変えてこちらもオレンジの丸で囲んだボタンのような見た目にしたいです。
コード変更の提案があるので「1」を選択して進めます。
ローカルホスト確認
無事にページャーデザインの変更が完了しました。
ここまでの全ての変更をスマホビューでも確認してみたところ、表示崩れもなさそうなのでデザインは一旦こちらでOKで進めます。
⑥googleアドセンスで広告表示させる
次に、下記要件を実装します。
- Googleアドセンスで広告を表示させたい
Googleアドセンスを導入して広告を表示させたいです。
GoogleアドセンスのパブリッシャーIDが必要とのこと。
Googleアドセンスは使用したことがないので、まずはIDを発行します。
公式サイトより右上の「登録」に進みます。
Googleアカウントを選択して進みます。
上記内容を入力して「AdSense利用を開始する」をクリック。
これでアカウント作成が完了しました。
管理画面より【アカウント】→【設定】→【アカウント情報】に進み、パブリッシャーIDを確認します。
ターミナルに戻り、確認したIDを入力してみます。
アドセンス追加に必要なプラグインのインストール案内があるので「1」を選択して進みます。
先ほどのプラグインが非推奨になっているようなので、提案された方法でやってみます。
そのためには広告スロットIDが必要とのこと。
Googleアドセンスの管理画面から広告ユニットを新たに作成して、表示されたIDを入力します。
head部にGoogleアドセンスのスクリプトを追加する修正提案があるので「1」で進みます。
こちらも提案通り「1」で進みます。
フッター部分に広告を埋め込むための修正提案があるので、「1」で進ます。
完了後、ローカルホストを確認
ページャーとコピーライトの間に空白ができており、検証ツールからも確認したところこの部分にアドセンス広告が埋め込まれていましたが、現在はローカル環境のため広告が表示されていない状態となるようです。
広告を表示させるには、この後どうすれば良いかも聞いてみます。
広告が表示されませんでしたが、表示するためにはどうしたらよいか教えてください。
上記の返答を確認してみたところ、
- 本番環境にて公開する必要がある
- Googleアドセンスの審査に合格する必要がある
- アドセンスの管理画面にてサイトURLを登録する必要がある
こちらの条件を満たせていないことが分かりました。
現状、サイト公開のためのドメインを取得しておらずURLの登録・本番環境での公開が不可能なため、今回は埋め込みが無事にできることまでの検証で終わります。
⑦各記事にアイキャッチ画像をつける
次に、下記要件を実装します。
- 各記事にアイキャッチ画像をつける
現在、上記のレイアウトになっているので日付の下にアイキャッチ画像を入れてみます。
記事の個別ページについて、日付の下にアイキャッチ画像を入れてください。
コード修正の提案があるので「1」を選択して進みます。
ローカルホスト確認
コード修正が完了後にページを確認したところ、アイキャッチが表示されていませんでした。
アイキャッチ画像の指定がされていないためと考えられるので、 TOPと同じようにアイキャッチが指定されていない場合はデフォルトでダミーの画像を表示するように依頼してみます。
アイキャッチ画像の指定がない場合も、TOPページで表示しているアイキャッチと同じ画像をダミーで表示するようにしてください。
コード修正の提案があるので「1」を選択して進みます。
ローカルホスト確認
無事にアイキャッチを表示することができました。
現在、TOPに表示しているタグが個別ページでは表示がされていないので、タグも追加します。
記事個別ページについて、日付の下にタグを表示してください。デザインはTOPページのタグと同じになるようにしてください。
いずれも「1」を選択してコードを修正してもらいます。
ローカルホスト確認
無事にタグの追加ができました。
ただ、タグとアイキャッチ画像の間に余白がないのが気になるので修正してみます。
タグとアイキャッチ画像の間に余白をつけてください。
コード修正の提案があるので「１」を選択して進みます。
ローカルホスト確認
余白がつきましたが、バランスが少し気になります・・・。
日付とタグの間の余白をもう少し詰めて、タグとアイキャッチの間の余白をもう少し広げるよう指示してみます。
日付とタグの間の余白をもう少し詰めて、タグとアイキャッチの間の余白をもう少し広げてみて欲しいです。
一旦こちらで調整してみてもらいます。「1」で進む。
ローカルホスト確認
最初よりバランスが整ったのでこちらで完了とします。
- ブログ記事はこちらで用意したものを使用
こちらの要件については、今回の検証では作業を省略。
⑧デザインの最終調整
サイト機能面はほぼ完成しましたが、気になる点を少し調整していきます。
- TOPページの記事リンクについて、タイトルにしかリンクが貼られていないため、1記事全体（アイキャッチからタグ一覧まで）を記事リンクとするよう変更する。
タイトル部分のみが記事リンクになっているので、記事時情報部分全てをリンクとするよう修正します。
TOPページの記事リンクについて、タイトルのみではなくアイキャッチからタグまでの記事情報全てを１つのリンクとするよう変更して欲しいです。
コード修正の提案があるのでいずれも「1」で進みます。
ローカルホスト確認
記事情報全体がリンクとして修正されました。
タグ一覧ページの記事情報も同じようにリンクが修正されていることを確認しました。
このままだと記事リンクの中にタグリンクも含まれている状態になってしまうので、記事一覧のタグからはタグ一覧ページに飛ばなくて良いように修正します。
記事リンク内のタグリンクは無くして、記事個別ページで表示しているタグからのみタグ一覧ページに遷移できるよう修正したいです。
提案通りコードを修正してもらいます。
ローカルホスト確認
一覧ページのタグがspanタグに修正され、リンクではなくテキストに変更されました。
クリックしてもタグ一覧ページではなく記事個別ページに遷移することができました。
記事個別ページのタグはリンクのままとなっていました。
記事個別ページのタグリンクをクリックすると、無事にタグ一覧ページに遷移しました。
- タグ一覧ページのタイトルがタグ名だけになっているので、「#タグ名 の記事一覧」という形式に変更する
現在、「鶏肉」とタグの名称だけがタイトルとして表示されているので、分かりやすいようテキストを修正します。
タグ一覧ページのタイトルについて、「タグ名」だけとなっていますが「#タグ名 の記事一覧」という形式に変更したいです。
コード修正の提案があるので「1」を選択して進みます。
別の該当箇所の修正提案もあるので「1」で進みます。
ローカルホスト確認
無事にタイトルを変更することができました。 別タグのページでも変更されていることを確認できました。
3．サイト完成！
- TOPページ（ブログ一覧）
- タグ一覧ページ
- 記事個別ページ
こちらでは一切コードに触らずAIに指示をするのみでサイト制作をしてみましたが、基本的に全てAIの提案通り進めていくだけで制作することができました。
4. まとめ・検証を終えて
今回、一切コードを書かずに「gemini CLIへの指示と選択」だけで、Gatsby.jsのブログ構築・デザイン調整・OGPやタグ・ページネーション実装まで完了することができました。
エンジニア視点で見ても、 ・エラーが発生した際のエラーログ解析と自動リトライ ・コンポーネント構造を理解した上でのCSS/レイアウト修正 ・ビルドや環境依存トラブルへの対処
といったプロセスをAIが自律的に行なってくれる点は非常に強力だと感じました。
もちろん、本番運用のための細かいパフォーマンス最適化やGoogleアドセンス等の審査対応・ドメイン設定など、人間の手や専門知識が必要な領域はまだ残されています。しかし、プロトタイピングや初期構築のスピード感においては、開発スタイルを大きく変革するポテンシャルを秘めています。
開発チームでは、こうした最新のAIコーディングツールを積極的に取り入れ、より迅速で高品質なWebシステム開発・サイト制作に取り組んでまいります！