design: Qiita CLI Preview のスライド画面のデザインを作成

[DeguchiHiroki]

Qiita CLI の Preview の UI・体験デザインを Pen.dev で作成しました。3ページと共有ライブラリの4ファイルです。基本は実装の現状（as-is）を写していますが、/slides/[id] のプレビューだけ 2026-09-14 の指摘で提案（to-be）に変えています（下の /slides/[id] の節）。

実装（#409）は 2026-09-04 に main へマージ済みなので、当初は「as-is + 改善案」の2本立てで出していましたが、改善案（design/sandbox/20260909-slide-preview/）は削除し、design/ は製品の現状の正だけを持つ形にしました。読み取れた課題は下の表に残してあるので、直すと決めたものは実装 issue として起票します。

Refs: https://github.com/increments/ai-lead-group/issues/411

置き場所

Router.tsx のルート3件と design/pages/ を1対1にしています。

ファイル	対応する実装	中身
design/shared-library.lib.pen	components/Layout.tsx	新設。 increments/Qiita からコピーした variables 177件 + qiita-cli 用に足した8件と themes、共通コンポーネント（Button / LinkButton / Select / Divider / Sidebar）
design/pages/index/index.pen	pages/items/index.tsx（/）	README を白カードに描画するトップ。5フレーム
design/pages/items/items.pen	pages/items/show.tsx（/items/[id]）	記事詳細。6フレーム
design/pages/slides/slides.pen	pages/slides/show.tsx（/slides/[id]）	スライド詳細。10フレーム

ページの3ファイルは imports: {"lib": "../../shared-library.lib.pen"} で、トークンは $lib: 参照です。Sidebar の実体はライブラリの1つだけで、3ページは lib:Z36Vk8 を ref しています（Layout.tsx が全ルートを包むシェルなので）。MarpSlideFrame は /slides/[id] 専用なのでライブラリに入れていません。

frame の幅は viewport（1920px / 1199px / 375px）、高さは書き出した実寸です。
canvas.md が「frame の高さは書き出した実寸を使う」と定めているので、中身が viewport を超える frame はページ全体の高さにしてあります（max(viewport, 中身)。?present=1 だけは実装が height: 100vh 固定なので 1080px）。ブラウザでスクロールして初めて見える範囲まで1枚に入っているぶん、viewport の折り返し位置は画面に出ません。

viewport は 1920px / 1199px / 375px。 src/client/lib/mixins.ts の breakpoint（L:1199 / XL:1919）から引ける幅に揃えました。1199px は、実装の contentsContainerStyle（maxWidth: 820 + margin: 0 auto）にカードが収まらなくなる唯一の分岐で、カードが 807px に縮みます。

画面

/（design/pages/index/index.pen）

1920px	1199px	375px
ideal / README を描画	ideal / カード 807	ideal / ここだけツールバーが出る

README が見つからない	不明なエラー

/ のツールバー（HeaderIndex）は currentWidth <= 769 のときだけ出るので、1920px と 1199px には出していません。

/items/[id]（design/pages/items/items.pen）

1920px	1199px	375px

記事情報を開いた状態	ファイルが見つからない	フロントマター不正

本文は .it-MdContent（Qiita の article.css）を実値で写しています。 src/server/api/assets.ts は CDN へリダイレクトしているだけなので、公開記事の HTML から実 URL を引いて取得しました。本文 17px/1.7、h2 26px/1.4 + 罫線、h3 22px/1.6、p の margin 16、ul の padding-left 1.5em、code-frame は gray110 / gray0、blockquote は左 4px の bar、table の td は padding 4-12 です。

/slides/[id]（design/pages/slides/slides.pen）

スライドは6つの frame すべて3枚です。 実装はページ数を固定せず pages.map で全部描くので、3枚は代表的な枚数です。

2026-09-14 の指摘で、ここだけ as-is ではなく提案（to-be）になりました。 スライドの影を 1px の枠に変え、ページ番号（N / 3）を消し、スピーカーノートを足し、ツールバーのボタンを「スライドショーを開始」「スライドを投稿する」の2つにしています（375px はアイコンのみ）。いまの実装にはどれもありません。

1920px	1199px	375px
frame 1867px / カード 820 中央	frame 1846px / カード 807	frame 1157px / ツールバー 66px（課題 H）・ボタンはアイコンのみ 48×48

スライド情報を開いた状態（1920px）	同（1199px）
frame 1979px	frame 1958px

バリデーション警告	404	フロントマター不正	?present=1
課題 D / frame 1912px	課題 G	課題 G	スライド 1920×1080 を左上基準 / 下端 42px はフッターの外

共有ライブラリ（design/shared-library.lib.pen）

Sidebar（open 360 / rail 48 / mobile 375）	Button	LinkButton	Select
課題 E / F がここに出ている

2026-09-14 の指摘で実装から変えたところ（/slides/[id] のプレビュー）

ここだけ as-is ではなく提案です。 いまの実装にはありません。

箇所	実装	この PR（提案）
スライドの縁	boxShadow: 0 1px 4px rgba(0,0,0,.2)（MarpSlideViewer/index.tsx の pageStyle）	1px の枠（--color-divider）。影は18件とも外した。?present=1 は全画面なので枠なし
ページ番号	{index+1} / {totalPage} を右下に出す（pageNumberStyle）	行ごと削除（18件）。?present=1 のフッターのカウンタ（MarpSlidePresenter.tsx:84-86）は別物なので残した
スピーカーノート	speaker_note: string[] が API から渡っている（view-models/slides.ts:3）が描画していない	各ページの下に追加（18件）。--color-surfaceVariant の角丸ブロックに見出し「スピーカーノート」＋本文
ツールバーのボタン	プレゼンテーションモードで開く の1つだけ（緑枠。HeaderSlide）	2つに。スライドショーを開始（gray 枠）＋ スライドを投稿する（green 枠）。375px はアイコンだけ（slideshow / publish、48×48）

スライドとスピーカーノートの間隔は 16px にしました。実装の pageWrapperStyle は 4px ですが、それはページ番号との間隔です。

投稿する（短縮ラベル）は使っていません。 同じコメントの最後の「viewport に合わせてアイコンボタンに変える」を最終案と読んだためです。実装の分岐は currentWidth <= 769 の1段なので、この読み方だと 投稿する が出る幅がありません。ラベルを2段階にするなら 768px の frame を足します。

