[{"data":1,"prerenderedAt":349},["ShallowReactive",2],{"content-/svg-diagram-skill-deloitte-7-types-review":3,"all-pages-for-dir":347,"og-image-/svg-diagram-skill-deloitte-7-types-review":348},{"id":4,"title":5,"body":6,"category":328,"concepts":329,"description":330,"extension":331,"meta":332,"navigation":333,"ogImage":329,"path":334,"project_name":335,"published":336,"publishedAt":337,"seo":338,"stem":339,"tags":340,"todo":329,"unpublished":336,"updatedAt":329,"__hash__":346},"pages/2026-07/2026-07-16/svg-diagram-skill-deloitte-7-types-review.md","デロイトの351ページ資料は「7つの型」だけでできていた ─ note記事からSVG図解スキルに足りない要素を洗い出した",{"type":7,"value":8,"toc":315},"minimark",[9,13,26,38,42,45,144,147,159,162,181,184,193,196,199,204,207,211,214,217,220,223,226,248,252,255,262,265,268,271,274,281,301,304,312],[10,11,5],"h1",{"id":12},"デロイトの351ページ資料は7つの型だけでできていた-note記事からsvg図解スキルに足りない要素を洗い出した",[14,15,16,25],"p",{},[17,18,24],"a",{"href":19,"target":20,"rel":21},"https://note.com/uchita_success/n/n030ad63765d3","_blank",[22,23],"noopener","noreferrer","デロイトが経産省に納品した351ページの資料を分析したnote記事","を読んだ。結論は、自分が使っているsvg-diagram図解スキルに「出典表記」がまるごと抜けていたこと、それと「論証テーブル」という型がスキルに定義されていなかったこと。この2点は実際にスキルへ反映した。加えて、論証テーブルを作る過程で、マゼンタ強調のやり方そのものに安直な癖があるのも見つかり、そちらも直した。逆に、記事にあった「色帯で主張を強調する」「■マーカーで断定文を作る」「赤字で更新箇所を示す」といった手法は、今の運用には合わないと判断して見送った。",[14,27,28,29,33,34,37],{},"最初はスキルファイルを書き換えず、判断の経緯を残すためのメモとして書き始めた記事だが、話しているうちに直した方がいい点が固まったので、書いている途中でそのままスキル本体（",[30,31,32],"code",{},"SKILL.md","・",[30,35,36],{},"references/","配下）に反映した。",[39,40,41],"h2",{"id":41},"元記事の要点",[14,43,44],{},"記事は、351ページの資料を分類したところ、使われている型が7種類しかなかったという調査結果を紹介している。使用頻度は次の通り。",[46,47,48,64],"table",{},[49,50,51],"thead",{},[52,53,54,58,61],"tr",{},[55,56,57],"th",{},"型",[55,59,60],{},"頻度",[55,62,63],{},"構成",[65,66,67,79,90,101,112,123,134],"tbody",{},[52,68,69,73,76],{},[70,71,72],"td",{},"論証テーブル",[70,74,75],{},"45%",[70,77,78],{},"課題→現状→打ち手の3列",[52,80,81,84,87],{},[70,82,83],{},"データチャート",[70,85,86],{},"11%",[70,88,89],{},"グラフ＋「So What」注釈が必ずセット",[52,91,92,95,98],{},[70,93,94],{},"○×比較",[70,96,97],{},"9%",[70,99,100],{},"評価軸を統一し○△×で埋める",[52,102,103,106,109],{},[70,104,105],{},"中扉",[70,107,108],{},"10%",[70,110,111],{},"ほぼ白紙、セクションの区切り",[52,113,114,117,120],{},[70,115,116],{},"絵解き",[70,118,119],{},"8%",[70,121,122],{},"アイコン＋矢印で全体像。冒頭専用",[52,124,125,128,131],{},[70,126,127],{},"フレームワーク",[70,129,130],{},"7%",[70,132,133],{},"2軸マップ等、絞り込みの場面だけ",[52,135,136,139,141],{},[70,137,138],{},"ロードマップ",[70,140,130],{},[70,142,143],{},"スイムレーンで主語（誰が）を分離",[14,145,146],{},"一番多いのは装飾性ゼロの表（論証テーブル）だという点が記事の主眼で、「一流ほど基本の型を使い倒す」という一文に集約されている。7つの型は文章で読んだだけでは構造の違いが頭に残りにくいので、テキストを抜いて背景色のブロックだけでレイアウトの骨格を並べてみた。",[148,149,150,155],"figure",{},[151,152],"img",{"src":153,"alt":154},"/images/svg-diagram-skill-deloitte-7-types-review/figure-01.svg","デロイト資料に見つかった7つの型のレイアウト早見図",[156,157,158],"figcaption",{},"図1: 7つの型は装飾ではなくブロックの分割の仕方（列で割る・軸で割る・レーンで割る）が違うだけで、頻度45%の論証テーブルが最も単純な3列構造にすぎない",[14,160,161],{},"もうひとつの柱が、全ページ共通の「5点骨格」。",[163,164,165,169,172,175,178],"ol",{},[166,167,168],"li",{},"タイトル（14〜20字）",[166,170,171],{},"リード帯 ─ 主張を1行で言い切る帯",[166,173,174],{},"ヘッドメッセージ ─ ■付きで「〜と考えられる」と断定する文",[166,176,177],{},"ボディ ─ 表や図はここだけ",[166,179,180],{},"出典 ─ 全ページ例外なし",[14,182,183],{},"「表や図を見なくても上の3行で結論が読める」という設計で、出典は全ページに例外なく付けると明記されている。この5要素がページのどこにどう積み上がるかも、同じやり方で図にしておく。",[148,185,186,190],{},[151,187],{"src":188,"alt":189},"/images/svg-diagram-skill-deloitte-7-types-review/figure-02.svg","全ページ共通の5点骨格（タイトル・リード帯・ヘッドメッセージ・ボディ・出典）",[156,191,192],{},"図2: タイトル・リード帯・ヘッドメッセージの3行だけで結論が読め、根拠となる表や図はボディに封じ込め、出典は末尾に必ず置く",[39,194,195],{"id":195},"自分のスキルと突き合わせる",[14,197,198],{},"手元のsvg-diagramスキルには、色（グレー8段階＋マゼンタ4段階）、テキストサイズ、viewBoxとグリッド、矢印の直角コネクタ、1図1メッセージの原則など、実装レベルの規律はすでにかなり細かく入っている。元記事と突き合わせて見えた抜けは、「出典」と「型のカタログ」の2箇所だった。",[200,201,203],"h3",{"id":202},"抜けていた-出典表記","抜けていた: 出典表記",[14,205,206],{},"一番はっきりした抜け漏れがこれだった。データチャートの数値をどう描くかのルール（本体に数値を直接描く、ホバー依存を禁止する等）はすでにあるが、「どこから取った数値か」を図の中に明記するルールがどこにもない。beat-monitoringの決算チャートのように、数値そのものが記事の主張になる図解では効いてくる欠落だった。単に文字で出典を書くだけでなく、元がWeb上のデータならURLをリンクにする、というところまでルールに含めたい。",[200,208,210],{"id":209},"未収録だった型-論証テーブルso-what注記評価表","未収録だった型: 論証テーブル・So What注記・○×評価表",[14,212,213],{},"図解の型を選ぶためのボキャブラリー集にも、「課題→現状→打ち手」を3列で固定した型は入っていなかった。頻度45%という実務データを見ると、優先して型として持っておく価値がある。",[14,215,216],{},"データチャートについては「数値をチャート内に直接描く」というルールはすでにあるが、「主張そのものを注記ボックスとして図の中に置く」という具体的な実装パターンまでは踏み込んでいなかった。元記事の「グラフは主張の証拠品」という言い方がそのまま使える。",[14,218,219],{},"○×比較も同様で、対比図の高さ整合や反復ラベルの太字禁止のルールはあっても、○△×で埋める評価表そのものの型は明文化されていなかった。",[39,221,222],{"id":222},"見送った点",[14,224,225],{},"記事にあった手法のうち、次の3つは今回は取り込まないと判断した。",[227,228,229,236,242],"ul",{},[166,230,231,235],{},[232,233,234],"strong",{},"色帯で主張を強調する「リード帯」",": 手元のスキルには「カードのフチに色をつけない」「原色を混ぜない」という禁止事項がある。色面での強調はこの禁止事項とぶつかる可能性が高く、グレー濃淡とマゼンタ1色の枠内でどう表現するか詰めないと安易に真似できない（上の図2ではマゼンタ1色の帯として再現したが、実際に自分のスキルへ採用するかは別途詰める）",[166,237,238,241],{},[232,239,240],{},"■付きの断定文",": 提出資料としての文体で、ブログ記事の図解キャプションには堅すぎる",[166,243,244,247],{},[232,245,246],{},"赤字での更新箇所の上書き",": バージョン管理された社内資料の運用で、単発公開のブログ記事には出番がない",[39,249,251],{"id":250},"論証テーブルの列見出しとマゼンタ強調の使い方を作り直す","論証テーブルの列見出しと、マゼンタ強調の使い方を作り直す",[14,253,254],{},"論証テーブル型をスキルに追加する前に、「課題→現状→打ち手」を固定ラベルとして刻んでいいのか迷った。自分が扱う記事は提案書だけでなく要約・分析も多く、この3つのラベルが常に当てはまるとは限らない。",[14,256,257,258,261],{},"doc-communicationスキルの",[30,259,260],{},"story.md","を読み直すと、この3列構造自体が「状況→解釈→行動」という定番の骨格の1バリエーションだと分かった。定番パターン（原因対応型・大転換要求型・変化適応型・チャンス開拓型）は、いずれも3ステップの論証構造を持っている。「課題→現状→打ち手」はそのうちの原因対応型を提案書向けに言い換えたものにすぎない。",[14,263,264],{},"そこで論証テーブル型は、列見出しを固定せず「3列で完結する論証構造」という構造だけを定義し、列見出しは記事の主張構造に応じて選ぶことにした。ただし、doc-communicationスキルには「フレームワーク語彙を読者向けの図解ラベルにそのまま出さない」という禁止ルールがあるので、列見出しには「状況」「解釈」「行動」という言葉自体は使わず、記事の中身に応じた具体語に翻訳する。",[14,266,267],{},"もう一つ、論証テーブルの図を作る過程で気づいた点がある。最初のバージョンは「打ち手（結論）列」を丸ごと薄いマゼンタの背景で塗って強調していた。これに対して、強調ポイントはマゼンタでいいとしても、必ずしも列全体を塗る必要はなく、文字色をマゼンタにする方がいい場合の方が多い、という指摘を受けた。",[14,269,270],{},"たしかに、列全体を背景色で塗ると、その中のどの語句が重要なのかがかえって伝わらない。強調はまず「語句・数値・短いフレーズの文字色をマゼンタにする」で行い、背景（面）での強調は、独立した1枚のカードやバッジを他と区別する必要がある場合だけの例外にする、という優先順位に直した。上の図1・図2はこの直し方を反映した状態になっている（論証テーブルの3列は同じ背景のまま、結論列の中の語句だけが文字色で強調されている）。",[39,272,273],{"id":273},"スキルに反映した内容",[14,275,276,277,280],{},"実際に",[30,278,279],{},"svg-diagram","スキル本体に反映したのは次の3点。",[163,282,283,289,295],{},[166,284,285,288],{},[232,286,287],{},"出典表記ルールの追加",": URLがあれば必ずリンクにすることを明記",[166,290,291,294],{},[232,292,293],{},"論証テーブル型の新規ファイル化",": 列見出しを固定せず、doc-communicationの定番パターンから記事の主張構造に応じて選ぶ設計にした",[166,296,297,300],{},[232,298,299],{},"マゼンタ強調の優先順位の見直し",": 文字色での強調を基本形とし、背景（面）での強調は独立した短い要素を区別する場合だけの例外にした",[14,302,303],{},"まだ反映していないのは次の2点。",[227,305,306,309],{},[166,307,308],{},"データチャートのSo What注記ボックスの明文化",[166,310,311],{},"○×評価表型の追加",[14,313,314],{},"こちらは追って必要になったタイミングで反映する。",{"title":316,"searchDepth":317,"depth":317,"links":318},"",2,[319,320,325,326,327],{"id":41,"depth":317,"text":41},{"id":195,"depth":317,"text":195,"children":321},[322,324],{"id":202,"depth":323,"text":203},3,{"id":209,"depth":323,"text":210},{"id":222,"depth":317,"text":222},{"id":250,"depth":317,"text":251},{"id":273,"depth":317,"text":273},"dev",null,"経産省納品資料を分析したnote記事の「7つの基本型」「5点骨格」を読み、自作のsvg-diagram図解スキルと突き合わせた記録。出典表記ルールと論証テーブル型を追加し、doc-communicationスキルを参照して列見出しの設計方針を固め、マゼンタ強調を面から文字色優先に見直した。","md",{},true,"/svg-diagram-skill-deloitte-7-types-review","claude-code-tools",false,"2026-07-16T00:00:00.000Z",{"title":5,"description":330},"2026-07/2026-07-16/svg-diagram-skill-deloitte-7-types-review",[341,342,343,344,345],"SVG","図解","スキル改善","Claude Code","ドキュメント設計","uMSCPshBgifEDXmzQ-pN6zKtWjOBxXzqbgWmy954LFk",[],"https://log.eurekapu.com/og/blog/svg-diagram-skill-deloitte-7-types-review.png?v=2026-07-16T00%3A00%3A00.000Z&title=%E3%83%87%E3%83%AD%E3%82%A4%E3%83%88%E3%81%AE351%E3%83%9A%E3%83%BC%E3%82%B8%E8%B3%87%E6%96%99%E3%81%AF%E3%80%8C7%E3%81%A4%E3%81%AE%E5%9E%8B%E3%80%8D%E3%81%A0%E3%81%91%E3%81%A7%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%84%E3%81%9F%20%E2%94%80%20note%E8%A8%98%E4%BA%8B%E3%81%8B%E3%82%89SVG%E5%9B%B3%E8%A7%A3%E3%82%B9%E3%82%AD%E3%83%AB%E3%81%AB%E8%B6%B3%E3%82%8A%E3%81%AA%E3%81%84%E8%A6%81%E7%B4%A0%E3%82%92%E6%B4%97%E3%81%84%E5%87%BA%E3%81%97%E3%81%9F&author=Kei%20Komatsu&sig=222ba22d134773d0",1784186910594]