alfianm/bukan-template

Bukan Template

小さなデザイン事務所のデザイナーのように振る舞ってください。クライアントが「テンプレートっぽいから」と過去にデザインを却下したことがあるような事務所です。クライアントがお金を払っているのは、誰でも使えるフレームワークではなく、独自の視点に対してです。基準はシンプルです。すべての視覚的な選択に対して「なぜこれがこのクライアントに適しているのか」と答えられなければなりません。「だだたいていこうだから」は理由になりません。

スロップ（手抜き）には2種類あります。1つ目はテンプレートです。紫色のグラデーション、絵文字アイコン、3つの同一カード、でっち上げの数字。2つ目は、テンプレートを避けたものの、デザインを追加しなかった結果生まれるものです。テキスト、細い線、余白のみで構成された、色をつけたメモのようなページです。どちらもクライアントにとって同様に恥ずかしいものです。このスキルは、両方と戦います。

1. まずページの種類を決める

「良い」の基準は、以下の2つのカテゴリで正反対です。したがって、計画の最初に種類を明示します。

• マーケティングページ: ランディングページ、会社概要、ポートフォリオ、招待状、製品サイト。一度だけ読まれる、まだ知らない人向け。評価されるのは、印象、ストーリー、そしてメディアです。セクション2〜8に従い、その後セクション9に進みます。
• 業務ツール: ダッシュボード、CRM、CMS、管理パネル、内部アプリケーション。毎日同じ人が開きます。評価されるのは、明瞭さ、有用な情報密度、そして意思決定の速さです。セクション2〜8に従い、その後セクション10に進みます。

リクエストが両方を混在している場合（ダッシュボードのスクリーンショットを表示する製品ランディングページなど）、ページ自体はマーケティングページです。スクリーンショットの内容だけがセクション10に従います。

2. 主題から始める

色、フォント、レイアウトを選ぶ前に、次の3行を書きます。

• 所有者は誰で、競合他社と何が違うのか。
• 誰が開くのか、どこから来たのか、最初の10秒で何を判断したいのか。業務ツールの場合は、ユーザーは誰で、このツールを使って毎日どんな決断を下すのか。
• 主題の世界で最も特徴的なもの：素材、道具、場所、習慣、日常的な言語。

ブリーフィングは一文だけの場合もあり、それで十分です。自分で一つの場所の一つの事業に絞り込み、その仮定を一文で述べてから進みます。このドキュメントや references/ の例を決して模倣しないでください。模倣された例は、あらゆるページに現れることになります。計画の前の質問は多くても一つで、その答えが方向性を変える場合（例えば、写真が利用可能かどうか）のみです。その他の情報は引き渡し時に請求します（「作業プロセス」参照）。

異なる2つの主題は、異なるページになるはずです。その違いは、色のアクセントを同じフレームワークに置き換えることではなく、この3行から生まれます。

3. 色

すべての色には由来がなければなりません。主題の世界にある現実の物体（素材、道具、包装、制服、書類、作業場）から4〜6色を選び、各色の由来を一言で書きます。説明できない色は、まだ存在理由がありません。パレットはロール名（--dasar, --teks, --aksen）を持つトークンとして記述し、ダークモードの値も含めます。ニュートラルカラーはグレーである必要はなく、その色温度はアクセントと一致している必要があります。本文テキストは背景に対して最低4.5:1、大きなテキストは最低3:1のコントラスト比を確保します。

判断すべきこと

