できること

  • props で制御する React ヒーローコンポーネントと使用例
  • ビルド不要の HTML ファイル 1 つ版
  • ライト・ダークのテーマトークン、罫線グリッドの背景、モーションのルール
  • 画像がなくても完成して見える、描画済みの代替ビジュアル
  • PopNow によるヒーロー画像(任意、実行前に見積もり)

向いている用途

  • SaaS、アプリ、サービスのランディングページ
  • 平板で動きのないファーストビューの刷新
  • 明確なアクションが 1 つ必要なウェイトリスト・ローンチページ

向いていない用途

  • 複数セクションからなるサイト全体の構築
  • スクロール連動のストーリー演出や重いアニメーション
  • テーマを変えずに使う、彩度の高い青や紫が基調の配色

使い方

Claude・ChatGPT で

PopNow のスキル「アニメーション付きヒーローセクション」(animated-hero-section)を使って、次のことをしてください:私の Next.js のランディングページにヒーローを追加して。見出しは「旅の計画を、もっと 気軽に / ゆったり / みんなで」、ボタンは「計画を始める」と「例を見る」。

コーディングエージェントで

/popnow-animated-hero-section 私の Next.js のランディングページにヒーローを追加して。見出しは「旅の計画を、もっと 気軽に / ゆったり / みんなで」、ボタンは「計画を始める」と「例を見る」。

次はこれ

フレーム用に横長の写真を生成して。地図とコーヒーが置かれた日当たりのいいテーブル。先に必要なクレジットを教えて。

静的サイト用に、プレーンな HTML 版もください。

用意しておくもの

  • リード文と、切り替わる短い単語 3〜5 個
  • 本文、ボタンのラベルとリンク
  • 任意:スクリーンショットや製品写真、または PopNow API キー

似ているスキル

すべて見る →

よくある質問

React は必要ですか?

不要です。プロジェクトが React と Tailwind を使っていれば React コンポーネントを、ビルド工程がなければプレーンな HTML ファイルを選びます。他のフレームワークには、同じマークアップとモーションを移植します。

モーションはアクセシブルですか?

単語は短いトゥイーンでスライドし、非表示のタブでは一時停止し、訪問者が動きを減らす設定にしている場合は完全に止まります。スクリーンリーダーには、切り替わる単語ではなく見出し全体が 1 回だけ読み上げられます。

ヒーロー画像がない場合は?

テーマカラーで描いたプレートがフレームを埋めるので、セクションは完成した見た目になります。後から自分のスクリーンショットを追加したり、PopNow で画像を生成したりできます。

PopNow でアプリのスクリーンショットを作れますか?

作れません。ソフトウェアの場合、スキルは実際のスクリーンショットを求めます。PopNow はシーン写真、背景を合わせた製品写真、抽象的なプレートに使います。