サイコス・ジャパン株式会社(https://cycos-japan.com)のホームページをの改造。
どうしても製品開発に偏ったページのコンセプト見直し、ソフト作製とITサポータになって、会社のIT部門をなんとかお手伝いしたいと思いをどううまく表現するか?
AIと相談しながら….実録

AIと私の作業分担を明確に
ホームページ改修を主題に、依頼〜要件整理〜デザイン合意〜実装〜完成までを、AIを使い分けて短時間で完走してみました。どれだけAIが私の力になれるのか?どれだけ効率があがるのか?
結論から言うと、効率が跳ね上がった決め手はこれでした。
- Geminiに「要件の穴埋め・質問ヒアリング・仕様書化」をやらせる
- Cursor + Opus 4.5には「考えさせず、実装だけ」を命令する
これまでのありがちな失敗としては、AIに「現状を見て考えていい感じにして」と投げてしまうこと、またはひとつのAIに頼り、考察もコーディングもすべて任せる、そうすると、出力は“無難”になりそのうち、こちらの意図は薄まり、直しが増え、最後は破綻するという罠に陥りがちです。
私もなんどもこの罠に陥り、捨てたプロジェクトは山ほどあります。
しかし、最近はじめた手法に、考察と作業を分ける、という方法がありこれを改めて進めてみます。
具体的にいうなら、人間が決める/Geminiが固める/Opusが書くという分業に徹しいてみたところ、品質もスピードもかなりのレベルで両立ができました。
つまり、顧客を私にし、Geminiをシステム会社のSE、プログラマーであるOpus4.5はSEの指示に従ってコーディングするというプロジェクトを組んでみたわけです。

希望的仕様はコンセプト・ウリへの方向転換
サイコス の、改修前のサイトは「ものづくり・製造・量産」色が強く、この会社がほかに持つ「ソフトウェアや技術全般のサポートを企業のIT・技術担当できる」という部分がフューチャーされていませんでした。とにかく製造支援会社的な要素が強かったのです。
今回の狙いは、これらすべてできることを加え、何でも屋にみえず怪しくないようにする!そしてページ作成は、単にサービスを追加することではなくコンセプトそのものを見直す!ということもあり、さまざまな面から私が顧客になり、できるだけやけわからずにごちゃごちゃとSEに問いかけてみることですすめてみました
Geminiと押し問答を繰り返す中で、Geminiの提案では、極端に怪しくならず、どれだけ日本的にまとめあげられるか?を一番に勧めました。
Geminiは外人です。放っておくと、自己主張を日本人よりしがちで、結構表現も大げさで日本人ではこんな言い方はしないだろう!これは嫌がられるだろう!を平気で提案してきます。日本人があまり好まな強い推しや、控えながらしっかり誠実に伝えるということがどれだけできるのかに挑戦です。

さらに、全く異なる内容も何とか載せてほしいとめちゃぶりをしました。
サイコスの強み=私の強みは、モノづくりとソフト・コンサルです。ただモノづくりの中で得られた、海外パイプ(中国・韓国・台湾・US)やOEM/ODM、ノベルティ提案も、お客様に喜んでいただくという点からは仕事としては私の中でやってきたこと…この、全くちがう分野をどう組み込んでくれるか?そのこともうまく伝えてくれ!と…もすれば、表現を間違えると「何でも屋っぽさ」が出て逆効果になりますがそこにもあえて突っ込んでみました。
方針はこう定義しました。
- 「できることの羅列」ではなく、経営者が理解しやすい“成果の流れ”で見せる
- 「SNS」など軽く見られやすい語は主役にせず、IT/デジタル活用に内包させる
- “コンサル臭”を排除し、現場の裏付け(製造・開発・海外交渉)を視覚と実績で示す
Geminiを使う
ここまでの思いをどれだけGeminiにが聞き取ってくれるのか?まずは様々をGeminiになげかけ、そしてGeminiには「 呼んで自分で整理して結果が出せるように過不足を私にヒアリングをしろ!」と投げかけます。お客様である私は、全部を自分で考えていても息が詰まりますし、それをきれいにまとめようとなんて思ったら永遠に終わりません。ここでAI登場です。
そんな流れのために、まずはGeminiに思いを全部告げた後、「ホームページにまとめ上げたいから整理してくれ!整する上で過不足があったらどんどんヒアリングを繰り返してくれ!しっかり考えがまとまるまでは、プロンプトもなにもいらない!どんどん今から私に質問をしてくれ!」と投げかけまました。そしてすべてが固まってからコーディングに入ります。
つまりGeminiを相棒にしてしまうのです。
最初のつまづき:Geminiが「Opusに考えさせる」
ヒアリングが終わったとGeminiは「それではOpusへのプロンプトを出力します!」との回答で得られたプロンプトがこれ…
# 指示書:トップページのリニューアル
## 前提 現在の `index.html` の構造、クラス名、使用しているCSSフレームワーク(もしあれば)を解析してください。 その上で、以下の要件に基づき、既存のコンテンツを活かしつつ、サイトの構成と内容を抜本的に書き換えてください。
## 目的とターゲット * **目的:** 「製造受託会社」から、「IT・DX・海外展開まで一気通貫で支援する技術顧問(ビジネスパートナー)」へとブランドイメージを刷新する。 * **ターゲット:** 年商10億円以上の中小企業経営者。 * **トーン&マナー:** 「下請け感」や「怪しいコンサル感」を排除。洗練された信頼感、実戦経験に裏打ちされたプロフェッショナルな雰囲気。
## 具体的な構成変更指示(上から順に)
### 1. ヘッダー・ナビゲーション * メニュー名を、より戦略的な階層に変更する。 * `Works` → `Case Study` (課題解決事例) * `Solution` → `Services` (提供価値) * `Company` → `About Advisor` (技術顧問について) * お問い合わせボタンの文言を `技術相談(初回無料)` に変更し、目立たせる。
### 2. ヒーローセクション (FV) [大幅変更] * **構造:** 全画面(または高さのある)スライドショー形式にする。 * **背景コンテンツ (スライドショー):** * 4〜5枚の画像または動画がフェードイン/アウトで切り替わる設定にする。 * **重要:** 各スライドのプレースホルダー画像を用意し、コード内のコメントで「ここにチップマウンターの動画」「ここにAI開発のスクリーン画面」「ここに海外工場の検品風景」など、入れるべき素材の指示を記述すること。 * **キャッチコピー (オーバーレイ):** * スライドショーの上に、白文字で大きく配置する。 * メイン: `技術とグローバル供給網を、御社の「勝てる武器」に変える。` * サブ: `思考から実装まで伴走する技術顧問。ソフト開発35年×自社製品成功の実戦知見を提供します。`
### 3. イントロダクション:Advisor Profile [新設] * ヒーローセクションの直下に新設。 * 吉川代表の写真(※控えめで自然体な写真を入れるためのプレースホルダー画像)を左側に配置。 * 右側に、「なぜ私が技術顧問をするのか」というメッセージを配置。 * 見出し例: `「作る苦労」と「売る苦労」の両方を知る、実戦型CTOとして。` * 本文では、35年のソフト開発、自社でのハード量産、海外交渉の経験に触れ、単なるコンサルではないことを強調。
### 4. コアサービス:Integrated Strategy [既存のSolutionを改修] * 既存の3つの柱を活かしつつ、見せ方を「戦略」へ格上げする。 * セクションタイトルを `Integrated Strategy: 技術を事業成長に繋ぐ3つの軸` に変更。 1. **DX & System Strategy** (旧ソフトウェア開発): 見出しを「経営に直結するDX基盤構築」へ。 2. **Global Supply Chain** (旧製造支援): 見出しを「世界を自社工場化する調達戦略」へ。 3. **Growth Marketing** (旧事業化支援): 見出しを「自社実践に基づく販路開拓支援」へ。 * 各ボックスのデザインを、互いに連携していることが分かるようなデザイン(例:矢印やコネクタで繋ぐなど)にする。
### 5. 実績:Case Study [既存のWorksを改修] * 「モノの羅列」をやめ、「課題解決のストーリー」に見えるようにレイアウトを変更する。 * 各実績に「課題 (Challenge)」「アプローチ (Approach)」「成果 (Result)」の要素を加え(今はダミーテキストでOK)、ビジネス的な価値を強調する。 ### 6. フッター前 CTA * 「お気軽にお問い合わせください」ではなく、経営者向けの強いメッセージに変更。 * 例: `御社の技術戦略、停滞していませんか?現状を打破する一手をご提案します。` * ボタン: `代表吉川との個別相談を申し込む`
## 出力形式 上記の構成変更を反映した、完全な `index.html` のコードを出力してください。CSSの追加・変更が必要な場合は、`<style>` タグ内に記述するか、既存のCSSファイルへの追記内容を明確に示してください。 これをCursorに実行させれば、骨組みは完璧に出来上がります。 出力された結果を見て、「ここのデザインはもっとこうしたい」「この言葉遣いは少し違う」といった微調整をしていきましょう。
それなりに細かい指示はしてくれていますが、これではプログラマは組めません。もっと具体的に落としてくれることを期待していました。例えば 「section tagのここはカットして…」などのように…しかし結局は…
- 現状をOpusに解析させる
- 要望を日本語でざっくり伝える
- Opusに“いい感じ”で作らせる
に見えましたので、「こりゃあかん!しかしこの方式は、サイト改修の現場では失敗する」そう感じ方針を転換、Geminiに次の指示を出します。

ここからが今回のプロジェクトの始まりです。
成功の型:Gemini×Cursor×Opus 4.5を“分業ライン”にする
今回のベストプラクティスは、AIを「相談相手」ではなく「分業ライン」にすることでした。
役割分担(これが一番大事)
- 人間(私):意思決定(ターゲット、言葉、優先順位、やらないこと)
- Gemini:質問ヒアリング、要件の穴埋め、文章構造の整理、プロンプトの仕様書化
- Cursor:改修対象ファイルに直接適用、差分確認、繰り返し実行
- Opus 4.5:HTML/CSS/JSの実装(迷いなく“書く”だけ)
失敗を防ぐ鉄則
- 「考えて」禁止:Opusに分析や提案をさせない
- 曖昧語禁止:「いい感じ」「それっぽく」などを使わない
- やらないことも明記:余計なセクション追加、勝手なデザイン変更を禁止
その他詳細希望をGeminiに伝える
Geminiは何度も私を「外部CTO感」として「代表が腕組みドーン」のような、よくあるコンサル構図を提案してきたりしました。これは却下です。怪しすぎます。この手の演出に警戒します。“実体があるのか?”と疑念を呼ぶからです。
男は黙ってサッポロビール?
- 代表写真は小さめ・自然体(相談しやすい)
- 代わりに、トップ(Hero)に4〜5枚のスライドショーを配置
- 写真はフリー素材感を避け、後で現場素材に差し替える前提でプレースホルダー+コメント
その具体的な指示をGeminiに行いGeminiはOpusに指示を作る。この作業です。
素敵なGeminiちゃん
トップの顔になるコピーは、直感的でわかりやすいことが重要だと思っています。なので私からは、私はわかりやすく「SNS」をメインコピーに入れたいと希望をしました。ところが、Geminiは「経営層には軽く見えるリスクがあるからやめろ!」と言ってきました。SNS運用は誰でも言えるというのです。一方「IT」「DX」は、35年のソフト開発経験の重みと結びつきやすいのでそちらの方がよいというのです。確かに‼
そこで最終的に、トップコピーは自分で考えたものをGeminiに清書してもらい、基本コンセプトは
製品開発から社内DX、ITを活用した販路開拓まで。
御社の「技術担当」として、35年の実戦経験をすべてお使いください。
としました。いい感じです。
Leadershipセクション:タイトルは直球で「私が担当をさせていただきます」
Hero直下のLeadership(代表紹介)は、サイト全体の“信頼の核”になります。ここは飾るより、責任の所在と実績の厚みを、整理して出したい!という私の思いからスライドショーにしました。現在画像はAIで作ったものですが、最後には自分の画像に差し替えるつもりです…が…よくできてますね!
掲載したい骨子(文章はここまで決め切る)
- メインタイトル:私が担当をさせていただきます
- 簡単な自己紹介:1990年8月株式会社キヤミーを創立、2001年サイコス・ジャパンを創立。ソフト開発からモノ作り支援、企業のDX化コンサルを長年経験。…..
- 実績(WORKS):「ソフト開発」「製品開発・製造」「企画〜拡販」の3カテゴリで整理
実績(WORKS)に入れた内容(例)
- ソフト開発:大手電子メーカー半導体販売ツール/大手飲食チェーン基幹・営業支援/大手石油会社 全国連携 製造管理
- 製品開発・製造:携帯電話URLアダプタ(中国工場 1Mpcs)/コンセント式アロマ(中国工場 1Mpcs)/光目覚まし(中国工場 50Kpcs)
- 企画・開発・製造・拡販:プログラミングロボット(SNSを使った拡販まで一貫)
ここから出力されたGeminiのOpusへのプロンプトの例は以下です。参考までに抜粋を張っておきます。
ちなみに全部英語で出てきました。そしてこのプロンプトで作られたOpus君のサイトは、ノーバグで完璧でした….すっごい!
プロンプト抜粋1:思考禁止&勝手禁止(最上段に置く)
# Role
You are an expert web developer.
Strictly follow the instructions.
Do NOT add any creative elements, sections, or copy that are not explicitly requested.
Do NOT analyze the intent; just implement as specified.
プロンプト抜粋2:Heroスライダー(16:9)+文字オーバーレイ
## Hero Section
- Implement a full-width background slider (16:9, 1920x1080).
- 4-slide loop with fade transition.
- Use placeholders and leave code comments for replacement:
Slide 1: Chip mounter / factory automation footage
Slide 2: AI-assisted software development / IDE screen
Slide 3: Overseas factory inspection / global logistics scene
Slide 4: Sales growth / digital marketing / product success scene
- Overlay text (centered, high readability):
Heading: "製品開発から社内DX、ITを活用した販路開拓まで。"
Sub: "御社の「技術担当」として、35年の実戦経験をすべてお使いください。"
- Add a subtle dark overlay layer or text shadow to keep readability on images/video.
プロンプト抜粋3:Leadershipセクションを“覚悟+経歴+実績”で再構成
## Leadership Section
- Main title: 「私が担当をさせていただきます」
- Intro paragraph (use this exact Japanese text):
"1990年8月株式会社キヤミーを創立、2001年サイコス・ジャパンを創立しソフト開発からモノ作り支援、企業のDX化コンサルを長年経験してきました。キヤミーは経営に徹し、2026年よりサイコス・ジャパンにて本格的に御社のビジネス支援に強化伴走を致します。"
- Works list in a 3-category grid:
1) ソフト開発:
- 大手電子メーカ 半導体販売ツールソフト
- 大手飲食チェーン 基幹システム・営業支援
- 大手石油会社 全国連携 製造管理
2) 製品開発・製造:
- 携帯電話URLアダプタ(中国工場 1Mpcs)
- コンセント式アロマ(中国工場 1Mpcs)
- 光目覚まし(中国工場 50Kpcs)
3) 企画・開発・製造・拡販:
- プログラミングロボット(SNSを使った拡販まで一貫)
- Emphasize numbers (1Mpcs, 50Kpcs, 1990/2001/2026) subtly with typography.
- Keep the representative photo small and professional (approachable, no “consultant pose”).
プロンプト抜粋4:禁止事項(勝手な増築を止める)
## Constraints
- Do not add new sections outside of these instructions.
- Keep the folder structure and asset paths unchanged.
- Avoid “slick consultant” visual tropes.
- Use generous whitespace and an executive-grade layout.
- Output: updated HTML/CSS/JS only.
短時間で完成できた勝因
今回の学びを一言でまとめるなら、これです。
AIに考えさせるほど、修正が増える。
人間が決め切るほど、AIは速く正確に書ける。
Geminiに「不足を質問させる」ことは有効でした。なぜなら、質問は“穴埋め”のためであり、勝手な創作ではないからです。
一方でOpusは、実装担当。設計を任せると、どうしても“提案”が混ざってしまう。
だから、設計は人間+Geminiで固め切り、Opusには命令として渡す。この分業が、スピードと品質を両立させました。
※ただあとあとプロンプトをゆっくり読んでみると、まだまだ足りなかったなぁと反省はしています。でもよくここまでやってくれるもんだ。
再現性のためのチェックリスト(次回も同じ速度で回す)
- トップの狙い(誰に何を伝えるか)を最初に1文で固定したか
- やることの順番を固定し、セクション単位で命令できているか
- 「やらないこと(禁止事項)」を明示したか
- 画像素材は“後差し替え前提”で、プレースホルダー+コメントにしたか
- メインコピーは“軽さ”が出る単語を避け、重みのある語に寄せたか
- 私の気持ちは伝わっているか?伝えられているか?
おわりに:Gemini×Cursor×Opusは「AI倍速コーディング」の現実解
今回の実録で確信したのは、Gemini・Cursor・Opus 4.5は、雑に使うと“普通”ですが、分業させると“別物”になるということです。
人間が決める → Geminiが仕様に落とす → Cursor+Opusが書く
この流れに徹すれば、サイト改修は「悩む時間」を削り、実装を一気に進められます。
そして、曖昧さが消えたプロンプトは資産になります。次回以降の改修も、同じ型で回せます。
次回は、Hero直下の導線(CTA)や、Works(実績)を「課題→アプローチ→成果」で見せるケーススタディ化、さらに“海外パイプ”を怪しく見せない言い回しの設計まで、同じ分業で詰めていきます。

コメント