管理画面ととのえキット

こんなときに

管理画面を使いやすくしたいが、色や余白が画面ごとにばらばらで、どこから直せばいいか分からない

できること

すでにある管理画面（予約・会員・注文などの内側の画面）の見た目と使い勝手だけを整えます。保存・削除・計算などの動きは変えません。最初に「何を管理する画面か」「基調色」「一覧の詰め具合」の3つだけ決め、点検表（約50項目）と、機械で拾える使いにくさを数で出す道具で問題を洗い出します。色・余白・文字の土台をそろえたうえで、画面の大枠→表→入力欄→返事→グラフの順に直し、マウスなしでTabキーだけで操作できるかを都度確かめます。直す前と後の画面を並べて、何件減ったかを数字で見せます。

このキットに入っている「直し」

1. スマホ用の☰が、パソコンの幅でも出てしまう☰に共通のボタンの見た目を流用すると、そのdisplay指定が後から勝って、パソコンの幅でも出てしまう。隠す指定を☰専用に一段強く書くようにした
2. サイドバーを開くと、後ろの暗い幕までサイドバーを暗くしてしまうサイドバーと暗い幕を同じ重なり順にすると、後に書いた方が上に来て暗い幕がサイドバーを覆ってしまう。重なり順の数字を増やすのではなく、幕をサイドバーより前に書くようにした
3. 変数で正しく書いた重なり順まで、点検で違反として拾われる点検の道具が数字だけを見る作りで、var(--z-*)のような変数指定を想定していなかった。変数で書いたものは許すようにした。誤検出が多いと点検結果そのものが無視されるようになるため

入っているもの

• 進め方の順番（決める→写す→点検→土台→部品を直す→比べる）
• 使いにくさを洗い出す点検表（約50項目、MITライセンスのUXガイドラインを管理画面向けに選び直したもの）
• 機械で使いにくさの件数を数える道具
• 色・余白・文字の土台を作る道具
• 決まりごとをすべて守った見本の画面
• 利用者と話すときにそのまま使える言い方
• 渡す前に全部通す確認の一覧
• 実際につまずいた所（症状→原因→対処）

最初に決める3つ

1. 何を管理する画面か
2. 基調色
3. 一覧の詰め具合

必要なもの

• 追加費用なし直したい管理画面のフォルダHTML・React・Vueなど、作り方は問いません
• 追加費用なしNode.js道具を動かすのに使います。追加の部品は要りません
• 追加費用なしClaude Code か Codex

使い方

お使いのAIに、これを貼るだけです。

nice to have のキット「管理画面ととのえキット」を使いたい。https://nicetohave.app/g/3TB9BTH3-•••••••••• のとおりに取り込んで。

Claude Code でも Codex でも同じです。
貼る前に、AIに何をさせるのか読む

よくある質問

「管理画面ととのえキット」で何ができますか？

すでにある管理画面（予約・会員・注文などの内側の画面）の見た目と使い勝手だけを整えます。保存・削除・計算などの動きは変えません。最初に「何を管理する画面か」「基調色」「一覧の詰め具合」の3つだけ決め、点検表（約50項目）と、機械で拾える使いにくさを数で出す道具で問題を洗い出します。色・余白・文字の土台をそろえたうえで、画面の大枠→表→入力欄→返事→グラフの順に直し、マウスなしでTabキーだけで操作できるかを都度確かめます。直す前と後の画面を並べて、何件減ったかを数字で見せます。

どの AI で使えますか？

Claude Code と Codex で使えます。キットのページの「貼る文」を1行コピーして AI に貼るだけで、キットを取り込んで始まります（コピーには GitHub か Google のログインが要ります）。

費用はかかりますか？

キットは無料です。キットのほかに、追加の費用がかかるものはありません。AI ツールそのものの利用料は、それぞれの契約によります。

自分で AI に頼むのと何が違いますか？

作った人が実際の仕事で踏んだ落とし穴を直した手順が、最初から入っています：「スマホ用の☰が、パソコンの幅でも出てしまう」「サイドバーを開くと、後ろの暗い幕までサイドバーを暗くしてしまう」「変数で正しく書いた重なり順まで、点検で違反として拾われる」。

最初に何を決めますか？

何を管理する画面か、基調色、一覧の詰め具合の3つです。AI が1つずつ聞いてきます。

個人情報を扱いますか？

扱いません。

応援した人

応援の受け付けを始めたら、このキットを応援した人がここに並びます。