デザインシステム基礎講座を磨き込んだ一日——ターゲット別モックアップ・9ステップ実践LP・ハンバーガーメニュー実装

公開済みのデザインシステム基礎講座を、朝から夕方まで自分で読み直しては手を入れ続けた。ページを開くたびに「ここ、文章で説明してるだけで実物がないな」と引っかかる箇所を見つけ、その場でClaude Codeに実装させて、ブラウザで描画を確かめる。この往復を夕方まで回したら、比較モックアップ、講座自身のLP、章扉画像15枚、ハンバーガーメニューまで積み上がっていた。

この日の流れ

08:37 前日分の変更をコミット（学習ゲート通過）
10:08 ターゲット別モックアップ追加、ヒーローセクション構成要素の再掲
10:26 9ステップを実践した講座LPの作成、ヘッダー固定＋スクロールスパイ
10:29 セクション一覧と9ステップの1対1対応付け、実カラー列とページ統合
11:00 全15概要ページに章扉画像、ハンバーガーメニュー実装
12:29 アクセシビリティページへGOOD/BAD移植、チャプター開閉仕様の統一、wrangler更新
16:36 本文センタリングずれの調査 → memoに残して明日へ

「なぜターゲット指定が重要か」のページには、高齢者向け・若い女性向け・企業向けでデザインが変わるという説明が文章で書いてあるだけだった。それなら実物を見せた方が早い。同じ健康管理アプリを3つのターゲット向けに、レイアウト・装飾・フォントを実際に変えたHTML/CSSモックアップとして組ませ、「同じアプリをターゲット別に組んでみる」という新ページとして挿入してもらった。デスクトップで3つ横並び、モバイルで1カラムに折り返すところまでブラウザで確認した。

続けてヒーローセクション設計のページ。前のページで組んだモックアップの構成要素を、①〜⑥の番号バッジ付きでもう一度並べてもらった。左に番号付きリスト、右にHeroモックアップという配置で、「さっき見たあの部分ね」と読者が思い出せる形になった。CTAのページも同じ形式で、青いプライマリボタン5種＋セカンダリボタン1種を目的別に並べ直している。

良い情報設計の9ステップを、講座自身のLPで実践した

講座の第1章には「良い情報設計の9ステップ」と「悪い情報設計の5パターン」がある。教えを説くだけで実例がないのはもったいないので、講座の内容を全部読み取らせたうえで、9ステップどおりの構成で講座自身のランディングページを独立HTMLとして作らせた。置き場所はpublic/lp/design-system/index.htmlで、開発サーバーでもそのまま見える。受講者の声はプレースホルダーとして作文してある。右下の「情報設計ラベルを表示」を押すと、各セクションが9ステップのどれに対応するかバッジが浮かぶ仕掛けも入った。

Chrome DevToolsで開いてレビューしたら、2点直したくなった。ヘッダーがスクロールで流れてしまうのと、ナビの「特徴・進め方・受講者の声・料金・FAQ」が現在地を示さないこと。ヘッダー固定とスクロールスパイ（スクロール位置に応じたナビハイライト)を追加してもらい、開いていたタブでそのまま動きを確かめた。

導線の置き場所は少し迷った。章の一つとして組み込むとリンク構成が崩れるので、イントロの末尾と、第1章9ステップのページ末尾に1行ずつ<a>を足すだけの軽い形に落ち着いた。「9ステップの実例がこれ」と学んだ直後に置くのが一番効く。

「英語で言い換えただけ」を、表の対応列とコメントで白状させた

第2章の「よく使うセクション一覧」には「前章の9ステップとほぼ1対1で対応しています」と書いてあるのに、実際の対応は読者の脳内補完に任せていた。テーブルの左側に「対応する9ステップ」列を新設し、Hero=①ファーストビュー、Problem=②課題提起……CTA=⑨と紐付けてもらった。並べてみて気づいたのは、この11セクションは9ステップを英語の呼び名に言い換えたものにすぎない、ということ。それ自体が読者の安心材料になるので、「新しく覚える概念が増えたわけではない」という趣旨のコメントを本文に足した。

ここで一つ罠を踏んだ。TSの講座データを直してリロードしても、画面が古いままなのだ。調べさせたら、講座ページはTSファイルを直接読むのではなく、生成スクリプトが吐くJSONから配信されていた。直前の変更が映って見えたのは、失敗したpnpm devのpredevがたまたまJSONを再生成していたからで、完全な偶然。以後、講座データを直したらJSONを手で再生成する、が確定手順になった。

