AI指示の見本帳

Webサイトを AI に作らせるときの、指示文の見本帳です。部品23種の型を集めた UIパターン集と、動き113型を集めたアニメーション集、短い動画94型を集めたモーション動画集があり、どれも動く見本・指示文・コードで見られます。

UIパターン集 UI patterns

ページの骨組み

情報を見せる

行動につなぐ

AI指示の見本帳の使い方

  1. 部品を選ぶ。作りたい部品(ヘッダー、料金表など)を開き、左の型の一覧の絵で形を見比べます。
  2. 見本で確かめる。左で型を選ぶと、右に見本が出ます。PC・タブレット・SP の幅に切り替えて、メニューやボタンを実際に押して試せます。「大きく見る」で広げて見ることもできます。
  3. 指示文をコピーして AI に渡す。見本の下の「AIへの指示文」(または右上の「指示文をコピー」)でコピーし、ChatGPT や Claude などに貼り付けます。「この形で作る」は、最初の「サイトの情報」に自分のサイトのことを書いて使います。今あるページを直させるときは、その HTML も貼ります。「見本を作る」は、この見本と同じものを作らせます。どちらも PC と SP の両方の形が入っています。
  4. 1ページ分をまとめて頼む。上の帯の「ページを組む」(ページ指示ビルダー)で、UIパターン集の型をパーツごとに選ぶと、1ページ分の指示文にまとめられます。
  5. 動きを足す。アニメーション集では、見本の下のつまみで時間や距離を変えると、指示文とコードの数字も同じ値に変わります。
  6. 動画を作らせる。モーション動画集では、製品の名前や一言を打ち替えると、見本の動画と、カット割りつきの指示文に入ります。
  7. またはコードをそのまま使う。「コード」のタブから HTML・CSS・JavaScript をコピーできます。

よく使う型は、名前の横の星を押すと、上の帯の「お気に入り」にまとまります。お気に入りはこの端末のブラウザの中に保存され、サーバーには送りません。