02 / Blocks

Block Plugins

11種のブロックコンポーネントの動作確認ページです。各マクロの呼び出しパターンを確認できます。

block-card-feature

featureItem

High Performance

高速なレンダリングエンジンで、スムーズなアニメーションを実現します。

Plugin Architecture

独立したプラグインシステムで、必要な機能だけを組み合わせられます。

Clean API

シンプルなマクロAPIで、複雑なUIを数行で実装できます。

Type Safe

明確なインターフェース仕様で、予測可能な動作を保証します。

block-card-philosophy

philosophyCard

01 Modularity

各プラグインは独立して動作します。

02 Performance

必要最小限のコードで最大のパフォーマンスを実現。

03 Clarity

明確な仕様とAPIで、誰でも使いこなせます。

block-card-stance

stanceCard

コードより体験を優先する

エンジンの内部構造よりも、利用者の制作体験を第一に設計します。

仕様書を読めば動かせる

ソースコードを読まなくてもAPIリファレンスだけで実装が完結します。

block-card-target

targetCard

AI Engineer

LLMを活用してWebサイトを構築するAIエンジニア

Site Builder

テンプレートを活用してサイトを量産する制作者

Designer

デザインとコードを両立させたいクリエイター

block-concept-standard

conceptBlock

Plugin Architecture

Plugin-First Design

すべての機能はプラグインとして実装され、独立してテスト・配布できます。サイト固有のコンテンツと切り離された純粋なエンジン層が、再利用性を最大化します。
block-faq-accordion

faqItem

Q. プラグインはどこに配置しますか？
A. <code>src/plugins/</code> 配下に各プラグインフォルダを配置します。フォルダ名がそのままNunjucksのimportパスになります。
Q. 新しいエフェクトを追加するには？
A. <code>src/plugins/effect-bg-{name}/</code> フォルダを作成し、<code>{name}.js</code> にエフェクトクラスを実装します。<code>window.XEffect = XEffect</code> で公開してください。
Q. CSSはどのようにバンドルされますか？
A. <code>src/base.css</code> を先頭に、<code>src/core/*.css</code>、<code>src/plugins/**/*.css</code> がアルファベット順に結合されます。

プラグインを使い始める

PLUGINS_API_REFERENCE.md を読めば、すぐにサイト構築を開始できます。

Sandbox Indexへ戻る
block-form-contact

contactForm