そのナビバー、素のままで損してます。AIに渡すだけで再現できる、ナビバー全6モーション設計図
- Digital3,980 JPY
AIでページやツールは作れた。 でも、ナビバーだけ「とりあえず動く状態」で止まっていませんか。 この商品は、**ナビバーの動き6種類を、AIに具体的に指示するための「設計図」**です。 色・サイズ・移動量・秒数・イージングなどを数値まで仕様化しているので、「もっと自然に」「いい感じに動かして」のような曖昧な指示ではなく、設計値に沿って実装を依頼できます。
こんな方へ
・Claude CodeなどでWebページやツールを作れるようになった ・機能は作れるけれど、動きの仕上げ方が分からない ・AIに「もっと滑らかに」と頼んでも、思った動きにならない ・ゼロからアニメーションの数値を調整する時間を減らしたい ・実際に動く見本を見ながら、自分の画面へ取り入れたい
収録モーション｜全6種
01 Slide Pill ガラスのピルが滑って、選択を連れて行く 02 Expand Label 選択中だけ伸びて、名前が出る 03 Center Action 中央の＋ボタンが沈んで、3つのアクションが扇に開く 04 Glass Player 回る盤面、進むバー、跳ねる波形のガラスプレイヤー 05 Dock Hop アイコンが順に跳ねて、選択の下にドットが残る 06 Liquid Tab 下線が伸び縮みしながら、選択を追いかける
ダウンロード内容
・style-nav.md 全6モーションの設計図本体 ・サンプルHTML 2形式 6種類をまとめて確認できるカタログ形式 1モーションずつ確認できるページ形式 ・README 設計図の使い方をまとめた説明ファイル 本商品は、完成済みアプリや、そのまま組み込むだけの完成コンポーネント集ではありません。 「この見本の動きを、AIにどう伝えればいいか」を数値まで整理した設計仕様と、確認用HTMLのセットです。
使い方
style-nav.md を、AIコーディングツールに読み込ませる 使いたいモーションを指定する 「この設計図の 01 Slide Pill を、現在の画面に適用して」などと依頼する AIが生成・変更した画面を確認し、必要に応じて自分の環境に合わせて調整する Claude Code / ChatGPT / Cursorなど、Markdownの内容を参照してコード生成・編集できるAI環境での利用を想定しています。 ※AIサービスやモデル、既存コードの構成によって、実装結果が異なる場合があります。
「設計図」にしている理由
アニメーションは、 ・何px動かすか ・何秒かけるか ・どのタイミングで開始するか ・どのイージングを使うか ・選択前後で何を変えるか といった細かな条件で印象が変わります。 そこで、見た目だけでは伝わりにくい部分まで数値として仕様化しました。
再現テスト済み
この設計図は、元の実装を見せず、設計図ファイルだけを別のAIに渡して再現するテストを行い、サンプルとの差分ゼロを確認済みです。 「見本を見ないと分からない仕様」にならないよう、再現に必要な値を設計図へ落とし込んでいます。 これは「どのAI・どの既存ページでも結果を保証する」という意味ではなく、設計図に記載した仕様から、基準となる見本を再現できることを検証したものです。
まず無料で試せます
「MarkdownをAIに渡して、本当にどう使うの？」という方のために、01 Slide Pill の設計図を無料サンプルとして別途配布しています。 無料版には、 ・01 Slide Pill の設計図 ・共通仕様 ・確認用サンプルHTML ・README を収録しています。 購入前に、実際の使い方や設計図の細かさを確認できます。
価格
通常価格：¥4,980 発売記念として、最初の10件まで ¥3,980 で提供します。 記念価格終了後は、通常価格 ¥4,980 に戻ります。
ご購入前にご確認ください
・本商品は「設計図（Markdown）」＋サンプルHTML＋READMEのセットです ・完成済みアプリや完成コンポーネントそのものではありません ・AIコーディングツールや生成AIサービスは商品に含まれません ・AIの種類、モデル、既存コード、使用環境によって実装結果は異なる場合があります ・サンプル画面内の文言・データ・数値は説明用のダミーです ・ファイルに不備が確認された場合は、修正版で対応します ・デジタル商品の購入後のキャンセル・返金等については、BOOTHの規約・取扱いをご確認ください BOOTHのダウンロード商品は、入金確認後に購入履歴からダウンロードできる仕組みです。