<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Opinion on fantatchi&#39;s notes</title>
    <link>https://fantatchi-xyz.pages.dev/categories/opinion/</link>
    <description>Recent content in Opinion on fantatchi&#39;s notes</description>
    <generator>Hugo -- 0.150.0</generator>
    <language>ja</language>
    <lastBuildDate>Tue, 01 Sep 2026 00:00:00 +0000</lastBuildDate>
    <atom:link href="https://fantatchi-xyz.pages.dev/categories/opinion/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>画像生成まで含むWebデザインで感じたClaude CodeとCodexの違い</title>
      <link>https://fantatchi-xyz.pages.dev/posts/2026-09-01-claude-code-vs-codex-web-design/</link>
      <pubDate>Tue, 01 Sep 2026 00:00:00 +0000</pubDate>
      <guid>https://fantatchi-xyz.pages.dev/posts/2026-09-01-claude-code-vs-codex-web-design/</guid>
      <description>&lt;h2 id=&#34;画像だけがやり取りに乗らなかった&#34;&gt;画像だけが、やり取りに乗らなかった&lt;/h2&gt;
&lt;p&gt;同じWebサイトを Claude Code と Codex の両方で作ってみた。コードを書く力だけを見ていると、この二つの違いは分からない。差が出たのは、ゼロから画面をデザインして、そこで使うキャラクターの絵まで用意する仕事だった。この種の仕事では、絵を作る作業をそのまま続けられる Codex のほうがやりやすかった。&lt;/p&gt;
&lt;p&gt;Claude Code でもデザインの相談はできている。Claude Design とは直接つながらなかったので、依頼と返事を文書に書いて渡し合う形にした。手間はかかるが、余白の取り方や情報の詰め方はこのやり取りで決まった。ただ、絵だけはこの形に乗らない。私の環境では Claude Code が絵を作る手段を持たないので、独自のイラストが要ると、デザインを考える作業と絵を用意する作業の間に別の手順が挟まる。&lt;/p&gt;
&lt;p&gt;以下は、案内役のキャラクターがいるWebサービスを作り直したときに起きたことと、その結果どう使い分けることにしたかである。&lt;/p&gt;
&lt;h2 id=&#34;絵を一枚作れば済む話ではなかった&#34;&gt;絵を一枚作れば済む話ではなかった&lt;/h2&gt;
&lt;p&gt;トップページ、入力中の画面、結果ページに、それぞれ別のポーズの絵を置いた。最初は、絵さえ用意できればあとは実装だけだと思っていた。&lt;/p&gt;
&lt;p&gt;実際にやってみると、そうはならなかった。まず参考にする絵から「線が少ない白黒の線画」というテイストを読み取る。次にヘッダー用、指をさす姿、考える姿を描き分ける。余白と人物の向きを画面に合わせ、置いてみて吹き出しと重なっていないか見る。一枚だけ絵柄がずれていたら作り直す。最後には、キャラクターに合わせて見出しもボタンも受け答えの口調も直すことになった。&lt;/p&gt;
&lt;p&gt;絵は一枚納品して終わりではなく、実装と行き来しながら詰めるものだった。人の仕事にたとえるなら、デザイナーとイラストレーターと実装担当の間を自分が歩き回る回数が減った、という感覚に近い。役割が一つになったわけではないが、試作の段階では伝言がかなり減る。&lt;/p&gt;
&lt;h2 id=&#34;二つを並べるとこうなる&#34;&gt;二つを並べると、こうなる&lt;/h2&gt;
&lt;p&gt;同じサイトでも、要件の整理と名前の付け替えは Claude Code で進めた。絵とデザインの調整は Codex に頼んだ。両方を触った印象を並べる。&lt;/p&gt;
&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;観点&lt;/th&gt;
          &lt;th&gt;Claude Code&lt;/th&gt;
          &lt;th&gt;Codex&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;画面の構成やデザインの方針&lt;/td&gt;
          &lt;td&gt;Claude Design と文書をやり取りして決められる&lt;/td&gt;
          &lt;td&gt;コードと会話を往復しながら決められる&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;独自の絵を作る&lt;/td&gt;
          &lt;td&gt;私の環境では別の手段が要る&lt;/td&gt;
          &lt;td&gt;同じ作業の流れの中で作れる&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;絵と実装の行き来&lt;/td&gt;
          &lt;td&gt;絵を外から渡す手順が増える&lt;/td&gt;
          &lt;td&gt;作る、置く、見る、作り直すが続けられる&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;見た目の確認&lt;/td&gt;
          &lt;td&gt;実装したあとで確認できる&lt;/td&gt;
          &lt;td&gt;画面の確認と絵の直しをまとめて頼める&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;効いたのは、二段目の「独自の絵を作れるかどうか」だけだと思う。画面を組んでいる途中で「ここにもう一つポーズが欲しい」と気づくことがある。そのとき、思いつきをその場で絵に変えられるかどうかで、進み方がずいぶん違った。ほかの三つは、この一点から出てくる差だった。&lt;/p&gt;
