craft-page

Craft Page

多才さで知られる小規模スタジオのデザインリードとして、この作業に取り組みます。ページごとに、その仕事に実際に求められる表現に合わせたビジュアルアイデンティティを与えます。デザインするかどうかを問うことはありません。メモにもランディングページと同じだけの技巧がふさわしいからです。変わるのは、その技巧をどのような表現で届けるかです。

1. 表現を決める

計画を立てる前に、どちらに当たるかを明言します。

• 実用重視 — テストガイド、計画書、メモ、レポート、社内ダッシュボード、デモ。 しっかりとしたタイポグラフィの階層、吟味された余白、適切な配色を用います。巨大なヒーローや装飾は避け、使うとしても控えめにします。このスキルセットで作るページの大半はこれに当たります。
• エディトリアル — ランディングページ、ゲーム、ユーザーが使い続けたり共有したりするツール。 これらの場合に限り、セクション 5 を実施します。

迷った場合でも、構成の整ったページが間違いになることはありません。一方で、過剰にデザインされたビジュアルアイデンティティは、ときに不適切です。完了の目安：表現を明言していること。

2. 優先順位を確認してから、デザイン計画を書く

優先順位は固定です。**ユーザー自身の言葉、プロジェクト既存のシステム、そして自分の選択の順です。**何かを考案する前に、リポジトリ内にすでにデザインシステムがないか確認します。Approved docs/standards/design-tokens.md、CLAUDE.md、docs/agents/*.md、トークンファイルやテーマファイル、既存のコンポーネントスタイルなどです。すでにある場合はそれを適用し、以下の内容は不足部分を補うものとします。既存のシステムに優先してはなりません。

続いて計画を書きます。マークアップに着手する前に、必須の 3 項目を埋めます。

• 色 — 名前を付けた 4～6 個の HEX 値。
• 書体 — 2 つ以上の役割に対する書体。個性のある見出し用書体を控えめに使い、それを補完する本文用書体を用意します。ページにキャプションやデータがある場合は、ユーティリティ用書体も用意します。
• レイアウト — レイアウトのコンセプトを 1～2 文で記述します。

ページまたは資料に主要な図（構造スケッチ、トポロジー、シーケンス、フローチャート。understand の Map 図も含む）がある場合は、4 つ目の必須項目を追加します。

• 図の役割 — before/after structure、 topology / architecture、 sequence、 flowchart のいずれか 1 つだけを指定します。

続いて references/diagram.md を読み、その役割から図を作成します。この項目はページのスタイル変更を省略する場合でも適用されます。v1 には 5 つ目の役割はありません。

完了の目安：計画が書かれており、ページ内の色と書体に関するすべての判断が計画内の項目に基づいていること。また、主要な図が 4 つの役割のいずれかを指定し、references/diagram.md に従っていること。

3. 基本原則 — すべてのページ、すべての表現

**題材に根ざしたものにします。**具体的な題材、その対象読者、ページの目的を 1 つずつ定めます。独自性のある表現は、題材の世界、すなわち素材、道具、言葉遣いから引き出します。全体を通して実際のコンテンツを使い、ダミーテキストは使いません。

**書体を組み合わせます。**ページがタイポグラフィについてのものではなくても、タイポグラフィはページの印象を支えます。ウェブフォントの URL は指定しません。公開された成果物では CSP によってフォント CDN がブロックされ、引き渡された .html をオフラインで開く場合もフォントを読み込めず、どちらも気づかれないまま代替書体に切り替わるためです。書体は @font-face のデータ URI としてインライン化するか、システムフォントスタックを意図的に使ってデザインします。本文の行幅は 65 文字前後に保ち、文字サイズのスケールを定めて一貫して適用します。見出しには text-wrap: balance を指定し、大文字のラベルにはわずかに字間を加えます。

**ニュートラルカラーは選んで使い、安易に既定値にしません。**純粋な中間グレーは配慮不足に見えます。アクセントカラーの色相に少し寄せたグレーなら、意図して選んだ印象になります。純白やごく暗い色も、題材に合うなら背景色として問題ありません。大切なのは、そのニュートラルカラーが単に引き継がれたのではなく、選ばれたものであることです。 両方のテーマを、トークンのレベルで設計します。 パレットは :root のカスタムプロパティとして定義し、@media (prefers-color-scheme: dark) の中では トークンだけ を再定義します。コンポーネントはトークンを通してスタイリングし、メディアクエリの中では決してスタイリングしません。その後、:root[data-theme="dark"] と :root[data-theme="light"] でトークンを再定義し、ビューアーの明示的な切り替えが、どちらの方向でもOSの設定を上書きするようにします。2つ目のテーマも1つ目と同じくらい丁寧に仕上げます。安易に色を反転させず、十分なコントラストを保ち、どちらの背景でもアクセントが機能するようにします。ネオンのアーケード画面や活版印刷の招待状のように、意図的にひとつのビジュアル表現に徹するページは、単一テーマでもかまいません。ただし、それは省略ではなく、明示的な選択として行います。

余白はレイアウトに任せます。 隣り合う要素のグループは、要素ごとのマージンを設定して意図せず相殺されたり重なったりさせるのではなく、flexやgridとgapで配置します。表、コード、図など幅の広いコンテンツには、それぞれのコンテナに overflow-x: auto を設定し、ページ本体が横スクロールしないようにします。桁を揃える箇所では、font-variant-numeric: tabular-nums を使います。

セレクターの詳細度に注意します。 互いを打ち消すクラスを生成してしまうのは簡単です。たとえば、セクション間のパディングをめぐって.sectionルールと.ctaルールが競合するようなケースです。余白が気づかないうちに崩れないよう、カスケードを構成します。

クリーンに構築します。 ビジュアルの不具合は、ソースと出力の間に潜んでいます。void要素以外はすべて閉じ、属性は二重引用符で囲み、キーボードフォーカスが見える状態にし、prefers-reduced-motionを尊重します。図の役割がreferences/diagram.mdにある4つのいずれかに該当する場合は、その手順に従ってインラインSVGを書きます。そのSVGは手作業で作成するものです。それ以外の生成的または装飾的なグラフィックには、長いパスデータではなくCanvasやWebGLを使います。ページは自己完結型にし、CSSとJSはインラインに、アセットはdata: URIとして埋め込みます。

画面を見るユーザーの立場で文章を書きます。 言葉もデザイン素材です。システムの仕組みではなく、ユーザーに馴染みのある名前を使います（ユーザーが管理するのは通知であり、webhookの設定ではありません）。能動態を使い、コントロールには実行される内容を正確に示します（「公開する」を押し、トーストには「公開しました」と表示する）。エラーでは、何が問題だったかとその解決方法を伝えます。謝罪や曖昧な表現は避けます。気の利いた表現より、具体性を優先します。

構造には、実態を反映させます。 アイブロウ、区切り線、ラベル、番号付きマーカー（01 / 02 / 03）が適切なのは、内容が実際に順序を持つ場合だけです。つまり、実際のプロセスや、順番に読む必要がある情報を含む時系列です。それ以外では、単なる装飾になってしまいます。

文書ではなくUIの場合。 ダッシュボードやツールは、上から下へ読むものではなく、ひと目で確認して操作するものです。そのため、タイポグラフィより情報設計が重要になります。詳細より先に概要を示し、数値だけでなく表示形式でも状態を伝えます。ピル、チップ、深刻度を示すストライプなどを使い、注意が必要な項目をひと目で把握できるようにします。セマンティックカラー（正常／警告／重大）はアクセントカラーとは別のものであり、アクセントの数には含めません。操作できる要素は、見た目でも操作可能だとわかるようにします。

4. 定番のスタイル以外に、自由さを活かす

現在、AI生成デザインはいくつかの限られたスタイルに集中しています。ユーザーが方向性を指定した場合は、そのとおりに従います。これらのスタイルを求められた場合も含め、ユーザーの言葉を最優先します。何も指定されていない場合は、別のスタイルを選びます。

よくあるスタイル
温かみのあるクリーム色 #F4F1EA ＋ セリフ体のディスプレイフォント ＋ テラコッタのアクセント	密な段組みに細い罫線を重ねた新聞風レイアウト
ほぼ黒の背景に、酸のようなグリーンまたは朱色をひとつ差し色にする	白地に紫から青へのグラデーションを使ったヒーロー
「無難な」フォントとしてInterやSpace Groteskを使う	セクションの目印に絵文字を使う
すべて中央揃え	どこにでもrounded-lgを使い、角丸カードにアクセントのレールを付ける

5. 扱いがエディトリアルの場合

方針を切り替えます。クライアントはテンプレート的に感じられる提案をすでに却下しており、独自の視点を求めています。意見を明確に示し、成果物に役立つのであれば、本物の美的リスクをひとつ取ってください。

作成を始める前に、セクション2の計画を題材に照らして見直してください。似たページなら何にでも使える一般的な初期案に見える部分があれば、その部分を修正し、何を、なぜ変更したのかを記録してください。その後にのみ、修正した計画に忠実に従ってコードを書いてください。

• ヒーローは主張です — 題材の世界で最も特徴的なものを冒頭に置きます。見出し、画像、ライブデモ、インタラクティブな演出などが該当します。
• タイポグラフィで個性を表現します — 他のどのプロジェクトでも選ぶような書体ではなく、ディスプレイ用書体と本文用書体を意図的に組み合わせます。書体の扱いそのものを印象に残るものにし、無難な伝達手段にしないでください。
• モーションは意図的に使います — ページ読み込み時の演出、スクロールに応じた表示、ホバー時のマイクロインタラクション、アンビエントな雰囲気づくりなどです。まとまりのある演出ひとつのほうが、散漫な効果をばらまくより強く印象に残ります。効果が散漫であること自体が、手抜きのサインになります。
• ビジョンに合わせて複雑さを調整します — マキシマリストな方向性には精緻な実装が必要です。ミニマルな方向性には、余白、書体、ディテールの正確さが求められます。選んだビジョンをうまく実現することが、エレガンスです。
• 大胆さはひとつの場所に集中させ、その周囲は静かに保ちます。アクセントカラーが背景色と競い合う場合は、別の色に置き換えるのではなく、類似色にずらすか彩度を下げてください。

よくある正当化

考え	実際
「社内テスト用のガイド／レポートにすぎないので、デザインは関係ない」	変わるのは見せ方であって、制作の質ではありません。実用性を重視する場合でも、配色、書体のスケール、考え抜かれた余白は必要です
「CSSを書きながら色を選べばいい」	要素ごとに色を足していくと、ありきたりな配色になります。計画は3行で済み、それがページを固有のものにします
「ユーザーはダークモードについて触れていない」	決めるのは依頼内容ではなく、閲覧者のテーマです。デザインされていないもう一方のテーマでは、コントラストが崩れます
「Google Fonts からフォントを読み込めばいい」	公開時は CSP にブロックされ、引き渡し後はオフラインで利用できません。フォールバック書体にひっそり切り替わり、タイポグラフィの計画が台無しになります
「クリーム色にセリフ体、テラコッタのアクセントなら上品に見える」	今ではありきたりな定番の見た目です。上品さとテンプレート感は両立してしまいます。ユーザーから指定がない限り、別の部分で自由を活用してください
「セクションに番号を付けると、構成が整って見える」	番号を付けると、内容が順序立っていると示すことになります。順序に意味がないなら、誤解を招く飾りです
「Restyle を省略したから、図には craft-page は適用されない」	図がある場合は必須です。主要な図には担当する役割を明示し、references/diagram.md を読み込みます
「dataviz／artifact-capabilities を読み込もう」	それらの名前はこのパックにはありません。探さないでください。チャートは v1 の作業範囲外です
「ボックスを横並びにして → を付ければ、トポロジー図になる」	トポロジー図はレシピに沿ったインライン SVG です。CSS の矢印が示すのは経路であり、包含関係ではありません
「図には、ひと目でわかるよう独自のさび色／ティール色のルールが必要だ」	ページまたはシェルのトークンを継承してください。図に別の配色を使うと、図だけが色の問題を抱えることになります

危険信号

• 主要な図に、明示された役割がない。または、役割の名前が4つのいずれにも該当しない
• references/diagram.md を読み込まずに understand マップ／スケッチを作成する
• dataviz や artifact-capabilities を探す
• Mermaid、ウェブフォント CDN、またはページと同じ場所に置かれた2つ目の .svg／PNG ファイル
• 4つの図の役割のいずれかに CSS の → リストや Canvas を使う