引っ越したいだけで、住所変更したいわけじゃない

〜宣言的UIの発想は先延ばし人間を救えるかも〜

長江 明信


自己紹介

先延ばしの癖の酷い凝り性


すきなもの

  • アニメ・漫画(HxH, アイシールド21, RE:ゼロなど)
  • 革雑貨(PLANT, anshare, MOTHERHOUSEなど)

作ったもの

技術

React, Next.js, AWS, Flutter など

8mitsuboy

8mitsuboy

JSTQB Certified Tester Foundation LevelJSTQB Certified Tester
Foundation Level

scratch the profileImage


もくじ


1. 先延ばし癖と向き合い課題を明確にした


2. 宣言的UIの発想で課題を解決できるのでは?


3. 解決法をアプリに落とし込んだ


4. アプリのフィードバックから見えた新しい学び


私の考える先延ばしの正体

例.「引っ越したい」


やるべきことが多いしわからない。順序もわからない。

→ ゴールまでの過程がブラックボックスだから動けない。


俺は引っ越したい(新居で暮らしている状態になりたい)だけで
引越し業者の手配や住所変更とかしたくない!


あれ、これって宣言的UIと同じだ

「この状態のときこうなってほしい」だけ書く。

開発者はDOMの操作(住所変更)をしたいわけじゃない。

// 手続き的:状態が変わるたびにDOMを自分で操作
if (isLoading) {
  button.disabled = true;
  button.textContent = "送信中...";
} else {
  button.disabled = false;
  button.textContent = "送信";
}

// 宣言的:この状態のときこうあってほしいを書くだけ
<button disabled={isLoading}>
  {isLoading ? "送信中..." : "送信"}
</button>

Whatだけ宣言 → HowはFrameworkが解決。


ブラックボックスを開ければ動けるのでは?

俺も「引っ越したい」って宣言するだけで、ブラックボックスが開いてくれないかな〜

…さすがに物理的な作業までやってくれる魔法はない。

でもブラックボックスを開ける(HOWの洗い出し)だけなら、AIにできる!


そうすれば前より先延ばし癖を軽減できるのでは!?


だから作ってみた

Declara

宣言するだけのタスク管理アプリ


既存TodoとDeclaraの違い


既存TodoDeclara
入力タスクを自分で書く宣言するだけ
初動Howを要求されるWhatだけでいい
頭の使いどころ分解・整理やりたいことに向き合う

ブラックボックスを開けるだけじゃ足りない

宣言してから達成するまでの気持ちの変化に沿ってUIを作った。

フェーズ感情UI方針
停滞何すれば…出発点として受け止める
宣言ポンと入力入力UIを極小化
開封これだけでいいタスクを見やすく提示
実行進んでる進捗可視化 + 完了演出
達成やりきった小さく祝う

レビュー

ウキウキで使ってもらってみたら..

利用者) ちょうどいい理想状態の抽象度考えるのがむずくね? 汎用的に使えないしメモ帳でいいや


「〜したい」= 理想の状態 が成り立つのは、抽象度が絶妙な場合だけだったと言うことに気づいた..


抽象度問題
高すぎ幸せになりたい分解できない
ちょうどいい引っ越したいここだけ刺さる
低すぎ食器を洗いたい分解不要


ふりかえり

特定の抽象度しか受け付けられないアプリ = 窮屈なアプリ = 使われないアプリ


Try: 窮屈さの早期検知

開発者の無意識の前提を疑う


例)Declara: 「入力の抽象度は一つ」という前提 → 特定の抽象度しか刺さらなかった


今後の展望

抽象度の高い理想の状態の宣言にも対応できるように、宣言を再帰できるようにする

  • ルート宣言: 引っ越したい


  • 子宣言: 住所変更したい

  • 転出届を出す
  • 転入届を出す …

まとめ

  • 後回し癖のある人はAIにWhatだけ宣言する。HowはAIに考えさせれば少しは楽になる


  • 「開発者の無意識の前提」という形を知覚できた。見えれば、疑えるし扱える。


この形を扱うことで窮屈なアプリ(使われなくなるアプリ)を避けよう!


技術スタック

  • Flutter + Riverpod


  • Drift (SQLite) で永続化


  • Claude API でタスク生成


ご清聴ありがとうございました!

Zaap logo Zaap
← 記事に戻る