paper-notebook-landing

Paper-notebook ランディングページ

このスキルは、製品の実際のコンテンツを、温かみのある手作りの「学校ノート」のビジュアル言語で表現した単一ファイルのランディングページに変換します。それでいて、落ち着いていて信頼できる印象も与えます。 参考ビルドは example/index.html（架空のドイツ留学プラットフォームAtlasio、TR/EN/DE）です。作業を始める前に開いてください。 references/components.md には、すべてのパターンがコピー可能なコードとして用意されています。screenshots/ には各セクションの見た目が表示されています。

ユーザーが参照サイトを指定した場合は、スタイルのみを取得し、ロゴ、イラスト、製品写真、文言、ワードマークは決して使用しないでください。クライアント自身のブランド名、コンテンツ、事実を使用してください。

1. デザイン前: 実際のサイトを読む

1. クライアントの現在のサイト（および共有されたパンフレット/PDF）を開き、実際のコンテンツを抽出します：価値提案、プロセス手順、サービス、出典と日付付きの数字、お客様の声、FAQの回答、連絡先詳細。
2. クライアントのプロセス（例：「計画→準備→申請→到着」）を見つけます。これがページの背骨になります：ノートのラベル、ステージパネル、コミックストリップ、コピーはすべて同じステージをカウントします。クライアントにパンフレットがある場合、その構造がウェブサイトよりも優先されます。
3. 発明してはいけないものを書き留めます：価格、主張（「最高」、「最安」）、統計、法律/ビザ要件。ユーザーが価格を隠すように依頼した場合は、偽の数字ではなく、オファー文言（「素晴らしいオファー ✦」、「オファーを取得 →」、「パッケージ特典 ✦」）に置き換えてください。公式の金額（例：ビザに必要な残高）は価格ではなく事実ですので、出典と日付を付けて保持してください。

2. ビジュアルDNA（すべてを維持）

要素	ルール
背景	クリーム色の紙 #fdfbf9、純白は不可。セカンダリバンド #f6efea。意図的にライトテーマのみ。
インク	ココア #2b1a07 をテキストに、チャコール #171717 をアウトラインに、ミュート #8a7b6a を小さな文字に。
アクセント	マーカーオレンジ #ff6f1e を手書き文字、下線、フッターに。クライアントのアクセントカラーが暖色系の場合はそれを使用。そうでなければオレンジを「マーカー」として維持。
ステッカー色	緑 #22c55e、青 #3b82f6、ピンク #ff66cf、付箋黄 #fadb4b。各イラストシーンは、ハイライトされた単語にこれらのうち1色を使用。
表示用書体	ふっくら、ソフト、やや歪んだセリフ体（例：Gelica または Recoleta（有料））。無料の選択肢：Fraunces、SOFT 100、WONK 1、ウェイト800–900。
本文/UI用書体	Geist（またはInter）をリスト、ボタンの小さな文字、キャプションに。セリフ体（Fraunces 400）をサブタイトルと引用に。
手書き文字	Caveat（トルコ語/ドイツ語のグリフに対応）。注釈、付箋、ノートのラベル、コミックの吹き出しのみに使用。段落には決して使用しない。
ボタン	「dibs」ボタン：クリーム色のピル型、4pxのクリーム色の外側リング、1.5pxのチャコール色の内側ボーダー、セリフ体のラベル、小さな影。
形状	カードは12pxの角丸、ボタンは20px、フッターは上部コーナー56px。アウトラインは1.5–2pxのチャコール色で、ペンのよう。
シャドウ	柔らかく低め：0 2px 20px rgba(0,0,0,.06)。オブジェクト（ノート、付箋）は下部に長めのドロップシャドウ。
ナビゲーション	ナビバーなし。左上に固定された円形ロゴ。右上に言語スイッチ、小さな「ログイン」ピル、dibs CTA。
ヒーロー見出し	小文字、巨大（clamp 60–112px）、短い2行。前にオレンジ色の手書きグリーティング（「親愛なる保護者の皆様、」）。

3. セクションパターン（実際のコンテンツで選択、順序付け、埋める）

大まかにこの順序で使用してください。各パターンには references/components.md にすぐ使えるスニペットがあります。

1. ヒーロー＋ノートカバー – グリーティング、小文字の見出し、手書きの余談付きの1行サブタイトル（「1つの場所に。本当だよ！」）、dibs CTA、小さなミュートな注釈。右側：傾いたノート。カバーは2つのオプション：
   • サンプルユーザーでパーソナライズするための白い名前ラベル（名前/目標/期間/ステージ 1/4）が付いた革のノート。
   • クライアント自身の印刷物から適応したカバー。クライアントにパンフレット、小冊子、またはチラシの表紙がある場合は、それをHTML/SVGでカバーサイズ（コンテナクエリ単位）で再構築し、Webと印刷が一致するようにします。例では、「未来へのパスポート」小冊子（ネイビー、ダブルゴールドフレーム、ゴールドの地球と飛行機、オレンジの「ドイツで学ぶ」バンド）でこれを行っています。