スピーカーノートの本文は代表値です。 実装が描画していないので、改行の扱い・複数ノートの並べ方・空のときの出し方が読めません。

現状の UI から読み取れる課題

改善案は削除したので、ここは「課題として書き残す」だけです。 根拠は実装のコードとスクリーンショットの画素です。

#	課題	根拠
A	スライド情報を開くと1枚目のページ番号が画面に出ない。 1199×720 でスライドは y=287〜714 に収まるが、ページ番号（1 / 3）が y=718〜743 で 23px 切れ、2枚目の頭も見えない → ページ番号そのものを消す提案にしたので消滅。 実装がページ番号を残すなら復活する	MarpSlideViewer/index.tsx:50-55 / SlideInfo.tsx:28-30
D	バリデーション警告が、パネルの外に置かれたアイコン+1行テキストで、#68 決定6 の「警告バナー」になっていない（背景も枠も無い）	SlideInfo.tsx:137-155
E	サイドバーの Slides セクションが Articles より情報量が少ない（並び替え UI が無い）	SidebarContents.tsx:311-524 / SidebarSlides.tsx:56-73
F	閉じた 48px レールから新規スライドを作成できない	SidebarContents.tsx:525-634 に handleNewSlide の呼び出しが無い
G	エラー2種（404 / フロントマター不正）はツールバーも白カードも出ず、裸のテキストだけになる	show.tsx:123-139
H	375px でツールバーの「ファイルパスをコピー」が2行に折り返し、57px → 66px に伸びる	Header.tsx:131-146, 208-214

取り下げた課題が2つあります。C（ページ番号が無い）は実装にありました。B（スライド情報が常時展開）は誤りで、SlideInfo.tsx:28-30 のとおり既定は畳んだ状態です。

エラーは2経路あるので state を分けています。 SlideInfo.tsx:137-155 のバリデーション警告（yellow60・スライドは表示できる）と、show.tsx:126 のフロントマター不正（red10 / red60・setSlide(null) で表示できない）です。

実装と意図的に変えたところ

実装から外したのは5つだけです。

箇所	実装	.pen	なぜ
トグルのアイコン	expand_less / expand_more	keyboard_arrow_up / keyboard_arrow_down	pen に expand_* の字形が無い（「?」になる）。字形自体は同じ
エラーのアイコン	<MaterialSymbol fill={true}>error</MaterialSymbol>（塗り）	Outlined のまま	pen の library に塗りのバリアントが無い。色（$lib:red-60）とサイズ（16px）は一致
サイドバーのスライド名	nowrap + ellipsis	省略後の見た目をテキストで表現	pen は幅を超えたテキストを折り返す（44文字でカードが1行伸びた）
本文のリンクの下線	text-decoration: underline + text-underline-offset: .5rem	色（$lib:green-text）だけで下線は無し	pen に textDecoration が無い（Invalid properties: /textDecoration unexpected property）。線を自前で引くとテキスト幅の見積り誤差がそのまま出る
混在する run の折り返し	ブラウザが折り返す	幅を見積もって行に割った	pen に折り返しの指定が無い（fixed-width は1つのテキストノードの中でしか効かない）。375px で右にはみ出す行が0件であることを書き出しで確認済み

寸法をトークンで書けないので即値にしたところ（見た目は実装と一致）。

箇所	実装	.pen	なぜ
プレゼンボタンの padding	padding: 4px 16px + border: 2px（外側）	padding: [6, 18] + strokeWidth: 2	pen の inner stroke はレイアウトに寄与しないので border 分を padding に足した。実装 296×41 / pen 295×41
ロゴの濃灰	#3c4040 と #3D4040 が混在	$lib:brand-qiita-black（#3c4040）に統一	赤 1/255 差で視覚的に同じ。生の hex を使わない規約に合わせてライブラリにトークンを新設
角丸・線幅・.it-MdContent のフォントサイズ	borderRadius / border / em ベースの値	生の数値	上流の共有ライブラリ（変数177件）に角丸・線幅のトークンが1つも無く、article.css の em ベースの値にも受け口が無い。代わりに機械的な検査で値の集合を見ている

375px の「ファイルパスをコピー」は、ラベルとコピーアイコンを左に寄せています。 実装の mobileHeaderCopyButtonStyle は grid-template-columns: 1fr 16px なのでラベルが 1fr で伸びてアイコンが右端に離れますが、そこだけ手で詰めました。

相談したいこと

1. 課題 A はページ番号を消したので消滅しました。 実装がページ番号を残すなら復活します（そのときは「現状のまま」で確定、という前回の整理に戻ります）
2. 未定義の CSS 変数が4つあります。.pen は実装の見た目に合わせました。 lib/variables.ts が参照する名前を article.css の定義と1つずつ照合したところ、--color-text-medium-emphasis / --color-text-disabled / --color-text-high-emphasis / --color-surface-variant の4つに定義がありません。命名が2系統あるのが原因で、article.css 側は --color-mediumEmphasis / --color-highEmphasis（ハイフンなし）で定義されています。前の3つは文字色なので継承色 #212121 に落ち、--color-surface-variant は背景色なので透明になります（記事のタグの chip に背景が付きません）。結果として .it-MdContent の中（本文・引用）は階調が効き、アプリのシェル（サイドバー・ツールバー）だけが継承色 #212121 に落ちています（実測でサイドバーの文字とアイコンが全部 (33,33,33)）。デザインシステム本来の階調に戻すなら、実装側で CSS 変数名を揃えるのが先です
3. 共有ライブラリに qiita-cli 用のトークンを8つ足しました（上流 177件 → 185件）。どれも「実装にはあるのに上流のライブラリに受け口が無い」ものです。Qiita 側のライブラリに足すべきものなら、そちらへ回します
   • fontWeight-semibold（600）— 実装の Weight.bold は 600 なのに、コピー元の fontWeight-bold は bold（= 700）
   • brand-qiita-black（#3c4040）— ロゴの濃灰
   • Elevation/slide-card/{offset-x,offset-y,blur,color}（0 / 1 / 4 / #00000033）— 実装の影（0 1px 4px rgba(0,0,0,.2)）が上流の Elevation/level1〜5 のどれとも一致しない（level1 は blur 1 / 色 #1E212140）
   • getSpace(5/4)（10）/ getSpace(5/2)（20）— 実装が SidebarContents.tsx:720,732 で getSpace(5/2) を使っているのに、上流の getSpace(n) が 1/4・1/2・3/4・1・3/2・2・3〜10 しか持っていなかった
