前準備
Git for windowsのインストール
どうしても powershell が使いにくいので git bash を利用するために、git for windows をインストールします。
手順は以下のサイトなどを参照してください。
windows terminalのインストールと git bash の登録
git bash のウィンドウを使いやすくするために、windows terminal に git bash を登録します。
手順は以下のサイトなどを参照してください
windows terminal の設定で、スタートアップタブの『既定のプロファイル』を、Git bash
にしておいてください。
node.js のインストール
以下のサイトで windows インストーラーをダウンロードします。
ダウンロードしたインストーラを起動して node をインストールします
動作確認
Windows terminal を起動して、node
と、入力し、Welcome to Node.js
と言う文字が表示されたら準備OKです。
※ Ctrl+Cを2回押して、nodeの対話画面を終了してください。
Gemini CLI のインストール
新しく、Windows terminalで git bash を起動してから、以下のコマンドで簡単にインストールできます。
npm install -g @google/gemini-cli
インストール完了後 gemini
と入力すると、Gemini CLIが起動します。
すると、認証方法を選択する画面が出てくるので Login with Google
を選択します。
ブラウザが起動するので、自分のGoogleアカウントでログインしてください。
これでGemini CLIの準備完了です。
簡単に使ってみる
作業ディレクトリの作成
試しに、カレー屋のティザーサイトを作って貰うことにしました。
以下のプロンプトを入力しています。
2025年9月に新しくオープンするカレー屋のティザーサイトを作ってください。画像の素材はフリー素材を利用してください。スパイスにこだわりがあるカレー屋にする予定です。
1. コンセプト:
* スパイスへのこだわりと、モダンで少し高級感のある雰囲気を伝えるデザインにします。
* ダークテーマを基調とし、スパイスやカレーの鮮やかな色が引き立つようにします。
2. 使用技術:
* 特別なサーバー設定が不要で、すぐに公開できるシンプルな構成としてHTML, CSS,
JavaScriptの3つのファイルで作成します。
3. サイトの構成案:
* メインビジュアル:
スパイスやおしゃれなカレーの写真を背景に、店名と「2025年9月、オープン」の文字を大きく配置します。
* コンセプト紹介: 「スパイスが奏でる、至福の一皿。」のようなキャッチコピーと、お店のこだわりを簡潔に紹
介する文章を載せます。
* オープン日までのカウントダウン: JavaScriptを使い、「オープンまであと
XX日」と表示する動的なカウンターを設置し、期待感を高めます。
* フッター: SNSアカウントへのリンクや、将来的に追加する住所情報のためのプレースホルダーを設置します。
4. 画像について:
* 画像は、商用利用可能なフリー素材サイト(例:Unsplash,
Pexels)から、お店のコンセプトに合う高品質な写真(スパイス、調理風景、カレーなど)を仮で配置します。
こちらの内容で作成を進めてよろしいでしょうか?
ひとまず、内容に問題はなさそうなので、実行をお願いしました。
逐一、ファイルの書き込みをしていいか?と聞いてくるので、Yes, allow always
を選択します。
何度か繰り返すと、ファイルを作成してくれます。
2025.09 OPEN
の文字が見にくいので、もう少し見やすい色味にして貰います。
2025.09 OPEN の文字が見にくいです。
もう少し見やすい色にしてください。
修正してくれました。
店の名前も修正して貰いましょう。
お店の名前は「Prisoner of spices」です。
まとめ
以上のように、簡単にそれっぽいティザーサイトを作ることが出来ました。
これが無料で、しかも簡単に出来るのは素晴らしいですね。