2. スクロール駆動ノート – ヒーローノートがユーザーのスクロールに合わせて移動し（まっすぐになり、拡大し、中央に寄る）、その後カバーが開いて、目のステッカーと「タップしてスタート！」が付いたウェルカムページを表示します。1つのノート、1つの連続した動き。
3. 付箋 – 中央揃えのセリフ体の行と引き伸ばされた単語（「すべeeeeて、1つの場所に。」）、最も強力な証明ポイントが書かれた4枚の回転した黄色い付箋。
4. イラストシーン＋ローマ数字パネル（2–3つ） – ユーザーの世界（机、空と飛行機とスカイラインのある空、キャンパス…）のフルブリードCSS/SVGイラスト。キーワードが色付けされたセリフ体見出しを持つクリーム色のパネル。右端にI、II、III…と番号付けされた機能リスト。アイテムがクリックされると変化するデバイスモック。1つのシーンは、クライアントのステージプロセスを伝える必要があります（パネル＝ステージ、デバイス＝そのステージの手順＋進捗バー）。
5. 落書きグリッド – 手描きのラインアイコンと手書きのキャプションが付いた3×3グリッド。中央のセルにはセクション見出し。サービス/マーケットプレイスに最適。価格またはオファーテキストはオレンジ色の手書きで。
6. 罫線リスト – 赤いマージンと青い罫線が付いた傾いたシート、手書きのチェックリスト（✓ または ✗）、その周りに小さなステッカーラベル。要件、「含まれるもの」、「絶対にしないこと」に最適。
7. 色付きノート – 名前ラベルが付いた3冊のノート（雲柄の青、ピンク、コバルト）をガイド/製品のカバーとして。
8. コミックストリップ – プロセスステージごとに1コマ、チャコール色のアウトラインのフラットSVGキャラクター、自動サイズ調整された吹き出し、各コマの下にローマ数字とステージ名が付いたキャプション。その後、上部が破線のルールで区切られた短いお客様の声。
9. FAQ – 破線のピーチ色の線で区切られた<details>行、オレンジの＋/–マーカー。
10. 巨大フッター – オレンジ色のブロック、上部半径56px、セリフ体のクリーム色の見出し、ニュースレターフィールドとdibsボタン、リンク列、そして大きなダークオレンジ色のワードマークとしてのブランド名。

4. シグネチャーインタラクション

• ノートの移動＋開閉 – 1つの要素。フェーズ1（ページ上部からオープナーセクションがスティックするまで）：ヒーロープレースホルダーの矩形からステージ中央へのtranslate、回転（-14° → 0）、スケールを補間。フェーズ2（ステージがスティッキーな間）：--p 0→1がカバーを左端を軸に rotateY(-178deg * p) 回転。JSが実行され、prefers-reduced-motionがオフの場合のみヒーロープレースホルダーを非表示。動きの軽減が有効な場合は、すでに開いて静止した本を表示。
• パネル→デバイス – 各ローマ数字アイテムは<button aria-current>。そのdata-t（およびオプションのdata-sub、パイプ区切りのステップリスト）がデバイス画面にレンダリングされます。
• 自動サイズ調整の吹き出し – テキストの周りにバブルのパスを手描きしないこと。<g class="sb" data-cx data-y data-tx">の中に<text>のみを配置。JSはdocument.fonts.readyの後にgetBBox()を計測し、フレームより広い場合はフォントサイズを縮小し、角丸長方形とスピーカーを指すテール（data-tx）を描画し、バブルを300pxフレーム内にクランプ。言語変更のたびに再実行。
• 言語切り替え – ソース言語をHTMLに保持。辞書は、トリミングされた各ソーステキストノードを[en, de, …]にマッピング。テキストノードを一度ウォークし、オリジナル＋先頭/末尾の空白を保存。クリック時に交換。placeholder、data-t、data-subも翻訳。<html lang>を設定し、選択をlocalStorageに保存（try/catchでラップ）。

5. 構築ルール

• 1つの自己完結型HTMLファイル：インラインCSS/JS、Google Fontsのみ、すべてのイラストにインラインSVG。外部画像は不要。
• スタンドアロンファイルには<!doctype html>、<meta charset="utf-8">、<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">が必要。そうしないと、電話でデスクトップレイアウトがレンダリングされます。
• main{overflow-x:clip}（hiddenではない）を使用して、移動するノートが横スクロールを引き起こさないようにし、かつposition:stickyが機能するようにします。
• すべての色は:rootトークンとして定義。ページは意図的にライトのみなので、color-scheme: lightと明示的なbody背景を設定。
• ボタンは実際の<button>/<a>とし、表示可能な：focus-visibleを持つ。装飾的なSVGにはaria-hidden="true"を設定。コミックフレームにはrole="img"＋シーンを説明するaria-labelを設定。
• prefers-reduced-motionを尊重：移動なし、本を開いたまま、ホバーのぐらつきなし。
• ブレークポイント：≤980pxではシーンをスタックし、装飾的なプロップ（.hide-sm）を非表示。≤600pxではコーナーにロゴと言語スイッチのみを残し、コミックを1行1コマで表示。

6. コピーライティング

• 画面の向こう側の人に語りかける。短い文。温かくても事実に基づく。
• 見出しは小文字。それ以外は文頭大文字。
• 手書きの余談はジョークや強調で、1〜3語。セクションごとに最大1つ。
• 色付きの単語をラップする見出しは、すべての言語で自然に読めるように分割する（語順が変わる！）。「1つの計画。*4つのステージ、*14のステップ」のように、各部分が独立して翻訳できる構造を優先。
• サンプル人物は例としてマークする（「Elifのストーリーは一例です」）。

7. 完成チェックリスト

• すべてのコンテンツはクライアントの実際のコンテンツ。発明されたものはなし。出典と「最終確認」日付を保持。
• ヒーローノートがスムーズに移動し、開く。動きの軽減が有効な場合は、静的に開いた本を表示。
• すべての吹き出しがすべての言語でテキストを収めている（getBBoxまたは目視で確認）。
• すべての言語切り替えで、ソース言語のテキストが残っていない（テキストノードからソース特有の文字（ğ ş ı など）をスキャン）。
• 390pxで横スクロールなし。コーナーには電話でロゴと言語スイッチのみ。
• 各セクションのスクリーンショットを1440×900および390×844で取得（scripts/screenshots.mjsを参照）。