できること
- ホーム、サービス、料金、プランのページ、作品、事例、自己紹介、プロセス、お問い合わせ、利用規約、404 を備えたオフラインの HTML サイト 1 つ
- 注目のパッケージ 1 つを含むプランのグリッド、比較表、任意の四半期払い
- スクリーンショットではなく、HTML で作ったスマホとブラウザの画面を使った事例
- ルート、データの整合性、アクセシビリティ、サンプルの残りを確かめる検証スクリプト
- 任意：PopNow で、見積もりのあとに作る肖像の切り抜きとプロジェクトの画像
向いている用途
- フリーランスの UI、UX、ブランド、Web デザイナー
- パッケージを売る一人のデベロッパー、イラストレーター、写真家
- 範囲の決まったオファーを持つコンサルタントやコーチ
向いていない用途
- チームと多くのサービス系統を持つ代理店
- 物理的な商品を売るオンラインショップ
- 静かで、画像中心のポートフォリオ
使い方
Claude・ChatGPT で
PopNow のスキル「フリーランスデザイナーのサイト」（freelance-designer-website）を使って、次のことをしてください：サイトを作って。Dana Oyelowo、リーズのプロダクトデザイナー。パッケージは Audit 1,200 GBP（1 週間）、Sprint 4,800 GBP（3 週間）、Retainer 3,500 GBP／月。プロジェクトは notes/projects.md にあります。
コーディングエージェントで
/popnow-freelance-designer-website サイトを作って。Dana Oyelowo、リーズのプロダクトデザイナー。パッケージは Audit 1,200 GBP（1 週間）、Sprint 4,800 GBP（3 週間）、Retainer 3,500 GBP／月。プロジェクトは notes/projects.md にあります。
次はこれ
ヒーロー用に photos/me.jpg から私の肖像を切り抜いて。見積もって。
写真のない 2 件のプロジェクトには、同じシリーズの画像を見積もって。
用意しておくもの
- サービスと、実際の価格と期間のあるパッケージを 2〜4 個
- 課題、判断、結果を書いたプロジェクト 2 件以上
- 無地の背景での上半身の写真 1 枚と、作品の写真
- 任意：PopNow API キー
似ているスキル
すべて見る →- Web
3D アバター作成ツール
+25ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
- Web
カレンダーヒートマップ
+251 年分の日々の活動を濃淡付きのカレンダーで表示。連続記録、合計、キーボード操作にも対応します。
- Web
AI SaaS ランディングページ
+25温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
- Web
アニメーション付きヒーローセクション
+25見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
- Web
飲料ブランドのウェブサイト テンプレート
+25ショップ、ケース作成、取扱店マップ、デモ用チェックアウトを 1 ファイルに収めた、明るい飲料・スナックのブランドサイト。
- Web
シェーダーのヒーロー付きの代理店サイト
+25下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
- Web
ダークモード SaaS ランディングページ
+25動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
- Web
デザイナーのポートフォリオサイト
+25落ち着いたグレーの上で、フェードする見出しの周りを 6 枚の傾いたカードが漂い、赤いポートレートのカードと、雑誌風の事例が続きます。
- Web
エンジニア向けポートフォリオサイト
+25事例紹介、執筆、登壇、履歴書、問い合わせフォームを備えた、エンジニア向けのダークな個人サイトです。
- Web
雑誌風の SaaS サイト
+25ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
- Web
グラスモーフィズムのサイトテンプレート
+25ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
- Web
ハードウェア製品のサイト
+25銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
- Web
インタラクティブなアーキテクチャ図
+25検証済みの JSON モデルから作る、オフラインでクリックできるシステム構成図。各ボックスの根拠も確認できます。
- Web
インタラクティブなグリッドのヒーロー
+25ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
- Web
ナレッジグラフ エクスプローラー
+25プロジェクトのメモを、すべての記述が出典の行にリンクする、オフラインで検索できるグラフに変えます。
- Web
KPI ダッシュボードのテンプレート
+25変化のチップ付きの 4 つの KPI タイルの下に、光る折れ線グラフ、内訳の表、目標のバー。温かい紙の上で。
- Web
AI モックアップからのランディングページ
+25まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
- Web
Web マガジンサイト テンプレート
+25記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
- Web
パーティクルアニメーションのヒーロー
+25温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
- Web
個人ブランドのウェブサイト
+25細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
- Web
ペットショップのウェブサイト テンプレート
+25カタログ、バリエーション、カート、補充プランナー、デモ用チェックアウトを 1 つの HTML ファイルに収めた、動くペット用品ショップ。
- Web
ポッドキャストのウェブサイト テンプレート
+25再生できるヒーロー、エピソードのアーカイブ、ゲストのページ、ページをまたいでも再生が続くプレーヤーを備えた番組サイト。
Web手描き風の料金表セクション
+25傾いたインクのカード、年額切り替え、ダークモードを備えた、ノートのような料金表。1 つのオフラインファイル。
- Web
シネマティックな製品ローンチページ
+25映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
- Web
論文のウェブサイト
+25論文のプロジェクトページ。インタラクティブな図 1、結果、限界、ワンクリックの引用つき。
- Web
管理画面ダッシュボード テンプレート
+25グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
- Web
SaaS ランディングページ テンプレート
+25実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
- Web
スクラップブック風ポートフォリオサイト
+25紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
- Web
スニーカーショップ サイトテンプレート
+25カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
- Web
スポーツクラブのウェブサイト テンプレート
+25時間割、コーチのページ、会員制度、コートの配置図、予約を 1 つのファイルにまとめた、クラブ、ジム、スタジオのサイト。
- Web
お客さまの声の壁セクション
+25お客さまの声を組石のように並べるか、ゆっくり流れる壁にするセクション。掲載の了承を得た声だけを出します。
- Web
旅行会社のウェブサイト テンプレート
+25ツアー、ガイド、ロッジのための写真中心のサイト。旅の検索、予約リクエスト、旅選びのクイズつき。
- Web
ワークフロー自動化のランディングページ
+25グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
よくある質問
ご自身の写真で、ヒーローの肖像はどう作られますか？
無地の背景の上半身の写真を送ってください。PopNow の背景除去ツールが透過の画像に切り抜き、ページ内の SVG フィルターがライトモードでは淡い青に、ダークモードでは正しい色に調整するので、どの写真もデザインに合います。
決済画面なしでパッケージを売れますか？
はい。各パッケージには、スケジュール、成果物、対象、FAQ を載せた専用のページがあり、ボタンはそのパッケージを選んだ状態の依頼フォームに進みます。公開するときに、フォームを受信箱かフォームサービスにつないでください。
プロジェクトに良い写真がない場合は？
PopNow が、プロジェクトごとに 1 つの素材か配置の研究の画像を、1 つにそろえたシリーズで作れます。実行前に見積もりが出ます。それらは明らかに雰囲気の画像であり、納品した作品の写真として見せることはありません。事例の画面は HTML で作ります。
イラストレーターやコンサルタントにも合いますか？
はい。視覚的な仕事は、画像中心のプロジェクトのポートフォリオになり、コンサルタントの場合はサービスがオファーに、プランがパッケージになります。事例のページは、課題、進め方、結果の順で語られます。
これはフリーランスのグラフィックデザインのポートフォリオですか、それとも販売サイトですか？
両方です。事例はフリーランスのグラフィックデザインのポートフォリオを示し、パッケージのページと依頼フォームが、訪問者を有料のプロジェクトに変えます。フリーランスの Web デザイナーのポートフォリオとしても使えます。作品の見本を差し替えて、パッケージはそのまま使ってください。