← パーツ集 / Components
08

Components

すべての UI を Nunjucks マクロとして定義した、オブジェクト指向の Web コンポーネント集。
再利用性・拡張性・保守性を備えた「部品」が、ページを構造化します。

{% from "components/macros.njk" import sectionHeader, fadeIn, bgShapes, ... %}

01 — ユーティリティ系

Subtitle

セクションタイトル

sectionHeader

英語小見出し（シアン・Roboto Mono）と日本語大見出しの組み合わせ。dark=true で白文字。

{{ sectionHeader("Subtitle", "タイトル") }} {{ sectionHeader("Subtitle", "タイトル", dark=true) }}
スクロールで現れる要素

fadeIn

IntersectionObserver でスクロール検知。delay（ms）で連鎖的なアニメーションが可能。{% call %} パターン使用。

{% call fadeIn(200) %}

この要素はスクロールでフェードイン

{% endcall %}

02 — コンテンツ系

A アート

感性と論理が交わる場所。

K カイネティクス

動きでコミュニケーションする。

philosophyCard

大きなアルファベット文字 + 日本語タイトル + 説明文。哲学・理念セクションに使用。

{{ philosophyCard("A", "アート", "説明文") }}

技術の誠実さ

使わないライブラリは入れない。必要なものだけを、正しく使う。

stanceCard

Lucide アイコン + 見出し + 本文の横型カード。スタンス・特長セクションに使用。

{{ stanceCard("zap", "見出し", "本文テキスト") }}

企業・
店舗

ブランドサイト・採用ページ・LP

個人・
作家

ポートフォリオ・作品集・ブログ

targetCard

Lucide アイコン + 見出し（<br> 対応）+ 説明の縦型カード。ターゲット顧客紹介に使用。

