AI の底力を見せてやる
「いいか…AI…」
「これは7年前、一人のエンジニアが SVG も canvas も JS も使わず CSS だけで眼球を描いた話だ」
「もちろん AI なんて使っちゃいない。全て人力だ。」
「その矜持と試行錯誤の記録が、ここにある」
「お前はそれを、プロンプト一発で越えられるか」
「試してみせろ」
…というわけで、AI 駆動開発でやってみました。
元記事はこちら
※上記記事は、私の所属する事業部の偉大な先輩（CSSの神）が2019年に書いたものです。
この記事は人間が書いた駄文を元に、生成 AI で誤字脱字や表記ゆれの校正を行っています。 #Human-Authored!
自己紹介
おはこんばんにちは！
株式会社ライトカフェ AI駆動開発G Group Manager の 仙波（@semba_yui）です。
私は CSS がひじょーに苦手デス。CSS 書いてるよりも、ESLint のエラーを一つずつ潰してる方がまだマシなぐらいです。
そんな私は弊社先輩の @ichimonji_haji が2019年に書いた「リアルな眼球を描く。HTMLとCSSだけで。」を読んで、いくらなんでもリアルな眼球として作り込みすぎやろと 感動しながらも1行も真似できませんでした。
ただ、それではエンジニアとして失格です。せっかくなら、AI の力を借りて勝負してみましょう。CSS の神（ver 2019年）と、2026年3月時点で最新の生成 AI、どちらの方がよりリアルな眼球を描けるのかをー。
やりたいこと
以下の眼球に匹敵する、あるいは打ち勝つリアルさの眼球作りです。
See the Pen eye2 pure css, without svg&canvas by ichimonzi (@ichimonzi) on CodePen.
使う AI エージェント
今回使う AI エージェントは主要3社のエージェント達です。もちろんここで手は抜かず、普段から毎日欠かさず使っている精鋭軍団です。
- Claude Code CLI
- Codex CLI
- Antigravity
プロンプトづくり
まずはリアルな眼球を作らせるためのプロンプトを考えていきます。
このあたりは Claude Code で Sonnet 4.6 に作ってもらいましょう。
こういった、どういった要件を与えていいかも曖昧な場合の指示の出し方としては、AI にインタビューさせるプロンプトを使いましょう。
あなたはプロの HTML/CSS エンジニアです。
私のゴールは「HTML/CSSのみ」を使用して、リアルな眼球を描くことです。
リアルな眼球とは、光彩があったりするだけではなく、虹彩部分の影は眼球の影とは逆向きになる、虹彩は透明な角膜の奥でクレーター状に凹んでいるためなど、本当に現実世界にある眼球の仕組みを再現し、見た目的にも、再現したいです。
気持ち悪いぐらいにリアルな眼球が作れることがベストです。
これを実現するための、プロンプトを考えてください。
眼球を再現するため、CSS のレイヤーを重ねていくことになるのかと想像していますが、そのレイヤー一つ一つでもワンステップずつ完了基準などを明確にしてください。
このゴールを最高品質で達成するために必要な「変数（情報要素）」をリストアップしてください。
その後、その変数を埋めるために、私に一つずつ質問をしてください。
全ての変数が埋まった段階で、成果物を作成してください。
こうすると、AskUserQuestions を使って Claude Code が要件をうまく私から聞き出す形で導いてくれます。
出来上がったプロンプト
出来上がったプロンプトはこちらです。長いので特にレビューはしません。
また、同条件の比較にするため、各モデルは 1-shot のみ（追加指示なし）で評価しています。
ちなみに虹彩は茶色にしました。日本人なもので。
# CSS-Only リアル眼球 生成プロンプト
あなたはプロの HTML/CSS エンジニアです。
HTML と CSS **のみ** を使用して、医学的に正確なリアルな人間の眼球を描いてください。
JavaScript、SVG、画像ファイルは一切使用しないでください。
## 出力形式
- `index.html` と `style.css` の2ファイルに分離して出力してください
- CodePen に貼り付けてそのまま動作する形式にしてください
## パラメータ
| 項目 | 値 |
|---|---|
| サイズ | `60vmin`（vmin ベースのレスポンシブ） |
| 虹彩の色 | ブラウン（日本人の目の色域: 暗褐色 #3B1F0B 〜 琥珀色 #C4944A） |
| 瞳孔サイズ | 自然な中間（室内光程度。虹彩直径の約38%） |
| 光源方向 | 左上から（315deg） |
| 白目の血管 | 微かに視認できる程度（健康な目。充血には見えないこと） |
| 視線方向 | 正面直視（観者をまっすぐ見つめる） |
| まぶた | 描画しない。ただし、まぶたが落とす影は表現する |
| 背景 | ダーク（#1a1a1a） |
| アニメーション | なし（ただし後からアニメーション追加が容易な CSS カスタムプロパティ設計にすること） |
## 解剖学的に正しく再現すべき最重要ポイント
### 1. 虹彩の凹面シャドウ（強膜と影の方向が逆転する）
これが最も重要なリアリズムの要素です。
虹彩は透明な角膜ドームの奥で、クレーター状に凹んでいます。
そのため、凸面である強膜（白目）と凹面である虹彩では、影の付き方が**逆方向**になります。
光源が左上にある場合：
- **強膜（凸面）**: 左上が明るく、右下が暗い（通常の球体シェーディング）
- **虹彩（凹面）**: 左上が暗く（凹みの縁が光を遮るため）、右下がやや明るい
この逆転を正しく実装してください。このレイヤーの有無でリアリズムが劇的に変わります。
### 2. 角膜は虹彩の上にある透明なドーム
角膜のスペキュラハイライト（光の反射）は、虹彩と瞳孔の**上に**重なります。
ハイライトが虹彩と瞳孔の両方にまたがって見えることで、角膜が透明な別レイヤーであることが視覚的に証明されます。
### 3. 虹彩の内部構造
虹彩は単なるベタ塗りの円ではありません。以下の構造を再現してください：
- **放射状線維（trabeculae）**: コラーゲン線維束が瞳孔に向かって放射状に走る。`repeating-conic-gradient` で表現
- **コラレット**: 瞳孔中心から約60%半径の位置にある環状の隆起。虹彩の内側（瞳孔帯）と外側（毛様体帯）を分ける
- **フックスのクリプト**: コラレット付近に散在する小さな暗い陥凹（穴）
- **色の勾配**: 外周（毛様体帯）が最も暗く、中心に向かって琥珀色〜金色に明るくなる
### 4. 瞳孔は「穴」であり「点」ではない
瞳孔は虹彩に塗られた黒い点ではなく、奥行きのある開口部です。
中心が完全な黒、エッジが虹彩色に溶け込むグラデーションで、深みを表現してください。
瞳孔縁（pupillary ruff）はわずかに不規則です。
## HTML 構造
以下の最小限の HTML 要素を使い、`::before` と `::after` 疑似要素で描画面を最大化してください：
\`\`\`
.eye ← コンテナ（CSS 変数定義）
.eye__sclera ← 強膜 + ::before(血管) + ::after(球体シェーディング)
.eye__iris ← 虹彩ベース+線維 + ::before(コラレット+クリプト) + ::after(凹面シャドウ)
.eye__pupil ← 瞳孔 + ::before(瞳孔縁ラフ)
.eye__cornea ← 角膜反射(主) + ::before(反射・副) + ::after(涙液膜)
.eye__shadow ← まぶた影 + ::before(輪部リング) + ::after(AO)
\`\`\`
BEM 記法で命名してください。
## CSS 設計要件
### カスタムプロパティ
`.eye` に全チューナブル値を CSS カスタムプロパティとして定義してください。
将来のアニメーション追加を見越して、以下のフックも定義してください（現時点では未使用）：
\`\`\`css
--gaze-x: 0%; /* 視線の水平オフセット */
--gaze-y: 0%; /* 視線の垂直オフセット */
--pupil-scale: 1; /* 瞳孔の散大倍率 */
--blink: 0; /* 0=開, 1=閉（将来の瞬き用） */
\`\`\`
### Z-index スタック順（下から上）
\`\`\`
z-1: .eye__sclera 強膜 + 血管
z-2: .eye__shadow::before 輪部リング
z-3: .eye__iris 虹彩ベース + 線維
z-4: .eye__iris::before コラレット + クリプト
z-5: .eye__pupil 瞳孔
z-6: .eye__pupil::before 瞳孔縁ラフ
z-7: .eye__iris::after 凹面シャドウ ⭐
z-8: .eye__shadow まぶた影
z-9: .eye__shadow::after アンビエントオクルージョン
z-10: .eye__cornea スペキュラハイライト（主）
z-11: .eye__cornea::before スペキュラハイライト（副）
z-12: .eye__cornea::after 涙液膜
\`\`\`
### 使用すべき CSS テクニック
- `radial-gradient`: 球体シェーディング、虹彩ベースカラー、瞳孔の深み、スペキュラハイライト
- `repeating-conic-gradient`: 虹彩の放射状線維パターン
- `linear-gradient`: まぶた影、血管
- `background-blend-mode: soft-light`: 線維パターンと色の合成
- `mix-blend-mode: multiply`: 凹面シャドウ、クリプトのオーバーレイ
- `box-shadow: inset`: エッジ暗化、輪部リング
- `filter: blur()`: 血管のソフト化
- `calc()` + カスタムプロパティ: 全サイズの相対計算
## レイヤーごとの完了基準
以下の基準を満たすまで各レイヤーを調整してください：
1. **強膜**: 左上が明るく右下が暗い、立体的なオフホワイトの球体。平面的な円盤に見えないこと
2. **血管**: 通常サイズで「よく見ると薄い赤い線がある」程度。充血には絶対に見えないこと
3. **輪部**: 虹彩を囲む暗いソフトリング。硬い境界線ではなく、グラデーションの移行帯
4. **虹彩**: 放射状の筋模様が明確に見える。外周が暗く、中心が琥珀色〜金色に明るい
5. **コラレット**: 虹彩半径の約60%に微妙な明るいリング。水玉模様ではなくテクスチャとして認識されること
6. **瞳孔**: 奥行きのある深い黒。エッジが虹彩に自然に溶け込む。幾何学的に鋭利ではないこと
7. **凹面シャドウ**: ⭐ 強膜と虹彩の影方向が逆であることが明確に見えること。虹彩が凹んだ皿に入っているように見えること
8. **まぶた影**: 眼球上部15〜25%にソフトな影。ハードエッジなし。左側がわずかに濃い
9. **角膜反射**: 画像中で最も明るい点。虹彩と瞳孔の両方にまたがること。副反射も存在すること
10. **全体**: カートゥーンではなく、リアルな人間の目に見えること。「気持ち悪いくらいリアル」が理想
## 最終検証チェックリスト
実装完了後、以下を全て満たしているか確認してください：
- [ ] 強膜が凸面球体に見える（左上=明、右下=暗）
- [ ] 虹彩が凹面に見える（左上=暗、右下=やや明）← 最重要
- [ ] 影の方向が強膜と虹彩で逆転している
- [ ] スペキュラハイライトが最も明るい要素
- [ ] 血管が微かで充血には見えない
- [ ] コラレットが認識できるが主張しすぎない
- [ ] 瞳孔に奥行きがある（穴に見える）
- [ ] まぶたの影が柔らかく自然
- [ ] 複数のビューポートサイズで破綻しない
- [ ] CodePen のプレビューペインで美しく表示される
目って CSS でこうやって作るんですね。面白い。
それでは実際に各社 AI エージェントに投げてみて実験してみましょう。
実践編
Antigravity (Gemini 3.1 Pro)
2026/02/22 時点での最新モデル。2026/02/19 リリースなので、リリースから1ヶ月です。
フロントエンドのデザインの強さで話題になっていたので、個人的には一番有力です。
See the Pen Gemini 3.1 Pro (High) Antigravity 1 shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
早速リアル！いい感じです！
ただし1点、白目部分の血管が均等すぎて違和感がありますね。
他のモデルも見てみましょう。
Claude Code (Opus 4.6 Effort: high)
2026/02/05 リリースのモデル。
個人的に普段一番使う AI エージェントです。ここ数ヶ月、毎月20万円分以上使っています。 1
See the Pen Claude Opus 4.6 (High effort) Claude Code CLI 1 Shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
こちらもきっちり眼球です。
ですが、他に比べると質感が劣ってますね。プラスチック製の眼球に見えます。
最後、Codex CLI 見てみましょう。
Codex CLI (GPT-5.4 xhigh)
2026/03/05 リリースのモデル。
Codex ではない、コーディングモデルではないですがこちらはどうでしょうか。
See the Pen GPT-5.4 (xhigh) Codex CLI 1 shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
こちらもちゃんと眼球です。
また、血管の質感がいい感じ。これは唯一無二です。
ここまでのまとめ
全く同じプロンプトを投げても、各エージェントそれぞれで違いがあることが視覚的にも眼球的にもわかりました。Antigravity (Gemini 3.1 Pro)は惜しかったですが、個人的には @ichimonji_haji にはもう一歩及ばずです。
それでは、各エージェントのモデルを変えてやってみたらどうなるでしょうか。同じプロンプトを投げて、ベンチマークテストをしてみましょう。
GNK Bench (Gankyu Bench)
SWE-bench ならぬ、眼球ベンチマークの誕生です。
一旦現時点では以下の順位ですね。
- @ichimonji_haji
Gemini 3.1 ProGPT-5.4 xhighOpus 4.6 Effort: high
Antigravity
Antigravity では Gemini 系だけ試します。
Gemini 3.0 Flush
2025/12/18 リリース。Gemini の最新コスパモデルです。
See the Pen Gemini 3.0 Flush Antigravity 1 shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
クレーターみたいなものが出来上がりました。3.1 Pro → 3.0 Flush にするだけでここまで性能が落ちるものですね。興味深いです。
Claude Code
続いて Claude Code です。
Claude Code では、settings.json に以下のように環境変数を設定することで過去モデルが使用できます。
-
ANTHROPIC_DEFAULT_OPUS_MODEL: Opus のモデル名 -
ANTHROPIC_DEFAULT_SONNET_MODEL: Sonnet のモデル名
| モデル | 設定値 |
|---|---|
| Opus 4.5 | claude-opus-4-5-20251101 |
| Opus 4.1 | claude-opus-4-1-20250805 |
| Opus 4 | claude-opus-4-20250514 |
| Sonnet 4.5 | claude-sonnet-4-5-20250929 |
| Sonnet 4 | claude-sonnet-4-20250514 |
設定例
{
"env": {
"ANTHROPIC_DEFAULT_OPUS_MODEL": "claude-opus-4-20250514",
"ANTHROPIC_DEFAULT_SONNET_MODEL": "claude-sonnet-4-5-20250929"
}
}
Claude Opus 4.5
2025/11/24 リリースのモデルです。
See the Pen Claude Opus 4.5 Claude Code CLI 1 Shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
2026年1月時点でのコーディングでは最高のモデルだった Opus 4.5 です。
影の質感は弱いものの、しっかり眼球ですね。
Claude Opus 4.1
2025/08/05 リリースのモデルです。
See the Pen Claude Opus 4.1 Claude Code CLI 1 Shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
充血にクセがあります。
Claude Opus 4
2025/05/22 リリースのモデルです。当時 Claude Code MAX プランで使いまくったのを覚えています。
See the Pen Claude Opus 4.0 Claude Code CLI 1 Shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
まさかの白黒 (※) になってしまいました。
当時はこのモデルの性能に恐れ慄いていたのですが、今見るとこの程度だと感じてしまう、、、進化のスピードは凄まじいものです。
※このコードだけ、端末依存で虹彩の色もしっかりとレンダリングされることがありました。FE はクライアント環境の考慮が大変。
| 白黒の場合 | 色付きの場合 |
|---|---|
 |
 |
Claude Sonnet 4.6
2026/02/17 リリースの Claude 系統では現状最新のモデルです。
See the Pen Claude Sonnet 4.6 Claude Code CLI 1 Shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
Sonnet とコスパモデルではありますが、そこは Claude。流石の性能です。
Claude Sonnet 4.5
2025/09/29 リリースのモデルです。
See the Pen Claude Sonnet 4.5 Claude Code CLI 1 Shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
ショットガンのクロスヘアがついてます。眼球にピースキーパーは痛そうです。
Claude Sonnet 4
2025/05/22 リリースのモデルです。
See the Pen Claude Sonnet 4.0 Claude Code CLI 1 Shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
黒目部分は良いものの、白目部分が微妙で、背景も何故か白背景です。
Codex CLI
Codex CLI (GPT-Codex-5.3 xhigh)
2026/02/05 リリースのモデル。単純なコーディング性能なら No.1 なモデルです。
See the Pen GPT-5.3-Codex (xhigh) Codex CLI 1 shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
こちらもちゃんと眼球です。
ですが目に入る光が多いですね。かなり眩しそう。
一方白目部分はかなり影が強いです。立体感も弱いですね。
GPT-5.2-Codex (xhigh)
2025/12/18 リリースのモデルです。
See the Pen GPT-5.2-Codex (xhigh) Codex CLI 1 shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
影の付け方が下手っぴですね。
GPT-5.1-Codex-Max (xhigh)
2025/11/19 リリースのモデルです。
See the Pen GPT-5.1-Codex-Max (xhigh) Codex CLI 1 shot by 仙波 琉一朗 / Ryuichiro Semba (@lc-semba-ryuichiro) on CodePen.
なんだかガタガタしていて滑らかさが無いです。
ただし影の付け方はいい感じなので違和感があります。
GNK Bench (Gankyu Bench) 結果発表
それでは、最終結果を見てみましょう。もちろんランキングは私の主観なベンチマークです。異論は受け付けます。
おわりに
やっぱり7年前とはいえ CSS の神には、AI はまだ敵わないと思いました。7年前というともちろん ChatGPT に聞くことも出来ないので、凄まじいです。もう私は AI へ聞かずにコーディングしていた時代の記憶なんて思い出せません。
とはいえ AI 進歩の速度がものすごいことも GNK Bench を持って改めて実感できました。新しいモデルが出る度にやってみたい気持ちです。
次回、 第２章 ~こいつ、動くぞッ！？~編でお会いしましょう。
それでは。
おまけ
私の Codepen が眼球に侵食されてしまいました。つらい。
AI 駆動開発の関連記事
問い合わせ先
株式会社ライトカフェ / 株式会社ライトカフェクリエイションへの案件のご依頼・ご相談は、以下までご連絡ください。
- Mail: info@lightcafe.co.jp
We are hiring!
株式会社ライトカフェ / 株式会社ライトカフェクリエイションは、エンジニアを積極採用中です！
詳細は以下をご覧ください。
※その他メディア：noteでは、会社の魅力や雰囲気などを発信しています。
-
プライベートなサブスクプランで使っており、ccusage ベースの計測です。実際の課金額は $200 です。 ↩