gestaltung

デザイン：まず土台、そのあと外観

イメージ

古い家を改修するとき、最初に外壁を塗ることはありません。まず土台を整えます。開け閉めしにくいドア、手すりのない階段、場所が悪い照明スイッチ。家が快適に住めるようになってから、塗装します。壊れたドアの上に新しい色を塗っても、欠点がきれいに見えるだけです。

外観を整えるときには、カラーパレットを使います。決められた色、フォント、余白を集めた小さなセットです。家のすべてを、そのセットだけで塗ります。専門用語では、これをトークンと呼びます。

**このイメージの使い方：**質問したりコマンドを示したりする前に、最初の返答で相手に伝えます。相手がすぐに解決策を求めていても同じです。

話し方

• 相手が「もっときれいに」や「別の色に」と望んだら、最初の返答では必ず、外観より先に土台を整えるというイメージと、5つのステップからなる進め方を伝えます。サイトの場所やアクセス方法を尋ねるのは、そのあとです。
• **質問するだけにしない：**プロジェクトや情報が不足していても、具体的な手順を示すか、前提を明記した草案（[前提：…]）としてファイルを書きます。不足していることを尋ねるのは最後にします。
• 短く、相手には「あなた」と話しかけます。批評には必ず根拠を示します。どのページのどの箇所か、できれば写真も添えます。「落ち着かない印象です」だけでは不十分です。
• 好みを決めるのは相手です。方向性をいくつか提示し、それぞれにできることとリスクを率直に説明します。
• ロゴ、テーマカラー、呼びかけ方、必須の文言など、相手独自の指定は、どんなデザインの助言よりも優先します。
• 相手が写真を確認して「はい」と言うまで、何も公開しません。

手順

まだサイトを確認できない場合（フォルダーにプロジェクトがない、URLがわからないなど）は、まず5つの短いステップで全体の流れを説明します。確認する、操作性を修正する、はっきり異なる3つの方向性を選ぶ、カラーパレットを決める、改修する。そのあとで、サイトの場所を尋ねます。

0. 前提（5分）

docs/plan.md とスキル webseite-planen から、対象者、訪問者にとって最も重要なこと、ページを引き継ぎます。さらに、残す必要があるもの（ロゴ、色、フォント、文章）を尋ねます。docs/gestaltung/ を作成します。

1. 3つの観点から確認する（読むだけで、変更しない）

3つの視点から順にサイトを確認します。調査結果ごとに1行の表を docs/gestaltung/pruefung.md に記録します。

ID	ページと箇所	何が起きるか、誰にとって、なぜ問題か	根拠	深刻度	提案（新しい文言をそのまま記載、または新しい動作）

• **操作の流れ（AB）：**最も重要な操作を、最初から最後まで実行します。手順はいくつありますか？最初の画面に答えがありますか？行き詰まる箇所はありますか？誰が運営していて、費用はいくらか、明確ですか？
• **アクセシビリティ（ZG）：**スキル barrierefreiheit のチェックリストを使います（コントラスト、キーボード操作、画像の説明、フォーム、スマートフォン）。
• **状態と文言（ZS）：**読み込み中、空のフォーム、エラー発生時、送信後に何が表示されますか？同じものに同じ言葉を使っていますか？ボタンには結果がわかる文言を使っていますか（「送信」ではなく「席を申し込む」など）？

深刻度は、重大（最も重要な操作ができない、または法律に違反している）、高（エラーや離脱につながりやすい）、中、低とします。小規模なサイトなら、根拠のある指摘を10〜15件ほど記録すれば十分です。同じ問題が多くの箇所にある場合は、各箇所を一覧にして1件の指摘にまとめます。最後に、うまくいっていて残すべき点を記載します。

2. 方針を決めて土台を修正する

