活動日誌の写真

続、 広報1年、初めてのWebページ製作。

こんにちは!


最近、関東は晴れ多すぎませんか。外出日和で気分が上がりますね。
地元との差に驚く日本海側の民、広報1年です。

(この活動日誌は「広報1年、初めてのWebページ製作。」https://teambirdmantrial.jp/diary/%e5%ba%83%e5%a0%b1%ef%bc%91%e5%b9%b4%e3%80%81%e5%88%9d%e3%82%81%e3%81%a6%e3%81%aeweb%e3%83%9a%e3%83%bc%e3%82%b8%e8%a3%bd%e4%bd%9c%e3%80%82/ の続編です。ぜひこちらもご一読ください。)


最難関の壁、デザイン案のコーディング

前回の内容は、なんとかwebページのデザイン案ができるまで、についてでした。

しかし、「Canvaでのデザイン案をどのようにしてTBT公式ホームページに再現するのか?」
これが最難関の問題だったのです。

その理由は単純です。コーディングの大部分を任された私が、HTML・CSSの知識を全く持っていなかったからです。自分のコーディング能力がないのに、Canvaで好き勝手にデザインを作ってしまった。

その結果、「この部分、そもそも何を書いたらできるの?何が必要なの?」という疑問ばかりが浮かびました。先輩に聞くこともできますが、私が知識ゼロなせいで一日中先輩を拘束することになっていたでしょう(おそらく一日じゃすまない)。人に頼り切ることは難しい。となれば、何を頼るか。


ご想像の通り、AIに頼ることにしました。

左側にGemini、右側にVScode

画像の通り、左側にgemini,右側にVScodeを開き、別ウインドウにCanvaを開く。
この画面構成で何とか頑張ってみます。 

Geminiに尋ねる→回答してきたコードをVScodeにコピー→VScodeでプレビュー→修正したい部分のスクショを撮る→ビジュアル面の修正点を言語化→geminiに頼る→...

無理でした。

さすがに効率が悪すぎる。これじゃあ完成までに半年経っちまうよ。GeminiのProモードを使っている割には思ったよりも再現性低いし…

だんだんと「この作業環境を改善したい」という気持ちが強まってきました。

救世主Google Antigravity

実力不足の私が作業環境限界を感じていた頃、天下のgoogleが救いの手を差し伸べてくれました。
Google Antigravity 、最新のAIエージェント型開発環境が2025年11月に公開。


Antigravityの画面です。右側のチャット欄で対話しながら作業していく

知識ゼロの私が説明するなら、Antigravity=Gemini+VScodeです。
AIとチャット形式で対話しながら、取り組み中のHTML、CSSファイルをAI自身で書き換えてくれる。私はその結果を見守りながら、修正を重ねていくだけ。Antigravityを取り入れることで作業スピードが革命的に上がりました。 その理由は以下の2点。

・「送ったスクリーンショットの見た目通りに作って」が普通のgeminiより優秀(多分)
・AI自身で元のコードを確認してから回答するため、全体と部分の関係理解に強く、望んだとおりの修正が行われやすい
(おそらく)

このAIツールを利用することで、私でも合計10時間以内にHTML,CSSファイルをほとんど完成できました。使い方に慣れてくれば、もっと素早く書けると思います。

今回Webページ追加の経験をして、AI時代の急速な技術革新をまざまざと感じました。
先輩の助けがあったとはいえ、経験がない人でもWebページを作れてしまった。
この経験は、私の能力不足で実行できなかった行動への心理的ハードル、私の学習・スキルアップへの意欲、これら両方を取り除いてしまいました。技術革新を感じる貴重な経験になったと思います。

完成した「鳥人間コンテストとは」のページがこちらです!ぜひクリックしてください!https://teambirdmantrial.jp/birdmanrally/