📝店舗メモツール完成｜タスクの長押し・並び替えを“使いやすい動き”まで詰めた

📌 この記事を5行でまとめると

• 前回の記事で予告していた Task機能 を実装し、店舗メモツールがひとまず完成しました。
• Taskの追加・完了・削除だけでなく、スマホ前提で 長押し・並び替えUX を何度も調整しました。
• 改善途中で入ったゴースト方式に実機で違和感があり、最終的に カード本人を直接動かす方式 へ変更しました。
• 最後は並び替え成立の境界を ほぼ100% → 約75% まで広げ、少ない指の移動でも周囲のカードが自然に避けるよう調整しました。
• 最終確認では Chrome headless、Task関連 69 passed、全体 742 passed / 17 skipped を確認しています。

はじめに

現在、ベーカリー向け売上管理アプリ Bakery Hub（sales_data_app） を個人開発しています。

GitHub：

前回の記事では、店舗メモ機能を中心に、Change Lから続いた改善をまとめました。

その最後で、

次はTask機能へ進む

と書いていました。

そして、

材料発注・店舗メモ・Taskの3つが揃ったところで、店舗メモツールとして一度まとめたい

とも考えていました。

今回は、その続きです。

とはいえ、今回の記事の主役はほぼ Task機能 です。

---

🏪 店舗メモツールの現在地

店舗メモツールは、売上分析とは少し役割が違います。

店舗業務の中で、

• あとで発注したいもの
• 忘れたくないこと
• 今日やること

を、すぐ残せる場所として作っています。

現在は次の3機能になりました。

機能	用途
発注	材料・備品などの発注、買い物メモ
メモ	店舗運営で残しておきたい情報
Task	店内でやること・確認することの管理

今回、この最後の Task機能 まで実装しました。

---

✅ Task機能を追加

まず必要だったのは、普通のタスク管理です。

例えば、

□ 明日の食パンを仕込む
□ 冷蔵庫の温度を確認
□ 売り場を補充する
□ オーブンを清掃
□ 翌日の予約を確認

のように登録して、終わったらチェックする。

発注する材料や備品は「発注」機能へ。

Taskでは、

店舗で実際にやる作業や確認事項

を管理するイメージです。

今回実装した主な機能は次の通りです。

機能	内容
追加	新しいTaskを登録
完了 / 未完了	チェックで状態変更
削除	不要なTaskを削除
複数選択	複数Taskをまとめて選択
一括削除	選択したTaskをまとめて削除
完了グループ	完了済みTaskをまとめて表示
並び替え	長押しして好きな順番へ移動

ただ、今回一番時間を使ったのはCRUDそのものではありませんでした。

スマホで触った時に違和感がないか

という部分です。

---

📱 Taskを1件ずつ独立カードへ

最初のTask一覧も、機能としては動いていました。

ただ、スマホで使ってみると、

もう少しTaskアプリらしく、1件ずつ触れる感じにしたい

と思いました。

そこで、Taskを1件ずつ独立したカードにしました。

┌────────────────────────┐
│ □ 明日の食パンを仕込む    │
└────────────────────────┘

┌────────────────────────┐
│ □ 冷蔵庫の温度を確認      │
└────────────────────────┘

┌────────────────────────┐
│ □ 売り場を補充する        │
└────────────────────────┘

カード同士にも少し間隔を空けています。

単なる一覧ではなく、

指で触れる1つの要素

として分かりやすくしたかったためです。

---

✅ 完了済みが0件なら表示しない

次に気になったのが、完了済みTaskの表示でした。

完了済みが0件なのに、

完了 0

と表示され続ける必要はないと思いました。

そこで、

完了済み 0件
↓
表示しない

という形にしています。

1件完了すると、

∨ 完了 1

が自動で現れます。

必要になった時だけ表示する方が、画面もすっきりします。

---

👆 長押しで並び替えたい

Task機能を作るなら、並び替えも欲しくなりました。

例えば、

冷蔵庫の温度を確認
売り場を補充する
明日の食パンを仕込む
翌日の予約を確認

となっていた時に、

「明日の食パンを仕込む」を先にやりたいなら、

明日の食パンを仕込む
冷蔵庫の温度を確認
売り場を補充する
翌日の予約を確認

のように、その場で優先順位を変えたい。

そこで目指した操作が、

長押し
↓
カードを掴む
↓
そのまま上下へ移動
↓
指を離す
↓
並び替え成立

です。

---

