② 配色とフォント：読みやすさを確かめたデザインの決まりを作る

受講生

コントラスト比って、
毎回ツールで1つずつ調べてます…

先生

Claude Code は自分で計算して、
足りない色を見つけて直しました。
できあがりを見てみましょう。

コントラスト比（文字の色と背景の色の明るさの差。数字が大きいほど読みやすい）は、ふつうの文字で 4.5:1 以上がよく使われる目安です。案Bの「かき色」は、和紙色の背景の上の文字には、ほんの少し足りませんでした。

見本：Claude Code でのスタイルガイド作り

録画（早送り）頼んでから、スタイルガイドができるまで（早送り）

AIが作った実物Claude Code が作った style.html の一番上

AIが作った実物同じページのコントラスト比の表。読みやすい組み合わせと、使わない組み合わせが数字つきで並ぶ

あなたの番：デザインの決まりを作ろう

貼る文（全文）

moodboard.html の案Bで進めます。案Bの色とフォントで、style.html にデザインの決まり（スタイルガイド）を1枚にまとめてください。色見本（色の番号と、どこに使うか）、見出し・本文・小さい文字の大きさ、ボタンの見本を入れてください。文字と背景の色の組み合わせが読みやすいか（コントラスト比）も確かめて、足りないところは色を調整してください。決めた色とフォントは css/style.css にもまとめてください。

受講生

むずかしそうな英語のコマンドが…

先生

python3 で色の明るさを
計算しているだけです。
ページのファイルは変えません。

同じ計算の確認が続くときは、矢印の↓で「2. Yes, and don’t ask again for: python3 *」に合わせて Enter を押すと、この会話の中だけ、python3 のコマンドを聞かれなくなります。「auto mode」に切りかえる選択肢は、何でも自動で進むようになるので、この講座では選びません。

こうなっていればOK

つまずきやすいところ

※「実際の画面」「録画」は、2026年10月19日に吉田のiMac（Mac）のターミナルで、Claude Code 2.1.303 を動かして撮ったものです。確認の画面は「毎回たずねる」設定のまま、毎回中身を読んでから選びました。アカウントの情報（メールアドレス・プラン名）は消してあります。どのプランで同じことができるか、Windows でどう見えるかは、この講座では確かめていません。作業時間は、画面に出た Claude Code の作業時間（「✻ … for 1m 14s」など）です。