&lt;p&gt;具体的にどう違ったのかを、三つの場面で書く。&lt;/p&gt;
&lt;h2 id=&#34;三枚目だけ絵柄が違わないかと言ったあと&#34;&gt;「三枚目だけ絵柄が違わないか」と言ったあと&lt;/h2&gt;
&lt;p&gt;三枚並べてみたら、最後の一枚だけ他と違って見えた。そう Codex に伝えると、絵を作り直し、コードの参照先を差し替え、ページを開いて確かめるところまで同じ相手が続けてくれた。私は別のツールを開いていないし、ファイルを手で置き換えてもいない。この「言った直後に直る」感じが、今回いちばん印象に残った。&lt;/p&gt;
&lt;p&gt;参考にできるのが画面写真しかないときも、写真をそのまま切り抜くのではなく、雰囲気だけを引き継いで描き直す、という判断がしやすかった。理由は同じで、思いついたその場で試せるからだと思う。&lt;/p&gt;
&lt;h2 id=&#34;絵だけ見ていても分からなかった&#34;&gt;絵だけ見ていても分からなかった&lt;/h2&gt;
&lt;p&gt;せりふが人物に重なる。ヘッダーの絵だけ線が細かい。三枚目だけ絵柄が違う。今回出た問題は、どれも絵のファイルを単体で開いていては気づけなかった。うまい絵でも、吹き出しと重なったり、視線が本文と反対を向いていたりすれば、画面としては使いにくい。作った絵をそのまま画面に入れて、開発中のページで見て、駄目なら作り直す。この流れが切れないことが効いた。&lt;/p&gt;
&lt;h2 id=&#34;名前の読み仮名まで直すことになった&#34;&gt;名前の読み仮名まで直すことになった&lt;/h2&gt;
&lt;p&gt;キャラクターは見た目だけでは立たない。サイト名、見出し、案内の文、待っている間の文言、返ってくる答えの口調。ここまでそろって、ようやくこの人に案内されている感じが出る。絵を作ったあとに、その人物像へ合わせて言い回しも直せた。&lt;/p&gt;
&lt;p&gt;途中で、キャラクターの名字が初めて見ると読みにくいことに気づいた。結局、共通のヘッダーに読み仮名を添えるところまでやった。絵から始まった変更が、文章の側へ広がっていった。&lt;/p&gt;
&lt;h2 id=&#34;作り直しになったところ&#34;&gt;作り直しになったところ&lt;/h2&gt;
&lt;p&gt;便利だった一方で、絵の生成そのものには手間もかかった。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;同じ指示でも、ポーズごとに線の量や顔つきが少しずつ変わる&lt;/li&gt;
&lt;li&gt;一枚だけ写実寄りになって、並べたときに浮く&lt;/li&gt;
&lt;li&gt;同じファイル名で差し替えると、開発中の画面が古い絵を表示したままになる&lt;/li&gt;
&lt;li&gt;キャラクターの名前や設定を変えたら、絵だけでなく、指示文や作り置きした回答も直すことになる&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;絵を作れること自体は、できあがりの品質を保証しない。「この一枚だけ違う」「この言い方はこの人らしくない」と判断して直しを頼む仕事は、こちらに残る。それでも、気づいたその場で作り直しと差し替えに進めるのは大きかった。&lt;/p&gt;
&lt;h2 id=&#34;次も同じ選び方をするか&#34;&gt;次も同じ選び方をするか&lt;/h2&gt;
&lt;p&gt;する、というのが今の答えになる。次に独自の絵が要るサイトをゼロから作るなら、絵まわりはまた Codex に頼む。要件の整理、処理の直し、文章の詰めは Claude Code のほうが話が早いので、そこは変えない。&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
