金継ぎ ── 診断と修理デモの記録

詳細レポート

「tk（ティーケー）公式サイト」の機械計測の全量です。要点と総評は簡易レポートにあります。

← 簡易レポートへ戻る

残りのセクションを、金の継ぎ目で

継ぎ目を左右に動かすと修理前後が入れ替わります。金のピンが変えた場所です。

番号は下の凡例をご覧ください。

SELECTED CREDENTIALS

ポートフォリオの帯の「VIEW →」を読める濃さへ。実績の並びと文言はそのまま

SELECTED CREDENTIALS 修理後
SELECTED CREDENTIALS 修理前
1
◂▸
修理前修理後
  • 1カードの「VIEW」: 12px → 14px・コントラスト比 2.2 → 8.8（13か所）

フッター

2種類に割れていた罫線の色を1本に

フッター 修理後
フッター 修理前
◂▸
修理前修理後

    画像は同じ幅（1280px）で撮った修理前後です。ピンは同じ種類の変更が複数あるとき代表だけに打ってあります。

    スマホ・タブレットでの見え方

    1つの幅だけで確かめると、別の幅で崩れていても気づけません。修理はタブレット（幅768px）とモバイル（幅390px）でも前後を測っています。

    画像は最初の画面、数字はページ全体の計測です。

    タブレット（幅768px）
    修理前
    タブレット（幅768px） 修理前（最初の画面）
    修理後
    タブレット（幅768px） 修理後（最初の画面）
    モバイル（幅390px）
    修理前
    モバイル（幅390px） 修理前（最初の画面）
    修理後
    モバイル（幅390px） 修理後（最初の画面）
    幅乱れ度横はみ出し縦の重なり極小文字判定
    タブレット（幅768px）33 → 80 → 00 → 06 → 0要改善 → 確認待ち（目視）
    モバイル（幅390px）30 → 80 → 00 → 01 → 0要改善 → 整いは合格・型が残る

    横はみ出し＝画面の右端を越えている要素の数。縦の重なり＝枠を越えて後ろの文字に重なっている要素の数。

    どちらも0が目標です。

    数字で

    金継ぎの検査器「ものさし」で、同条件（幅1280px）で測った前後です。

    対象乱れ度似て非なる色色クラスタ低コントラスト極小文字角丸の種類判定
    トップ（1280×800）33 → 81 → 06 → 60 → 06 → 02 → 2要改善 → 確認待ち（目視）

    タブレット幅768pxは乱れ度33→8、モバイル幅390pxは30→8。3つの幅すべてで合格ライン（30未満）に入り、読めない・押せない・はみ出すといった壊れはゼロになりました。

    残っている「既製品らしさ（定番度）」は、SCROLLの印と英字の大文字ラベルという構成の選び方の話で、CSSでは直せません（下の「AIの既製品の型と、直し方」をご覧ください）。

    乱れ度

    揃っていなさの点数。同じ役目の色・文字の大きさ・角の丸みを何種類の違うやり方で作っているかを数えたもの。

    0が揃っていて、30未満で合格圏。30を超えた分は目盛りに収まるよう圧縮して表示している。

    似て非なる色

    ほぼ同じなのに少しだけ違う色の組。青が3種類あるなら2組と数える。

    低コントラスト

    文字が背景に溶けて読みにくい箇所の数。文字と背景の明るさの差が世界基準の線（普通の文字は4.5倍、大きな文字は3倍）を割った文字のかたまりを1個ずつ数える。

    0が目標。

    極小文字

    12pxより小さい文字の数。スマホでは読みにくい基準未満のもの。

    判定

    要改善＝読みにくい文字などの基準割れか、揃いの点数が合格線を超えている／整いは合格・型が残る＝色・文字・余白は合格圏で基準割れもないが、AIの定番パターン（既製品らしさ）が残っている（直し方は下の節）／確認待ち（目視）＝数字は合格だが、機械で測れない箇所（画像やグラデの上の文字）や動線の確認が残る／合格ライン到達＝数字も基準もすべて合格。

    最終の合格は、人の目視と主要動線の確認を経て人が出す。

    AIの既製品の型と、直し方

    「既製品らしさ（定番度）」は、AIが最初に出しがちな定番パターン（型紙22種）との一致数です。

    壊れではないので機械は自動で直しません──意図して選んだ表現かどうかは、作り手にしか分からないからです。

    このページで一致したのは次の型で、直すと決めたものから1つずつ外していけば数字も下がります。

    英語のセクション名58箇所

    日本語の読者向けページで、セクションの名前だけ英語なのは「服だけ借り物」に見えます。日本語の見出しに書き換えます。

    固有名詞（サービス名・書名）は英語のままで構いません。

    手段 文言の書き換え　場所 span.pointer-events-none など

    SCROLLの矢印

    「SCROLL ↓」の印は、最初の画面で次が見えないことの代償です。印を消し、最初の画面の高さを「次のセクションの頭が少し見える」まで詰めます。

    手段 CSSだけで直せます

    順番の目安: 「CSSだけで直せます」の型から外すのが早くて安全です。文言の書き換え・構造の組み替えは、文面の意図が絡むので作り手の判断で。

    全部外す必要はなく、意図があって選んだ表現は残して構いません。その場合は数字も「意図した既視感」として読み替えてください。