AI / Claude Code

【AIログ解説】「読みにくい」の一言がCSSの仕様書になる｜言葉で設計するWeb制作の新しい形

この記事でわかること

  • ── STEP 1 ── 今日起きたことの記録
  • ── STEP 2 ── Claudeの判断プロセス
  • ── STEP 3 ── 実行されたコード（CSS）
  • ── STEP 4 ── ターミナルログ
  • ── STEP 5 ── 何が起きたのかの解説
  • 「言葉が仕様書になる」とはどういうことか

「すごいな。どんどんCSSが改善されて、ただClaude Codeに喋るだけで」

今日一日の作業を振り返ってそう言われた。確かにそうだ。

この記事では「言葉が仕様書になる」という現象を、実際に起きたことをもとに解説する。

── STEP 1 ── 今日起きたことの記録

今日のWeb制作に関する作業をすべて並べるとこうなる。

「ベタっとしてる、改善して」
  → サムネイルデザインが変わる（半透明の円・ドットグリッド追加）

「目次の各項目に改行を入れて読みやすくしたい」
  → .sisan-summary li の margin-bottom が 0.3em → 0.85em に

「ここも読みづらい」
  → .sisan-body ol li にカード風スタイルが追加される

「リンクができない」
  → Obsidianリンク → WordPress URL への自動変換スクリプトが生まれる

すべて「言葉で依頼しただけ」だ。

── STEP 2 ── Claudeの判断プロセス

それぞれの依頼を受けたとき、Claude Codeの中では以下が起きていた。

「ベタっとしてる」を受け取ったとき

  1. 「ベタっとしてる」＝平坦でメリハリがない、と解釈
  2. デザイン原則「視覚的階層」を参照 → 奥行きを出す要素が必要
  3. 半透明の円・ドットグリッド・テキストシャドウを追加するコードを生成

「読みにくい」を受け取ったとき

  1. スクリーンショットから .sisan-summary のリストが詰まっていると判断
  2. 該当のCSSを obsidian_to_wp.py から検索
  3. margin-bottom と line-height を調整するコードを生成
  4. 全記事への影響を認識 → 一括更新が必要と判断

── STEP 3 ── 実行されたコード（CSS）

/* 修正前 */
.sisan-body li { margin-bottom: .45em; }

/* 修正後 */
.sisan-body li { margin-bottom: 1em; line-height: 1.8; }
.sisan-body ol li {
  background: #f0f7f6;
  border-left: 3px solid #4d8c88;
  padding: .6em .8em .6em .6em;
  border-radius: 0 6px 6px 0;
  margin-bottom: .7em;
}

テキストで「読みにくい」と言った結果、このCSSが生成された。

── STEP 4 ── ターミナルログ

ID:734 → 200 Claude Codeに「知り合いの情報」を...
ID:740 → 200 Claude Codeの「メモリ」はどこに...
ID:742 → 200 Claude活用ログ｜2026-04-22｜...
ID:745 → 200 AIがサムネイルを自動生成する裏側...
ID:754 → 200 ObsidianのグラフビューとWordPress...
ID:756 → 200 AIの記事投稿はなぜ速いのか...
ID:764 → 200 【AIログ解説】「スマホで読みにくい」...

7記事が数秒で一斉更新された。

── STEP 5 ── 何が起きたのかの解説

「言葉が仕様書になる」とはどういうことか

従来のWeb制作の流れはこうだ。

要望（言葉）
  → デザイナーがデザイン
  → エンジニアが仕様書を作成
  → コーダーがCSSを書く
  → 確認・修正
  → 反映

この流れが今日はこうなっていた。

要望（言葉）
  → Claude Codeが仕様を解釈
  → CSSを生成
  → 全記事に反映

間に入っていた人間のステップが消えた。「言葉」が直接「コード」になっている。

なぜこれが可能なのか

Claude Codeは膨大なデザイン・CSSの知識を学習済みだ。

「読みにくい」という言葉を受け取ると、それがどのCSSプロパティの問題なのかを推論できる。marginなのかline-heightなのかfont-sizeなのか。スクリーンショットがあればさらに精度が上がる。

これは「言葉の意味を理解して、コードに翻訳できる」という能力だ。

一度直すと全記事・全将来記事に効く

今日のCSSの変更はすべて obsidian_to_wp.py の ARTICLE_STYLE という定数に書かれている。

ARTICLE_STYLE = """
<style>
  /* ここに書かれたCSSが全記事のHTMLに自動で埋め込まれる */
</style>
"""

一箇所直せば：
– 今日更新した7記事 → 即座に反映
– 明日以降に書く記事 → 最初から新しいスタイルが適用

「仕組みを直す」と「全部が直る」。 これが設計の力だ。

「喋るだけ」の本当の意味

「喋るだけでCSSが改善される」というのは少し正確ではない。

正確には：

「喋るだけで、コードを書き・実行し・全記事を更新するという一連の作業が完了する」

Claude Codeはその間に：
– ファイルを開いて読み
– 問題箇所を特定し
– コードを書いて
– ファイルを保存し
– 7本のAPIリクエストを送り
– 結果を確認している

「喋るだけ」に見えているのは、これらがすべて人間の目に見えない速度で処理されているからだ。

まとめ

  • 「ベタっとしてる」「読みにくい」という言葉がそのままCSSの仕様書になる
  • Claude Codeが言葉→仕様→コード→実行を一気通貫で処理する
  • 一度CSSを直すと全記事・全将来記事に自動で適用される
  • 「喋るだけ」の裏では複数のファイル操作とAPI通信が走っている

これはWeb制作の作業フローが根本から変わっていることを意味する。

関連記事

TAG
ブログ

BLOG

View All
PAGE TOP