トーン&カラーの章では、HEX値を文字列で載せているだけの表に「実カラー」列を足し、HEX値をその色そのもので装飾してもらった。作業中に、スウォッチだけの独立ページが隣にあると分かったので、要素を1対1で保ちながら1ページに統合した。HEX値テーブル→解説→スウォッチ6色→組み合わせ実例という縦の流れになり、左ナビから独立ページが消えた。モバイル確認ではChrome DevToolsのresizeが効かず、デバイスエミュレーションで390px幅を再現する回り道もあった。

全15章の概要ページに、雑誌の章扉のような1枚画像を入れた

タイポグラフィの概要ページを見ていて、「この章が何の話か、開いた瞬間には分からない」と感じた。タイポグラフィなら文字、余白なら余白と、章のテーマがひと目で分かる雑誌の章扉風ヒーロー画像を、講座全章の概要ページ15枚ぶん入れさせた。デスクトップで15件、モバイル390px幅でも代表ページを確認し、モバイルでラベルが潰れていた箇所は一括置換で直している。

講座の記述どおりに、サイト自体をハンバーガーメニュー化した

レスポンシブ設計の章には「ナビゲーションはハンバーガーメニューにする」と書いてある。ところが講座サイト自体には、全体目次を開くハンバーガーメニューがなかった。教えていることを自分がやっていない状態なので、モバイル表示のビューアーにドロワー式の全体目次を実装させた。

動作確認では一度、クリックでURLが勝手にsi=2へ進む想定外の挙動が出て、クリーンな状態から再テストして切り分けた。合わせて、下スクロールでヘッダー2段（サイトヘッダー＋講座ヘッダー）が畳まれて本文が全画面になり、上スクロールで戻ってくる連動も入れた。実際のスクロールコンテナが.scroll-contentだと特定するまでに一往復あった。

アクセシビリティのページに、GOOD/BADの実物を移植した

アクセシビリティの「考えること8点」も文章だけだったので、mdx-playground側で公開しているUIデザイン原則コンテンツ（NG/OKのモック比較）を8観点すべてに埋め込み、対応する原則には詳細版へのリファレンスリンクを振った。ここでもJSON再生成を忘れて旧コンテンツを眺める一幕があり、午前の学びがさっそく効いた。

もう一つ、チャプター目次の開閉仕様も直した。今いる章の中身しか展開されない仕様だと、隣の章に何があるか毎回クリックしないと見えない。全チャプターのトピック一覧を常時展開する仕様にビューアー本体を変更したので、同じビューアーを使う全講座に一括で効いた。17チャプターある講座でも崩れないことを確認している。

ここで一区切りとしてコミットを頼んだ。午前からの変更はドロワー実装とコンテンツ改修の2コミットに切り分けられ、それぞれ学習ゲートのクイズに答えて受領証を発行してからプッシュした。

pnpmが止まった犯人は、devサーバーのファイルロックだった

コミット後、Dependabotの警告7件を調べさせたら、全部が単一パッケージundiciの脆弱性で、pnpm update wrangler一発で解消できると分かった。自分のターミナルでコマンドを走らせたが、32MBのダウンロードが終わったあと沈黙する。「なんとなく止まってる気がする」と伝えて調べてもらうと、lockfileが7/3から未更新で、pnpmらしきプロセスも見当たらない。原因はdevサーバーのファイルロックで、止めた直後にpnpmが完走した（7分14秒）。wranglerは4.98.0→4.110.0、undiciは修正版7.28.0になり、Dependabotの未解決アラートは0件になった。機械的な依存更新なので、学習ゲートは理由を残してスキップしている。

センタリングずれは、原因を特定して明日に回した

夕方、タイポグラフィのsi=5とsi=6で、本文カラムの中央位置が微妙にずれているのを見つけた。調査させると、si=5はstageHtmlあり、si=6はtextsのみという構造差がレイアウトに響いていた。修正自体は済んだが、同じ仕組みを使う別講座の約30ページをPlaywrightで一括検証する作業が残ったので、原因・修正内容・検証スクリプト2本をmemoに残して明日に回した。修正ファイルは未コミットのまま置いてある。

学びメモ

講座データ(TS)は生成JSONを経由して配信される。TSを直してリロードしても画面は変わらない。「なぜか反映された」の正体が、失敗したpredevの副作用だったと突き止められたのが収穫
pnpmが黙り込んだら、まずdevサーバーのファイルロックを疑う。プロセス一覧とlockfileの更新日時を見れば切り分けられる
「講座で教えていることをサイト自身がやっていない」は、読者より先に自分が講座を読み返すと見つかる。ハンバーガーメニューはまさにそれだった
Chrome DevToolsのresizeが効かないビューポートでは、デバイスエミュレーションに切り替えれば390px幅を再現できる

次にやること

本文センタリング修正の一括検証: 同じ仕組みの講座約30ページをPlaywrightで巡回し、ずれが残っていないか確認してからコミットする（memoの検証スクリプトを使う）