AK²Lab公式サイト
- 制作区分
- 自主制作・実用
- サービス分類
- Webサイト制作
- 公開状態
- 公開済み
自作CMSで静的生成し、Canvas 2Dの3Dワイヤーフレームをヒーローに用いたAK²Lab公式サイト。
自作の静的サイト生成CMS（制作事例として別途掲載）で構築したAK²Labの公式サイト。固定ページとブログ記事をMarkdownで管理し、管理画面から静的HTMLを一括生成する。ヒーロー背景はThree.js系のパーティクル地形を参考に、透視投影とワイヤーフレームをCanvas 2Dへ手計算で移植したもの。ページ内には黄金矩形とフィボナッチ螺旋のCanvasアニメーションも配置している。日本語の全文検索はビルド時にuni/bi-gram索引を生成。公開側は事前生成した静的HTMLだけで動作し、明朝の見出し、広い余白、青1色のアクセントで全体を揃えている。
同等規模を新規制作する場合の参考価格
700,000円
オリジナルデザイン、Canvasモーション2種、CMSによるブログ・検索、レスポンシブ対応、サーバー設置・公開を含む想定です。CMS本体の開発費は含みません。
掲載価格は、本事例と同等の規模・機能を新規制作する場合の目安です。ページ数、機能、素材、外部サービス連携、サーバー環境などによって変動します。
制作目的
AK²Labの活動内容、ブログ、Web制作の案内を一つの公式サイトに整理するため。SE・プログラマーとWebデザイナーの両方を扱う方針を、情報構成・デザイン・生成表現にも反映している。
想定利用者
AK²Labの活動やブログを読む人、Web制作の相談を検討している事業者
担当範囲
- 企画・要件整理
- 情報設計
- UI設計
- Webデザイン
- コンテンツ設計
- フロントエンド実装
- Canvasモーション実装
- CMS設定・静的サイト生成
- レスポンシブ対応
- テスト
- サーバー設置・公開
主な機能・特徴
- 自作CMSによるMarkdown原稿からの静的HTML一括生成
- 透視投影を手計算し、Canvas 2Dで描く3Dワイヤーフレーム地形
- 黄金矩形とフィボナッチ螺旋のCanvasアニメーション
- ビルド時にuni/bi-gram索引を生成する日本語全文検索
- 明朝見出し・広い余白・青1色のアクセントによるデザイン
- 秘匿パス・CSRF・総当たり対策を備えた管理画面から更新できるブログ
- 公開側ではDBやPHPを使わず、生成済みの静的HTMLのみを配信
- prefers-reduced-motionと画面外停止に対応したモーション
技術スタック
制作領域
制作期間
2026年〜
ご相談について
制作内容や規模についてのご相談は、AK²Lab本サイトのお問い合わせ窓口からお送りください。
ご相談・お問い合わせ