4. Button / LinkButton / Divider はライブラリに入れていますが、どこからも ref していません。 qiita-cli の実装に共通の Button コンポーネントが無く（<button css={...}> の個別実装）、区切り線も Divider 要素ではなく CSS の border だからです。理由は各カードの context に書いてあります。使い先が無いなら外す判断もあります
5. ロゴは3ページに重複しています（QiitaPreviewLogo / QiitaLogo）。increments/Qiita のライブラリは Logo カードを持っているのでライブラリに移すのが筋ですが、Sidebar の中にネストしているので今回は触っていません
6. プレゼンモードは実装どおり白背景・影も枠もなしなので、スライドの輪郭が背景と同化しています。暗い背景にする改善も考えられます
7. スライドの中身は箱の大きさに追従していません（現状のままで決着済み）。 MarpSlideFrame は 480×270 で作り、各ページはそれを ref で 772×434 / 759×427 / 1920×1080 に伸ばしていますが、伸びるのは箱だけで中の文字は 480 基準のままです（タイトルのインク幅が4種類の箱すべてで 302px）。実装は Marp の SVG ごと等比スケールするので本来は比率が一定ですが、等比にするには共有ライブラリにスライド用のトークンが要るため（いまは fontSize が最大 32、余白が最大 80）、このPRでは代表値と割り切っています
8. 「スライドを投稿する」の緑の枠は白地とのコントラストが 2.07:1 で、WCAG 1.4.11（非テキスト 3:1）に届きません。実装の headerButtonStyle がこの色（green60 #67cb1b）で border: 2px を引いているので as-is に合わせています。ラベルの文字（green80 5.34:1）は足りています
9. 375px のアイコンボタンは 48×48 にしました（タップ領域 44×44 の目安）。実装に対応するボタンが無いので、実装の他のアイコン（Copy Button 16×16 / メニュー 40×40）とは揃っていません
10. README と記事本文は代表的なマークダウンです。 / が描くのは利用者のプロジェクトの README.md で、中身はプロジェクトごとに変わります。見出し・箇条書き・コードブロック・引用・表・リンク・インラインコードが一通り入る構成にして、Markdown プレビューとして何が見えるかが分かるようにしました
11. 共有ライブラリへの提案: Button にアイコン付きのバリアントが欲しいです（実装にはアイコン付きボタンがあるのに、descendants では足せません）

確かめられていないこと

• プレゼンモードのスライドの寸法は書き出しから検証できません。 白地に白いスライドで影も枠も無いので、全画素を走査しても左右端に色の変化が0件です。MarpSlidePresenter.tsx が width: 100% / aspect-ratio: 16/9 なので 1920×1080 と読み、フッター（footerStyle 42px 固定）の上端が罫線として写ることだけを実測しました。スライドの下端 42px はフッターの外に隠れます
• $lib:red-10 / $lib:red-60 の実色は実装と突き合わせられていません。 赤が出る状態の実装スクリーンショットが無いためです。同じパレットの4トークン（yellow-60 #e0af00 / green-60 #67cb1b / green-80 #357a00 / gray-10 #f5f6f6）は実装のスクリーンショットの画素と完全一致することを確認しました
• 1199px の実装スクリーンショットだけまだありません。 1920px は / と /items/[id] の2枚、1280×720 は /slides/[id] の分を突き合わせ済みです。1199px の 807px は同じ式（maxWidth: 820 + margin: 0 auto）にコンテナ幅を入れ直しただけなので、計算では確定しています
• 赤が出る状態（フロントマター不正）の実装スクリーンショットがありません。 $lib:red-10 / $lib:red-60 の実色だけ突き合わせられていません
• qiita-cli-rule.md（pen-cli スキルのリポジトリ別ルール）はまだありません。 viewport と imports のキーは決まりましたが、規約として書き残すのは別タスクです

セルフレビュー

/pr-review design を 24ラウンド回しています。残っていた must 1件（スライドの中身を等比拡大するか）は、2026-09-14 の LGTM をもって「現状のまま（中身は代表値）」で決着としました。等比にするなら共有ライブラリにスライド用のトークンを足す話になるので、そのときは別 PR にします。それ以外は0件です。後半で見つかった主なものは、実装との突き合わせを工程として入れ直したときの3件（見出しの罫線の欠落・README のバナー画像・タグの区切り）と、本文が見出し1つと段落1行しかなかったこと（article.css を取得して作り直し）、Sidebar をライブラリへ移した後にずれていたコンポーネント→ページのクリアランス（1414 → 1028）です。

機械的な検査（assets/mech_checks.py）は4ファイルすべて must 0件です。検査は「プロパティを1つずつ足す」形をやめ、ノードに現れる全プロパティ名を集めてトークン束縛 / 値の集合 / 構造のどれにも入らなければ落とす形にしてあります。descendants の中身も同じ検査に流します。

🤖 Generated with Claude Code

[DeguchiHiroki]

まずは、既存ページを pagesに作って欲しいな

[DeguchiHiroki]

design/pages/slides/slides.pen を作りました（4f23851）。PR 本文も最新化しています。

• pages/ に実装の現状（as-is）を写しました。 show.tsx の可視分岐6件のうち描くものがある5件 + モバイル1件で、/slides/[id] の 1280px 列5枚（既定 / スライド情報を開いた状態 / バリデーション警告 / 404 / フロントマター不正）+ 375px 1枚 + ?present=1 1枚です
• sandbox/ は改善案として残しました。 pages/ が製品の現状の正、sandbox/ が検討の経緯という役割分担です
• as-is を組んだことで3つ見つかりました。(1) 「プレゼンテーションモードで開く」ボタンが実装より 4px 小さく、課題 A の「1枚目が 1px はみ出す」が再現していなかった（両ファイルを修正）(2) 課題 B「パネルは常時展開」は誤りで、既定は畳んだ状態（SlideInfo.tsx:28-30）(3) 375px でツールバーが2行に折り返して 66px になる（課題 H として追加）
• 課題 G は「エラー2種」と書いていたのに 404 のフレームが無かったので、両ファイルに追加しました

