【レベル2】LP制作(Gemini CLI編)：GeminiとVibeCodingに挑戦！
ここまでのGeminiを使った私個人の自己拡張レベル
・Pythonで簡易アプリを作成
・HTMLとCSSを使用しLP作成
・人生初のMacデビュー
→ここを説明すると長くなるのですが、使用していたWindowsPCでエラーが発生しまくり、人生初のMacデビューを果たします。
さて、前回作成のLPの微調整どこまでしようかなと悩んでいたとき、登場したのが「Gemini CLI」
はて..？CLIとはまず何だろう.…？
はじめはこのレベルでした( ´艸｀)
「Gemini CLI」って何の略ですか？
CLI は Command Line Interface の略です。
それぞれの単語の意味は以下の通りです。
Command (コマンド): コンピュータに実行させたい命令や指示
Line (ライン): 1行ずつ入力される形式（テキストベース）
Interface (インターフェース): ユーザーとコンピュータの間で情報をやり取りするための接点や手段
つまり、テキスト（文字）でコマンドを一行ずつ入力することで、コンピューターを操作するためのインターフェース（操作画面） という意味になります。
1番の疑問を確認
「私にも使えますか？」
はい、あなたでもGemini CLIを使うことは可能です！
「CLI」と聞くと開発者向けに感じるかもしれませんが、Googleはより多くの人がAIを活用できるように設計しています。
非開発者でも使える理由
自然言語での指示: Gemini CLIは、プログラミングコードを書く代わりに、普段話すような自然な言葉で指示を出すことができます。例えば、「この文章を要約して」「このファイルの名前を変更して」といった形で指示を出せます。
幅広い用途: コーディング支援だけでなく、以下のような様々な用途で活用できます。
コンテンツ生成: ブログ記事やSNSの投稿文、メールの作成など。
情報検索と要約: Google検索と連携し、最新の情報を手軽に検索し、その内容を要約させることができます。
問題解決: 何か困っていることに対して、解決策やヒントを尋ねることができます。
タスク管理: アイデアの整理や簡単なリスト作成などにも使えます。
簡単なセットアップ: Node.jsがインストールされている環境であれば、数行のコマンドでインストールし、Googleアカウントで認証するだけですぐに使い始められます。
無料枠の提供: 個人のGoogleアカウントでログインすれば、無料のGemini Code Assistライセンスを通じて、十分な無料利用枠が提供されます。
それであれば何か試してみようかな..と考えた結果、Colab使用との比較にもなるため同じ内容のLP作成に挑戦！
ここまでで、私の性格なんとなくお気づきかと思いますが、情報収集しながら同時に実行するタイプなので、エラーも出やすく失敗も多いです笑
初Gemini CLI
環境構築段階でもなぜかトラブルがありましたが、なんとか使えるように✨
やっと覚えたターミナルに「gemini」と入れて起動！
おぉ～！！
※テーマの選択はDarkかLightが選べますが、矢印キーで選択できます。
その後にGoogleアカウントで認証
ここに入力すればいいのかな…？
早速、LP作成ができるか相談！
できるそうなので、依頼してみました。
LPの基本構成案は以下のような感じです。
ヒーローセクション (一番上、ファーストビュー)
キャッチコピー: 訪問者の目を引き、LPの目的を端的に伝える。
メインビジュアル: 「心のコンシェルジュ」アプリの妖精の画像（アニメーションのGIFだとなお良いです！）や、Geminiとの対話イメージなど、視覚的に訴える要素。
行動喚起 (CTA): 「今すぐ体験する」など、次のステップへ促すボタン。
問題提起と共感のセクション
「プログラミングは難しい」「コードが書けないから諦めていた」といった、ターゲットが抱える悩みや課題を提示し、共感を呼びます。
解決策の提示（Vibe Codingとは？ / Geminiの紹介）
その悩みを解決するのが「Vibe Coding」であること。
そして、そのVibe Codingを可能にするのがGeminiであること。
**「コードを書かなくても、対話だけでクリエイティブな作品が作れる」**という核心メッセージをここで伝えます。
「心のコンシェルジュ」アプリの紹介
実際に作ったアプリを具体的な例として紹介します。
機能説明: 感情に合わせて妖精が変化、音楽提案、妖精からのメッセージなど。
アプリの画像: 実際に動いているアプリのスクリーンショット（複数の感情バージョンがあると良いでしょう）。
Vibe Coding体験のメリット
クリエイターになれる喜び、思考を形にする楽しさ、Pythonの可能性に触れる体験などを具体的に訴求します。
「こんな世界を創りたい」をプログラマーでなくても実現できる、というメッセージを改めて強調します。
具体的な体験方法 / 次のステップ
「Geminiを開いて対話を始める」「このLP自体がVibe Codingでできていることを体験する」など、具体的な行動を促します。
再度CTAボタン。
フッター
簡単なクレジットなど。
CLIの何が凄いのか
いやはや。初心者からすれば、もはやただただ感動です(/・ω・)/
依頼をしてみたところ、まずはフォルダ作成から始めてくれており、HTML・CSSファイルも自動作成。
アクセスしていいかどうかについても、きちんと確認してくれる✨
Colab使用のときに地味に大変だったのが、画像の設置。
GoogleDriveに画像を保存し、共有設定。
URLからIDを抜粋しColabが読み取れる形にして組み込む。
これがCLIではフォルダに保存し「ここに画像を挿入して欲しい」と伝えるだけで入れてくれた！！
できあがったLP
本当に30分もかかっておらず、できあがったのが以下。
微調整はもちろん必要だし、こだわり続けることもできるけど、大枠だけなら時間がかからなかった。
CTAはカラーも変わります💕
後はこちらに画像を設置したり、アニメーションをつければ公開レベルなのでは✨
気づき
進化を続けるGemini。丁寧な解説、エラーへの粘り強さ、Googleアプリとの連携、さらには自然言語でフォルダ操作もできるとは。
しかも無料で使用できる。
特にフォルダ操作やPC内のアクセスについては、信頼できるブランドでないと初心者は本当に怖い。
なぜなら、コードをVibeCodingで構築してくれている=意味が分からなくても操作ができてしまう。
もし悪意のある操作が組み込まれていたら…？
そういった意味でも、信頼できるブランドかも大切だなと深く感じました。
(その前に基本知識身に付けたら？と思われるかもしれませんが笑)
Geminiとやってみたプロジェクトはいよいよ大詰です。
現時点での進捗はこちら
ただいまこちらに挑戦中
普段ChatGPT派の私が、GeminiとVibeCodingに挑戦！
これまで数々のプログラミング挫折経験を払拭できるかもしれない。
Geminiと一緒にどこまで自己拡張できるのかも裏テーマ
Pythonでまずは、ちょっとしたアプリを創作
Colabを使用しLPを作成してみた。