😵 並び替え中に画面までスクロールする

実機で確認すると、最初に気になったのがこれでした。

Taskを長押しして上下へ動かそうとすると、

カードだけでなく画面までスクロールしてしまう

ことがあります。

これでは、

Taskを動かしたい

のか、

ページをスクロールしたい

のかが曖昧です。

そこで、

長押し成立前
→ 通常スクロール

長押し成立後
→ Taskの並び替えを優先

並び替え中
→ ページスクロールを抑制

という形へ調整しました。

スマホでは「ドラッグできる」だけでは足りず、
スクロールとの競合をどう扱うかも操作感にかなり影響しました。

---

🎞️ 「パッ」と入れ替わるのも分かりにくい

並び替え自体は成功していても、

パッ

と一瞬で位置が変わると、

あれ？
今ちゃんと移動した？

と一瞬感じることがありました。

そこで、周囲のTaskが、

スッ

と避けるようなアニメーションを入れました。

移動前後の位置を取得して、

const previousTop = card.getBoundingClientRect().top;

// DOMの位置を変更

const currentTop = card.getBoundingClientRect().top;

const deltaY = previousTop - currentTop;

その差分を使って、

card.animate(
    [
        { transform: `translateY(${deltaY}px)` },
        { transform: "translateY(0)" },
    ],
    {
        duration: 180,
        easing: "cubic-bezier(0.22, 1, 0.36, 1)",
    }
);

としています。

FLIPと呼ばれる考え方を参考にしています。

まだこの辺りをすべて深く説明できるほど理解しているわけではありません。

ただ、実機で触った時の分かりやすさはかなり変わりました。

---

👻 途中で入った「ゴースト」に違和感

並び替えUXをAIと一緒に何度も調整している途中で、カードを複製する処理が入りました。

const ghost = card.cloneNode(true);

この時の動きは、

元のカード
↓
その場に普通の濃さで残る

コピーしたゴースト
↓
指について動く

という状態でした。

機能としては並び替えできます。

でもスマホで触ってみると、

なんか違う

と感じました。

画面上には、

元のTask
+
指について動いている同じTask

が一時的に2つ見えます。

つまり、

カードを掴んでいるというより、コピーだけを動かしている

ように感じました。

ゴースト方式そのものが間違いという意味ではありません。

今回のBakery Hubで目指していた操作感とは違ったため、実機で感じた違和感をもとに修正していきました。

---

📱 Xiaomi端末のTaskアプリと見比べてみた

普段使っている Xiaomi端末のTaskアプリ でも、並び替えの動きを改めて確認しました。

こちらは、

長押し
↓
そのカード本人が浮く
↓
そのまま指についてくる

ように見えます。

元のカードをその場に残したまま、別のコピーだけが動くようには見えません。

そこで、

Bakery Hubも、この操作感に近づけたい

と思いました。

ゴースト方式の違和感を伝えながら修正を重ね、

カード本人が浮いて、そのまま指について動く形へ変更していきました。

---

🔄 ゴーストを撤廃して「カード本人」を動かす

最終的には、ゴースト方式を撤廃しました。

目指した動きは、

長押し
↓
実カード本人が浮く
↓
指について動く
↓
周囲のカードがヌルっと避ける
↓
指を離す
↓
その位置へ着地

です。

コピーは作りません。

実際のTaskカード本人を持ち上げます。

---

🧩 placeholderで元の場所を確保

ただし、実カード本人を持ち上げると別の問題が出ます。

例えば、

明日の食パンを仕込む
オーブンを清掃
翌日の予約を確認

から「オーブンを清掃」を通常レイアウトの外へ出すと、

明日の食パンを仕込む
翌日の予約を確認

となり、一覧が急に詰まってしまいます。

そこで、「オーブンを清掃」がいた場所に一時的な placeholder を置きます。

明日の食パンを仕込む
[ placeholder ]
翌日の予約を確認

「オーブンを清掃」のカード本人は画面上で浮いたまま、指について動きます。

指を上下へ動かすと、

Task本人ではなくplaceholderの位置を入れ替える

形です。

最後に指を離した時、

placeholder
↓
Task本人

へ戻します。

これで、

「コピーを動かす」のではなく「掴んだカード本人を動かす」

感覚にかなり近づきました。

---

🖐️ requestAnimationFrame + translate3d

指についてくるTaskの位置更新には、

requestAnimationFrame()

と、

transform: translate3d(...);

を使っています。

