Art & Kinetic Lab

計算された 美しき躍動

Beauty by calculation. Motion by design.

AK²Lab(エーケーツー・ラボ)は、SE・プログラマー 兼 Web デザイナーの実験室。
Webサイトのデザインから、Webアプリ・業務システムの開発まで。
作ったものと、その途中で考えたことを、ここに書きためています。

ブログを読むポートフォリオを見る

この景色は、計算で描いています

写真も動画も使っていません。
波も光も魚の群れも、開いているブラウザがその場で計算しています。

01 波

長さの違う波を重ねて、水面を作る

長いうねりから細かいさざ波まで、向きと長さの違う波を足し合わせています。細い線が1本ずつの波、白い線がそれを足した水面の高さです。

h(x, t) = Σ Aᵢ · e^(sin(kᵢ·x − ωᵢ·t) − 1)

02 光

水底の光は、動く点の境界線

水面で曲がった日の光は、水底で網の目のように集まります。ここでは、ゆっくり動く点どうしの境界線を光らせて、その網の目を作っています。

03 群れ

3つの決まりで、群れになる

  • 分離近すぎる仲間から離れる
  • 整列近くの仲間と向きを揃える
  • 結合群れの中心へ寄る

決まりは一匹ずつに同じものを与えているだけで、群れの形は毎回違います。大きな魚が近づくと、群れは割れて避けます。

AK² の名前は、4つの要素でできています

A

Art(感性・技巧)

デザインとして表れる、目に見える美しさ。黄金比をはじめとする普遍的な比率と、余白・文字・色の緻密な設計を大切にします。

K

Kinetic(動感)

Webアプリや業務システムを動かす機能と、操作に応えるUIやアニメーション。目的に沿った動きと変化を設計・実装します。

2

Squared(二乗)

感性(A)と動き(K)を、SEとしての論理で掛け合わせ、異なる強みの相乗効果で価値を二乗に高めていく意志です。

Lab

Laboratory(実験室)

職人の手仕事と探究心が同居する、個人の実験室です。作り、試し、考えたことを蓄積して、次のものづくりへ繋げます。

感性と論理の実験室

デザインから
実装まで

見た目の設計と、中身の実装。
その両方を行き来して、作る。

画面に触れたときの心地よさも、その奥で動く仕組みも。デザイナーとエンジニア、両方の視点から組み立てます。

AK²Labについて
波の表面、網目、回路、基盤を立体的に分解した構造
表面のデザインから、動きを支える構造へ

Webデザイン

余白、文字、配色。
見た目と使いやすさの設計。

フロントエンド

操作に応える画面と動き。
HTML・CSS・JavaScript・React。

バックエンド

画面の奥にある処理。
認証、データ管理、API連携。

システム設計

要件からデータの構造まで。
業務全体を見渡した設計。

対数螺旋に沿って成長する、青い金属と白い外殻の立体
一定の比率から生まれる、連続した形

美しさは
設計できる

ひらめきを、再現できる形へ

余白の取り方、文字の組み方、色の選び方、視線の流れ。その大半には定石があり、計算で組み立てられます。

厳密な計算を重ねるうちに、計算は手癖に変わる。感性と論理を行き来することが、AK²Labの制作の土台です。

名前に込めた考え方を読む

動くものを作る

考えたことを、使えるものに。
Webアプリ、業務システム、制作を支える道具。

実験室からの記録

作る途中で
考えたこと

プログラミング、デザイン、開発中のアプリ。
試したことも、うまくいかなかったことも。

記事一覧へ