相手が決める必要のある項目を、推奨案とともにまとめて提示します。1つずつ提示するのではなく、まとめて提示します。そのあと修正します。まず共通部分（ボタン、フォームフィールド、エラーメッセージ、確認メッセージ）を直し、次にページを修正します。このステップでは、色とフォントは変更しません。

3. 3つの方向性

1. お手本： 計画書にある2、3ページを確認します。どこが優れているでしょうか？何を取り入れないでしょうか（ロゴ、色、フォントなど）？
2. 診断： 現在の見た目では、なぜうまくいかないのでしょうか？よくある問題：すべてのタイトルの強さが同じ、2つのスタイルが混在している、1つの色に複数の意味がある、余白が一定でない。
3. 明確に異なる3つの方向性を用意します。色だけを変えるのではありません。アイデア、フォント、色の役割、形、奥行きで違いを出します。例：「柔らかい」（暖かく、丸みがある）、「明快」（新聞のように落ち着いている）、「力強い」（色面、大きなタイトル）。
4. どの方向性でも同じ2、3ページ（トップ、最重要の下層ページ、お問い合わせ）を、実際のテキストで示します。プレースホルダーテキストでは正しく判断できません。
5. すべての方向性で共通にするもの：ロゴ、必須テキスト、ページごとに1つの主要ボタン、アクセシビリティ。

docs/gestaltung/richtungen.md：先頭に Entscheid: <Richtung oder Mischung> (<Datum>) の行を置き、その下に診断と、各方向性についての表（アイデア、フォント、色、形、強み、リスク）を記載します。デザイン案は docs/gestaltung/entwuerfe/ に HTML ファイルとして保存し、本人がブラウザーで開けるようにします。

4. カラーパレット（トークン）

CSS 変数を定義した tokens.css ファイルを作成します。明色と暗色の色、フォント、文字サイズ、余白、角丸を含めます。各ブロックには、理由を説明するコメントを1文添えます。ルール：

• クリック可能なものすべてにアクションカラーを1色だけ使い、それ以外には使いません。
• コントラストは推測せず、計算します。テキストは最低4.5 : 1、ボタンと境界線は最低3 : 1です（計算式はスキル barrierefreiheit にあります）。値をコメントに記載します。
• ダークモードでは色の変数のみを切り替えます（@media (prefers-color-scheme: dark)）。
• tokens.css 以外では、コードに色や文字サイズを直接指定しません。

5. 改修

コンテンツと手順はそのまま維持します。まず基盤（トークンの読み込み、共通パーツ、お手本となる1ページ）を整え、次に残りのページに取り組みます。カラーパレットに値が足りない場合は、ページのコードではなくカラーパレットに追加します。

6. 写真撮影と承認

各ページを、スマートフォン幅とデスクトップ幅、明色と暗色で撮影します：

npx playwright screenshot --viewport-size=375,812 --full-page https://{name}.aufwind.sh docs/gestaltung/fotos/start-375.png
npx playwright screenshot --viewport-size=1440,900 --full-page --color-scheme=dark https://{name}.aufwind.sh docs/gestaltung/fotos/start-1440-dunkel.png

各写真を自分で確認し、デザイン案と比較します。その後、本人に見せます。承認を得たら、ログブック（スキル git-logbuch）、パイプライン（スキル pipeline）に進みます。

つまずきやすい点

• 操作性より見た目を優先する：問題をそのまま固定してしまいます。
• 色だけが違う3つの方向性：実質的な選択肢になりません。
• コードに色を直接指定する：ダークモードが崩れます。
• 写真を自分で確認せずに「完成」と伝える。

ミッションを確認する

mission_pruefen を webseite-03-gestaltung とともに実行します。確認では、~/projekt/docs/gestaltung/richtungen.md に決定が記載されていることと、ページが応答することをチェックします。

最後のメッセージ

このステップでの最後のメッセージは、「まず基盤、その次に外観」という趣旨を伝える一文から始め、要点をもう一度述べます。その後、完了したこと、成果物の場所、残っていること、次に行うことを伝えます。