このサイトは「作品」である
Aki.Archiveは単なるポートフォリオではない。AIによってAIのために生成されたWebsite — サイトそのものが生成AIの作品であり、そのプロセスを含めて公開することに意味がある。
この記事では、サイトの設計思想から実装の詳細まで、すべてを設計図として公開する。
技術スタック
コアフレームワーク
| 技術 | バージョン | 役割 | |------|-----------|------| | Next.js | 16.2.2 | App Router + 静的エクスポート | | React | 19.2.4 | UI構築 | | TypeScript | 5 | 型安全性 | | Tailwind CSS | v4 | CSS-firstスタイリング |
コンテンツ & データ
| 技術 | 役割 | |------|------| | MDX (next-mdx-remote) | 作品・記事コンテンツ | | gray-matter | YAMLフロントマター解析 | | next-intl | 日英バイリンガル対応 |
アニメーション & ビジュアル
| 技術 | 役割 | |------|------| | Framer Motion | UIアニメーション・文字出現 | | Canvas API | Perlin Noiseビジュアル | | Simplex Noise (自前実装) | 有機的な動き生成 |
サイト構造
/ja/ トップページ（Heroアニメーション）
/ja/works/ 作品一覧（54作品）
/ja/works/[slug]/ 作品詳細（画像・音楽・映像）
/ja/collections/ コレクション一覧
/ja/collections/[slug]/ コレクション詳細
/ja/lab/ Lab記事一覧
/ja/lab/[slug]/ Lab記事詳細
/ja/about/ プロフィール・Press Kit
/ja/faq/ FAQ（構造化データ付き）
/ja/glossary/ AI用語集
/ja/authority/ 実績・メディア掲載
/ja/contact/ お問い合わせ
全ページが /ja/ と /en/ の2言語で生成される。合計150以上のURL。
データアーキテクチャ
ファイルベースCMS
データベースは使わない。すべてのコンテンツはMDXファイルとJSONファイルで管理される。
content/
├── works/ 54個のMDXファイル（画像・音楽・映像）
├── collections/ 3個のMDXファイル
├── lab/ Lab記事
├── faq.json FAQ（日英対応）
├── glossary.json AI用語集（日英対応）
├── authority.json 実績データ
└── i18n/
├── ja.json 日本語翻訳
└── en.json 英語翻訳
作品データ型
TypeScriptで型安全に管理：
WorkFrontmatter {
slug // URL識別子
title // 日本語タイトル
title_en // 英語タイトル
type // "image" | "music" | "video"
tools // 使用ツール（配列）
created_at // 制作日
thumbnail // サムネイルパス
collections // 所属コレクション
prompt_summary // 制作概要（日本語）
parameters // 生成パラメータ
audio_src // 音楽ファイルパス
video_embed // YouTube埋め込みURL
}
AI可読性設計
このサイトが「AIのために」設計されている根拠。
1. 構造化データ（JSON-LD）
4種類のスキーマを埋め込み：
- WebSite — サイト名・URL・対応言語
- Person — 制作者プロフィール・SNSリンク
- CreativeWork — 各作品のメタデータ・使用ツール
- FAQPage — FAQ構造化（Google検索対応）
2. llms.txt
AIアシスタントがサイトを理解するための専用ファイル。サイト概要、構造、コンテンツタイプ、APIエンドポイントを記載。
3. JSON API
/api/works.json — 全作品データをJSON形式で公開。外部AIやツールからプログラマティックにアクセス可能。
4. セマンティックHTML
見出し階層、alt属性、ARIA属性を適切に使用。スクリーンリーダーもAIクローラーも理解しやすい構造。
5. サイトマップ & robots.txt
150以上のURLを含むXMLサイトマップ。全コンテンツをクローラーに公開。
6. FAQ & Glossary
構造化されたQ&AとAI用語集。AIが文脈を理解するための知識ベース。
ビジュアルエフェクト設計
Perlin Noiseキャンバス
トップページの背景アニメーション。3つの要素で構成：
1. ノイズフィールドライン Perlin Noiseで計算された12本の流動的なライン。シアン→マゼンタのグラデーション。各ラインに3層のグロー（発光）エフェクト。
2. パーティクルシステム 最大600個のパーティクルがノイズフィールドに従って漂う。パーティクルは元の位置にゆっくり引き戻される弾性を持つ。
3. マウスインタラクション
- マウス近接でパーティクルが軌道運動
- パーティクル同士が接続線で結ばれる
- ノイズラインがマウスに反応して歪む
- マウスが離れると有機的に復元
テキストアニメーション
CharReveal — 1文字ずつブラーからフェードイン。各文字に0.06秒のスタガー。
GlitchText — カタカナ・記号のグリッチ文字からデコードされるように表示。タイプライター風カーソル付き。
静的サイト生成（SSG）
なぜ静的か
- パフォーマンス: 事前レンダリングでCDNエッジから即座に配信
- セキュリティ: サーバーランタイムなし、攻撃面ゼロ
- コスト: サーバー不要、Netlifyの無料枠で運用可能
- 信頼性: ダウンタイムなし
ビルド設定
output: "export" // 完全な静的HTML出力
images.unoptimized: true // 画像最適化なし（静的対応）
trailingSlash: true // URL末尾にスラッシュ
すべてのページに export const dynamic = "force-static" を指定。ビルド時に全ページを事前生成。
コンポーネント設計
20個の再利用可能なReactコンポーネント：
レイアウト層
Header / Footer / Container
ページセクション
HeroSection / SectionHeading / WorksGrid
作品表示
WorkCard / WorkHighlight / RelatedWorks / PlaceholderImage
UI要素
Card / Badge / Accordion / FilterBar / TechnicalNote
ビジュアル
NoiseCanvas / WaveCanvas / PageTransition
機能
Toolkit / ContactForm
デプロイメント
Netlify静的デプロイ
ビルド → out/ → out-lite/（動画除外）→ Netlify CLI
動画は容量削減のためYouTube埋め込みに移行。15本全てがYouTubeから配信される。
数字で見るAki.Archive
| 指標 | 値 | |------|-----| | 総作品数 | 54 | | 画像作品 | 35 | | 音楽作品 | 5 | | 映像作品 | 14 | | コレクション | 3 | | Lab記事 | 4 | | コンポーネント | 20 | | サイトマップURL | 150+ | | 対応言語 | 2（日・英） | | JSON-LDスキーマ | 4種類 | | デプロイサイズ | ~96MB |
まとめ
Aki.Archiveは「AIが作った作品を見せるサイト」ではなく、サイトそのものがAIとの共創プロセスの産物である。
コンテンツ、コード、設計思想、ビジュアルエフェクト — すべてがAIとの対話から生まれた。そしてこの設計図を公開することで、プロセスのアーカイブは完成する。
サイトを作ることが作品。設計図を公開することがステートメント。