できること
- フォントと画像を埋め込んだ HTML ファイル 1 つ(ネットワーク通信なし)
- メールの登録、ライブのチャートがある製品プレビュー、オファーの選択、料金、FAQ、締めの登録を備えたヒーロー
- 動くルート:有料の壁のあるサンプル号、検索できるアーカイブ、席と贈り物つきの参加、ログイン、規約、404
- リンク、ルート、ラベル、ガラスのレシピ、残ったサンプルテキストを確かめるバリデーター
- 任意:クレジットの見積もり後に PopNow で生成する静止画、ポートレート、ヒーローのループ、SNS カード
向いている用途
- ニュースレターや要約の登録ページ
- 事前登録、非公開のベータ、ローンチのキャンペーン
- 席を売る会員制度、講座、イベント
向いていない用途
- 明るい、パステル、カラフルなブランド(このページは白と黒だけです)
- 商品の多いオンラインストア
- 長い機能紹介が必要な SaaS サイト
使い方
Claude・ChatGPT で
PopNow のスキル「グラスモーフィズムのサイトテンプレート」(glassmorphism-website-template)を使って、次のことをしてください:Tidewatch の登録ページを作って。小型ボートの船乗りのための毎週金曜のメールです。予報のチャートひとつ、港のメモ 3 つ、長めの読み物。無料で、月 $5 のクルー・プランも。
コーディングエージェントで
/popnow-glassmorphism-website-template Tidewatch の登録ページを作って。小型ボートの船乗りのための毎週金曜のメールです。予報のチャートひとつ、港のメモ 3 つ、長めの読み物。無料で、月 $5 のクルー・プランも。
次はこれ
何かを生成する前に、夜の暗い水のヒーロー静止画と、そこから作る 5 秒のループの見積もりを出して。
このページを、私の Astro サイトにコンポーネントと実際のルートとして移植して。
用意しておくもの
- 名前、登録すると得られるもの、見出しに入れる一つの約束
- 自信をもって言える 3〜4 の事実、プランと価格、FAQ の回答 4〜6 件
- ブランドに DESIGN.md があればそれ
- 任意:PopNow API キー、または自分のダークの写真や映像
似ているスキル
すべて見る →3D アバター作成ツール
+3ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
カレンダーヒートマップ
+31 年分の日々の活動を濃淡付きのカレンダーで表示。連続記録、合計、キーボード操作にも対応します。
AI SaaS ランディングページ
+3温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
アニメーション付きヒーローセクション
+3見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
シェーダーのヒーロー付きの代理店サイト
+3下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
ダークモード SaaS ランディングページ
+3動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
デザイナーのポートフォリオサイト
+3落ち着いたグレーの上で、フェードする見出しの周りを 6 枚の傾いたカードが漂い、赤いポートレートのカードと、雑誌風の事例が続きます。
エンジニア向けポートフォリオサイト
+3事例紹介、執筆、登壇、履歴書、問い合わせフォームを備えた、エンジニア向けのダークな個人サイトです。
雑誌風の SaaS サイト
+3ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
ハードウェア製品のサイト
+3銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
インタラクティブなアーキテクチャ図
+3検証済みの JSON モデルから作る、オフラインでクリックできるシステム構成図。各ボックスの根拠も確認できます。
インタラクティブなグリッドのヒーロー
+3ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
ナレッジグラフ エクスプローラー
+3プロジェクトのメモを、すべての記述が出典の行にリンクする、オフラインで検索できるグラフに変えます。
KPI ダッシュボードのテンプレート
+3変化のチップ付きの 4 つの KPI タイルの下に、光る折れ線グラフ、内訳の表、目標のバー。温かい紙の上で。
AI モックアップからのランディングページ
+3まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
Web マガジンサイト テンプレート
+3記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
パーティクルアニメーションのヒーロー
+3温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
個人ブランドのウェブサイト
+3細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
シネマティックな製品ローンチページ
+3映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
管理画面ダッシュボード テンプレート
+3グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
SaaS ランディングページ テンプレート
+3実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
スクラップブック風ポートフォリオサイト
+3紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
スニーカーショップ サイトテンプレート
+3カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
ワークフロー自動化のランディングページ
+3グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
よくある質問
ぼやけた箱ではなく、ガラスらしく見せるのはどうやってですか?
持ち上がったすべての面が、ひとつのレシピを使います。背景をぼかした、わずかに色のついた内側、やわらかい上の光沢、マスクしたグラデーションのリングで描いた縁です。上下の縁に光が当たります。バリデーターは、このレシピを外したページを不合格にします。
ヒーローは動きますか?
はい。ヒーローの静止画を承認すると、PopNow が 5 秒の動画にでき、同梱のループのスクリプトがそれを、ポスター付きのシームレスで無音のループにします。動きを減らす設定やタブが隠れているときは、静止画のままです。
ニュースレター専用ですか?
いいえ。サンプルは夕方の要約ですが、適応ガイドは同じセクションを、アプリの事前登録、講座、イベント、ポッドキャストに対応づけます。製品のプレビューはアプリの画面に、アーカイブは変更履歴やセッション一覧になります。
PopNow API キーは必要ですか?
いいえ。ページには、すべての画像の枠に対する中立的な同梱の静止画と CSS の代替が付いています。キーがあれば、新しい静止画、ポートレート、ループ、SNS カードを追加でき、それぞれ実行前にクレジットで見積もります。