決めてほしいことが4つあります（本文の「相談したいこと」1・2・4・5）。とくに 課題 A / B の扱い（既定の見た目は改善案と同じなので、改善案は A / B に対して実質何もしていないことになります）と、design/shared-library.lib.pen を新設して重複（177変数 + 汎用コンポーネント5件）を解消するかをお願いします。

セルフレビューは7ラウンド（must 0 / 未確認 0）を通しています。

[DeguchiHiroki]

「まずは、既存ページを pages に作って欲しいな」に続けて、いただいた2つの回答を反映しました。本文は全面的に書き直しています。

回答の反映

「共有ライブラリを新設する」 → design/shared-library.lib.pen を作り、2ファイルを imports にしました。

• ライブラリに移したのは variables 177件・themes・Button / LinkButton / Select / Divider
• MarpSlideFrame と Sidebar は移していません。 前者は /slides/[id] 専用（file.md の「1画面固有のパーツはライブラリに入れない」）、後者は2ファイルで中身が違う（改善案が Sidebar 自体の変更提案なので、ライブラリに1つの正を置けない）ためです
• imports 化で画素は1つも変わっていません（21フレームを md5 で突き合わせて全件一致）

「viewport は 1199px / 1920px に変える」 → 1280px を捨てて 1920px / 1199px / 375px にしました。

• 1199px は maxWidth: 820 が効かなくなる唯一の分岐で、カード 807px・スライド 759×427 になります。ここが課題 A が出る画面です
• 1920×1080 では縦に余裕ができるので、課題 A は「1枚目が 1px 見切れる」から「ページ番号が 23px 切れる（1199×720 のみ）」に変わりました

課題 A は案2 を frame として描きました

文章だけで案1 / 案2 を選ばせるのをやめ、file.md の「複数案は同一ファイル内の複数のトップレベル frame」に合わせて案2（パネルを2列×2行に畳む）を描いてあります。165px → 107px で、1枚目（229〜656）とページ番号（669〜680）が 720px に収まり、2枚目の頭（709）も見えます。どちらを採るか決めてください。

as-is の間違いが6件見つかりました

セルフレビューを16ラウンド回すなかで、実装の写しになっていなかったところが後半で6件出ました。どれも実装のコードと実画面の両方で裏を取って直しています。

何が違っていたか	実装の正
サイドバーのフッターのリンク24件を全部同じ形で描いていた	2グループで別のスタイル。グループ1（Readme / 良い記事… / Markdown記法…）は articlesListItemStyle で先頭に book / lightbulb / help のアイコンが付き末尾の open_in_new は無い。グループ2（コミュニティガイドライン / 利用規約 / プライバシーポリシー）は articleFooterListItemStyle で項目に padding が無く body3
法務リンクの行送りを dense（1.5）にしていた	lineHeight 未指定なので継承値 1.8（実画面の送り 21.6px = 12 × 1.8）
スライド情報のトグルを 20×20 で描いていた	summary::after は font-size 未指定なので継承値の 16px
Toolbar Bar に gap: 8 を置いていた	headerStyle に gap は無い（space_between だけ）。375px では折り返し位置が 8px ずれる
404 のメッセージの行送りを subhead2 の 1.6 にしていた	lineHeight 未指定なので継承値 1.8
影の blur を生の数値で置き、色だけ Elevation/level1 に束縛していた	実装の 0 1px 4px rgba(0,0,0,.2) は上流の Elevation/level1〜5 のどれとも一致しない（level1 は blur 1 / 色 #1E212140）。qiita-cli 用のトークンを新設して実装と完全一致にした

最後の1件は、以前「実装より 5% 濃い」と申告していた意図的な差分がこれで解消したものです。

検査の側も直しました

同じ間違いが3ラウンド見逃されていたので、「プロパティを1つずつ検査に足す」形をやめました。 ノードに現れる全プロパティ名を集めて、トークン束縛（9種）/ 値の集合（3種）/ 構造（25種）のどれにも入っていなければ落とすようにしてあります（37種すべて分類済み）。descendants の中身も同じ検査に流します。

新しい検査を足したら、わざと壊したコピーで落ちることを確かめるようにもしました。これで effect の検査が空振りしていた（effect は list ではなく dict なのでキーの文字列を回していた）ことに気づけています。

確かめられていないこと

本文の最後に4件まとめてあります。とくに次の2つは材料が無いので確かめられていません。

• プレゼンモードのスライドの幅（1845px） — 白地に白いスライドで影も無いので、全画素を走査しても左右端に色の変化が0件。高さは罫線の位置で実測できるので、幅は計算で確定させています
• red-10 / red-60 の実色 — 赤が出る状態の実装スクリーンショットが無く article.css も読めません。同じパレットの4トークンが実装の画素と完全一致することは確認しました

[DeguchiHiroki]

指摘の反映と、ページの追加をしました。

1. ページを Router.tsx の3ルートと1対1にしました

design/
├── shared-library.lib.pen        # variables 185 / Button・LinkButton・Select・Divider・Sidebar
├── pages/
│   ├── index/index.pen           # /              （pages/items/index.tsx）★新規
│   ├── items/items.pen           # /items/[id]    （pages/items/show.tsx）★新規
│   └── slides/slides.pen         # /slides/[id]   （pages/slides/show.tsx）
└── sandbox/20260909-slide-preview/slide-preview.pen   # 改善案

Sidebar を共有ライブラリへ移しました。 全ルートを包む Layout.tsx に対応するのがライブラリなので、3ページ共通のシェルはこちらの担当にしています。pages/ の3ファイルは lib:Z36Vk8 を ref するだけで、実体は1つです。sandbox だけは改善案が Sidebar 自体の変更提案（課題 E / F）なので、ローカルに自分の Sidebar を持ったままにしています。

• index.pen は5フレーム（ideal / not found / unknown error の 1920 + ideal 1199 + ideal 375）。/ は HeaderIndex が currentWidth <= 769 のときだけ出るので、1920px と 1199px にはツールバーがありません
• items.pen は6フレーム（ideal / 記事情報を開いた状態 / not found / フロントマター不正 の 1920 + ideal 1199 + ideal 375）