ドラッグ中は何度も位置更新が発生します。

そこで、

指が動く
↓
requestAnimationFrame
↓
transformで表示位置を更新

という形にしました。

実機では、以前よりかなり自然に指へついてくるようになりました。

---

🎯 最後に詰めた「並び替え成立の境界線」

今回のTask調整で、特に印象に残ったのは最後のこの部分でした。

カード本人が指について動き、周囲のTaskもヌルっと避ける。

かなり理想に近づいていました。

ただ、実際に何度も並び替えていると、

もう少し早い段階で、隣のカードが避けてくれた方が動かしやすい

と感じました。

それまでは、動かしているカードが隣のカードへ、

ほぼ100%

重なるくらいまで移動しないと、並び替えが成立しませんでした。

そこで、この境界を、

ほぼ100%
↓
約75%

まで広げました。

つまり、隣のTaskへ完全に重ね切らなくても、

約75%重なった段階で「こちらへ移動したい」と判定する

ようにしました。

例えば、

Task A
Task B
Task C

でTask Bを下へ動かす場合、

Task Cへ約75%重なる
↓
Task Cが先にヌルっと上へ避ける
↓
Task Bの移動先が分かる

という動きになります。

数字だけ見ると、

100% → 75%

という小さな変更です。

でも実機で触った感覚はかなり違いました。

指をそこまで大きく動かさなくても、

「ここへ移動したい」という操作にUI側が少し早く反応してくれる

ようになったためです。

今回特に面白かったのは、
「並び替え機能があるか」だけでなく、「どの位置で並び替えが成立するか」までUXになる
ということでした。

---

💥 ただし75%化で一度壊した

この境界を75%へ変更する途中で、一度並び替えを壊しました。

症状は、

長押しできる
↓
カードは浮く
↓
でも指を動かしても何も起きない

という状態です。

原因を調べると、

並び替え判定だけを変更するつもりが、置換範囲を広く取りすぎていた

ことが分かりました。

その結果、

animateTaskReorder()

の中へ、

card
placeholder
clientY
gesture

など、本来別の処理にある変数が入り込んでいました。

つまり、

最後の微調整のつもりで、並び替えの核まで壊していた

ということです。

---

🔙 まず「理想的に動いていた状態」へ戻す

この時は、さらに修正を重ねるのを一度やめました。

先に、

さっきまで理想的に動いていた状態へ戻す

ことを優先しました。

正常な状態へ復旧してから、今度は並び替え全体ではなく、

境界判定の部分だけ

を変更しました。

そして最終的に、

約75%重なる
↓
周囲のカードがヌルっと避ける

という今の動きに落ち着きました。

今回の教訓

改善中に壊れた時、

さらに修正
↓
さらに修正
↓
原因が分からなくなる

と進むより、

一度、正常に動いていた状態へ戻す

方が早いこともありました。

---

☑️ チェックボックスも気になった

Taskカードが完成に近づいたところで、今度はチェックボックスが気になりました。

最初はTask文字より少し大きく見えました。

そこでサイズを小さくしてみました。

ただ、

小さくしすぎる
↓
今度は頼りなく見える

という状態になりました。

最終的には次のくらいに落ち着きました。

要素	サイズ
Task文字	16px
チェックボックス	約19px
チェックマーク	約14px
タップ領域	44px

見た目は小さくしても、押せる範囲は44pxのまま残しています。

---

🤔 サイズは良い。でも少し上に見える

サイズを調整した後も、

チェックボックスが文字より少し上に浮いて見える

という違和感が残りました。

最初に考えたのは、

top: 2px;

のように位置を直接ずらす方法です。

見た目だけなら、それでも直せます。

ただ途中で、

位置をいじるのではなく、
Taskカードそのものを基準に中央揃えできないか？

と考えました。

---

🎯 「位置」ではなく「基準」を直す

チェックボックスを包んでいるフォームを、Taskカードの高さ全体へ広げました。