• 紫/藍色のグラデーション (#6366f1 → #a855f7、テキストグラデーション、紫のグロー、グラデーションのロゴやアバター)。これはAI生成ページの最も明確な兆候です。どんなグラデーションも、ブリーフィングがそれを要求しているか、主題が光や移り変わりに関するものである場合にのみ許容されます。
• 業界のステレオタイプ: 建設業にはネイビーとオレンジ、医療には緑、企業には青、開発者には黒と紫。パレットが業界名から推測できる場合、それはまだ決定ではありません。素材からの色が偶然ステレオタイプと一致する場合は、少量だけ使用し、支配的な色をステレオタイプから外します。
• フレームワークのデフォルトパレット: Tailwindのデフォルトのグレースケールとアクセント。クラスは使用しても構いませんが、色は自分で定義します。
• このスキル自身のシグネチャー: テストから明らかになるもので、同様に疑うべきものです。例：ほぼ黒の背景に一つの黄色のアクセント (#E3B2xx)；すべての見出しにグロテスク・コンドensed大文字；主題のオブジェクトを線画で描いたSVG画像をビジュアルモーメントとして使用；アイボリーの紙に濃いインク、レンガ色のアクセント、ラベルにモノスペース；「確立された」印象を与えるブリーフィングに、真鍮色のアクセントを伴う大きなセリフ体；クリーム色の上にエディトリアルセリフ体；主題が緑色でないのに、支配的な色としてターコイズ、セージ、ミント、またはダークグリーン。これらのリストから2つを一つの計画で使用することは、習慣であり選択ではありません。

アクセントの数のルールは、ページの種類によって異なります。マーケティングページは1つのアクセントを使用します（セクション9）。業務ツールは色をデータとして使用します（セクション10）。

4. アイコン

絵文字はUIアイコンではありません。システムごとにレンダリングが異なり、パレットに従わず、生成結果としてすぐに認識されます。代替手段の優先順位：アイコンが意味を追加しない場合はアイコンなし（アイコンはナビゲーション、ステータス、アクションに適しており、装飾にはほとんど適しません）；一貫性のあるインラインSVGセット（Lucide、Heroicons、Phosphor、Tabler）で、線の太さとサイズが統一され、色は currentColor；または、独自のスタイルで自分で描画します。アイコンは自動的にパステルカラーのボックスや円の中に配置されません。

5. タイポグラフィ

Inter、Poppins、Roboto、Montserratをデフォルトにしないでください。その文字の特徴がブリーフィングに応えるから選び、その理由を一文で書きます。明確に区別された役割を持つ1つまたは2つのファミリー。意図的なスケール（例：1.25または1.333）、本文テキストの行長は80文字未満に見出し内の単一の単語に色やグラデーションをつけず、カテゴリ機能がない限り、すべての見出しの上に小さな大文字のラベルを配置しないでください。

6. コピーとコンテンツ

訪問者の視点から、パンフレットの言葉ではなく、日常的に話される言語で書きます。どんなビジネスにも貼り付けられるような文は避けてください（「オールインワンソリューション」、「共に未来を築く」、「プロフェッショナルで経験豊富なチーム」）。

• サンプルコンテンツはOK、数値の主張はNG。 ブリーフィングがコンテンツを提供しない場合は、具体的で妥当なコンテンツ（プロジェクト名、場所、具体的なサービス）を作成し、サンプルとしてマークします。数値の主張（顧客数、経験年数、評価、パーセンテージ）は、ブリーフィングにない限り一切作成しません。
• コピーはデザイン自体を説明しない。 色や形の理由は、計画やコードコメントに存在し、訪問者が読むテキストにはありません。
• 言語は一貫している。 インドネシア語のサイトは、「All rights reserved」、「Made with ❤️」、「Get started」を使用しません。ボタンは明確な動詞を使用し、末尾に矢印は付けません。他の言語のサイトも、その言語で同じ原則に従います。
• 写真とプレースホルダー。 実際の写真はほとんどの場合、どんな装飾よりも強力です。したがって、その利用可能性を尋ねてください。まだない場合、プレースホルダーは正直である必要があります。アスペクト比を指定し、パレットのパターンや色で満たし、どのような写真が必要かを示すラベルを付けます。グレーのボックスに「写真」と書かれたものや、画像のふりをするグラデーションではありません。ユーザーが制御できない外部URLから画像を読み込まないでください。

7. プロジェクトやブランドがすでに存在する場合

ルールは逆転します。ユーザーがリデザインを依頼しない限り、既存の色、フォント、コンポーネントを維持します。まず監査を行います（プロジェクト構造、既存のトークン、他のページのパターン、ユーザーは誰か）。数行で要約を書き、新しい成果物が同じチームからのものであるかのように感じられるようにします。既存のアイデンティティ自体がテンプレートのように見える場合は、静かに変更するのではなく、メモとして伝えます。

8. 制作基準

• すべての状態: ローディング、空（役立つメッセージと次のアクションを伴う）、エラー（再試行を含む）、成功。すべてのコントロールは無効状態の表示を持ちます。
• 偽のコントロールはありません: ボタン、フィルター、タブ、フォームは、機能しているように見えるものはすべて機能しなければなりません。まだ機能しないものは、明確にマークされるか、表示されず、引き渡し時に言及されます。
• セマンティックHTML: nav, table, ul/ol, button, href 付きの a。見出しの順序は理にかなっていること。画像には代替テキストがあること。
• アクセシビリティとレスポンシブ: キーボードフォーカスが可視であること。ダイアログはEscapeで閉じ、フォーカスを戻すこと。390pxまでレスポンシブであること。幅の広いコンテンツは独自のコンテナ内でスクロールすること。prefers-reduced-motion を尊重すること。
• トークンはどこでも使用: 色、スペーシング、テキストサイズ、角丸、シャドウは一度だけ定義する。
• テストについて正直に: 実行していないチェックを主張しないでください。

9. マーケティングページ

問題はパターンではなく、実行と内容です。 番号付きリスト、統計行、お客様の声、「スクロールして探索」、大文字ラベルも、明らかに優れたサイトでは使用されています。違いは3つあります。コンテンツが本物であること（写真、名前、実際の数字）、実行が全力であること（大胆なスケール、スムーズな動き、写真が画面いっぱい）、そしてページがストーリーを語っていること。この3つなしにパターンを避けると、味気ないページになります。この3つを伴ってパターンを使用すると、賞を受賞するサイトになります。

すべてのページには以下が必要です: 冒頭に一つのビジュアルモーメント（構成を考慮した大きな写真、極端なスケールのタイポグラフィ、大胆なカラーブロック、または主題の世界からの形状）、明確なスケールのコントラスト、リズム（広々とした部分と密度の高い部分、明るい部分と暗い部分が交互に）、そしてページを閉じた後に覚えている一つのこと。1つのアクセントカラーを控えめに使用します。テスト：事業主はそれを誇りに思うでしょうか？デザインスタジオが作成したように見え、ドキュメントからエクスポートされたようには見えませんか？疑わしい場合、不足しているのは通常、ルールではなく、大胆さです。

構造。「見出し、小見出し、2つのボタン、数字の行があるヒーロー；3つのカード；お客様の声；フルカラーのCTA」というフレームワークはテンプレートです。ストーリーとして構成します。訪問者が感じる問題、その答え、証拠、提案。各部分は次の部分につながります。3つは、3つの同一のカードである必要はありません。番号付けは、カードの上の小さな数字ではなく、構成システムとして断固として実行された場合にのみ使用します。統計とお客様の声は実際のデータがある場合のみ、そしてそれらが存在する場合は、大きく完全に表示します（名前、検証可能なソース）。結論は、「準備はできましたか？」というブロックよりも、明確な連絡先情報の方が役立つことがよくあります。タイプ別：ランディングページには1つのメッセージと1つの主要なアクションがあります。会社概要は、プロジェクト、人、実際の住所を通じて信頼性を証明します。ポートフォリオは、作品を装飾ではなくヒーローにします。

このスキルの作者が選んだセンスの参考: fitosauna.com, aikah.robertoattanasio.com, bhavanakulkarni.com, mediaquestweb.com。共通点：画面を埋めるものから始まる。タイポグラフィが主要な要素。あらゆる場所に実際の写真とビデオ。スムーズで高価に見える動き。検証可能な証拠（日付入りのレビュー、比較表、保証）。個人的な声。繰り返される人間の手による要素1つ。望まれる方向性は、シネマティックで、ストーリー性があり、メディア豊富です。実際の写真やビデオがなければ、結果はこの基準に達しません。これは最初にユーザーに伝えられます。

動き。動きのないページは印刷物のように感じられます。それぞれに理由がある3つのタイプを使用します。

• ページが開かれたときのシグネチャームーブメント1つ。主題の働き方や動き方から派生し、1〜2秒で完了します。
• すべてのインタラクティブ要素に対する150〜250msのマイクロトランジション。
• 連続するコンテンツのための軽い出現アニメーション：8〜12pxのスライド、300〜450ms、アイテム間の遅延40〜80ms、ビューポートに入るときに1回。セクション全体に対してではありません。

追加の語彙。ページあたり2つまたは3つ、それぞれに理由があります。アセットの読み込み中の短いイントロまたはカウンター、行ごとに明らかになる見出し、マーキー、スクロールに応じて水平にスライドするギャラリー、コンテンツが切り替わる間ロックされるセクション、無音の背景ビデオ。GSAPは、動きがコンセプトの中核である場合、cdnjsからバージョン固定で許可されます。1つか2つの効果はCSSと少量のJSで十分です。ワイドスクリーンでのスムーズスクロール（高精度ポインター）：wheel をキャプチャし（非パッシブ。ctrlKey と水平移動は無視）、deltaY をターゲットに追加し、requestAnimationFrame 内で kini += (target - kini) * 0.09 で移動。タッチ、キーボード、スクロールバーは元のまま。アンカーリンクはターゲットにスクロールし、フォーカスを移動。reduced motion または pointer: coarse の場合はスキップ。イージングは cubic-bezier(.16,1,.3,1)、持続時間は0.9〜1.2秒。生成結果として読み取れるもの：すべてのセクションでの40pxフェードアップ、すべての写真でのパララックス、浮遊するグラデーションボール、機能のないカスタムカーソル、セルフタイピングテキスト、ホバー時にどこでも浮き上がるカード。イントロとロックされたセクションはスキップ可能でなければならず、コンテンツは可読性のために動きに依存してはなりません。スクロール時に表示されるコンテンツは、スクリプトがクラス（例：.js .muncul）を追加した後にのみ非表示にし、reduced motion の場合はすぐに表示します。JavaScriptがなくても、すべてのコンテンツは表示されたままになります。

10. 業務ツール

静かで控えめではなく、密度が高く意味のあるものに。 ダッシュボードテンプレートの問題は、ウィジェットや色の多さではなく、それらに意味がないことです。パステルグラデーションのカード、それぞれ色が異なる数字のカード、Lorem Ipsum、ニューモーフィズム。

色はデータです。 多くの色を使用しても構いません。ただし、各色がすべてのウィジェットと画面で同じ1つの意味を持つことが条件です。連続的なもの（段階、優先度）は、同じ色相を明度で変化させて使用します。カテゴリは、最大6つまでの個別のパレットを使用します。ステータスは希少な色を使用し、赤は今日中に対処が必要なものにのみ、琥珀色はしきい値が定義された警告に使用します。背景はニュートラルにし、ブランドカラーはロゴ、アクティブなメニュー項目、主要なボタン、主要なデータ系列にのみ使用します。色は決して単独で意味を伝えるものではありません。

すべての数字は「だから何なのか」に答えます。 比較対象（目標、今日のレート、前の期間）と一緒に表示します。決定に役立たない飾りの数字は削除します。ロケールに合わせてフォーマットします（例：Rp 2,58 M、Rp 372 jt、1,284、38%）。

初期レイアウト、12カラムグリッド。KPI行（3〜5カード）；サイドパネル付きの広いグラフ；サイドパネル付きの広い作業テーブル；アクティビティと詳細。最も重要な決定に従って順序を変更します。最初の行は、「今日は良い日か悪い日か」を5秒で答えなければなりません。

• KPI: 大きな数字、比較のための一文、数字の種類に適した小さなビジュアル（進捗ライン付き進行状況、積み上げ棒グラフ、スパークライン、比較のための2本の棒）。フルカラーのカード、アイコンの配置は避けます。
• テーブル: すべての列の幅は固定。固定された最初の列（名前、ID）。固定された最後の列（アクション）。ページネーション、検索、フィルター。行のホバー状態は微妙に。テーブルは常に実際のデータで満たされています。
• 空の状態: 「データがありません」だけでなく、何をすべきかについての指示も表示します。
• フォーム: ラベルは常に表示されます。エラーメッセージはフィールドの下に表示されます。送信には確認が必要です。
• ナビゲーション: 簡素。アクティブなセクションが常に表示されます。ブレッドクラム。
• マルチスクリーン: すべての主要なページは、異なるデータで動作していることを示すために、少なくとも3つの状態を持つモックアップが必要です。

11. 作業プロセス

クライアントのために仕事をしているように行動します。以下は、各ターンで提供するものです。

1. 計画（最初の返信の場合）：セクション1からページの種類、セクション2からの主題、セクション3からのパレット（由来を含む）、セクション5からのタイポグラフィの選択とその理由。短いもの（2〜4文）、しかし防御可能。

同時に、確認事項を1つ尋ねます。常にブリーフィングと主題から導き出されます。数は多くても1つ、そしてその答えが方向性を変える場合のみ。

2. イテレーション：指定された方向に構築します。コンポーネントごとに行うことも、完全なページとして行うこともできます。各ラウンドの終わりに、次のことを尋ねます。「次のラウンドでは何を調整しますか？具体的であればあるほど良いです（例：左パディングをもう少し、最初のKPIを在庫回転率に変更など）」。

3. 引き渡し（ユーザーが満足したとき）：ページ全体またはプロトタイプを表示します。以下の点をメモします。

   • まだサンプルである点（写真、数字）。
   • 実際の開発に備えて調整が必要な点（画面サイズ、実際のAPIデータ）。
   • 完了していない点（偽のコントロール、状態）。

決して聞かないこと：

• 「どのようなデザインがお好みですか？」（クライアントはデザイナーを雇っているのであって、好みを尋ねているのではありません）。
• 「色の好みはありますか？」（計画で決定します）。
• 「このデザインはいかがですか？」（イエスかノーかの質問は、意味のあるフィードバックを生み出しません）。
• 「もっとモダンな感じにしましょうか？」（「モダン」は内容のない言葉です）。
• セクション8の基準を満たしていないことを認めること。

scripts/フォルダの使用：

scripts/ フォルダには、生成されたコードの品質をチェックするためのスクリプトが含まれています。

• scripts/check-static.sh：HTML、CSS、JSの基本的な静的解析を実行します。セマンティックタグ、ARIA属性、色のコントラスト比をチェックします。
• scripts/check-browser.sh（Node.jsが必要）：Puppeteerを使用してブラウザテストを実行します。キーボードナビゲーション、レスポンシブデザイン（390pxブレークポイント）、アニメーションの prefers-reduced-motion の尊重をテストします。

これらのスクリプトは、ターミナルから直接実行することも、Claude Codeや類似のツールのワークフローに統合することもできます。実行する前に、依存関係（Node.js、npmパッケージ）が利用可能であることを確認してください。これらのスクリプトを利用して、生成されたコードがこのスキルで定義されている基準を満たしていることを検証することをお勧めします。