Portfolio - AK²Lab

注力プロジェクト

Featured Works

公開済み Webサイト制作

次葉文化アーカイブ

スクロールがそのまま物語の時間軸になる、Three.js（WebGL・GLSLシェーダ）による3Dスクロールストーリーテリングのブランドサイト。文化資料の修復・デジタル化・公開を担う専門会社を題材に、世界観の設定から演出設計・実装まで一貫して制作した。

スクロールが物語の時間軸になる3D演出（画面高さ約12枚分＝1,240svhを7幕に構成し、紙が裂け・修復され・走査され・意味の網目になるまでを一続きで見せる）
舞う粒子は塵→繊維→画素→ノードと役割を変えながら実体は同一の粒子系のまま（工程の移り変わりを一つのものの変化として表現）
カメラ・紙の破損／修復・走査光・粒子数など18の連続値を幕ごとのキーフレームで定義し、3D描画と本文表示を同じ幕定義から生成

Next.js / React / TypeScript / Three.js / CSS

詳しく見る→

デモを見る

公開済み Webアプリ・業務システム

CoCoLink

掲示板・タイムライン・コミュニティ・DM・ファセット検索・モデレーション・管理画面までを1本にまとめた、多機能なSNS系Webアプリ。

掲示板型投稿（画像複数枚・ハッシュタグ・ネストコメント）とタイムライン投稿（引用・リアクション）の2軸
コミュニティ（作成・参加承認・管理人）・DM・フォロー・通知・3カラムUI
メンバー検索のファセット絞り込み（住まい・年代・タグ・参加コミュニティ等）

Next.js / TypeScript / React / Prisma / Node.js

詳しく見る→

デモを見る

公開済み Webアプリ・業務システム

予約管理システム

WEB予約と店舗管理を一体化した予約管理システム。美容室・整体・教室などへの横展開を想定。

4ステップのWEB予約と30分刻みの○×空き表示
指名なし予約の自動スタッフ割当と確定直前の空き枠再チェック
週間カレンダー（スタッフ別色分け・重複予約のレーン分割）

PHP / SQLite / MySQL / PDO / CSS

詳しく見る→

デモを見る

公開済み Webアプリ・業務システム

不動産サイト

設定駆動の汎用ファセット検索エンジンを、不動産物件検索サイトとして実装したデモ。

17ファセットの多条件絞り込みと、こだわり条件の AND/OR 切替
disjunctive faceting による件数リアルタイム追従
プログレッシブ・エンハンスメント（JS無効でも GET で完全動作）

PHP / JavaScript / SQLite / MySQL / PDO

詳しく見る→

デモを見る

公開済み Webアプリ・業務システム

見積・請求管理

インボイス制度に対応した見積書・請求書の発行と入金管理ができる帳票管理システム。

見積書の明細行つきCRUDと見積→請求のワンクリック変換
A4印刷用帳票（インボイス対応・税率区分別消費税）
入金管理と支払期限超過の自動判定

PHP / SQLite / PDO / JavaScript / SVG

詳しく見る→

デモを見る

公開済み Webアプリ・業務システム

用語集サイト

経済学・心理学などの用語を、カテゴリ・五十音索引・全文検索の3方式で引ける辞典サイト。

カテゴリ・五十音索引・全文検索（自作 uni/bi-gram）の3方式
双方向関連ワード（無向辺1行・片側削除で両側消滅を構造保証）
閲覧履歴（localStorage）と、既読用語を先頭へ繰り上げるトップ一覧

PHP / JavaScript / Markdown / Canvas API / SQLite

詳しく見る→

デモを見る

公開済み Webアプリ・業務システム

静的サイト生成CMS

Markdown原稿を管理画面で編集し、「公開」操作で静的HTMLを生成するCMS。WordPressに代わるWeb制作基盤として設計した。

固定ページと投稿記事（複数階層カテゴリ・タグ・年月アーカイブ・全文検索）
予約投稿（指定日まで非公開。日次cronの公開ビルドで当日に自動反映）
Markdown原稿から「公開」操作での静的HTML一括生成

PHP / JavaScript / Markdown / SQLite / MySQL

詳しく見る→

すべての制作事例を見る→

できること

Capabilities

Web デザイン

レイアウト設計・ワイヤーフレーム・レスポンシブ対応。見た目と使いやすさを両立させます。
フロントエンド

HTML・CSS・JavaScript・React・Next.js。実務寄りの UI 構築と保守しやすいコード設計。
バックエンド

PHP・Node.js・Next.js (API Routes)。認証・権限・CRUD・外部 API 連携まで対応。
システム設計

要件整理・DB 設計・API 設計・ER 図・フロー設計。業務全体を見渡した設計を担います。

技術の索引

Index of Technologies

領域 / Domains

フロントエンド31 バックエンド18 DB設計14 認証・権限12 管理画面12 API・通信11 検索7

技術 / Technologies

すべての技術・領域から探す

使用ツール

Toolset

日常的に使うものから、データ受け渡しで扱えるアプリや利用環境までを掲載しています。

Sakura Editor Cursor Antigravity Windsurf VSCode Claude Code Codex Claude ChatGPT Gemini Grok Genspark Manus Perplexity NotebookLM Google AI Studio Excel Word Access PowerPoint Googleスプレッドシート Affinity Photoshop Illustrator DaVinci Resolve Thunderbird Chrome Brave Firefox Edge Comet Notion Simplenote Obsidian Windows PC iPhone iPad SmoothCSV WinMerge WinSCP Windowsターミナル GitHub Docker

対応スキル

Skills

現在、制作や実務のご相談に対応できるものを中心に掲載しています。

HTML CSS JavaScript TypeScript PHP SQL C言語 Perl Python VBA React レスポンシブWeb実装 Canvas API・生成アニメーション Next.js Node.js WordPress Prisma MySQL SQLite DB設計要件整理・情報設計 API設計アーキテクチャ設計認証・権限設計管理画面・業務UI Webセキュリティ基礎テスト設計・実施リファクタリング・静的品質管理コードレビューアクセシビリティ・Web品質顧客ヒアリング・提案 Git（基本運用） Webデザイン UI/UX設計プロトタイピング・デザインシステム VPS / Nginx / PM2運用 TCP/IP Shell / WSL / パッケージ管理