東京山側DMC ／ Design Comparison ← デザインギャラリーへ戻る
これまでのスライドと、
学習したデザインを並べる。
左が徳満さんがこれまで作ってきた実物のスライド、右が2026年7月に取り込んだ html-slide のデザインです。 どちらも実際のファイルをそのまま撮ったもので、加工していません。何がどう違うのかを、下の表で数値に分解しています。
01並べて見る
上下が対になっています。左＝これまでの資産／右＝学習したデザイン。
地域創生プロデューサー講座 第10期・第5回
2026年8月20日。緑のグラデーション背景に、左サイドバーで進行を出す構成。情報の整理は丁寧で、講座としては完成度が高い。
- 階層が明快
- 進行が見える
- 装飾が一つもない
- 数字が主役になっていない
html-slide ／ 表紙
白地に方眼。タイトルは178px（89pt）でグラデーション。背景に巨大なゴースト数字が突き抜け、下端にグラデ帯が1本走る。
- タイトル89pt
- グラデ文字
- 巨大ゴースト数字
- 方眼＋四隅の＋
CTO向け AI活用資料
2026年8月10日。落ち着いたビジネス資料。読みやすいが、1枚を見ただけでは「どこの会社の、何の資料か」が伝わりにくい。
- 読みやすい
- 記憶に残らない
- ロゴが無い
html-slide ／ 数値ページ
数字200px（100pt）をグラデーションで置き、その下にグラデのメーターを引く。カウントアップして伸びる。1枚で言いたいことが1つだけ。
- 数字100pt
- メーター
- チップ見出し
- 1枚1メッセージ
自社販売の提案
2026年7月8日。テーマAのビジネス配色。構造は整っているが、全ページが同じ表情で進むので、途中で見る側の集中が切れやすい。
- 構造が整っている
- ページ間に強弱がない
html-slide ／ 比較ページ
太い黒枠のカードを矢印でつなぎ、右側だけグラデーション枠にして「勝ち」を示す。ビフォーアフターが一目で分かる。
- 太枠カード
- グラデ枠で差をつける
- 矢印で流れを作る
AIスクール「聞いてみよう編」ふりかえり
2026年7月28日。緑テーマの独自フレームワーク。初心者向けに噛み砕く配慮はあるが、写真も装飾も使っていない。
- 初心者に親切
- 全部テキスト
html-slide ／ 背景ページ
結論を104px（52pt）のグラデ文字で言い切り、右上に傾いたスタンプを押す。読ませるのではなく「見せて」いる。
- 結論52pt
- 傾いたスタンプ
- 読ませず見せる
02差を数値に分解する
感覚の話にしないために、CSSを1行ずつ読んで実数で並べました。左が現状、右が学習したデザインの実測値です。
| 項目 | これまでのスライド | 学習したデザイン（html-slide） | 効いている理由 |
|---|---|---|---|
| 表紙タイトル | 約48〜56px（24〜28pt） | 178px（89pt） | 3倍以上。見た瞬間に何の話か決まる |
| 強調する数字 | 使っていない | 200px（100pt）＋グラデーション | 数字を主役にすると1枚が持つ |
| 見出し／本文の比 | 約1.4〜1.8倍 | 2.2〜3.8倍 | 比が小さいと「文書」に見える。大きいと「スライド」になる |
| フォントの太さ | 400〜700 | 900（最太）を基本にする | 細いゴシックは投影で痩せて弱く見える |
| 背景 | 単色またはグラデーション | 方眼36px・不透明度0.13＋四隅の＋記号 | 白地が「無地」でなくなり、作り込み感が出る |
| 強調の手段 | 色を変える／太字 | 蛍光イエロー #ffe83c のマーカーを-1度傾ける | 手で引いた感じが出て、視線が必ず止まる |
| 背景の余り | 空白のまま | 600〜980pxのゴースト数字を不透明度0.10で置く | 余白が「意図した余白」に変わる |
| カード | 薄い枠＋影 | 4px の黒枠／グラデーション枠 | 細い枠は投影で消える。太い枠は形が残る |
| 画面の締め | なし | 下端に高さ30pxのグラデ帯 | 全ページ共通の「額縁」になり、シリーズに見える |
| 1枚の情報量 | 見出し＋箇条書き5〜7行 | 1枚1メッセージ | 詰めるほど文字が縮む。分けるほど大きくできる |
| ロゴ | 入っていない | （テンプレには無し） | 両方とも未対応。今回これを入れる |
03これまでに学習したデザイン資産
2026年7月21日の「Claudeがデザイン知識を吸収するチャット」で取り込んだものです。会話の原文110ファイルを検索して特定しました。
html-slide スキル 配布ページ
白地×方眼×グラデ×蛍光マーカー×巨大ゴースト数字。今回いちばん参考にしている系譜。ページ自体もダーク×ネオンで作り込まれている。
fable5 web-production スキル 配布ページ
LP・ホームページ制作の作法。ここから web-production スキル（参照ファイル21本・1,607行）を取り込んだ。
LPデザイン34案ギャラリー
徳満さん自身のLPで仮モックを34案つくり、5ラウンド見せて反応を測った実物。「何が刺さって何が外れたか」の一次データ。公開されているのは選抜4案。
0434案の検証で分かっていたこと
上の34案ギャラリーの結果は .claude/skills/web-production/references/lp-design-playbook.md に残っていました。
今回のデザインは、ここに書かれた勝ち条件に沿って作り直しています。
| 区分 | 内容 | 今回どう反映したか |
|---|---|---|
| 刺さった① | コンセプトの見立て（比喩）が明確。ページ全体が何かになりきっている | このギャラリーは「山の地図」。デザインを選ぶ＝どの道で登るかを選ぶ |
| 刺さった② | 明るい配色。暗いトーンは全案不採用だった | 深緑の壁で一度作ったが、この記録を見て明るい地図の紙に作り直した |
| 刺さった③ | 触って遊べるシグネチャー演出を1案に必ず1つ作り込む | カードに触れると、そのデザインの色が背景の等高線に染み出す |
| 刺さった④ | 太いグラフィックの骨格。極太タイポ・強いコントラスト | 見出しは最太ウェイト、枠は3px、影は硬い黒のずらし影 |
| 外れた | 生成り×明朝×余白の静謐系（「全部イマイチ。全然すごいと感じさせられない」） | この方向は採用しない |