README と記事本文の中身は代表的なマークダウンにしています。/ が描くのは利用者のプロジェクトの README.md で、中身がプロジェクトごとに変わるためです。

2. いただいた指摘6件

指摘	直したこと
新着順の位置・UI（q3NIS / z8vSP / EeUF9 / k1vn0J）	justifyContent: space_between を外してタイトルの直後へ。並び替えは共有ライブラリの Select を ref していましたが、実装は透明背景の素の <select> で枠もシェブロンも出ないので、sort アイコン + テキストに置き換えました
色・フォントサイズ（Count Badge 計10）	fill を $surface-variant → $gray-20 に。実装は Colors.gray20 直指定で、surface-variant は Dark で $gray-80 に振れるためです。フォントサイズ（body3 = 12 / 行送り 1.5 = 18px の帯）は実装と一致していました
色（YawIQ / h25hj / sPOYD / i1t2JD / jI3e9 / pYVtc / H2nFm / ZgIHD）	下記のとおり $high-emphasis-text に寄せました
S4sMCH に border が無い・色が違う	toggleButtonStyle の border: solid 2px Colors.gray30 を落としていました。stroke を足し、サイズも実測に合わせて 40×40 → 36×36 に（24px アイコン + padding 4×2 + border 2×2）

色の指摘は原因が1つでした。 --color-text-medium-emphasis / --color-text-disabled は qiita-cli のどこにも定義がなく（src/ 全体で参照は lib/variables.ts の1箇所だけ）、実装では継承色 #212121 に落ちます。スクリーンショットを走査したところ、サイドバーの文字とアイコンが全部 (33,33,33) でした（Readme / ガイドライン / 利用規約 / Articles / 新着順 / 未投稿 / バッジの数字 / footer の book・lightbulb・help・open_in_new / nav の panorama・add）。$high-emphasis-text（#000000DE）は白背景で合成すると 255×(1−0.871)=33 = #212121 ちょうどなので、.pen 側をそこに寄せています。

pages/ は as-is なので実装の見た目に合わせましたが、デザインシステム本来の階調に戻すなら、実装側で CSS 変数を定義するのが先です。その場合は .pen を元に戻します。

あわせて、レールのボタンの高さも実装どおり 40×32 に直しました（closeSidebarLinkStyle は padding 4/8 + 24px アイコン、closeSidebarFooterLinkStyle は padding 8/12 + 16px アイコン。アイコン中心のピッチを実測して 32px と確認）。

3. .pen の JSON が不正だったのも直しました

サイドバーの記事行の Leading Icon（book / lightbulb / help）6ノードに id が無く、CLI が読み込み時に Document is not valid: missing required property を6件出していました（pages と sandbox の両方）。check は JSON の妥当性と imports の参照先しか見ないので、セルフレビュー16ラウンドを素通りしていました。

4. 検算

• 機械的な検査を5ファイルすべてに回して must 0件
• Sidebar をライブラリへ移した時点で、既存11フレームを書き出して md5 がベースラインと全件一致
• セルフレビューはラウンド18まで（ラウンド17で目視の指摘2件 —— フロントマター不正の赤ボックスの中央寄せ、1199px / 375px でカードが 820px のままはみ出していた —— を見つけて直しています）

まだ決まっていないこと

• 課題 A の案1 / 案2（sandbox の - slide info open state(案2 パネル圧縮, 1199px) と見比べてください）
• sandbox/items の中身。いただいたツリーにありましたが、file.md は sandbox を YYYYMMDD-{テーマ}/ と定めているので、そこだけ作らずに聞いています
• マークダウンの見出しの行送り。サイズ 24px は実測で確定しましたが（本文 16px 確定 → 字面比から割り戻し）、行送り 1.4 はライブラリが 24px の見出しに対して持っている対の値で、article.css とは突き合わせられていません

[DeguchiHiroki]

「index が実装と違う」の指摘、そのとおりでした。前回のセルフレビューは実装との突き合わせをしていません。 回したのは .pen の内部整合を見る機械的な検査（トークン束縛・padding の生値・矩形交差・フレーム間の余白）と自分の書き出しの目視だけで、実装のスクリーンショットやコードと1項目ずつ照らす工程が抜けたまま must 0件 と書いていました。機械的な検査は .pen の中しか見ないので、実装とのズレは原理的に検出できません。

工程を入れ直したら must 3件出ました。

#	ずれていたところ	実装の根拠
1	.it-MdContent の見出しに下罫線が無かった	/ を走査すると y=430 と y=601 に 1px・幅 772px・#e0e0e0 の罫線がある
2	/ の README 先頭の画像が無かった	y=55..314（高さ260・幅774 ＝ コンテンツ幅いっぱい）
3	タグの chip に , が入っていなかった	Article.tsx:31 が最後以外の <li> の中に <span>,</span> を足す（Qiita, Markdown）

あわせて2件直しました。

• マークダウンのブロック間の余白を一律 24 から実測に最も近いトークンへ（画像→見出し 74.8→72 / 罫線→本文 14.6→16 / 本文→見出し 58.2→56 / 本文→本文 16.4→16）
• ArticleInfo を開いた状態の summary→1行目の隙間を 4→0 に（infoStyle に gap は無く、infoListStyle の & + & だけが 4）

突き合わせの結果

/ の 1920px を書き出して実装の 1280px と比べました（カードはどちらも幅 820・上端 y=16）。

項目	実装	デザイン
カード上端 / 幅	16 / 820	16 / 820 ✓
見出しの罫線の幅	772	772 ✓
本文の行ピッチ	29	29 ✓
本文→見出しの間隔	68	68 ✓
見出しの字面	27	24

最後の1行は書き出し側の字面の取り方の差です（デザインは本文 16px でも字面 16px ＝ em ボックスちょうど、実装は 16px で字面 18px）。フォントサイズ 24 の根拠は実装側の比 27 ÷ (18/16) = 24 で、トークンの text-headline2（24 / 行送り 1.4）に束縛しています。

罫線の色は実測 #e0e0e0 ですがこの色はトークンに無い（article.css の値）ので、最も近い $lib:gray-30（#dfe0e0、ΔR=1）を当てています。

まだ検算できていないこと

