NASEBANAL Growth Mobile と Web のダークモード — Figma の画面デザインと OpenAPI Spec から AI コーディングで作成

前回のブログの最後で「次のステップはモバイル」とお伝えしたとおり、NASEBANAL Growth Mobile を目下開発中です。Target・Recorder・Stopwatch を 1 つのクライアントに束ねたこのアプリは、既存の Web 版 UI をベースに、Claude Code から Figma MCP を用いて画面を設計し、Figma のスクリーンイメージを微調整したうえで、その画面と OpenAPI Spec をもとに自動生成しています。あわせて、モバイルではほぼ手間なく実装できたダークモードを Web アプリにも展開しました。UI 基盤とデザイントークン(UI のカラーパレット)をまとめた共通コンポーネントと、API スペックを共有パッケージとして切り出しているため、これも軽い変更で済んでいます。最後に、この一連の流れこそ、いま内製化支援で考えているアプローチそのものである、というお話をします。

続きを読む

NASEBANAL API Specs: 公開の背景、メトリクスによる可視化、そして Contract-Driven Development への取り組み

開発者向けサイト [NASEBANAL API Specs](https://api-specs.nasebanal.com/ja) の公開にあわせ、その背景にある問題意識と直近の取り組みをご紹介します。AI コーディングによって機能の実装は加速する一方、実装の理解が追いつかず、各 PR・Merge を経てコードがどのような状態になったのかが見えにくくなりがちです。本稿では、この『開発の状態を見えるようにする』という課題に対して進めている 2 つの取り組み——API リファレンスの別サイト化を起点とした Contract-Driven Development (CDD) への布石と、DORA / Code メトリクスおよびトークン消費による開発の可視化——を整理し、内製・外注・エージェントが共存するこれからの開発における OpenAPI Spec の役割についても考察します。

続きを読む

NASEBANAL Target ベータリリース — 目標をツリーで分解し、Recorderの実データで進捗を見る

目標をツリー構造で分解し、NASEBANAL Recorderの実データで進捗を可視化する新アプリ NASEBANAL Target のベータ版をリリースしました。マンダラチャート的な階層分解とマインドマップ的な発散の両方を受け止め、各ノードに紐付けたRecorderタグのグラフをその場で確認できます。目標ツリーの共有によって、コーチや家族とは数字だけでなく「何のためにその数字を追っているか」という文脈ごと共有できます。

続きを読む