{{ targetCard("building-2", "企業・
店舗", "説明文") }}

スタンダードプラン

推奨

¥200,000〜

5〜10ページ程度のコーポレートサイト。Canvas エフェクト付きで差別化。

serviceCard

タイトル・タグ・価格・説明・注記の5要素。サービス紹介・料金表セクションに使用。

{{ serviceCard("プラン名", "タグ", "¥xx", "説明文", "注記（省略可）") }}
WordPressでは作れないのですか？
制作は可能です。ただし AK² Lab の Canvas エフェクトと最大限の表現力を活かすには、静的 HTML による制作を推奨しています。

faqItem

HTML <details> ベースのアコーディオン FAQ。CSS アニメーションで開閉。

{{ faqItem("質問文", "回答文") }}

準備中のコンテンツ

Coming Soon

パーツ集に戻る

contentPlaceholder

「準備中」「Coming Soon」などの一時的なプレースホルダー表示。オプションでボタンも追加可。

{{ contentPlaceholder("タイトル", "サブテキスト", "/url/", "ボタンラベル") }}

03 — ヒーロー系

heroLogo

float-animation 付きのロゴコンテナ。{% call %} パターンで任意の SVG を内包。

{% call heroLogo() %} ... {% endcall %}

heroWave

CSS アニメーションでループする SVG ウェーブ区切り。Hero セクション下端のグラデーション溶け込みに使用。

{{ heroWave() }} {{ heroWave("rgba(2,93,204,0.05)", "rgba(2,93,204,0.10)", "rgba(0,198,255,0.05)", "#f8fafc") }}

[ ランダム選択・JavaScript 注入 ]

AK² Lab

美しさの中には論理が宿る

Artistic intuition meets calculated motion.

コピーが配列から JS でランダム選択され注入されます。

heroContent

ヒーローの headline / en / desc を配列から JS でランダム選択・DOMに注入するコピーカルーセル。

{% set copies = [ { headline: "見出し", en: "English", desc: "

説明

" } ] %} {{ heroContent(copies, site.fullName) }}

04 — 背景エフェクト系

背景ぼかし図形 Demo

bgShapes

アニメーションするぼかし円で奥行きを演出。top/left/right/bottom/w/h/c1/c2/delay/reverse を配列で指定。

{{ bgShapes([ { top: "-50px", left: "-100px", w: "800px", h: "400px", c1: "rgba(219,234,254,0.4)", c2: "rgba(191,219,254,0.2)" } ]) }}
🌸

SakuraEffect

bgSakura

桜吹雪の Canvas エフェクトをセクション背景として配置。section-effects.js が必須。

{{ bgSakura() }}
❄️

SnowEffect

bgSnow

雪の舞い Canvas エフェクトをセクション背景として配置。ダーク系セクションに。

{{ bgSnow() }}
🌌

AuroraEffect

bgAurora

オーロラ Canvas エフェクトをセクション背景として配置。北欧・自然系テーマに。

{{ bgAurora() }}
✨

SparksEffect

bgSparks

火花 Canvas エフェクトをセクション背景として配置。技術・エネルギー系テーマに。

{{ bgSparks() }}
背景エフェクトの使用条件: section-effects.js を utils: [section-effects] でロード。 親セクションに position: relative を設定。section-bg-canvas クラスの canvas が自動的に描画ループを開始します。

05 — フォーム系

contactForm

お問い合わせフォーム一式。action で送信先を指定。form-group / form-label / form-input / form-textarea のクラスで構成。

{{ contactForm("https://example.com/submit") }}

06 — ページ構造系

Samples

High-Durability Archives

「こんなサイト、作れますか？」のイメージを膨らませるために。

すべて純粋なHTML形式。

pageHero

内部ページ用ヒーローセクション（シングルトン）。subtitle / title / lead / note を受け取り section.page-hero を生成。extraClass でページ固有クラスを追加可。

{{ pageHero( "Samples", "High-Durability Archives", "リード文（HTML可）", "infoメモ（省略可）", "section--samples-hero") }}

爆速表示

プログラム処理なし。開いた瞬間に表示。

セキュリティ最強

攻撃できる箇所が存在しない構造。

featureItem

Lucide アイコン + 見出し + 説明文の特長アイテム。features-grid 内でループ使用。データはページのフロントマターで管理。

{{ featureItem("zap", "爆速表示", "説明文") }}
カフェ・サロン向け
Warm & Natural
カフェサロン飲食店

カフェ・サロン向け

  • 温かみのある写真重視レイアウト
  • メニュー表・価格表
  • Googleマップ埋め込み
  • Instagram風ギャラリー
4〜6ページ このテンプレートで相談する

sampleCard

_data/samples.json の1要素を受け取り、画像・タグ・特長リスト・ページ数・CTAボタンを含むカードを描画。index で fade-in の連鎖遅延を制御。

{% for s in samples %} {{ sampleCard(s, loop.index0) }} {% endfor %}

「こんな感じで作りたい」をお聞かせください

ヒアリングを重ねて、あなたのサイトを制作します。

無料相談はこちら

ctaSection

行動喚起セクション（シングルトン）。title / text / linkUrl / linkText を受け取り section.section--cta を生成。背景グラデーションは gradient で変更可。

{{ ctaSection( "見出し", "本文（HTML可）", "/#contact", "ボタンラベル") }}

07 — パーツページ構造系

← パーツ集 / Typography
01

Typography

partsSubPage

パーツ集サブページ共通ラッパー（シングルトン）。パンくずナビ・番号付き h1・fade-in-section を自動生成。bg 省略時は section--white、設定時はインライン背景色。breadcrumbLabel で h1 と異なるパンくず末尾を指定可。

{% call partsSubPage("01", "Typography") %} ...コンテンツ... {% endcall %} {# 背景色あり + 異なるパンくずラベル #} {% call partsSubPage("06", "Motion & Animation", "", "Motion") %} ... {% endcall %}
10

Canvasエフェクト

8

ボタンスタイル

partsStatItem

数値ラベルの統計アイテム。parts-stats グリッド内でループ使用。データはフロントマターで管理。

{% for s in stats %} {{ partsStatItem(s.number, s.label) }} {% endfor %}
01 / Typography
タイポグラフィ

Noto Serif JP・Lato・Roboto Mono の3書体を収録。

詳しく見る →
05 / Effects
エフェクト

Canvas エフェクト統合カタログ。

詳しく見る →
08 / Components
コンポーネント

Nunjucks マクロで実装したUI集。

詳しく見る →

partsCategoryCard

番号付きカテゴリーカード。theme で外観を切替。"dark"（Effects 用ダーク背景）/ "highlight"（Components 用ブルー背景）/ 省略（デフォルト白）。データはフロントマターで管理。

{% for c in categories %} {{ partsCategoryCard(c.num, c.title, c.desc, c.url, c.theme | default("")) }} {% endfor %}
Roboto Mono / 等幅
φ = 1.6180339...
const AK2 = new AK2Engine();
技術的なクールさ。数値・コードに映える。

typoFontBlock

フォントファミリー比較ブロック。cls に font-sans / font-english / font-mono を指定。sub でサブテキスト（小さいspan）を追加。

{{ typoFontBlock( "Noto Serif JP / 明朝体", "美しさの中には論理が宿る", "font-sans", "AK² Lab — Art & Kinetic Laboratory", "伝統と格調。") }}
4xl 47.8px 見出し
base 16px 本文（標準）
xs 12px 注記テキスト

typoScaleRow

タイプスケール一覧の1行。label（スケール名）/ size（px表示）/ text（サンプル）/ style（インラインスタイル）。データはフロントマターで管理。

{% for s in scales %} {{ typoScaleRow(s.label, s.size, s.text, s.style) }} {% endfor %}
#025DCC Primary Blue
#00C6FF Accent Cyan
Gradient Brand Gradient

colorSwatch

カラーパレットのスウォッチ1枚。hexLabel は hex 値またはラベル文字列（Gradient など）。style に background や color・border を自由に指定。

{{ colorSwatch("#025DCC", "Primary Blue", "background:#025DCC") }} {{ colorSwatch("Gradient", "Brand Gradient", "background:linear-gradient(135deg,#025DCC,#00C6FF)") }}
[ caller() でデモを注入 ]

motionItem

モーションデモアイテム。caller() パターンでデモコンテンツを注入。motion-demo / motion-info / motion-title / motion-desc / motion-code の構造を生成。

{% call motionItem("Float", "説明文", "animation: gentle-float ...") %}
...
{% endcall %}

設計思想 — OOP × Web

🧩

単一責任の原則

各マクロは1つの役割のみ持つ。sectionHeader はヘッダーのみ、fadeIn はアニメーションのみ担当。

🔄

再利用性

一度定義すれば全ページで使用可能。変更は1ヶ所を修正するだけで全ページに反映される。

📐

レイヤー構造

Canvas（z:1）/ Content（z:10）/ Header（z:50）の明確な3層分離。エフェクトとコンテンツが干渉しない。

🏗️

宣言的インターフェース

「何を表示するか」を宣言するだけ。実装の詳細（HTML構造、CSS クラス名）はマクロが隠蔽する。