ACTIVE
J.K. Lab
Character Brand Website
J.K.教授の世界観を表現するキャラクターサイト。 キャラデザ・WEBデザイン・設計・実装・インフラ構築・CI/CDまで一貫して担当。
STACKS
J.K. Labは、J.K.教授の活動と世界観を一つにまとめた、秘密基地のような公式サイトです。プロフィール、実験、Blog、Contact、YouTube、Xを一つの場所につなぎ、何を目指し、何を作り、現在は何に取り組んでいるのかを確認できる活動拠点として運用しています。
訪れた人が、誰かの隠れ家や秘密基地へ足を踏み入れ、そこでエンジニアなのか、ただの変な奴なのか分からない人物と出会うような体験をイメージしました。研究施設を思わせる画面や演出、J.K.教授というキャラクターを通して、制作物だけでなく、その人物や活動の空気まで感じられる場所を目指しています。
- キャラクターデザインと世界観の設計
- Webサイトの情報設計とUIデザイン
- Next.js、TypeScript、SCSSによるフロントエンド実装
- PythonによるContact APIの実装
- TerraformによるAWSインフラの構築と管理
- CodeBuildを使ったテスト、ビルド、デプロイの自動化
通常のページはNext.jsで静的に生成し、Amazon S3とCloudFrontから配信しています。常時稼働するアプリケーションサーバーを持たず、表示部分の運用負荷を抑える構成です。
動的な処理が必要なContactはAPI Gateway、Lambda、SESへ分離しました。CloudFront FunctionによるURLの書き換えを含め、配信設定とAPIをTerraformで管理しています。
Blogは型の付いたBlockデータとして管理しています。一つの記事データから一覧、本文、サイトマップ、記事ごとのOGPを生成し、表現が必要になった時点で専用コンポーネントを追加できるようにしています。
現在のステータスはACTIVEです。完成した画面を維持するだけでなく、活動や実験を記録する機能、運用方法、アクセシビリティを継続して改善しています。