https://jiru-labo.com/tags/ui/ Recent content in UI on じるラボ Hugo ja Tue, 06 Oct 2026 04:00:00 +0900 https://jiru-labo.com/posts/hakozumi-46-dish-form-rows/ Tue, 06 Oct 2026 04:00:00 +0900 https://jiru-labo.com/posts/hakozumi-46-dish-form-rows/ <p><a href="https://jiru-labo.com/posts/hakozumi-45-billing-community-plan/">前回（#45）</a>までの相談のあいだに、GitHub Actions の障害は収まりました。止まっていたデプロイを流し直して、<a href="https://jiru-labo.com/posts/hakozumi-43-camp-dishes/">#43</a> の受入確認も済んでいます。</p> <p>今回は、料理の仕上げです。</p> <ul> <li>レシピと食材の入力を、1つずつ足す形に直す（#194）</li> <li>画面からはみ出す <code>fieldset</code></li> <li>料理を、本番に出す</li> </ul> https://jiru-labo.com/posts/hakozumi-42-dishes/ Tue, 06 Oct 2026 00:00:00 +0900 https://jiru-labo.com/posts/hakozumi-42-dishes/ <p><a href="https://jiru-labo.com/posts/hakozumi-41-dishes-before-beta/">前回（#41）</a>で、ベータ版の前に「料理」を入れると決めました。条件は、最小の形で作ることです。</p> <p>今回は、その1つ目です。</p> <ul> <li>料理を、レシピと食材と一緒に登録する（#187）</li> <li>メニューが6つになったヘッダーを、どう収めるか</li> <li>食材を、料理の画面からその場で足す</li> </ul> https://jiru-labo.com/posts/hakozumi-40-error-page-tweaks/ Mon, 05 Oct 2026 01:00:00 +0900 https://jiru-labo.com/posts/hakozumi-40-error-page-tweaks/ <p><a href="https://jiru-labo.com/posts/hakozumi-39-logs-news/">前回（#39）</a>は、サーバーのログと、お知らせでした。今回は、ベータ版の前の洗い出しで挙がった、残りの2つです。</p> <ul> <li>エラーの画面を作る</li> <li>小さな直しを、まとめて行う</li> </ul> https://jiru-labo.com/posts/hakozumi-38-getting-started/ Sun, 04 Oct 2026 11:00:00 +0900 https://jiru-labo.com/posts/hakozumi-38-getting-started/ <p><a href="https://jiru-labo.com/posts/hakozumi-37-landing-page/">前回（#37）</a>は、ログインしていない人に見せる、紹介のページでした。今回は、ログインした直後の話です。公開までに要るものの、4つ目になります。</p> <ul> <li>トップページに、「はじめに」のカードを出す</li> <li>データが空の一覧に、説明と登録のボタンを足す</li> <li>先に要るものがないときは、そちらへ案内する</li> </ul> https://jiru-labo.com/posts/hakozumi-25-camp-dates-review/ Sat, 03 Oct 2026 04:00:00 +0900 https://jiru-labo.com/posts/hakozumi-25-camp-dates-review/ <p><a href="https://jiru-labo.com/posts/hakozumi-24-header-footer/">前回（#24）</a>は画面の枠でした。今回は、キャンプの中身です。</p> <ul> <li>一覧のカードを、広い幅でも2列にする。実績期間が入っていれば、実績の日付を出す。日付の書き方をそろえる（#116）</li> <li>キャンプに、おすすめ度と感想を足す。編集画面を「行く前」「行った後」に分ける（#115）</li> </ul> <p>ハコヅミのキャンプは、予定期間と実績期間の両方を持っています（<a href="https://jiru-labo.com/posts/hakozumi-15-camp-info/">#15</a>）。ただ、これまで一覧に出していたのは予定期間だけでした。</p> https://jiru-labo.com/posts/hakozumi-24-header-footer/ Sat, 03 Oct 2026 03:00:00 +0900 https://jiru-labo.com/posts/hakozumi-24-header-footer/ <p><a href="https://jiru-labo.com/posts/hakozumi-23-card-year/">前回（#23）</a>で一覧のカードを整えたので、今回は画面の「枠」のほうを直します。</p> <ul> <li>ヘッダーのメニューに、アイコンを付ける（#118）</li> <li>全部の画面に、共通のフッターを出す（#119）</li> <li>編集画面の一番下に、「一覧へ戻る」リンクをそろえる（#117）</li> </ul> <p>どれも、Issue を作る前にサンプル画像を見て決めました（<a href="https://jiru-labo.com/posts/hakozumi-22-heading-list-tweaks/">#22</a>からの進め方です）。</p> https://jiru-labo.com/posts/hakozumi-23-card-year/ Sat, 03 Oct 2026 02:00:00 +0900 https://jiru-labo.com/posts/hakozumi-23-card-year/ <p><a href="https://jiru-labo.com/posts/hakozumi-22-heading-list-tweaks/">前回（#22）</a>に続いて、見た目の手直しです。今回は、<a href="https://jiru-labo.com/posts/hakozumi-20-card-view/">#20</a>で作った<strong>カード表示</strong>を直します（#110・#112）。</p> <p>前回は「サンプル画像を見て決めれば、あとからの直しが出ない」という話でした。今回は、サンプルを見て決めても、<strong>使ってみたら直したくなった</strong>話です。</p> https://jiru-labo.com/posts/hakozumi-22-heading-list-tweaks/ Sat, 03 Oct 2026 01:00:00 +0900 https://jiru-labo.com/posts/hakozumi-22-heading-list-tweaks/ <p><a href="https://jiru-labo.com/posts/hakozumi-21-web-font/">前回（#21）</a>でフォントを変えたら、今度は一覧の見た目が気になってきました。機能は足りているのに、どこか事務的です。</p> <p>今回は、見た目の手直しを3つの Issue（#104・#106・#108）で進めた話です。どれも、<strong>Issue を作る前に、サンプル画像を見て決める</strong>進め方にしました。</p> https://jiru-labo.com/posts/hakozumi-14-badges-tabs/ Thu, 01 Oct 2026 00:00:00 +0900 https://jiru-labo.com/posts/hakozumi-14-badges-tabs/ <p><a href="https://jiru-labo.com/posts/hakozumi-13-gear-rating/">前回（#13）</a>のおすすめ度までで、ギアに載せる情報はひととおりそろいました。今回は、それを<strong>一覧でどう見せるか</strong>の改善です。</p> <ul> <li>メーカー名とコンテナ名を、文字ではなく<strong>バッジ</strong>で出す</li> <li>「欲しい」「廃棄済」のギアも、<strong>タブ</strong>で切り替えて見られるようにする</li> </ul> <p>どちらも Notion の「今後の機能強化」に挙げていた項目（「一覧のバッジ表示」「欲しいものリスト」）です。</p>