コーポレートサイトをリニューアルしました
2025年6月1日
株式会社tolvの宍戸陽介です。
この度、株式会社tolvのサイトをリニューアルしました。
以前リニューアルしたかったのですが、自社のサイトということもあり、なかなか進まなかったのですが、今回は改めて時間をとってリニューアルしました。 サイトの構成自体は大きくは変えてないのですが、今まで、noteを利用していたBlogを自社で持つように変更しています。
下記で、Junieの話とかしてるのですが、成果物のスクショを全く撮ってなかったです。。。
Jetbrains Junieを使ってみた
今回、どうして時間をとってリニューアルしたのかというと、JetbrainsのJunieが無料枠で使えるようになったのが要因の一つでした。
プロンプトを書けば、よきに計らって開発をしてくれるそうなので、面白そうだなと思い、下記のようなプロンプトで動かしてみました。
下記のサイトをNuxt Contentでリプレースしたいです。
https://tolv.jp
必要要件は
- デザインはなるべくそのまま
- CSSはTailwindのバージョン4系を利用
- 必要ページは
- topページ
- ブログ一覧
- ブログ詳細
- プライバシーポリシー
- ブログの機能を付けてください
- ブログは、Nuxt Contentの仕様に沿って、Markdownで記載します。
- 各ページ、ヘッダーは固定してください
ぼちぼち時間はかかったのですが、一通り動くものは作成してくれました。
今頃試してるのかって感じかもしれないですが、思わす「おぉ、すげぇ」って言ってました(笑)
Laravelを触りたての頃に、php artisan make:authでログイン機能が一発でできる感動に近かったです。
ただ、問題点もあって、バージョンなどは指定していなかったのですが、Nuxt Contentのバージョン3系ではなく、バージョン2系で作られていました。
サイトの構築
大体感触が掴めたので、新規にプロジェクトを作成し、ライブラリのバージョンやサイトのカラーや、各ページのざっくりとした仕様などを出して、最初よりも細かくプロンプトを記載しました。 下記が、実際に投げたプロンプトです。(多分、公開しても大丈夫なはず)
## 概要
- 株式会社tolvのコーポレートサイトをリニューアルします。
- リニューアルするサイトは、[このサイト](https://tolv.jp)です。
- リニューアルするサイトをベースに作成してください
## 技術仕様
- nuxt content : ^3.5.1
- node: v23.11.0
- npm: 11.3.0
- tailwind css: v4系
- できる限り、Atomicデザインを用いて、component化してください
- 画像ファイルは仮のもので作成してください
## 必要ページ
- 必要なページは、下記になります。
- トップページ
- blog一覧
- blog詳細
- プライバシーポリシー
### 全体仕様
- ヘッダーは固定
- フッターはコンテンツが短い場合でも、windowの下にくっつくように配置
- メインカラーは`#669b76`
- サブカラーは`#3a7e4e`と`#99bc99`
## トップページ
- ヒーローイメージセクション
- ABOUT USセクション
- 企業ロゴの配置
- 文章は下記仮のものを入れてください
- OUR WORKSセクション
- 要件定義・システム提案
- システム開発
- システム改修
- システム保守・運用
- SERVICESセクション
- Charis（カリス）
- 詳細については仮ものを入れてください
- サービスへの外部リンクを貼ります
- Rapid Send Assistant
- 詳細については仮ものを入れてください
- サービスへの外部リンクを貼ります
- BLOGSセクション
- nuxt contentで作成されたblog記事の最新の6件の記事を出してください
- 最新の定義は、markdownで作成されたファイルのSyntaxに記載されているdateを基準にしてください
- OGimageとブログのカテゴリ、本文の一部を出してください。
- CONTACTセクション
- 後から問い合わせフォームを埋め込むので、セクションだけ作成してください
### ブログ一覧
- blogの最新順で12件ずつ表示してください。12件を超える場合は一覧の下にpagenateを付けてください
- カテゴリで絞り込めるようにしてください。その際に絞り込みを解除できるようにしてください。
- カテゴリの絞り込みは、単一選択にしてください。
### ブログ詳細
- 選択された記事を表示してください
- 次の記事へのリンクや、前の記事へのリンクは不要です。
- 戻るリンクを下部に配置し、ブログ一覧からの遷移の場合は一覧に戻り、トップからの遷移はトップに戻るようにしてください。
- ブログ一覧に戻る場合は、ブログ詳細に遷移する前の状態を維持してください。維持するものは、選択されたカテゴリとページです。
### プライバシーポリシー
- nuxt contentの機能で内容を作成するので、ページを作成してください。
こんな感じで、最初よりも細かく指定しました。
実際に作成されたページの構成なども、大体イメージに近いもを作成してくれました。
感じ的には、一発でモックが作成されたような感じです。
今回は、既存のサイトを参考にさせているのと、既存サイトより構成が大きく変わっていないので、イメージに近いものが出来上がったのかもしれないです。
ただし、Nuxt Contentのバージョンを指定しても各コンポーネントの書き方などは、バージョン2で作成されている感じで、データを読み込む部分は動作していませんでした。
コンポーネントに分かれたHTMLが出来上がったような感じです。
Junie自体は、テストまで実行してくれるようなので、テスト実行まで依頼をしたら改善するのかもしれないですね。
サイトの修正
作成されたサイトを修正していくのですが、Jetbrains AIのクレジットを消費。
ここからは、ChatGPTを使ってバイブコーディング(っていうのかな?)をしながら整えていきました。
基本的に、修正したい内容とソースコードを投げて、回答を確認しながら実装という感じです。
感想
正直なところ、JunieとChatGPTがあることによる開発の恩恵は、十分にあるなと思いました。
Junieでシステムの雛形を作成して、エラーが発生したらChatGPTにとりあえず投げて回答をもらい、回答を見ながら、ソースを確認したりする流れは、結構やりやすかったです。
今までのググる作業がChatの対話になったようなイメージです。
とはいえですが、回答が間違っている事も多く、今回特に感じたのは、Next Contentのバージョン2で回答をしたがる事が多かったです。
なので、やはり開発の基礎的なものが必要であって、それを前提にバイブコーディングを行なっていかないといけないなと思いました。
最近は、バイブコーディングで開発経験がなくても云々とか聞きますが、裏側は大丈夫なのかと思ってしまいますね。