Scrollcraftとは？
Scrollcraftは、デザインの完成度に一貫した基準を適用しながら、スクロール駆動型のプレミアムなWebサイトを構築するためのClaude Codeスキルです。インタラクション、ビジュアルディレクション、タイポグラフィ、余白、色、奥行き、検証を、同じプロセスの一部として扱います。
おなじみのヒーロー、機能カード、推薦文、行動喚起セクションの組み合わせを繰り返し生成するのではなく、Scrollcraftはまずページ文法を選びます。その文法によって、体験がどのように動き、どのようにナビゲーションされ、どのおなじみのパターンを避けるべきかが決まります。
このスキルでは、読者のスクロールに合わせて動画をフレーム単位で再生したり、主張が展開する間シーンを固定したり、横方向のレールを動かしたり、見出しを1行ずつ組み立てたり、ページの地面を移動させたり、ポインターの動きに反応させたりできます。さらに、すべての制作物に、そのサイト固有のオーダーメイドな特徴的インタラクションを1つ導入する必要があります。
Scrollcraftが制作物を独自のものに保つ方法
Scrollcraftには、互いに排他的な8つのページ文法があります。
- フィルミック・ワンショット：連続した映画的プレゼンテーション。
- チャプター型エディトリアル：編集記事の章で構成された構造的な流れ。
- ライブサーフェス：インタラクションによって動く応答性の高い画面。
- 連続する世界：見えるセクションの継ぎ目がない、1つの固定ステージ。
- タイポグラフィック・ポスター：主に文字が主導する構成。
- ギャラリー：ビジュアル作品を中心に組織された体験。
- スプリットステージ：連動するコンテンツ領域に分かれたプレゼンテーション。
- リズミック・カットリスト：意図的なビジュアルカットによって形作られる流れ。
これらは互換可能なテーマではありません。それぞれの文法には、選択すべき構造と禁止される構造があり、別々のプロジェクトがいつの間にか同じ骨格へ収束する可能性を抑えます。
PERKFORMは、映画的でプロダクトを前面に出した方向性を示しています。ワンショットのプレゼンテーションを用い、従来のセクション積み上げに頼るのではなく、全画面の反転した背景へ大胆に切り替えます。
Fallowbankは、同じスキルで抑制の効いたドキュメンタリー的な表現も作れることを示しています。写真にミュージアムラベルのようなコピーを重ね、標準的なボタンではなく、流れるテキストで締めくくります。
フィンガープリント・ゲート
最初のプロジェクト以降、新しい制作物は過去の作品と比較されます。文法、ナビゲーション、ヒーロー、アクトの形、締めくくり、シグネチャームーブという6つの項目のうち、少なくとも4つで異ならなければなりません。失敗した場合は、記録を弱めたり書き換えたりせず、計画を変更する必要があります。
最初の制作物は、レジストリが空の状態から始まるため、既存のフィンガープリントをクリアする必要はありません。これは意図的な設計です。このゲートは、自分の作品を繰り返すことを防ぐためにあります。
デザインとインタラクションの基準
個々のアクトを定義する前に、Scrollcraftは感情曲線を作成します。各アクトには、意図する感情と、その感情を画面上で生み出す要因が割り当てられます。隣り合う2つのアクトが同じ感情を生む場合、そのうち1つは不要かもしれません。
次に、ページは1つの設計されたピークを中心に構成されます。その瞬間には、最大のアセット予算、直前の十分な静けさ、そして十分なスクロール距離が与えられます。これにより、すべてのセクションを同じようにドラマチックに扱うのではなく、ピーク・エンドの法則を直接適用します。
クラフトルール
- タイポグラフィ：フォントファミリーは2種類以内、トラッキングを管理し、1行45〜75文字を目安にし、行間は字幅との関係で調整します。
- 余白：4pxを基準単位とし、見出しの下より上に多くの余白を置き、小さな画面に適応する可変のセクション内余白を使います。
- 色：6つの役割と1つのアクセント、色味を加えた補助テキスト、純粋な黒を使わないこと、明るい背景と暗い背景を意図的に切り替える対応を定めます。
- 奥行き：ずらした影、エッジライト、拡大縮小とぼかし、重なり、粒子感を、それぞれ異なるツールとして扱います。
- ブランド準拠：支給されたブランドキットのルールはScrollcraftの既定値より優先されます。これには、スキルが通常なら選ぶ可能性のある手法を禁止する制約も含まれます。
このスキルは、AI生成デザインでよくある近道も拒否します。均一な機能カードのグリッド、装飾的なカウンター、汎用的なスクロール案内、グラデーションテキスト、架空の統計情報、偽のダッシュボード、AIらしい紫のグラデーション、既定のクリームと真鍮によるクラフトブランド配色などがその例です。
Claude Codeプラグインをインストールする
まずプラグインマーケットプレイスを追加し、次にデザインプラグインをインストールします。
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-designClaude CodeがRun /reload-plugins to activate.と報告した場合は、続行する前にそのコマンドを実行してください。
Scrollcraftは次のコマンドで直接呼び出せます。
/nateherk-design:scrollcraftClaude Codeで作りたいスクロール駆動型サイトを説明して、このスキルを使うこともできます。手順を明示的に開始したい場合は、直接コマンドが便利です。
インストールせずに開発する
プラグインとしてインストールせず、スキルのリポジトリをローカルで確認または変更するには、プラグインディレクトリを指定してClaude Codeを起動します。
claude --plugin-dir ./plugins/nateherk-design要件を確認する
Scrollcraftはいくつかのローカルツールに依存します。制作を始める前に、次のツールが揃っていることを確認してください。
- Node.js 18以降：含まれるすべてのスクリプトで必要です。
- 完全版のffmpegビルド：クリップをエンコードし、通常再生ではなく正しくスクラブできるようにするために使用します。縮小版ビルドでは、
scaleなどの必須フィルターが省かれている場合があります。 - playwright-coreとChrome：ブラウザベースの検証工程で使用します。
- KIE_AI_API_KEY：任意で、アセットを生成するときだけ必要です。自分で撮影した写真や映像を使うプロジェクトでは、このキーは必要ありません。
モジュール解決が正しい場所から行われるよう、ビルドフォルダー内にplaywright-coreをインストールしてください：
npm i playwright-coreScrollcraftが正しい実行ファイルを見つけられない場合は、SCROLLCRAFT_FFMPEGとSCROLLCRAFT_CHROMEで検索先を上書きできます。
Scrollcraftで完成ビルドまで使用された実績があるのはWindowsのみです。スクリプトはWindows、macOS、Linuxの一般的な場所を検索しますが、READMEではmacOSでビルドが完了したとは記載していません。
事前チェックを実行してワークスペースを作成する
何よりも先に診断スクリプトを実行してください。後で誤解を招く失敗につながる、欠落または互換性のない依存関係を報告します。
node scripts/doctor.mjs縮小版のffmpegバイナリではフィルターの欠落が構文エラーとして報告されることがあり、WebP muxerの欠落はファイル名の問題に見えることがあり、playwright-coreは誤ったディレクトリから解決される可能性があるため、このチェックは特に重要です。
事前チェックに合格したら、ワークスペースと空のフィンガープリントレジストリを作成します：
node scripts/workspace.mjs --ensureワークスペースの選択方法
Scrollcraftは次の順序でワークスペースを解決し、最初に一致したものを使用します：
SCROLLCRAFT_HOMEに保存されたパス。- カレントディレクトリから上位へたどって最初に見つかった
.scrollcraft.jsonが指定するワークスペース。 - プロジェクトルート下の
scrollcraftディレクトリ。
ワークスペース設定ファイルは次の形式です：
{ "workspace": "path/to/builds" }ビルドは<workspace>/builds/<name>/下に書き込まれ、フィンガープリントレジストリは<workspace>/FINGERPRINTS.mdに保存されます。
最初のプロジェクトを作成する
プラグインが有効になり、ワークスペースが存在することを確認したら、Scrollcraftを呼び出します：
/nateherk-design:scrollcraftサイト、そのテーマ、利用できるアセット、適用すべきブランドルールを説明してください。KIE_AI_API_KEYが設定されている場合は生成アセットの方法を選べます。また、生成コストなしで自分の写真や映像を使うこともできます。既存のアセットを使うことは、代替策ではなく主要なワークフローです。
このスキルは、ヒアリング、文法の選択、コンセプトの評価、ページの構築、結果の検証を含む手順に従います。リファレンスでは、感情曲線、スクロールデバイス、連続する世界の構築、アートディレクション、アセット準備、デザイン基準も定義されています。
選択した文法を守る
選択した文法を視覚的なプリセットとして扱わないでください。たとえば連続する世界のプロジェクトは、セクション間の継ぎ目がない、1つの固定されたステージのように動作する必要があります。章立てされたエディトリアルプロジェクトは、異なる構造とナビゲーションモデルに従います。両者に必要なパターンを混在させると、プロジェクトを区別するための仕組みが損なわれます。
1つの象徴的な動きを計画する
すべてのサイトには、そのプロジェクトだけに存在するオーダーメイドのインタラクションを含める必要があります。スポットライトの色を変えるだけでは該当しません。その動きは、一般的な装飾として追加するのではなく、テーマと体験から自然に導かれるものにしてください。
エンジンを正しく使う
最も重要な実装ルールは、プロジェクトごとにエンジンを編集しないことです。エンジンはビルド間で共有される仕組みを提供するものであり、設定可能なページジェネレーターではありません。
各プロジェクトでは：
- 6つのカラートークンと、最大2種類のフォントでエンジンをテーマ設定する。
- そのサイト専用のセマンティックHTMLを書く。
- エンジンが公開する
--sc-pカスタムプロパティを使って、オーダーメイドの動作を制御する。 - プロジェクト固有のレイアウトとインタラクションを共有エンジンの外部に保つ。
設定オブジェクトから実行時にページ全体を構築することは避けてください。Scrollcraftのデザイン哲学によれば、その抽象化こそが、1つのシステムで作られたサイトを似通ったものにしてしまう原因です。
検証工程を理解する
Scrollcraftはヘッドレスブラウザを使い、スクロール位置ごとに完成したページを検査します。動画を中心とする体験では、フレームを評価する前に再生ヘッドが安定するまで待ちます。
検証プロセスでは次を報告します：
- デッドスクロール：画面上で何も目に見える変化が起きないスクロール距離。
- 不完全なキュー：完全な不透明度に達しないテキストやその他の視覚的手がかり。
- 合成後のコントラスト失敗：テキストの下を通過する最も明るいフレームに対して、行ごとにコントラストをチェックします。明るい背景に暗い文字か、暗い背景に明るい文字かに応じて方向を選択します。
- デコードされないクリップ：ポスターフレームで停止したままの動画。意図的に一時停止された映像のように見えることがあります。
このプロセスでは、人によるレビュー用のコンタクトシートも作成されます。自動チェックでページが機能することは確認できますが、その体験が意味のあるものか、感情的に効果的なものかは判断できません。
高度なワークフローのヒント
フィンガープリントレジストリを正確に保つ
付属の例を使ってレジストリを事前入力しないでください。リポジトリの EXAMPLES.md は、入力済みのレジストリがどのように見えるか、またどのような形状が衝突しやすいかを示すものですが、制約事項の一覧ではありません。自分のプロジェクトを記録し、6項目中4項目の独自性要件を満たさない新しいコンセプトは再設計してください。
リソースを1つのピークに集中させる
すべてのシーンを同じ強度にしようとする誘惑に抗いましょう。最も強力なアセット、最長のスクロール区間、そして最も明確な導入を1つのピークのために確保します。複数のピークが競合すると、全体のカーブが弱まります。
レスポンシブなリズムを意図的に設計する
4pxのスペーシング基盤を使いつつ、デスクトップ向けの間隔をそのままスマートフォンに移さないでください。見出し同士の関係を明確に保ち、読みやすい行長を維持し、暗い背景上の明るいテキストは単一の色調整だけに頼らず補正します。
推測より診断用のオーバーライドを優先する
誤った ffmpeg や Chrome のインストールが検出された場合は、SCROLLCRAFT_FFMPEG または SCROLLCRAFT_CHROME を明示的に設定してください。その後、doctor.mjs を再実行します。エンコードやブラウザーのエラーを後から個別にデバッグするより効率的です。
プロジェクトの履歴を読む
リポジトリの CHANGELOG.md には、ビルド中に発生した失敗と、それに応じて作られたデザインまたはエンジニアリング上のルールが記録されています。単なる機能履歴ではなく、運用上の教訓の情報源として役立ちます。
考慮すべき制限事項
- 完了したビルドは、他のプラットフォームの一般的な場所を検索するスクリプトがあるにもかかわらず、Windows上でしか実行されていません。
- 生成動画には相応のコストがかかる場合があります。特に、多くの区間を持つ連続した世界の飛行では顕著です。
- このスキルは意図的に強い主張を持っており、見慣れたレイアウトや配色、または定義の弱いピークを受け入れないことがあります。
- 自動検証では完成したページに意味があるかどうかを判断できないため、コンタクトシートには引き続き人による確認が必要です。
結論
Scrollcraft は、スクロール操作エンジンと規律あるデザイン手順を組み合わせたものです。まず Claude Code プラグインをインストールし、プレフライトを実行してワークスペースを作成します。次に文法を選び、感情のカーブと1つのピークを定義し、独自のシグネチャームーブを作成して、検証によって機械的な問題を明らかにします。共有エンジンには手を加えず、各プロジェクトの意味構造とアートディレクションが本当に独自のものとして保たれるようにしてください。