再利用できる部品を整理する

ノーコードツールやAIを使ってアプリやページを作っていると、同じようなパーツ（ボタン、入力フォーム、ヘッダーなど）を何度も作り直していることに気づくことがあります。料理にたとえると、毎回ゼロからカレーのルーを作るのではなく、「いつもの味のベース」をまとめて作り置きしておくイメージです。

このレッスンでは、あなたのプロジェクトで繰り返し使っているパーツを見つけ出し、「再利用できる部品」として整理する方法を学びます。整理が終わると、新しいページを作るときに部品を組み合わせるだけで済むようになり、作業時間がぐっと短くなります。

• ノーコードツール（Bubble、Glide、STUDIO など）またはAIツール（Cursor、Claude Code など）で作ったアプリやページがひとつ以上あること
• AIチャットツール（ChatGPT、Claude など）が使える状態であること

再利用できる部品とは、複数の場所で同じ見た目・同じ動きをするパーツのことです。

良い例

• ヘッダー: どのページにも表示されるロゴ＋ナビゲーション
• カード型レイアウト: 商品一覧やブログ記事一覧で繰り返し使うひとまとまりの表示枠
• 入力フォーム: 名前・メールアドレスなどを入力する一連のフィールド

悪い例（部品にしなくてよいもの）

• そのページだけにしか存在しない特殊なレイアウト
• 一度しか使わないお知らせバナー

まず、あなたのプロジェクトの中で繰り返し登場しているパーツをAIに洗い出してもらいましょう。以下のプロンプト（＝AIへの指示文）をコピーして、ChatGPTやClaudeに貼り付けてください。

AIへのプロンプト例

「私はノーコードツールで社内の業務管理アプリを作っています。以下のページがあります。 ・ダッシュボード（一覧表示＋検索バー） ・登録フォーム（名前・メール・部署の入力） ・詳細ページ（情報カード＋編集ボタン）

これらのページで繰り返し使われていそうなUIパーツ（＝画面の部品）を一覧にしてください。それぞれ『どのページで使われているか』と『共通化するメリット』も教えてください。」

AIが返してくれたリストが、あなたの「再利用候補リスト」の出発点になります。

AIの回答をもとに、以下の3列の表にまとめましょう。表はメモ帳でもスプレッドシートでもOKです。

優先度は「使われる回数が多いほど高い」と考えてください。3ページ以上で使うなら「高」、2ページなら「中」、1ページだけなら部品化は不要です。

AIへのプロンプト例（表の整理を手伝ってもらう）

「先ほどの再利用候補リストを、Markdown の表形式で整理してください。列は『部品の名前』『使われているページ』『共通化の優先度（高/中/低）』の3つです。使われるページ数が3以上なら高、2なら中、1なら低としてください。」

優先度が「高」の部品から、簡単な仕様メモを1つずつ書いていきます。仕様メモに含める情報は次の4つだけです。

1. 部品の名前: 例「ヘッダー」
2. 見た目の説明: どんな色・サイズ・配置か（スクリーンショットを貼るとベスト）
3. 動き: ボタンを押したら何が起きるか、入力したらどうなるか
4. 変わる部分: ページごとに変えたい箇所（例: ページタイトルの文字だけ変わる）

AIへのプロンプト例（仕様メモの下書き）

「『ヘッダー』という再利用部品の仕様メモを作ってください。以下の情報を含めてください。 ・見た目: 白背景、左にロゴ、右にナビリンク3つ ・動き: ナビリンクをクリックすると該当ページに移動 ・変わる部分: 現在のページのナビリンクだけ色が変わる 形式はMarkdownでお願いします。」

最後に、以下のチェックリストで確認しましょう。

• 3ページ以上で使うパーツがすべてリストに入っている
• 優先度「高」の部品すべてに仕様メモがある
• 仕様メモに「変わる部分」が明記されている
• 部品リストをチームメンバーや自分の別プロジェクトでも使える形で保存した

すべてにチェックが入れば、このレッスンの成果物は完成です。

「どこまで細かく分けるべき？」と迷う

迷ったら大きめの単位から始めてください。たとえば「ボタン」1個を部品にするより、「検索バー＋ボタン＋フィルタ」のまとまりを1部品にするほうが実用的です。細かく分けすぎると管理が大変になります。

見た目が似ているけど動きが違うパーツ

見た目が同じでも、押したときの動作がまったく違う場合は別の部品として分けましょう。無理にひとつにまとめると、後から修正が複雑になります。

リストを作ったのに活用できていない

部品リストは「作って終わり」ではなく、新しいページを作るときに最初に見る「メニュー表」です。プロジェクトのトップに置いて、いつでもアクセスできるようにしておきましょう。