アニメーションを飛ばして最後へ

← デモ一覧Ken Creations

しくみ
  • 光の粒子は、目標の位置・速さ・現在の位置を GPU で毎フレーム計算しています(GPGPU)
  • 霧・線・画面・文字など 9 つのかたちを、4 種類のシェーダーで描き分けています
  • カメラは 3D 空間に敷いたレールの上を進みます。真下を向いても上下が反転しないように補間しています
  • ドリーズーム、回り込み、ピント送り。WebGL のボケに、HTML の英字のボケと太さも合わせています
  • 画面の UI は角丸の図形を数式(SDF)で描き、端末は金属の質感で、ノイズの模様に沿って現れます
  • 色は AgX トーンマップで整え、控えめな光のにじみ、24fps の粒状感、速いときだけの色ずれを加えています
  • 粒子で描いた明朝体と HTML の見出し、粒子の線とページのフェーズの線を、同じ位置に重ねています
  • 最後はネガを現像するように紙の色(#fafaf8)へ着地し、そのまま HTML に引き継ぎます

読み込んでいます

KEN CREATIONS — DEMO 01

結像

Formation

光の粒が、かたちを結ぶまで。スクロールで進みます。

No.01霧 HAZE

はじまりは、輪郭のないもの。

思いつき、違和感、

まだ言葉になっていない構想。

No.02線 LINE

ほどいて、つなぐ。

背景と業務をたどり、

ひとつの流れとして整理する。

  1. 01企画・構想
  2. 02課題・業務整理
  3. 03ユーザー体験 / 要件整理
  4. 04プロトタイプ
  5. 05PoC / MVP
  6. 06本開発
  7. 07運用・改善

No.03面 PLANE

画面にして、確かめる。

言葉だけでは伝わらないことを、

触れる形で。

No.04結像 FORM

かたちを、結ぶ。

検証で残ったものを、

運用に耐えるプロダクトへ。

No.05循環 ORBIT

作って、終わらない。

使われ方を見て、

また手を入れる。

  1. 計測する
  2. 仮説を立てる
  3. 手を入れる

自社サービス「グルマッチAI」の運営でも、この循環を続けています。

No.06一本の線 ONE LINE

事業のアイデアを、動くプロダクトへ。

構想から運用まで、一本の線でつなぎます。

各フェーズの詳しい内容は、それぞれのリンクから支援内容のページで紹介しています。