LP全体の見た目の決まりごとを1枚のアートボードにまとめます。参考にしたいサイトや画像をClaude Codeに渡すと、色・書体・形・部品までを選んだ下書きを作ってこのページで開くので、あとは1項目ずつ直すだけです。最後にClaudeへの指示文・CSS・共有リンク・HTMLを書き出せます。LPを作るときは最初にここで作ります。

色

メイン1色とアクセント1色とベース。面積はベース60% メイン30% アクセント10%。アクセントはボタンと申し込みの導線だけ

書体

和文1種と欧文1種

文字

見出しH1〜H4と本文の大きさ・太さ・行間を固定

余白

8の倍数だけ（8・16・24・32・48・64・96・128px）

形

角丸・線の太さ・影の有無を1〜2パターンに固定

部品

ボタン・カード・見出し・CTAは一度決めたら使い回す

写真とアイコン

写真の色味と明るさ、アイコンの線か塗りかをそろえる

スタイルガイドを作る

• デザイン方針ログインが必要

  スタイルガイドを作る時間がないときに仮で使う、4種類の土台のCSS

テロップの出し方、場面の切り替え、画面の動き、装飾の動きを見本付きで並べています。グロウやディゾルブなどの名前と動きを見比べて、編集者に渡す日本語の指示文や、動画生成AI向けの英語のプロンプトをそのままコピーできます。

• 文字の出し方 22種類
• 場面の切り替え 14種類
• 画面の動き 9種類
• 図形と装飾 12種類

動画モーション集を開く