🤖 AI運用ルール

learning

最終更新 2026年07月06日 ／ 22_AI運用ルール/コマンド集/column-flow/learning.md

/column-flow 学習ストック

日付 FB者 FB要約 種別 どこをどう変えたか
2026-06-17 大串 コラム作成コマンドにデザインの「型」を内蔵し、毎回デザイン修正不要にしたい A(恒久) 内蔵ルールC「デザイン型（完成テンプレート）」追加・古いデザイン前提(黒背景/暖色ゴールド/Cormorant)を撤去・Step6を build_column.py での型機械適用に書換・Step2 CTAを型の右下追従ボタンに統一。型本体=~/dev/_terasu-column-template/
2026-06-17 大串 ①フォントが一時期stock-sun記事と同じだったのに変わった→戻して ②「。」のタイミングで頻繁に改行して見やすく（今めっちゃ詰まって見える） A(恒久・第9弾) 本文フォントをstock-sun実機と同一スタック"Noto Sans JP",YuGothic,…に・palt除去(本文)・letter-spacing.04em・line-height1.9・段落1.8em。本文<p>の「。」ごとに<br>自動改行(1文1行・stock-sun式/見出し/目次/CTA/チロムは除外)。チロム(cm-*)はTERASUフォント+palt維持。build_column.py の COMPONENTS_CSS・palt行・新「。改行」ステップを修正＋README/Vault型/内蔵ルールC更新。デスクトップ/モバイル両方で詰まり解消を実機確認
2026-06-17 大串 「ね。」の部分だけ次の行になる場面がめっちゃ多くて見栄え悪い（孤立行） A(恒久・第10弾) 第9弾の「。ごとに<br>」だと長文折返しで最後に数文字だけ残る孤立行(widow)が多発と判明。text-wrap:prettyは実測で効果ゼロ→text-wrap:balanceが各行の長さを均すと確認。<br>は1ブロックに効かないので各文を<span class="ts-s">…。</span>で包み.ts-s{display:block;text-wrap:balance}に変更（タグ深さ0の「。」だけ分割=<strong>等のネスト不破壊）。実測=PC孤立ゼロ/SP259中2(残2は5〜7行の極端な長文=balance行数上限)。build_column.py の改行ステップ全置換+CSS追加、README/Vault型/内蔵ルールC更新
2026-06-17 大串 StockSunは1行スペース(空行)が文ごとに入り4〜5行が連続しない。うちは空行が少なく4〜5行続く→StockSun形式に合わせて(スクショ比較) A(恒久・第11弾) StockSun実記事=1文=1段落(中央値1。/段落)で文ごとに空行と判明。各文ブロック.ts-sにmargin-bottom:1.5emで1行スペースを追加(段落末は:last-child{margin-bottom:0}で二重回避)・段落<p>も1.8→1.5em。実機(モバイル)で文ごとに空行が入りStockSun式リズムを確認。+執筆ルール「1文を短く(折返し2〜3行以内)」をStep3とルールCに追加(長文だと空行入れてもブロックが4〜5行になるため)。build_column.py CSS修正+README/Vault型/内蔵ルールC/Step3更新
2026-06-17 大串 本文の重要文言を太字に。StockSunの蛍光色背景マーカーは、うちは山吹色のちょっと太め下線にしたい(両方対応) A(恒久・第12弾) StockSun=<strong>119+<mark>(黄色背景)36と確認。型CSSにstrong{font-weight:700}＋mark{background:linear-gradient(#f8b500,#f8b500) 0 100%/100% .28em no-repeat;font-weight:700}(山吹色のちょい太め下線・背景なし)を内蔵(無彩色ルールの例外)。記事ソースに太字16+マーカー10を適用(散文の結論/定義/数字)。ビルド入力を揮発/tmp→恒久_source.htmlに変更(太字/マーカー等コンテンツはここで永続管理)。実機で山吹色下線+太字を確認。README/Vault型/ルールC/Step3更新
2026-06-17 大串 これを型として保存して。コラム作成コマンドを打ったときに反映されるように A(恒久・第13弾) 第9〜12弾の完成形を確定。build_column.py を引数対応の汎用ビルダー化(python3 build_column.py <source> <output>・引数なしは既定hp-cost・後方互換)→新記事はパス書き換え不要で型一発適用。完成見本 example_hp-cost_FINAL.html を最新版で更新(strong43/mark10/山吹色)。コマンドStep6を引数呼び出しに更新。新記事ソース→任意出力で全型要素(チロム/ts-s/balance/空行/フォント/太字/山吹色/目次/CTA)が乗ることを実証。README/Vault型/Step6更新。型一式=~/dev/_terasu-column-template/

| 2026-06-17 | 大串 | サムネのタイトルは「最初にちょい見出し→メイン2行で収まる」設計にして（既存サムネ例: 2026年最新版/HP制作の/相場費用は？） | A(恒久・第14弾) | サムネ提案を3パート構成「①添え見出し(上・小)＋②メイン1行目＋③メイン2行目」に変更（メインは必ず2行・各行5〜9字・数字1つ）。内蔵ルールB「構成型」・Step4処理ルール・Step4完了確認テンプレ・Vault2026-06-17_サムネ文字数ルールとコツの型 を更新。旧型「[検索ワード]＋【強調】＋[数字]」を置換 |
| 2026-06-17 | 大串 | Step5品質監査にTERASUオリジナルコード化チェックと著作権対策を追加。ただしこの時デザイン・構成・改行を変えないよう注意 | A(恒久・第15弾) | 1本目コラム監査でヘッダー/メニュー/固定CTAが丸ごとStockSun残骸(商品名マキトル等・役員名 岩野圭佑/株本祐己・LINE liff@zhf3728f・nensyu.jp・id="new-stocksun-script-js")と判明。Step5監査表に「オリジナル化①痕跡②リンク③命名/id」「CMS指紋」「著作権」5行追加＋🚨厳守注記=痕跡除去は"コード指紋を消すだけ"でデザイン/レイアウト/構成/配色/フォント/改行(.ts-s/
)/余白/太字マーカーは1ミリも変えない(hp-flow大原則)。残骸の中身だけ本物TERASU(4ページ about/works/company/contact)に差替・見た目構造は完全維持。Step5完了確認も更新 |
| 2026-06-17 | 大串 | サムネ用タイトル提案を構成設計(Step2)のタイミングで出して。本文(Step3)書いてる間に大串が並行でサムネ作る。サムネはどこで送っても送られたら反映する仕様に | A(恒久・第16弾) | サムネを並行トラック(非同期)化。Step2処理ルール7に「サムネ用タイトル提案(前倒し)」追加＋Step2完了確認にサムネ案+依頼を表示。Step4を「提案」→「サムネ受領・反映(非同期)」に再定義(提案はStep2済・受け取った瞬間に記録しStep6でアイキャッチ/カード/OGPに反映・フロー止めない・Step2で未提案なら保険提案)。設計思想に並行トラック原則・ステップ全体像表(Step2/4)・Step3完了確認ラベルも更新 |

| 2026-06-17 | 大串 | 全コラムを著作権セーフにTERASUオリジナルコード化（テンプレ本体も） | A(恒久・第15弾の実装) | build_column.pyにStockSunガワ残骸の“器ごと”自動除去を実装(深さ対応マッチで取りこぼし無し): t-c-header/header-menu-content(マキトル・岩野等)/ts-nav/t-c-bottom(LINE)/t-l-single__sidebar(/order//member)/t-l-cta/t-l-single__sns/stocksunスクリプト ＋ liff/nensyu→#・/order//member→/contact/。本物TERASU cm-nav(5項目:TERASUについて/制作実績/運営会社/コラム/お問い合わせ)を注入で置換。監査3記事すべて残骸0・デザイン1ミリも不変を実機確認(メニュー開閉も本物TERASU)。README/example_FINAL更新・全コラム自動適用 |

| 2026-06-17 | 大串 | サムネ型FB:①文字数もっと増やしてOK ②年号「2026年版」毎回多用ナシ ③数字を毎回必須にすると無駄に似る→数字も毎回ナシ。+記事②③サムネ受領 | A(恒久・第17弾) | サムネルール緩和: メイン全体16〜30字(潰れなければ増OK)・1行6〜13字・通し〜36目安／数字も年号も毎回入れない(任意・"効く時だけ"・多様化)／添え見出しは多様に(中小企業向け/プロが解説/保存版)。内蔵ルールB表+コツ+構成型・Step2/Step4・Vault2026-06-17_サムネ文字数ルールとコツ更新。決定サムネ=②中小企業向け/集客に繋がる/HPの5原則 ③プロが解説/成果が出る/HPの設計術(数字なしOK)。受領(2.png/3.png 1280×720)をアイキャッチに反映 |

| 2026-06-17 | 大串 | 一覧カードFB: ①新着は記事が増えたら1,2,3でページ送りしたい ②サムネ横の文字が中央揃えで少なく違和感→左揃え＆2行に ③厳選のサムネをもっと小さく（文字でなくサムネ自体） | A(恒久・第18弾) | ①ページネーション運用=NEW ENTRYが一定数(目安9〜12本)超で /column/ をページ分割(1,2,3)＋pager表示。今は3記事＝1ページなのでpager非表示(Step6で記事数増時に対応)。②NEWカード=テキスト列を左揃い(.ts-new-text)＋サムネから2rem離す＋タイトルmax-width:22emで2行化。③SELECTEDカード=360px固定＋中央寄せ(.ts-sel-card/.ts-sel-grid)。⚠️任意値Tailwind(w-[360px]等)は静的サイトの未コンパイルCSSでは効かず幅0に潰れる→カスタム<style id="ts-list-css">(media query)で実装。両ファイル(terasu-hp正本+preview合成)に適用 |
| 2026-06-27 | 大串 | サムネは専用フォルダ /Users/oogushiyuuki/Downloads/TERASU コラム サムネイル/ に入れていく運用にする(今後ずっと) | A(恒久・第19弾) | サムネ受領元を固定。Step4/Step6でこのフォルダの最新PNGを取得→~/dev/terasu-hp/images/eyecatch-<slug>.png にcp→記事eyecatch/一覧カードに反映→push。sips -g pixelWidth -g pixelHeightでサイズ確認(1280×720・2000px/200KB以下)。ファイル名は記事と紐付かない("TERASU コラム サムネイル (N).png"形式)ので最新 or 大串指定で対応。今回(4).pngを飲食店記事(inshokuten-hp-seisaku)に配置。下記恒久ルールDに昇格 |
| 2026-07-06 | 大串 | 今後コラム作る時、各ステップで「これは◯コラム目」と表示してほしい＋サムネ画像のファイル名をコラム番号にしたい(何コラム目か分かるとモチベ上がる) | A(恒久・第20弾) | 起動時・各Step完了確認の冒頭に「【Nコラム目】」を表示。N=column/配下の公開済みコラム数(guide除く)。サムネは大串がコラム番号名(例13.png)でフォルダ保存→Step6で取得→eyecatch-<slug>.pngにcp。今回は13コラム目(美容室=biyoushitsu-hp-seisaku)。設計思想＋各Step表示に反映(恒久ルールEに昇格) |
| 2026-07-06 | 大串 | 結論先出しの要素列挙(「①コンセプト ②写真 ③…」)が1行だと見づらい→①②③…を縦(1要素1行)に並べる方が良い | A(恒久・第21弾) | 結論先出しの要素列挙は1行に詰めず、1要素1行の縦並び(<br>)にする。形＝導入文を<mark>(「…必要なのは、次のN要素です。」)＋その下に<p>①…<br>②…<br>…</p>。早見表(table)は詳細として別途残す。Step3処理ルール＋ルールCに明記。美容室(13本目)を修正+飲食店(12本目)も横展開で縦並び化。build_column.pyのts-s分割は「。」基準なので①〜⑤(句点なし)は<br>のまま保たれる |
| 2026-07-06 | Claude(作業中の落とし穴) | hp-cost骨格(_source.html)から新記事を作ると構造化データ(ld+json)がゼロで生成される。build_column.pyは構造化データを生成しない | B(技術Tips・第22弾候補) | 新記事は必ずソースの<head>にArticle+BreadcrumbList+FAQPageのld+jsonを注入してからビルドする。今回Step5監査で「構造化データ0」を検知→既存記事(biyoushitsu)と同形式のld+jsonを生成しソースに注入→再ビルドで是正(既存記事と完全一致)。歯科14本目で発生。根治TODO=build_column.pyがtitle/description/FAQ/URLから自動でld+jsonを生成する処理を組み込む(そうすれば注入を手動でやらなくて済む)。当面はStep6ビルド前にld+json注入を必須手順とする |

恒久ルール（昇格済み・要約）

A. フォントは「本文＝stock-sun / チロム＝TERASU」の二系統（2026-06-17 第9弾）

  • 本文（.t-l-single/.t-l-single-body/目次/パンくず）= stock-sun完全一致："Noto Sans JP",YuGothic,"游ゴシック","Yu Gothic","メイリオ",Meiryo,sans-serif／palt無し／letter-spacing:.04em／webフォント非読込（stock-sunも非読込＝同じスタックで大串Macは同一描画=YuGothic）。
  • チロム（cm-h/cm-nav/cm-pcmenu/cm-f）= TERASU実機：YakuHanJP,"Zen Kaku Gothic New"＋palt 維持。
  • ⚠️ 本文に YakuHanJP/Zen Kaku/palt を強制してはいけない（これが「フォントが変わった」事故の原因）。

B. 本文は「1文=1ブロック＋balance＋文ごとに空行」（2026-06-17 第9→第11弾・確定）

  • 各文を <span class="ts-s">…。</span> で包み、CSS .ts-s{display:block;text-wrap:balance;line-height:1.9;letter-spacing:.04em;margin-bottom:1.5em}＋.ts-s:last-child{margin-bottom:0}。
  • text-wrap:balance＝各文の行長を均し「ね。」等の孤立行(widow)を解消。
  • margin-bottom:1.5em＝文ごとに1行スペース（StockSun式：4〜5行が空行なしで連続するのを防ぐ）。段落<p>も1.5em。見出し/タイトルにもtext-wrap:balance。
  • build_column.py が素の本文<p>（日本語+句点）だけ自動処理。タグ深さ0の「。」だけで分割するので<strong>等のインラインタグのネストは壊さない（class ガードで見出し/目次/CTA/表/チロムを除外）。新記事も自動適用。
  • 執筆側ルール（第11弾）: 1文を短く（折返し2〜3行以内）。長い1文は空行を入れてもブロックが4〜5行になりStockSun感が崩れる→、で切る/2文化。Step3とルールCに明記。
  • ⚠️ <br>で1文ずつ区切る方式は孤立行が多発するので使わない（第9弾で失敗）。⚠️ text-wrap:prettyはこの用途で効果が出なかった（balanceを使う）。

C. 本文の強調＝太字＋山吹色マーカー / ソースは恒久化（2026-06-17 第12弾）

  • 重要文言は太字<strong>（CSS .t-l-single-body strong{font-weight:700;color:#0d0d0d}）。
  • 最重要の結論/定義/数字は<mark>＝CSS .t-l-single-body mark{background:linear-gradient(#f8b500,#f8b500) 0 100%/100% .28em no-repeat;color:#0d0d0d;font-weight:700}＝山吹色のちょっと太め下線（背景なし）＋太字。StockSunの黄色背景マーカーの置換。無彩色ルールの例外＝マーカー下線の山吹色#f8b500のみ許可。
  • マークアップ（どの語に付けるか）は記事ソースに入れる＝コンテンツ。要所のみ（StockSunも要所限定）・「。」を含めず文途中の語句に付ける（ts-s分割を壊さない）。
  • 🗂 ビルド入力を恒久化：以前 build_column.py は揮発する/tmp/article_pre-realchrome.htmlを読んでいた→~/dev/hp-stocksun-recruit/terasu/_source.html（恒久）に変更。本文の太字/マーカー等コンテンツはこの恒久ソースで管理（/tmp消失でビルド不能になる事故も防止）。

D. サムネ画像は専用フォルダから取得（2026-06-27 第19弾）

  • 大串が作成したサムネPNGの置き場＝/Users/oogushiyuuki/Downloads/TERASU コラム サムネイル/（大串FB「今後はこのフォルダに入れていく」）。Claudeはチャット添付画像をファイル化できないため、この共有フォルダ経由で受け取る。
  • Step4(受領)/Step6(入稿)でこのフォルダの最新PNGを取得 → ~/dev/terasu-hp/images/eyecatch-<slug>.png にcp → 記事eyecatch・一覧カードに反映 → push。
  • 配置前に sips -g pixelWidth -g pixelHeight でサイズ確認（1280×720・2000px超や200KB超ならリサイズ）。
  • ファイル名は記事と紐付かない（"TERASU コラム サムネイル (N).png"形式）ので、最新ファイル or 大串指定で対応。差し替え時はファイル名にバージョン付与（第32弾）。
  • 別途の料金横展開メモ（第19弾同時）: 型ソース _source.html のCTAに旧「初期10万円・月額1万円」が残ると全コラムに旧価格混入→月額1.5万へ是正済（料金改定時は型ソースも要点検）。