gracetory’s blog

東池袋にある合同会社グレストリのエンジニアブログです

コーポレートサイトリニューアル計画(生成AI使用)

はじめに

こんにちは。エンジニアのgrnishiです。師走が始まりました。師走の由来には色々説があるそうですが、最も有名な説は「師が走り回るほど忙しい月」でしょうか。師とは僧侶の事ですね。

ちなみにDecemberの由来はラテン語の「decem」だそうです。decemとは10という意味で、古代ローマでは3月が年の始まりで、10番目の月だったとか。デシリットルやデシベルなどの「deci」や10種競技の「Decathlon」も同じ由来だそうです。

本題

プログラミング言語「なでしこ」が今年20周年との事で、なにか書こうかなと思って手を付けはじめた頃に仕事が忙しくなって頓挫しました。

なんとなくテンションが上がらないので別のネタを探していたところ、コーポレートサイトをリニューアルしようかなと思いました。もう7年ぐらい今の形なので。

数年前、ChatGPTが話題になり始めた頃に一度作らせてみたのですが散々な結果だったことを思い出しました。

もう2025年ですし、それなりに作れるんじゃないかな?と思っていくつかの生成AIを使ってコーポレートサイトを提案してもらいました。

使用AI

  • ChatGPT 5.1 Thinking
  • Claude Opus 4.5
  • Gemini 思考モード(3 Pro 搭載)
  • Copilot Think Deeper

使用プロンプト

下記のような雑なプロンプトでお願いしました。 とりあえず実験ですから。

生成AIを使ったコーポレートサイトのリニューアルを考えています。 今のコーポレートサイトのURLはhttps://www.gracetory.co.jp/ いい感じにかっこいいサイトを作ってください。 HTML+CSS+JSで出力してください。

サービスによって追加で質問を求めてきたり、無言で作り始めたりと色々ありました。

ChatGPT

最初はChatGPT。まずは出来上がったサイト。

playground.gracetory.jp

プロンプトを入力したところ、

  1. ブランディング強化型(企業イメージ・信頼性重視)
  2. 採用強化型(エンジニア採用導線を強化)
  3. 受託開発の実績重視型(問い合わせ・リード獲得)
  4. 上記を統合した“総合型”

という選択を迫られました。 それ以外は特に聞かれる事もなく生成が始まりました。

bootstrapなどのCSSフレームワークを使ったかのようなありふれたデザイン。

派手さは無いけどシンプルも良いのか。

Claude

次はClaude。こちらが出来上がったサイト。

playground.gracetory.jp

プロンプトを入力したところ、

  1. 目的の明確化: 採用強化、ブランディング向上、問い合わせ増加、情報更新のしやすさ改善
  2. デザイン方向性の確認: モダン/シンプル/テクノロジー感
  3. カラー: 現在のロゴやブランドカラー
  4. 参考サイト: 気に入っているデザインのサイト

このあたりについて確認がありました。答えると作ってくれました。

色を聞かれた事もあり、グレストリカラーを採用してくれました。

特に可も無く不可も無く。

Gemini

3つ目はGemini。下が出来上がったサイト。

playground.gracetory.jp

「築板金(屋根・外壁・雨樋など)やリフォームを手掛ける専門性の高い企業様」と言われて挫折しかけたのですが、正しい情報を伝えるとその後はせっせと作ってくれました。

基本的な作りはこれまで同様。シンプルな感じです。tailwindを採用したみたいです。

Copilot

サイトはCopilot。出来上がったサイトはこれ。

playground.gracetory.jp

こちらは何も言われずに無言でソースコードだけ提示されました。男前。

内容としては黒ベース。ちょっと暗い感じはするがこれが良いのか。

CSSも含めて1ファイルなので手軽には使えそう。

まとめ

結果としては、どれも基本的には同じものが出来上がった感があります。

悪く言えば特徴が無い。尖った事が苦手なのか、はたまたプロンプトが雑すぎたのか。

しかしながら、数年前に試した時から比較すると圧倒的に進化している感じはします。

プロンプトをもう少ししっかり考えた上で、リニューアル作業を続けようかと思います。年明けには。