0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

5分でGemini CLI を Windowsにインストールして適当なサイトを作って貰う手順

Last updated at Posted at 2025-08-17

前準備

Git for windowsのインストール

どうしても powershell が使いにくいので git bash を利用するために、git for windows をインストールします。

手順は以下のサイトなどを参照してください。

windows terminalのインストールと git bash の登録

git bash のウィンドウを使いやすくするために、windows terminal に git bash を登録します。

手順は以下のサイトなどを参照してください

windows terminal の設定で、スタートアップタブの『既定のプロファイル』を、Git bash にしておいてください。

image.png

node.js のインストール

以下のサイトで windows インストーラーをダウンロードします。

image.png


ダウンロードしたインストーラを起動して node をインストールします

image.png

image.png

image.png

image.png

image.png

image.png

動作確認

Windows terminal を起動して、node と、入力し、Welcome to Node.js と言う文字が表示されたら準備OKです。

image.png

※ Ctrl+Cを2回押して、nodeの対話画面を終了してください。

Gemini CLI のインストール

新しく、Windows terminalで git bash を起動してから、以下のコマンドで簡単にインストールできます。

npm install -g @google/gemini-cli

インストール完了後 gemini と入力すると、Gemini CLIが起動します。
すると、認証方法を選択する画面が出てくるので Login with Google を選択します。

image.png

ブラウザが起動するので、自分のGoogleアカウントでログインしてください。
これでGemini CLIの準備完了です。

image.png

簡単に使ってみる

作業ディレクトリの作成

適当なディレクトリを作成します。
image.png

右クリック > ターミナルで開く をクリックする
image.png

gemini と入力する
image.png

GEMINI が起動します
image.png

試しに、カレー屋のティザーサイトを作って貰うことにしました。
以下のプロンプトを入力しています。

2025年9月に新しくオープンするカレー屋のティザーサイトを作ってください。画像の素材はフリー素材を利用してください。スパイスにこだわりがあるカレー屋にする予定です。

image.png

Geminiが作業計画を出してくれました。
image.png

   1. コンセプト:
       * スパイスへのこだわりと、モダンで少し高級感のある雰囲気を伝えるデザインにします。
       * ダークテーマを基調とし、スパイスやカレーの鮮やかな色が引き立つようにします。

   2. 使用技術:
       * 特別なサーバー設定が不要で、すぐに公開できるシンプルな構成としてHTML, CSS,
         JavaScriptの3つのファイルで作成します。

   3. サイトの構成案:
       * メインビジュアル:
         スパイスやおしゃれなカレーの写真を背景に、店名と「2025年9月、オープン」の文字を大きく配置します。
       * コンセプト紹介: 「スパイスが奏でる、至福の一皿。」のようなキャッチコピーと、お店のこだわりを簡潔に紹
         介する文章を載せます。
       * オープン日までのカウントダウン: JavaScriptを使い、「オープンまであと
         XX日」と表示する動的なカウンターを設置し、期待感を高めます。
       * フッター: SNSアカウントへのリンクや、将来的に追加する住所情報のためのプレースホルダーを設置します。

   4. 画像について:
       * 画像は、商用利用可能なフリー素材サイト(例:Unsplash,
         Pexels)から、お店のコンセプトに合う高品質な写真(スパイス、調理風景、カレーなど)を仮で配置します。

  こちらの内容で作成を進めてよろしいでしょうか?

ひとまず、内容に問題はなさそうなので、実行をお願いしました。

image.png

逐一、ファイルの書き込みをしていいか?と聞いてくるので、Yes, allow always を選択します。
image.png

何度か繰り返すと、ファイルを作成してくれます。

image.png

出来上がったファイルはこちら。
image.png

image.png
image.png

2025.09 OPEN の文字が見にくいので、もう少し見やすい色味にして貰います。

image.png

2025.09 OPEN の文字が見にくいです。
もう少し見やすい色にしてください。

修正してくれました。

image.png

日付が見やすくなりましたね。
image.png

店の名前も修正して貰いましょう。

image.png

お店の名前は「Prisoner of spices」です。

店名も変更してくれました。
image.png

image.png

まとめ

以上のように、簡単にそれっぽいティザーサイトを作ることが出来ました。
これが無料で、しかも簡単に出来るのは素晴らしいですね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?