見出し画像

Claude Codeの軽快さと、Codexの修復力は別の話だった

以前作ったウェブページに、スマホ表示時にロゴが出ない箇所があり、前から直そうと思っていた。そこで今回は、そのちょっとしたフロント修正を題材に、Claude Opus 4.7にアップデートされたClaude Codeと、アップデート後のCodexアプリを試してみた。

Claude Codeは無言でシャカシャカ進める軽快さがある一方、詰まると急に応急処置寄りの提案へ滑っていく場面がある。逆にCodexは修復力はかなり高いのに、逐一入ってくる“報連相”がとにかくうるさい。小さな修正なのに、両者の性格差がかなりはっきり出たので、その流れを書いていく。


スマホヴューにロゴが非表示になる問題をClaude codeとCodexで解決しようとした

Claude codeのターン

Claude Codeはレビューを出しながら、修正されていく経過をログとして表示していく。

そのまま軽快に修正を終え、完了報告まで出してくれる。

ただし、このページは作成当初からPCのスマホビューではロゴが見えており、実機(iPhoneやPixel)でのみ非表示になる問題があった。そこでその点を指摘すると、キャッシュが怪しいと言い始める。しかし、こちらは毎回シークレットウィンドウで確認しているため、キャッシュの影響は考えにくい。

すると今度は問題の前提をすり替え、ロゴをSVGからPugに変更する提案をしてきた。

Codexのターン

そこでCodexに切り替えた。Codexが最初に出してきた「text-indent: -9999999999rem; をやめて、font-size: 0; で文字だけ消す」案は失敗に終わった。その後、ロゴを配置している要素に赤い背景を敷いて可視化する方法に切り替えた。

つまりCodexは、まず視覚的に問題を切り分ける状態を作った。

このあたりから特徴がはっきりする。Codexは作業ごとに、「なぜそれをするのか」「終わると何が変わるのか」を逐一説明してくる。

赤い背景の中に白いロゴが浮かび上がったため、Codexは仮で入れた赤背景を外し、次の修正に進んだ。

最終的に以下のCSSに到達した。

h1 {
  width: 50vw;
  height: 32vw;
  padding-top: 0;
  font-size: 0;
}

h1 a {
  display: block;
  opacity: .95;
  width: 100%;
  height: 100%;
  background-image:
    url(../img/Akikito_logo.svg),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 42%, rgba(0, 0, 0, 0) 72%);
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: contain, 100% 100%;
  transition: 1.0s;
}

ここでロゴが正常に表示され、「やっと見れた」と伝えると、Codexはさらにこのような説明を続ける。

今やること:追加修正は不要です」
なぜやるか:シークレットタブは古いCSSの影響を受けにくいため、正しく表示されていれば信頼性が高いです」

正直、ここまで言う必要はあるのかと思った。せっかく修復力が高いのに、この過剰な説明はノイズになりうる。これを毎回受けると、使い続けるのがしんどくなる人も出てくるはずだ。ここで思ったのは、Codexは「内部状態を逐次読み上げること」自体に価値を置いている設計なのではないか、という点だ。


Codexは「内部状態を逐次読み上げること」自体に快感がある設計だと思った

これを例えば、

「追加修正は不要。表示系は安定域に入った。シークレット環境で初期描画が正常なため、旧CSS干渉の可能性は低い。現行のstyle.cssとindex.htmlを維持して問題ない。」

のようにすれば、同じ情報でも“作戦行動ログ”として読める。CodexはCLI・IDE拡張・Web・Appと複数の接点を持っているため、このような演出との相性はかなり良いはずだ。

「追加修正は不要。表示系は安定域に入った。シークレット環境で初期描画が正常なため、旧CSS干渉の可能性は低い。現行の style.css と index.html をそのまま維持して問題ない。これでスマホ表示でもロゴ中央を継続できる。」

日本語圏だとその可観測性を「訓練中の実況」じゃなくて、「作戦行動ログ」として見せた瞬間に、一気に刺さる層が出ると思う。たとえば「今やること」より「確認開始」、「なぜやるか」より「主因を再判定」、「どこを見るか」より「参照対象は現行 style.css / index.html」、「終わると何が起きるか」より「表示シーケンス安定」みたいにすると、同じ情報なのに急にモビルスーツ搭乗感が出る。Codex はCLI、IDE拡張、Web、Appと複数面で使えるから、そういう演出との相性もかなりいい。

結論として、問題は説明量ではなく語彙設計だと思う。説明を減らすのではなく、「どう見せるか」。そこを外している。

現在のままだと、Claude Codeは“同僚”、Codexは“偏屈な監査役”という印象になりがちだが、もしログ表現を再設計すれば、Codexは「操縦系インターフェース」に化ける可能性がある。ただし、それは明確にオタク層寄りの最適化になるため、マスユーザー獲得にはつながらないかもしれない。とはいえ、ある層には強く刺さる方向性だと思う。


ちなみに修復したページはこちら。

ここから先は

0字

メンバーシップ ¥ 1,000 /月

左脳が不自由なため、なかなかUI/UXの構造設計がままならないデザイナーに向けて論理構造を一緒に学ん…

AIにサイトを丸投げするための基礎知識

¥1,000 / 月
1ヶ月無料

このNoteの視点を面白いと思ったら、ぜひチップで応援を!知性とAIの共創を深めるために、あなたの力を貸してください!✨ チップは「もっと知りたい!」のメッセージとして受け取ります。🔥