.shop-task-completion-form {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

さらにチェックボタン自体も中央へ。

.shop-task-completion-form .shop-task-toggle {
    align-self: center;
}

これで、

Taskカード全体
↓
その高さの中央
↓
チェックボックス

という構造になりました。

実機で見ると、Task文字との位置も自然に揃いました。

---

💡 数pxずらす前に「何を基準にしているか」を見る

今回ここも勉強になりました。

例えば、

top: 2px;
margin-top: 1px;

でも見た目は直せます。

でも今回は、

チェックボックスが上に見える
↓
2px下げる

ではなく、

そもそも何を基準に配置されている？
↓
Taskカード全体を基準に中央揃えする

と考え直したことで解決しました。

もちろんUIでは、最後に1px程度の光学補正が必要になる場合もあると思います。

ただ、

まず構造で揃える

という考え方は今後も使えそうです。

---

🤖 僕なりのAIとの開発の進め方

今回のTask開発は、今の僕のAIの使い方がかなりそのまま出たと思います。

流れとしては、

自分の理想をAIに相談する
↓
AIが実装・対策案を出す
↓
実際にコマンドを入れて動かしてみる
↓
実機で違和感を探す
↓
その違和感をAIに伝える
↓
また修正する
↓
少しずつ理想に近づける

という形です。

今回も最初から、

こういうJavaScriptを書きたい

というコードの完成形が頭にあったわけではありません。

ただ、

長押ししたカード本人が浮いてほしい

指についてきてほしい

周囲のカードはパッとではなく、ヌルっと避けてほしい

もう少し手前で並び替えが成立してほしい

という、

「こう動いてほしい」

という理想はありました。

それをAIへ伝え、出てきた案を実際に動かす。

違和感があれば、また伝える。

今回のゴースト方式も、75%の境界調整も、その繰り返しの中で今の形になりました。

AIの提案を受け取ることと、
最初に出てきた案をそのまま完成形にすることは別だと思っています。

実際に触って、自分が欲しい動きに近づいているかを確認するところまで含めて、今の開発の進め方になっています。

---

🧪 JavaScriptはChrome headlessでも確認

今回のTask実装では、以前JavaScriptの構文エラーも経験しました。

例えば、

Uncaught SyntaxError:
Identifier 'titleElement' has already been declared

というエラーです。

JavaScriptは構文エラーが1つあるだけで、そのファイル内の処理全体が動かなくなる場合があります。

pytestがGreenでも、

ブラウザ上でJavaScript自体が読み込めていない

可能性は残ります。

そこで最近は、JavaScriptを大きく変更した後に、

Chrome headless
↓
pytest
↓
実機確認

という確認も入れるようにしています。

今回の最終確認でも、

Chrome JS check: OK

を確認しました。

---

✅ 最終テスト

Task関連：

69 passed

全体：

742 passed
17 skipped
9 warnings

でした。

742 passed, 17 skipped, 9 warnings

warningsはSQLite / Python 3.12周辺のDeprecationWarningで、今回のTask変更によるテスト失敗ではありません。

最終確認

確認	結果
Chrome headless	Chrome JS check: OK
Task関連pytest	69 passed
全体pytest	742 passed / 17 skipped
スマホ実機確認	長押し・追従・並び替え・着地まで確認

---

🔀 PR #44〜#46でTaskを仕上げた

Task機能は、1回のPRですべて入れたわけではありません。

段階的に実装・改善しています。

PR	主な内容
#44	Task機能本体
#45	並び替えUXの改善
#46	実カード追従・チェックボックス・並び替え成立判定などの仕上げ

PR #44

Task機能本体。

PR #45

長押し時間や並び替え時の動きなどを調整しました。

PR #46

最終的な並び替えUXの仕上げです。

ここでは、

ゴースト方式
↓
実カード本人を直接動かす方式

への変更や、

並び替え成立
ほぼ100%
↓
約75%

への調整、チェックボックスの中央揃えなどを行いました。

---

🏪 店舗メモツールがひとまず完成

これで、

発注
メモ
Task

の3つが揃いました。

店舗メモツールとしては、ここでひとまず一区切りです。

最初から全部を設計していたわけではありません。

実際に作って触りながら、

こうしたい
↓
実装する
↓
違和感を見つける
↓
直す

を繰り返して、今の形になりました。

---

📝 追記｜完成後、メモ一覧ももう一度触り直した

Task機能まで完成し、

発注
メモ
Task

の3つが揃ったところで、店舗メモツールはいったん一区切りにしました。

……ただ、そのあと改めてスマホでメモ一覧を触っていると、

Taskはかなり見やすくなったけど、メモ一覧はもう少し整理できそう

と感じました。

機能としてはすでに動いています。

でもメモが数件並ぶと、

• どこがタイトルなのか
• 本文をどこまで一覧へ出すか
• 1件ごとの区切り
• ゴミ箱で何を削除したのか

が、もう少し一目で分かる方が使いやすそうでした。

そこで、Task完成後にもう一度メモのUI/UXを調整しました。

PRはこちらです。

---

1行目をそのままタイトルとして使う

以前は、

タイトル
本文

を別々に入力する形でした。

ただ、スマホでちょっとしたメモを書くたびに、

タイトル欄
↓
本文欄

と移動する必要があるのは少し手間です。

現在は、

秋の新メニュー案
さつまいもデニッシュ
売価280円予定
試作は来週火曜日

と書けば、

最初の1行をタイトルとして扱う

ようにしました。

一覧では、

秋の新メニュー案
さつまいもデニッシュ…

のように、

• 1行目：太字タイトル
• 2行目以降：本文プレビュー

として表示します。

メモを書く側は、普通に上から文章を書くだけです。

---

🗂 メモを1件ずつ独立カードへ

一覧全体を大きな枠で囲うのではなく、

メモ1件ずつを独立したカード

として表示するようにしました。

┌─────────────────────┐
│ 秋の新メニュー案       │
│ さつまいもデニッシュ…  │
│ 9/27                  │
└─────────────────────┘

┌─────────────────────┐
│ 栗あんぱん             │
│ 9月後半から販売予定…    │
│ 9/27                  │
└─────────────────────┘

PCでもスマホでも、基本は縦1列です。

PCだから何列も横へ並べるのではなく、

メモ帳として上から順番に流し読みできること

を優先しました。

本文も一覧ですべて表示せず、1行だけプレビューします。

詳しく読みたい時だけ開けばいい、という考え方です。

---

5件くらい並べると違いが分かりやすい

Bakery HubではGuest Demoを公開しています。

もし興味があれば、

メモを5件くらい適当に作って、一覧に並べてみてください。

例えば、

秋の新メニュー案
さつまいもデニッシュ、栗あんぱん、かぼちゃクリームパンを候補にする。

栗あんぱん
9月後半から販売予定
売価260円で検討

のような架空のメモで大丈夫です。

1件だけでは分かりにくいですが、複数件並べると、

• タイトルの見つけやすさ
• 本文プレビュー
• カード同士の間隔
• 一覧を流し読みする感覚

が確認しやすいと思います。

今回の変更はメモが複数並んだ時ほど違いが分かりやすいUI改善になりました。

⚠️ Guest Demoを試す場合

Guest Demoには、架空の商品名・架空のメモ・テスト用データを入力してください。

個人情報、機密情報、実際の店舗データ、実際の業務で使用している情報などは入力しないでください。

GuestごとにDatasetは分離していますが、実店舗向けの本番サービスとして提供しているものではありません。

---

🗑 ゴミ箱も一覧に合わせて整理

通常のメモ一覧をコンパクトにすると、

今度はゴミ箱側との違いが気になりました。

そこでゴミ箱も、

タイトル
本文プレビュー
削除日時

を中心にした表示へ変更しました。

通常一覧と同じような感覚で、

どのメモを削除したのか

を確認できます。

---

復元してもゴミ箱に残るようにした

以前は、メモを復元すると通常一覧へ戻っていました。

ただ、複数の削除済みメモを整理している途中に、

復元
↓
通常一覧へ移動

すると、またゴミ箱へ入り直す必要があります。

そこで現在は、

ゴミ箱
↓
復元
↓
そのままゴミ箱

にしました。

1件復元したあと、そのまま次のメモを確認できます。

これも機能としては小さな変更ですが、

実際に連続して操作するとこちらの方が自然でした。

---

⚠️ 完全削除は確認してから

ゴミ箱からの完全削除は取り消せません。

ここは独自の見た目を作り込むのではなく、

Task削除と同じようにブラウザ標準の確認ダイアログを使っています。

このメモを完全に削除しますか？

利用者が明示的に確認してから削除します。

削除という同じ種類の操作なので、

Taskとメモで挙動を揃えることも意識しました。

---

👇 Undo通知も下swipeで閉じられるようにした

メモをゴミ箱へ移動すると、

画面下部へUndo用の通知を表示します。

ただスマホでは、この通知が表示されている間、

新規メモ追加用の＋ボタン付近を塞ぐ

ことがありました。

数秒待てば消えます。

でも、

消えるまで待つ

より、

今はいらないから閉じる

ことができた方が使いやすいと思いました。

そこで、

メモ削除
↓
Undo通知を表示
↓
不要なら下へswipe
↓
その場で閉じる

という操作を追加しました。

これも実際にスマホで使っていて見つけた違和感でした。

---

🧪 UI変更でも既存テストが効いた

今回、復元後の画面遷移を、

通常一覧

から、

ゴミ箱

へ変更しました。

その結果、PostgreSQL integration testに残っていた、

復元したら通常一覧へ戻る

という古い期待値がGitHub Actionsで検出されました。

現在の仕様に合わせてテストも更新し、

最終的には、

742 passed
17 skipped

を確認しています。

UIだけを変更したつもりでも、

画面遷移という仕様が変わればテストにも影響する

という当たり前のことを、今回も確認できました。

---

Task完成後も「触って違和感を探す」は続いた

今回の記事ではTaskの並び替えをかなり細かく調整しました。

ただ、そのTaskが完成したあとにメモへ戻ったことで、

今度はメモ一覧の違和感が見えてきました。

Taskを改善
↓
Taskが見やすくなる
↓
メモへ戻る
↓
相対的にメモの違和感が見える
↓
また改善

という流れです。

一度「完成」と思った画面でも、

別の画面を改善したあとに見直すと、

また気になる部分が出てくることがあります。

今回のPR #48は、

新機能を増やしたというより、すでにある機能をもう一度触って磨いたPR

になりました。

---

🔰 学習開始から約4か月半

僕は2026年5月12日から、Pythonを中心にWeb開発の学習を始めました。

まだ分からないことは大量にあります。

今回使った、

• requestAnimationFrame
• translate3d
• FLIPに近いアニメーション
• touch / pointerイベント
• placeholderによる並び替え

についても、すべてを深く説明できるわけではありません。

ただ、今回のように実装して、壊して、直していく中で、

カード本人の移動
placeholderの役割
周囲カードのアニメーション
並び替え成立判定

が、それぞれ別の役割を持っていることは以前より見えるようになりました。

分からないことがなくなったわけではありません。

でも、実際の機能を教材にして一つずつ掘っていくことで、少しずつ理解できる部分は増えていると感じています。

---

💭 「動く」と「使いやすい」は別だった

今回一番時間を使ったのは、

Taskを登録できる
Taskを完了できる
Taskを削除できる
Taskを並び替えられる

という機能そのものではありませんでした。

その後の、

長押ししやすいか
カードが指についてくるか
ページが勝手に動かないか
並び替えたことが分かるか
どこまで動かしたら並び替えが成立するか
チェックボックスの位置が自然か

という部分でした。

機能として正しくても、

実際に触ると違和感がある

ことがあります。

そして、その違和感はpytestでは見つからないこともあります。

今回、スマホで何度も触ったことで、それをかなり実感しました。

特に最後の、

並び替え成立
100% → 75%

は、ほんの少し判定を変えただけに見えて、

操作感そのものが変わる

のが面白いところでした。

---

🍞 Bakery Hubはいったん一区切り

Taskまで完成したことで、Bakery Hub自体も一度区切ろうと思っています。

もちろん、

もう何も追加しない

という意味ではありません。

今後使っていて、

ここ不便だな
これ欲しいな

と思えば、また改善すると思います。

客層データなど、候補として考えている機能もあります。

ただ現時点では、

次に何を作るかはまだ決めていません。

しばらくは、ここまで作ったコードを教材として読み直したり、PythonやWeb開発の基礎を掘り直したりするのも良さそうです。

---

おわりに

店舗メモツールを作り始めた頃は、

ちょっとした店舗用メモ

くらいの感覚でした。

そこから、

発注
↓
メモ
↓
検索
↓
ゴミ箱
↓
URLリンク
↓
Task
↓
長押し
↓
並び替え
↓
実機UX改善

と広がりました。

今回改めて感じたのは、

「動いた」＝「使いやすい」ではない

ということです。

実装が動いていても、テストが通っていても、実際にスマホで触ると、

なんか違う

と感じることがあります。

そして最後は、

もう少しだけ早くカードが避けてほしい

という小さな違和感から、

100% → 約75%

という細かい部分まで調整しました。

今回のTask機能では、

その違和感に気づいて、自分が欲しい動きを言葉にしながら詰めていくことも開発の一部

なんだと感じました。

Bakery Hubはここで一度一区切り。

次に何を作るかは、まだ決めていません。

また、

これ作ってみたい

と思えるものが出てきたら、そこから次の学習を始めようと思います。

---

🔗 関連リンク

GitHub

前回の記事

PR #44

PR #45

PR #46

PR #48

Guest Demo