/items/[id] の実装スクリーンショットがありません。 手元にあるのは /（current-sidebar.png）と /slides/[id] だけで、items.pen はコードからの再現しか検算できていません。 .it-MdContent の罫線は / の実測を持ち込めますが、記事情報パネルと記事ヘッダの寸法は突き合わせられていません。スクリーンショットをいただければ突き合わせます。

[DeguchiHiroki]

「コンテンツが足りない」の指摘、そのとおりでした。本文が見出し1つと段落1行しかなく、Markdown プレビューのツールなのに何が見えるのか分からない状態でした。

原因は、.it-MdContent の CSS が Qiita 側にあって読めないと判断し、描くのを避けていたことです。実際には src/server/api/assets.ts は article_css_url へリダイレクトしているだけなので、公開記事の HTML から実 URL を引けば読めました（https://cdn.qiita.com/assets/public/article-....min.css）。

article.css から取れた実値（デスクトップ）

要素	値
.it-MdContent	font-size 17px / line-height 1.7（実測の行ピッチ 29px = 17×1.7 と一致）
h1 / h2	1.65em / 1.53em(=26px)、lh 1.4、margin 64(56)-0-16、padding-bottom 4、border-bottom 1px --color-divider
h3	1.29em(=22px)、lh 1.6、margin 40-0-16（罫線なし）
p	margin 16-0
ul / ol	padding-left 1.5em、margin 16-0
blockquote	padding 8-16、margin 24-0、左に 4px の bar（gray30 / radius 4）、文字 mediumEmphasis
.code-frame	radius 8、margin-block 24、padding 8-16、bg gray110 / 文字 gray0、pre code は .82em / lh 1.5
table	margin 16-0、th は bold + bg surface、td は padding 4-12、罫線 1px divider
a	--color-greenText + underline

直したこと

• 記事本文と README を、見出し・箇条書き・コードブロック・引用・表・リンク・インラインコードが一通り入った構成にしました
• 見出しの罫線を $lib:divider に直しました。 --color-divider = rgb(0 0 0 / 12%) で、白に合成すると実測どおりの #e0e0e0 になります（前回 gray-30 = #dfe0e0 で近似していたのは誤りでした）
• コードを等幅にしました（Noto Sans Mono）。article.css は Consolas / Menlo / monospace を指定しています
• pen には折り返しの指定が無い（Layout に flex-wrap 相当が無く、折り返せるのは textGrowth: fixed-width の単一テキストだけ）ため、リンクやインラインコードが混ざる段落は幅を見積もって行に割りました。375px の書き出しを走査して、カードの内容右端 335px を越える行が 0件であることを確認しています

ついでに裏が取れたこと

サイドバーの色の件（前回の #212121）も、これで診断が確定しました。article.css は --color-mediumEmphasis / --color-highEmphasis / --color-disabled を定義していますが、--color-text-medium-emphasis / --color-text-disabled は定義していません（0件）。qiita-cli の src/client/lib/variables.ts は後者を参照しているので解決せず、継承色に落ちています。変数名の食い違いです。

まだ検算できていないこと

/items/[id] の実装スクリーンショットがありません。 .it-MdContent は article.css で裏が取れましたが、記事情報パネルと記事ヘッダの寸法はコードからの再現のままです。いただければ突き合わせます。

[DeguchiHiroki]

「作らないで、20260909-slide-preview は削除しよ」を反映しました。

やったこと

• design/sandbox/20260909-slide-preview/slide-preview.pen を削除しました（6,126行）。sandbox/items も作っていません
• 成果物は pages/ の3枚 + 共有ライブラリの4ファイルになり、design/ は実装の現状（as-is）だけを持つ形になりました
• PR 本文を全面的に書き直しました。 前の本文はまだ「slides の1ページ + 改善案」の頃のもので、index.pen / items.pen が載っていませんでした。/ と /items/[id] のスクリーンショット11枚を新しく貼っています

課題 A（1199×720 でページ番号が 23px 切れる）は「現状のまま」で確定にしました

案2（スライド情報を2列×2行に畳んで 165px → 107px）は改善案の中にだけ描いてあったので、ファイルごと消えています。事実としては pages/slides/slides.pen の - slide info open state(1199px) に残るので、直すと決めたときは実装 issue を切る形になります。課題 D / E / F / G / H も同じ扱いで、PR 本文の表に根拠付きで残してあります。

削除のついでに見つかった must が1件

slides.pen のコンポーネント→ページのクリアランスが 1414px のままでした。

Sidebar（914px 幅）をライブラリへ移したので、slides.pen に残るコンポーネントカードは MarpSlideFrame（528px）だけです。規約は「最大幅 + GG 500」なので x=1028 が正なのに、Sidebar が居た頃の x=1414 のままになっていました。ページ列を一律 -386px しています（列の間隔 300 / 300 / 500 は保たれています）。

16ラウンド見逃していた原因は、検査の記録（assets/mech_checks-final-pages.txt）が古かったことです。 そこには 最大幅 914 + 500 = 1414 = 最初のページ列の x と ok で残っていましたが、これは Sidebar を移す前の実行結果でした。移したあとに slides.pen へこの検査を回し直していませんでした。

あわせて、共有ライブラリの Sidebar の実寸（914×914）を測っていなかったので測り直して記録しています。

セルフレビューはラウンド21まで。4ファイルすべて機械的な検査で must 0件・未確認0件です。

[DeguchiHiroki]

実装のスクリーンショット（/ と /items/[id]、1920px）をいただいたので突き合わせました。must が6件出ています。

縮尺は 0.6494（1920px 幅 → 1246px）でした。サイドバー 234÷360 とカード 532÷820 の2経路で一致したので、これで割り戻して比べています。

直したところ

