tk（ティーケー）公式サイトを、
壊さず整えるとこうなる。
AIで作った既存のWeb UIを壊さず整える「金継ぎ」のデモ修理です。文言・リンク先・並び順・レイアウト・地の色はそのまま。
変えたのは「10pxと11pxの読みづらい文字7か所」「薄すぎたカードの VIEW 13か所」「10段に割れていた文字サイズ」「2種類に割れていた罫線の色」だけで、追加のCSS1ファイルで直しています。
1か所だけ、CSSでは直せない本文の段落分けを写しに当てていますが、文言は一字も変えていません。公開中のサイト本体には手を加えていません。
まず、とてもよく出来ています。明朝が本文まで通っていて、生成りの地に文字だけを置く構えが「ノイズをデザインする」という中身と合っています。
押しにくいボタンはゼロ、横のはみ出しもゼロ、スマホ幅で要素が重なる場所もゼロで、崩れと押しにくさは3つの幅すべて合格でした。実績も、社名と個人名が具体的に並んでいて強いです。
足を引いていたのは、趣味の話ではなく細部の揺らぎでした。
文字サイズが10段に割れていて、10pxの読みづらいラベルが6か所、カードの「VIEW」はコントラスト比2.2（基準は4.5）で読み取りにくく、罫線の色が2種類に割れていました。
今回のデモ修理はそこだけを直しています。文言・リンク先・並び順・レイアウト・地の色には手を触れていません。
このサイトの弱点は見た目ではなく、映像と物語をつくる人のサイトなのに、その現物が1つも置かれていないことです。
画像0枚・動画0本で、25本あるリンクのうち12本は他社のサービスへ出ていき、tkさんの手元に名前が残る入口はメールマガジンのカード1枚だけになっています。
マーケティング診断 by イケハヤAI
イケハヤAIが、マーケティング目線での診断を行いました。これらの指摘は今回の修理には含まれていません。
改善の候補として参考にしてみてください。
1映像と物語をつくる人のサイトに、その現物が1つも無い
このページにしかない物は、tkさんが作った映像であり、小説であり、音です。ところがページ全体で画像が0枚、動画が0本でした。
9つあるSVGはサービスのロゴだけです。「1フレームの映像、1行の言葉に、人の体温や陰翳を宿す」と書かれていても、その1フレームがどこにも出てきません。
実績の欄も、Studio VIBE・LINEヤフー前会長の川邊氏・けんすう氏の約30本と、名前は具体的なのに、現物はすべて外部リンクの先にあります。
読んだ人は、確かめるためにページを離れることになります。
証拠の最上位は作例で、見ればわかる価値を言葉だけで説明するのは、証拠が無いのとほぼ同じです（問い10・見せられる物を見せていない、と同じ根なので1件にまとめています）。
処方 代表作を3本、サムネイルか数秒のループでPROFILEのすぐ下に置き、実績の1行ずつにその現物を結びつける。
2「誰に何をしてほしいか」が、最初の画面に無い
「このページは〈誰〉に〈何〉をしてほしいページか」を一文で言おうとすると詰まります。
最初の画面にあるのは「tk（ティーケー）」「official site」「ノイズをデザインする」の3つで、どれも理念であって、読み手が誰なのかも、ここで何が手に入るのかも書かれていません。
ページを下まで読むと、仕事を頼んでほしいのか（実績とポートフォリオ）、発信を追ってほしいのか（12本の外部リンク）、メールマガジンを読んでほしいのか（カード1枚）の3つが同じ重さで並んでいて、絞られていません。
一番強い事実である「LINEヤフー前会長の公式動画をつくった人」も、スクロールしないと出てきません。
処方 「ノイズをデザインする」の下に〈誰が〉〈何を頼めるか〉の一文を足し、次の一歩を1つだけ選んで最初の画面に置く。
3外へ出る道が12本、手元に名前が残る道は1枚
ページのリンク25本のうち、他社のサービスへ出ていくものが12本あります（TALES・Substack・note・stand.fm・Spotify・Suno・Studio VIBE・X 2本・Threads・Instagram・リットリンク）。
読んだ人がtkさんに興味を持ったとき、その人はSubstackやInstagramのフォロワーになって帰っていきます。
一方、tkさん自身の名簿に残る入口はメールマガジン【tkの思考の原液】のカード1枚だけで、それは「01 テキスト」の5枚のうちの1枚として、TALESや仮想通貨ブログと同じ大きさで置かれています。
カードにはタイトルしか書かれておらず、登録すると何が届くのかもありません。お問い合わせも、フッターの小さな文字1本です。
処方 メールマガジンをカードの列から出して独立したセクションに格上げし、「何が・どのくらいの頻度で届くか」を一文添える。
セクションごとに、金の継ぎ目で
継ぎ目を左右に動かすと修理前後が入れ替わります。金のピンが変えた場所です。
番号は下の凡例をご覧ください。
ファーストビュー〜ABOUT
名前と副題の文字の段を1本に。地の色・文言・行の折り返しはそのまま
- 2ヒーローの「official site」: 11px → 14px（スマホ幅で12px未満だった文字）
PROFILE（大きな一句と本文）
大きな一句をABOUTと同じ大きさへ。壁になっていた本文を2つの段落に分割（文言は不変）
- 3PROFILEの大きな一句: 36px → 30px（ABOUTと同じ段に）
ECOSYSTEM（カードのVIEW）
12枚のカードの「VIEW」を、読める濃さと大きさへ
- 1カードの「VIEW」: 12px → 14px・コントラスト比 2.2 → 8.8（13か所）×12
- 4セクションの小見出し: 20px → 24px（4か所）×4
詳細レポート
残りのセクションの前後比較、スマホ・タブレットの実測、数字の一覧、AIの既製品の型と直し方は、詳細レポートにまとめました。
あなたのAIへの指示
この記録の直しは、お手元のAIにそのまま任せられます。下の指示文をコピーして渡してください。
あなたは「tk（ティーケー）公式サイト」の改修を任されたAIです。金継ぎの診断の結果に沿って、次の手順で直してください。本番公開の前に、必ず依頼主の承認を取ってください。
手順1. 次の追補スタイルを、対象ページの </head> 直前にそのまま貼る。文言・リンク先・HTMLの構造は変えない。
<style id="kintsugi-repair">
/* ══════════════════════════════════════════════════════════════
金継ぎ 追補スタイル ── official-site.tk-rock.workers.dev
2026-08-25 / 金継ぎ ものさし v1.5
使い方: このファイルを読み込む <link> を </head> の直前に足すか、
中身をそのまま <style> に貼る。既存のCSSは1行も書き換えない。
文言・リンク先・並び順・レイアウト・地の色は変えていない。
══════════════════════════════════════════════════════════════ */
/* ── ① 読めない・小さすぎる（破れ）───────────────────────────── */
/* 右のドットナビに出る節の名前: 10px → 14px（12px未満をゼロに） */
span.text-\[10px\] { font-size: 14px; }
/* ヒーローの副題「official site」: 11px（390px幅）→ 14px */
span.text-\[11px\],
span.text-\[11px\].sm\:text-xs { font-size: 14px; }
/* カードの「VIEW」: 12px → 14px、文字色を本文と同じ濃さへ。
白〜stone-200のグラデ地の上でコントラスト比 2.2 → 8.8（床は4.5）。
新しい色は作らず、ページに既にある本文の色（#404040）をそのまま使う。
ホバーで stone-900 になる手触りはそのまま残す。 */
.shrink-0.text-stone-400 { font-size: 14px; color: #404040; }
/* ── ② 文字サイズの段（同じ役割の中で近い値を1本に）──────────── */
/* 節の小見出し（h3）: 20px を 24px に寄せる ＝ 一本道 naoshi の自動処方 */
h3 { font-size: 24px; }
/* ヒーローの名前「tk (ティーケー)」: 1280pxだけ24pxに跳ねる段を外し、
390pxと同じ20pxに揃える（肩書きの段を1本に） */
span.text-xl.tracking-\[0\.4em\] { font-size: 20px; }
/* 大きな一句を1段に: PROFILE の「AI × 言葉 × 映像で…」を
ABOUT の「量産型の、無菌室のような…」と同じ大きさへ（36→30 / 30→24） */
p.whitespace-pre-line.text-balance { font-size: 24px; }
@media (min-width: 640px) {
p.whitespace-pre-line.text-balance { font-size: 30px; }
}
/* ── ③ 似て非なる色（罫線が2色に割れている）────────────────── */
/* フッターの上端の罫線と、その中の区切り線を、節の区切り線と同じ石色に。
薄さ（不透明度）は元のまま＝見た目はほとんど変わらない。 */
footer.w-full { border-color: rgba(214, 211, 209, 0.6); }
.h-px.bg-stone-200\/60 { background-color: rgba(214, 211, 209, 0.7); }
</style>
手順2. 幅1280・768・390pxの3つで表示を確かめる。読めない文字・画面右端からのはみ出し・要素の重なりが出ていたら、その場で直す。
手順3. 余力があれば、AIの定番パターンを上から順に外す。依頼主が意図して選んだ表現なら残す:
- 英語のセクション名（58箇所）: 日本語の読者向けページで、セクションの名前だけ英語なのは「服だけ借り物」に見えます。日本語の見出しに書き換えます。固有名詞（サービス名・書名）は英語のままで構いません。 場所: span.pointer-events-none など
- SCROLLの矢印: 「SCROLL ↓」の印は、最初の画面で次が見えないことの代償です。印を消し、最初の画面の高さを「次のセクションの頭が少し見える」まで詰めます。
手順4. 次はマーケ診断の処方。文面や構成が変わるので、実施の前に依頼主に確認する:
- 映像と物語をつくる人のサイトに、その現物が1つも無い: 代表作を3本、サムネイルか数秒のループでPROFILEのすぐ下に置き、実績の1行ずつにその現物を結びつける。
- 「誰に何をしてほしいか」が、最初の画面に無い: 「ノイズをデザインする」の下に〈誰が〉〈何を頼めるか〉の一文を足し、次の一歩を1つだけ選んで最初の画面に置く。
- 外へ出る道が12本、手元に名前が残る道は1枚: メールマガジンをカードの列から出して独立したセクションに格上げし、「何が・どのくらいの頻度で届くか」を一文添える。
手順5. 仕上げの確認。低コントラスト0件・12px未満の文字0件・角丸3種以内・横はみ出し0件を保てていれば完了。