社内管理ツールを作ろう
数分で社内ツールをリリースしよう
どのプロダクトチームにも、「誰かが簡単な管理画面を作ってくれればいいのに」というバックログがあります。PMとして、もう順番待ちをする必要はありません。AIとTailwindを少し使えば、オペレーションチームが必要としている社内ツールのプロトタイプをすぐに作れます。
このレッスンでは、シンプルな管理パネルを作ります。アクションボタン付きのデータテーブルと、「アイテム追加」フォームです。これは社内ツールUIの定番パターンで、自分でスケッチできるようになれば、曖昧なFigmaの代わりに動くプロトタイプをエンジニアに渡せます。
実用的に考えましょう。社内ツールは見た目が美しい必要はありません。明確で、速く、チームが使いやすいことが大切です。
手順
中央揃えのコンテナdivの中に、「User Admin Panel」というページ見出し(h1)を追加しましょう
ヒント: こちらを使ってください: `<div class="max-w-4xl mx-auto p-8"><h1 class="text-3xl font-bold mb-6">User Admin Panel</h1></div>`
どこに書けばいい?
<!-- Build your admin panel here -->11 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。
ヘッダー列(Name、Role、Actions)と少なくとも1行のデータを持つデータテーブルを追加しましょう
テーブルの行の中に、EditとDeleteのアクションボタンを追加しましょう
テキスト入力欄と送信ボタンを持つ「アイテム追加」フォームを追加しましょう
あなたのコード
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ:中央揃えのコンテナdivの中に、「User Admin Panel」というページ見出し(h1)を追加しましょう