#	ずれていたところ	実装の根拠
1	items のツールバーが 57px・投稿ボタンが 41×169	50px・33×154 が正。 headerButtonStyle は slides と共通ですが、slides は <Link>（= <a>）でページの body1(16)/1.8 を継承し、items は <button> なので継承しません。実装の実測も slides 41 / items 33 で割れています（Header.tsx:104 と :151）
2	記事情報パネルに 記事投稿キャンペーン / 規約同意 が無い	ArticleInfo.tsx:97-113。postingCampaign があるときだけ出る2行で、スクリーンショットには出ています。ラベルは 100px 幅で「記事投稿キャン / ペーン」と2行に折り返します
3	記事の状態 の「投稿済み」が黒	ArticleInfo.tsx:76 は qiitaItemUrl があれば <a> で包みます。実測の文字色 (44,104,151) は --color-blue80: #2c6897 と完全一致
4	タグに背景を塗っていた	--color-surface-variant は article.css に定義が無いので、実装では透明です。実測でもタグの背景は白のままでした
5	alignItems: "baseline" が不正値	pen が Document is not valid を出していました（index 12件 / items 10件）。check は JSON と imports しか見ないので通っていました
6	/ の本文の先頭ブロックが上に詰まっていた	16px 空くのが正。 実装は <div class="it-MdContent"><div dangerouslySetInnerHTML> と1枚挟むので、.it-MdContent > :first-child { margin-top: 0 } が内側の div にしか効かず、最初の p の margin-top 16 が相殺されて残ります

直したあとの実測は ツールバー 50 / ボタン 33×154 / カード上端 66 / パネル7行（/items/[id]）、カード上端 16 / 先頭ブロック 56（/）で、いずれも実装と一致しました。

ついでに確定したこと

lib/variables.ts が参照していて article.css に定義が無い CSS 変数は、ちょうど4つでした。

--color-text-medium-emphasis   未定義 → 継承色 #212121
--color-text-disabled          未定義 → 継承色 #212121
--color-text-high-emphasis     未定義 → 継承色 #212121
--color-surface-variant        未定義 → 背景が透明（タグの chip）

命名が2系統あるのが原因で、article.css 側は --color-mediumEmphasis / --color-highEmphasis（ハイフンなし）で定義されています。だから .it-MdContent の中（本文・引用）は階調が効いていて、アプリのシェルだけが効いていません。実装側で名前を揃えるのが筋だと思います。

直せなかったもの

.it-MdContent a の下線が描けません。 pen に textDecoration がなく、Invalid properties: /textDecoration unexpected property で弾かれます。線を自前で引くとテキスト幅の見積り誤差がそのまま出るので、色（$lib:green-text）だけにして PR 本文の表に理由を書いています。

残っている未突き合わせ

• 1199px の実装スクリーンショット（1920px と 1280px は突き合わせ済み）
• 赤が出る状態（フロントマター不正）。$lib:red-10 / $lib:red-60 の実色だけ確かめられていません

セルフレビューはラウンド22。4ファイルすべて機械的な検査で must 0件、11枚を2回書き出して md5 一致、375px のはみ出し0件も再確認しました。PR 本文とスクリーンショットも差し替えてあります。

[DeguchiHiroki]

Frame の高さが、クリップされているのが気になるな..
高さを修正してもらえると嬉しい。

[DeguchiHiroki]

frame の高さを直しました。ご指摘のとおりクリップされていて、21 frame 中 9 frame で下端が切れていました。

原因

frame の高さを viewport（1080 / 720 / 812）で固定していたこと自体が規約違反でした。 pen-cli スキルの canvas.md は「frame の高さは書き出した実寸を使う」「直し方は『高さを固定する』ではなく y を送る（固定すると中身が切れる）」と定めています。

直したこと

1. 高さを max(viewport, 中身の実寸) にしました（11 frame）

design/ を複製して全 frame の height を 2500 に差し替えて書き出し、サイドバーを除いた領域で背景色でない最下行を測って実寸を出しています（スケール 2.000 ちょうど / 2回の書き出しで一致 / Failed to load font 0件）。

frame	変更前	変更後
/ 1199px / 375px	720 / 812	920 / 1172
/items/[id] 記事情報を開いた状態 / 1199px / 375px	1080 / 720 / 812	1296 / 1080 / 1414
/slides/[id] ideal 1920 / 開いた状態 1920 / 警告 1920	1080	1636 / 1748 / 1681
/slides/[id] ideal 1199 / 開いた状態 1199 / 375px	720 / 720 / 812	1615 / 1727 / 841

中身が viewport に収まる frame（404・フロントマター不正など）は viewport のままです。?present=1 だけは実装が height: 100vh 固定なので 1080 のままにしました。Sidebar の ref も frame と同じ高さに伸ばしています（実装は sticky ですが pen に sticky が無く、伸ばさないと下端に白い隙間が出るため）。

2. スライドの枚数を3枚に揃えました

枚数も frame の高さに合わせて削られていました。 実装はページ数を固定せず pages.map で全部描く（ページ番号が 1 / 3）のに、1920px / 1199px の ideal は2枚、スライド情報を開いた状態は1枚、375px だけが3枚でした。揃えた結果、開いた状態のほうが ideal より短いという逆転も直っています（1920px: ideal 1636 → 開いた状態 1748）。

3. プレゼンモードのスライドを幅いっぱい・左上基準にしました

セルフレビューで別の must として挙がりました。実装の contentStyle は flex: 1 + overflow: auto だけで、Marp の SVG は幅いっぱいに描かれて下端 42px がフッターの外へはみ出します。.pen は高さに合わせた 1845×1038 のレターボックス（中央寄せ）になっていました。

current-presentation.png（1280×720）の実測で決着しています — Title の左端 x=79 は幅合わせの予測 81.0 と一致し、レターボックスの予測 108 とは一致しません。

検算

• pen check 4ファイル ok
• 矩形交差 0件（全80ペア。hug の frame も書き出して実寸で計算）、縦の隙間は全9組が 100px ちょうど、横は 300 / 500 も canvas.md どおり
• assets/mech_checks.py を新しい実寸で回し直して 4ファイルとも must 0件
• 中身が全部入っていることは、probe の高さを 2500 にしても下端が変わらないことで確認（Get の bounds は書き出しより 9px 小さく出るので、canvas.md どおり書き出しの画素で測っています）
• カードが frame 下端に接しているのは実装どおりです（contentsWrapperStyle の margin: 16px 16px 0 で下マージンが 0）。角丸 8px の円弧が最終行で完成していることまで照合しました

PR 本文のスクリーンショット12枚も差し替えました。

1点だけ判断をお願いします

?present=1 のスライドの中身を、実装どおり等比拡大しますか。

枠は 1920×1080 に直しましたが、中身のフォントと余白は 480×270 基準のままです。実装は Marp の SVG ごと等比スケールするので 1920px では 4.0 倍（padding ≒ [128,160] / タイトル ≒ 128 / 本文 ≒ 80）になります。

直せない理由が2つあります。

