自社サイトをgeminiを使ってリニュアルした話

ふと思い立って、自社のサイト（grikk.co.jp）をリニューアルした。

リニューアル後のサイトの状況

ソースコードは、githubで管理。
CMSはAstroの5系を利用。
CSSは、Tailwindの4系を利用。
サーバは、Firebase Hostingを利用。
メールフォームは、Google App Script（GAS）を利用。

デザイン

デザイナーに依頼するのもなんなので、自分でデザインすることになったが、自慢でないが、デザインセンスは一切持ち合わせていない。デザインとCSSは、Gemini（2.5 PRO）に任せることにした。

前述の通り、Astroを使ったのだが、大雑把なデザインの作成時には、プレーンなHTMLでGeminiに出力してもらった。GeminiのCanvasを使うと、HTMLのソースとブラウザで表示した見た目の両方が出力される。最初からAstroのソースを出力させるのではなく、最初はHTMLを出力させたほうがいろいろと便利であった。

geminiに対して、Tailwindを使うように指定したため、geminiはCSSを出力せず、tailwindで見た目を調整した。

デザインの参考にするサイトのURLを入力し、また、「IT系の一人法人会社のコーポレートサイトを作る」というように指示を出したところ、適当にデザインしてくれた。

geminiが生成したデザインで気に入らない点があったり、不足しているパーツがあった場合には、修正指示や、追加作成指示をgeminiに出して修正・追加させた。

配色

Geminiに対して、アクセントカラーとして、赤系、緑系、青系の３色を指定したところ、適当に配色を行ってくれた。

トップページと下層ページ

最初に、トップページのデザインを生成させた。生成結果に対して、修正指示をいくつかだし、反映させた。トップページのデザインが固まってから、トップページのデザインをもとに下層ページのデザインを作成するように指示し、生成させた。

Astro化

デザインの生成・修正・追加などは、HTMLファイルでgeminiが行った。デザインが固まったら、 geminiに指示を出し、Astroのファイルに直させた。

今回は、Astroのバージョン5系を使った。geminiが生成したastroの設定ファイルについて、 tailwindの設定がバージョン4系の設定をgeminiが生成したので、必要に応じて手動で修正した。

新着情報の投稿には、Astroのcontent collectionを使った。 content collectionの設定ファイルなどは、geminiが生成したものをそのまま使った。

文章

サイトのコンテンツ自体も、geminiに指示を出したところ、それっぽいものを生成してくれた。不正確な記述は、都度指示を出し、修正した。

問合せフォーム

問合せフォームは、

問合せフォームは、HTMLで作成
問合せ内容は、javascriptでバックエンドにPOST
バックエンドは、Google App Scripti（GAS）のウェブアプリとして準備。

のように作成した。

フォームのHTML、コンテンツをポストするjavascripti、バックエンドのGAS、それぞれのソースも、geminiが生成した。ただし、geminが生成したjavascriptは、DOMに生成をinnerHTMLで行うなどイマイチな店もあった。 DOMを追加するように修正指示を出したところ、修正されたjavascriptのソースを生成してくれた。 geminiが生成するjavascriptのコードは、一度レビューしてから使用した方が良いだろう。

まとめ

gemini（2.5PRO）を使って、ウェブサイトを作れた。不適切なコードを出力することもあるが、コードをレビューし、適宜修正させれば、コードの品質向上が期待できる。