AK²Lab

Webサイト・Webアプリ・業務システム

画面から仕組みまで 作って、確かめる

使う人の画面と、その奥で動く仕組み。AK²Labが制作したWebサイトやアプリを、技術と設計の視点から紹介します。

制作事例を見る

制作事例

目的、使用技術、制作で考えたことを、事例ごとのリポジトリにまとめています。

CoCoLinkの画面

SNS / コミュニティ

CoCoLink

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

ak2lab/cocolink

Color Palette Studioの画面

Webデザイン / 開発者ツール

Color Palette Studio

RGB / HSL / CMYK / HSV の4モードとカラーホイールで色を調整し、配色比較とコントラスト確認ができるカラーパレットツール。

ak2lab/color-palette-studio

WordPressブログサイトの画面

Webサイト制作 / WordPress

WordPressブログサイト

スピリチュアル心理カウンセラーを題材にした、ブログ・プロフィール・FAQ・お問い合わせを備えたWordPressサンプルサイト。

ak2lab/sample-counselor-wordpress

自家焙煎珈琲 ゆきあいの画面

店舗 / カフェ

自家焙煎珈琲 ゆきあい

暗い焙煎小屋の空気と、毎朝少量ずつ豆を焼く時間を表現した、架空の自家焙煎カフェの5ページサイト。

ak2lab/site-cafe

整体室 まどろぎの画面

店舗 / 整体

整体室 まどろぎ

固定サイドバーで料金と予約を常時見せ、FVスライドショーと弛み罫モチーフ、ブログ「まどろぎ便り」を備えた、架空の整体室サイト。

ak2lab/site-seitai

常盤野税理士事務所の画面

士業 / 税理士事務所

常盤野税理士事務所

固定10ページとブログ「経営と数字のノート」を、帳簿型グリッドと「二重罫」署名、試算表Canvasで組んだ、架空の税理士事務所サイト。

ak2lab/site-kaikei

常盤野あさなぎ工房の画面

福祉 / 就労継続支援

常盤野あさなぎ工房

利用・製品購入・作業発注の3入口とブログ「工房だより」を、織り場モチーフと個人差の速さを描くCanvasで組んだ、架空の就労継続支援B型事業所サイト。

ak2lab/site-sagyosho

ぐるりの木 柊野教室の画面

福祉 / 放課後等デイサービス

ぐるりの木 柊野教室

保護者が放課後の過ごし方を具体的に想像できる情報とブログ「教室だより」、夕方の光が移ろうCanvas表現を組み合わせた、架空の放課後等デイサービスサイト。

ak2lab/site-houkago

常盤野リムズの画面

スポーツ / 社会人クラブ

常盤野リムズ

見学・入会に必要な曜日、費用、雰囲気を短時間で確認でき、減衰と再始動を描くドリブルCanvasを備えた、架空の社会人バスケクラブサイト。

ak2lab/site-sports

ブックマーク管理の画面

開発者ツール / 業務支援

ブックマーク管理

カテゴリ・タグ・評価でリンクを整理できる、CSV保存型のブックマーク管理ツール。

ak2lab/linker

Electron / Windowsアプリ

ブックマーク管理Desktopアプリ

CSV保存型リンク管理ツール「Linker」を、ElectronでWindowsデスクトップアプリ化した派生版。

ak2lab/linker-desktop

ブラウザ版テトリスの画面

ブラウザゲーム / UI実験

ブラウザ版テトリス

SEGAアーケード版の操作感を意識した、HTML5 Canvasだけで動くブラウザ版テトリス。キー設定とハイスコアに対応。

ak2lab/tetris

メッセージアプリの画面

メッセージング / コミュニケーション

メッセージアプリ

1対1とグループチャットに対応した、Socket.IO によるリアルタイム通信のメッセージアプリ。

ak2lab/dm

予約管理システムの画面

店舗運営 / 予約管理

予約管理システム

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

ak2lab/reservation

イベント・セミナー受付管理の画面

イベント運営 / 申込受付

イベント・セミナー受付管理

定員管理・申込者CSV出力を備えた、イベント・セミナーの公開サイトと受付管理システム。

ak2lab/events

見積・請求管理の画面

会計・帳票 / 業務支援

見積・請求管理

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

ak2lab/billing

フォームビルダーの画面

フォーム作成 / 業務支援

フォームビルダー

ドラッグ&ドロップでフォームを作成し、回答を集計できるフォーム作成・回答管理システム。

ak2lab/formbuilder

ECサイトの画面

EC / 通販サイト

ECサイト

デジタル素材を扱うECサイトのデモ。購入フローまで実装し、決済はモック。

ak2lab/shop

ヘルプデスクシステムの画面

カスタマーサポート / 問い合わせ管理

ヘルプデスクシステム

問い合わせ受付からチケット対応までを扱うヘルプデスク。AI返信下書き補助を組み込む。

ak2lab/helpdesk

マイクロブログSNSの画面

SNS / マイクロブログ

マイクロブログSNS

140字の短文投稿を中心に、フォロー・通知・検索を備えた小規模なマイクロブログ型SNS。

ak2lab/sns

静的サイト生成CMSの画面

CMS / 静的サイト

静的サイト生成CMS

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

ak2lab/cms

よろず掲示板の画面

掲示板 / コミュニティ

よろず掲示板

2ちゃんねる系のスレッド型・匿名テキストボード。板・スレ・レスと管理画面を備える。

ak2lab/bbs

不動産サイトの画面

不動産 / 検索エンジン

不動産サイト

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

ak2lab/estate

用語集サイトの画面

用語集 / 検索

用語集サイト

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

ak2lab/words

AK²Lab公式サイトの画面

公式サイト / ブログ

AK²Lab公式サイト

自作CMSで静的生成し、空・水面・水中をThree.jsで一つの場面に描くヒーローを備えたAK²Lab公式サイト。

ak2lab/ak2lab-site

ポートフォリオサイトの画面

ポートフォリオ / 制作事例集

ポートフォリオサイト

AK²Labの制作事例をまとめたポートフォリオサイト。Three.jsで描く海のヒーローとデータ駆動の事例管理を備えた、DBなし・ビルドなしのPHPサイト。

ak2lab/portfolio-site

在庫管理システムの画面

在庫管理 / 業務支援

在庫管理システム

複数倉庫の在庫・入出庫・棚卸を、追記型の移動台帳で整合管理する在庫管理システム。

ak2lab/inventory

ファセット検索プラグインの画面

WordPressプラグイン / 検索

ファセット検索プラグイン

既存サイトの投稿タイプ・タクソノミー・カスタムフィールドを、管理画面で選ぶだけで多条件の絞り込み検索にできる汎用WordPressプラグイン。

ak2lab/flexible-facet-search

次葉文化アーカイブの画面

文化アーカイブ / 3Dブランドサイト

次葉文化アーカイブ

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

ak2lab/tsugiha

Webデザイン制作支援リファレンスの画面

リファレンス / 制作ワークベンチ

Webデザイン制作支援リファレンス

入口を等高線の地図にしたWebデザインの制作作業台。困り事から引くと、つまみで調整できる見本と、そのまま貼れるコードが並ぶ。

ak2lab/design-reference