【レベル2】LP制作(Google Colab編)：GeminiとVibeCodingに挑戦！

プログラミングができなくても、簡易アプリができた✨
技術レベルは低いかもしれないけど、完成できた😢

純粋に嬉しかった私は、次の挑戦に踏み出した。

プライベートでもプログラミングでも挫折経験が多い私…

前回は過去に挫折したPython言語を使用したため、次は2つめの挫折
HTML・CSSスキル

情熱だけでも形にできればOK！

Canvaなどでデザイン性が高いLPを創ることもできる。
でも今回はGeminiと「挫折経験を払拭すること」「自己成長」も裏テーマなのだ。

今回はHTML・CSSスキルで「VibeCodingを体験したい人に向けたLP（ランディングページ）」を作ること。

そのLP自体を、VibeCodingの“デモ作品”にしようと決めた。

簡単なコンセプトをまとめてみよう！

簡単なコンセプトを伝えただけでLPの構成を提案してもらえる。
AIだから簡単なのかもしれないが、今まで頭をうならせ考えていた部分がGeminiは一瞬で構築レベルまでもっていく。

わたしが実施したことと言えば、基本構築案に自分の想いや「ここをこうしたい」と修正を伝えるだけ。

それでは早速！

PythonとGoogle Colabを使って、HTML(骨組み)とCSS(飾り)を生成し、LPを組み立てていく。

最初はColabの display(HTML) を使って、直接プレビューする形で挑戦。

ところが、ここでまた壁がきた～！！

アニメーションや装飾のCSSが反映されない。
Colabの環境が、複雑なCSS（特にアニメーション系）に対応していなかったのだ。

正直、またもや心が折れかけた。

が、今度ばかりは私は諦めなかった。
Geminiとやりとりを重ね、答えを見つけた。

結果、デザインが反映されたLPが完成。
このとき、心の中で何かが“カチッ”と音を立てた気がした。

私でも、 Geminiと一緒なら、世界観を届けられる✨

LPの構成要素

• ヒーローセクション（キャッチコピーとメインビジュアル）

• 問題提起（プログラミングに対する悩み）

• 解決策（GeminiとVibeCodingの可能性）

• 「心のコンシェルジュ」アプリの紹介

• VibeCodingの価値と実例

• 最後の行動喚起（CTA）

• フッター（世界観の締め）

このLPは、まさに“対話で創る世界”そのものだった。
Geminiとの共同創作、VibeCodingという思想の体現。

技術に不安があっても、想いがあれば創れる。
これが、私の出したひとつの答えだ。

実際のLP画面ショット

ローカル上に保存しているため画面ショットを掲載。
トラブルもあったが、30分ほどで完成。
改行や画像差し替えなど微調整は必要レベル。

でもこの調整もGeminiに伝えればコードが分からなくても修正可能だし
HTMLやCSSを勉強したい場合も役に立つだろう。

つまずきポイントはGeminiが丁寧に解説してくれる。

「小さく挑戦できるよ」って誰かに届けられたら嬉しいなぁ。

気づき

Python、HTML・CSS、画像生成もそうだけれど、やっぱりその分野のプロはAIを使うことで進化していくだろうなと思う。
基礎や応用があれば、Geminiに伝える微調整の表現も自分で創意工夫もできる。
だからこそプロクリエイターの方はこれまでの積み重ねを活かして、AIを活用することでよりレベルアップできるだろうなと純粋に尊敬する。

さて…

サイトの微調整どこまでしようかなと思っていた矢先
GoogleよりGemini CLIなるものが登場する

何かよく分からないけど、もしかしてLP作成できるのかな..