専門家の個人サイト

エキスパートサイト

エキスパートサイトは、特定の人物に対する信頼を販売します。美しい外観は今日ではどのジェネレーターでも作れるため、ページ上に生きた人間、明確な約束、そして感じ取れる品質がある者が勝ちます。

作業手順

ステップを順に進めてください。「ただ美しく」と依頼されても、ステップ1を飛ばさないでください。

1. 人物のポートレート。 利用可能なすべての情報源（やり取り、サイト、チャンネル、書類）から収集します：エキスパートは誰か、誰のために働いているか、どのような結果を提供するか、2〜3の実際の体験談、価値観、目標、自身の写真や作品、本人が使う言葉。何も作り出さないでください：事実がなければ、サイトに存在しません。サイトの1つの主要な考えと1つの約束のフレーズを導き出します：誰に、何を、どのような方法で提供するか。
2. ブリーフ。 references/nishi.md（28のニッチ：開始パレット、フォント、写真で示すもの、必要なブロック、クライアントの疑念、避けるべきこと）でニッチを見つけます。以下の内容を5行で記録します：ページタイプ（対人サービス、診療所やスタジオ、オンラインプロダクト、著者）、タスク（予約、購入、購読、ボットへの移動）、スタイル（1つ、最後まで統一）、1つの忘れられない要素（絵画、オブジェクト、特徴的な写真、生き生きとしたインターフェース）、避けるべきこと。2〜3のテクニックを選び、references/obrazcy.mdから実際のサンプルを開きます。
3. 構成。 黄金比のグリッド、密度は「雑誌」スタイルで「砂漠」ではない。references/kompozitsiya.mdを読んでください。
4. フォントと色。 ニッチのパレットと2つのフォントから始め、その後references/shrifty.mdとreferences/tsvet.mdに従って人物に合わせて調整します。キリル文字対応のフォントのみ使用し、酸性色やネオンカラーは避け、デフォルトで完全に暗い背景は使用しないでください。すべてのニッチのライブギャラリー：assets/nishi.html。
5. 写真、ボリューム、光。 references/foto-i-kartinki.mdとreferences/obem-svet-ten.mdを読んでください。すべてのボリュームテクニックのライブデモ：assets/obem-demo.html。
6. 動きとビデオ。 軽いテクニックのみ：references/effekty.md、references/video.md。
7. テキスト。 references/teksty.mdに従って書いてください。ロシア語のテキストはhumanizer-ruのルールに従い、英語のテキストはhumanizerに従って処理してください。長いダッシュは使用しないでください。
8. チェック。 python -I scripts/proverka_saita.py <サイトフォルダ>を実行し、references/proverka.mdのチェックリストを確認してください。Node.jsとPlaywrightが利用可能な場合、node scripts/proverka_v_brauzere.mjs <index.html>を実行します：これにより、375、768、1280、1440 pxでページが開き、コンソールエラー、はみ出し、小さなボタンが見つかり、スクリーンショットが保存されます。スクリーンショットを目視で確認してください。

主要ルール

• 効果よりも人物。 エキスパートの写真、作品、持ち物、声は、どんなアニメーションよりも価値があります。
• リアリズムとボリュームは、光、影、枠、レイヤー、色で作り出し、重い3Dは避けてください。ページ全体で1つの光源：左上から、影は右下へ。
• ページにつき1つの強い動き。 他の部分はすべて静かに：カードの2px浮上、写真の軽いズーム、ボタンの押下。
• 軽量性。 初回画面は弱いスマートフォンでも素早く開くように。WebGLシーン、ホイールを「キャプチャ」するスクロール、音声付きビデオの自動再生は避けてください。
• 黄金比の非対称性：すべて中央揃えではなく、カラムは38.2 / 61.8、余白とサイズは1.618の倍数。
• 密度。 余白は必要ですが、ブロックが空に見えてはいけません。画面には常に写真、オブジェクト、または生き生きとしたディテールがあります。
• 明確なカラーブロック。 サイト全体を1つの色合いで塗らないでください（1つの色合いは平面的に見えます）。セクションの背景は交互に：明るい、暖かい砂色、1つの暗いアクセントストライプ、セージグリーン。「空の雑誌」よりも、より多くのブロック、テキスト、画像、リストを使用します。
• 各事実は「だから何？」に答える。 エキスパートの経験は、クライアントにとっての利益として提示されます。内部の詳細（部門数、内部テスト結果）はサイトに載せないでください。
• AIテンプレートの兆候なし： Inter、Roboto、Arialをサイトの声として使用；紫とピンクのグラデーション；ネオンや酸性色；各見出しの上のサブ見出し；セクション番号01/02/03；「アイコン、見出し、テキスト」の均一なカードグリッド；アイコンの代わりの絵文字；ストックの握手や「共通の光」のあるAI生成画像；架空のレビュー、ロゴ、数字。
• 誠実さ。 AIで作成されたイラストは明記してください。他者の写真は自由ライセンスと著者クレジットがある場合のみ使用してください。
• プライバシー。 住所は地区または通りまでで、番地は省略。個人の医療情報や家族の詳細はサイトに載せないでください。

エキスパートページの構造

デフォルトの順序。ブリーフに応じて変更してください：

1. 初回画面：約束のフレーズ、エキスパートの生き生きとした写真または主要なアイテム、1つのアクションボタン、その近くに証拠（実際の実績からの数字、「私たちについて書かれたもの」、レビュー）。
2. 誰をどのように支援するか（クライアントの言葉で2〜4の状況）。
3. どのように働くか：実際に示された方法や製品（写真、インターフェース、プロセス）。
4. 証拠：具体的な結果のあるレビュー、作品、事例。
5. 私は誰か：簡潔に、専門性と価値観を説明するものだけ。
6. 購読または試用ステップへのギフト（ガイド、テスト、最初のレッスン、ボット）。
7. 最終的なボタンと連絡先。

リファレンス

• references/kompozitsiya.md：グリッド、黄金比、密度、セクションのリズム。
• references/shrifty.md：キリル文字対応のフォントペア、サイズ、ボリュームテキスト。
• references/tsvet.md：パレット、着色されたニュートラル、深みとしての色。
• references/foto-i-kartinki.md：撮影、処理、切り抜き、枠、フォーマット、ライセンス。
• references/obem-svet-ten.md：完成したCSS付きの9つのボリュームテクニック。
• references/effekty.md：どのエフェクトを採用し、どれを避けるか、重み付き。
• references/video.md：サイト上のビデオと短いクリップの編集。
• references/teksty.md：エキスパートのテキスト、ヒューマナイザー、禁止事項。
• references/nishi.md：28のニッチのベース：パレット、フォント、写真、ブロック、クライアントの疑念、避けるべきこと。
• references/obrazcy.md：各テクニックの実際のサンプル、「テクニック → どこで見るか」。
• references/proverka.md：公開前のチェックリスト。