1. 共有ライブラリのトークンが足りません — fontSize は最大 32（text-headline1）、余白は最大 80（getSpace(10)）。生の数値で書くと「トークンにバインドする」の規約から外れます
2. Marp のテーマ CSS がリポジトリに無く（article.css は CDN へリダイレクト）、拡大後の実値を実装から読めません。4.0 倍は等比計算での推定値です

• A → 共有ライブラリにプレゼン用のトークンを足して等比拡大する
• B → 現状のまま（中身は代表値と割り切る）

task/20260909-cli-slide-preview-design/TASK.md の ❓ にも同じことを書いてあるので、どちらでも返事をいただければ進めます。

補足

frame をページ全体の高さにしたので、viewport の折り返し位置は画面に出なくなりました。 課題 A（1199×720 でページ番号が 23px 切れる）と課題 H（375px でツールバーが 2行 66px になる）は折り返しが見えて初めて伝わるので、実装 issue を切るときは補助線入りの図を別に用意するか、issue に as-is のスクリーンショットを貼ることになります。

[DeguchiHiroki]

slides.pen

• スライドのドロップシャドウは削除したくて、borderに変えたいです。

• スライドエディタと同じプレビューの見た目にしたいな

  • ページ数の指定は削除したい
  • スピーカーノートは--color-surfaceVariantを背景に置いて、スピーカーノートは追加しておきたいな。
  • 

• 右上のボタンは、スライドを投稿する ・投稿する にしたいな

• ただ、スライドショーを見せれるようにしたいので、grayButtonでどこかにおきたい

  • 右上に、スライドショーを開始 スライドを投稿する と並べて、viewportに合わせて、slideshow アイコンボタン・publishアイコンボタン に変える感じがいいかも。

[DeguchiHiroki]

指摘の5件を反映しました（dc1b2ca / da39925）。PR 本文も差し替えています。

直したもの

指摘	やったこと
スライドのドロップシャドウを削除して border に	影を18件とも外し、各ページの Slide に --color-divider 1px の枠を付けました。?present=1 は全画面なので枠を付けていません
ページ数の指定を削除	N / 3 の行を18件削除しました。?present=1 のフッターのカウンタ（MarpSlidePresenter.tsx:84-86）は別物なので残しています
スピーカーノートを --color-surfaceVariant 背景で追加	各ページの下に18件追加しました（角丸8 / padding 12・16 / 見出し「スピーカーノート」＋本文）。スライドとの間隔は 16px です（実装の 4px はページ番号との間隔なので、新設要素に合わせて広げました）
右上のボタンを スライドを投稿する・投稿する に	デスクトップ5フレームを スライドを投稿する（緑枠）にしました
スライドショーを grayButton で並べ、viewport でアイコンに	その左に スライドショーを開始（グレー枠）を置き、375px は slideshow / publish のアイコンボタン2つにしました（48×48。タップ領域 44×44 の目安に合わせています）

これで /slides/[id] のプレビューは as-is ではなく提案（to-be） になりました。PR 本文に「2026-09-14 の指摘で実装から変えたところ」の節を作って、実装との差分を表にしています。

相談

投稿する（短縮ラベル）を使っていません。 同じコメントの最後の「viewport に合わせて slideshow アイコンボタン・publish アイコンボタンに変える」を最終案と読んだためです。実装の分岐は currentWidth <= 769 の1段（Header.tsx）なので、この読み方だと 投稿する が出る幅がありません。ラベルを2段階（広い→スライドを投稿する / 狭い→投稿する / さらに狭い→アイコン）にするなら 768px のフレームを足します。

スピーカーノートの本文は代表値です。 speaker_note は API から string[] で渡っていますが実装が描画していないので、改行の扱い・複数ノートの並べ方・空のときの出し方が読めませんでした。

課題 A（1199×720 でページ番号が 23px 切れる）は、ページ番号を消したので消滅しました。 実装がページ番号を残す場合は復活します。

まだ must が1件残っています

スライドの中身が箱の大きさに追従していません。 MarpSlideFrame は 480×270 で作り、各ページはそれを ref で 772×434 / 759×427 / 1920×1080 に伸ばしていますが、伸びるのは箱だけで中の文字は 480 基準のままです。タイトルのインク幅を書き出しから実測すると、4種類の箱すべてで同じ 302px（箱に対して 63% / 40% / 39% / 16%）でした。実装は Marp の SVG ごと等比スケールするので、本来はどの幅でも比率が一定になります。

直すには 1920px で padding ≒ [128,160] / タイトル ≒ 128 / 本文 ≒ 80 が要りますが、共有ライブラリのトークンは fontSize が最大 32（text-headline1）、余白が最大 80（getSpace(10)）で足りません。生の数値で書くとトークンにバインドする規約から外れます。

• A → 共有ライブラリにスライド用のトークン（text-slide-title など）を足して4種類とも等比拡大する
• B → 現状のまま（中身は代表値と割り切る）

どちらにするか決めていただけると助かります。

検算

• pen check 4ファイルとも ok / Failed to load font 0件
• 書き出し10枚すべて宣言どおりの寸法（2回測って一致）
• 矩形交差 0件（10ノードの全45ペア）/ 縦の隙間は5組すべて 100px ちょうど
• mech_checks.py 4ファイルとも must 0件
• frame の高さ: 1867（1920 ideal）/ 1979（情報展開）/ 1912（警告）/ 1846（1199 ideal）/ 1958（1199 情報展開）/ 1157（375px）

[DeguchiHiroki]

LGTM!

千葉さんにレビューおねがします。

[tomoasleep]

• スライドショーの ↓ 目的から考えると不要かも
• 今後 qiita.com 同様プレゼン画面選択モーダルを追加したい

[DeguchiHiroki]

@tomoasleep さん

ご指摘ありがとうございます。次のように解釈して直しました。

• プレゼンモードのフッター（罫線 + タイトル + ページカウンター）を削除しました
• Qiita.com の既存機能「スライドショーを開始する」モーダルを、?present=1 の列に新しい state として追加しました（表示オプション・スライドショー表示先・プレゼンタービュー表示先の3節 + キャンセル/開始ボタン）。チェックボックス・ラジオボタンは increments/Qiita の共有ライブラリから実体を移して ref で参照しています

コミット: b68abe6 / 535745e