コンテンツへスキップ

社内管理ツールを作ろう

初級~12 0/4 ステップ

数分で社内ツールをリリースしよう

どのプロダクトチームにも、「誰かが簡単な管理画面を作ってくれればいいのに」というバックログがあります。PMとして、もう順番待ちをする必要はありません。AIとTailwindを少し使えば、オペレーションチームが必要としている社内ツールのプロトタイプをすぐに作れます。

このレッスンでは、シンプルな管理パネルを作ります。アクションボタン付きのデータテーブルと、「アイテム追加」フォームです。これは社内ツールUIの定番パターンで、自分でスケッチできるようになれば、曖昧なFigmaの代わりに動くプロトタイプをエンジニアに渡せます。

実用的に考えましょう。社内ツールは見た目が美しい必要はありません。明確で、速く、チームが使いやすいことが大切です。

手順

1

中央揃えのコンテナ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 行目に書きましょう — そのコメントの下、すでに書いたコードの後ろです。

2

ヘッダー列(Name、Role、Actions)と少なくとも1行のデータを持つデータテーブルを追加しましょう

3

テーブルの行の中に、EditとDeleteのアクションボタンを追加しましょう

4

テキスト入力欄と送信ボタンを持つ「アイテム追加」フォームを追加しましょう

あなたのコード

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

ライブプレビュー

ライブプレビュー