SaaS料金ページのウェブデザイン

OpenDesignでSaaS料金ページのウェブデザインを作る方法

1. OpenDesignをダウンロードしてインストール

   デスクトップアプリをダウンロードしてインストールし、セットアップを完了してください。デザイン用のプロジェクトを作成します。

   OpenDesignをダウンロード

2. 購入までの流れを決める

   短い料金メッセージ、補足の一文、課金サイクルの選択から始めます。訪問者がすべての価格を同じ前提で読めるよう、課金モードはプランカードより前に置きます。

   推奨プロンプト

   ファイルストレージ製品向けのSaaS料金ページのウェブデザインを、中央寄せの1080pxのコンテンツ領域で作成してください。見出しは「One flat rate. No throttling.」とし、静的な Monthly と「Yearly · save 17%」の課金切り替えコントロール、Solo、Team、Enterprise の3つのプランを配置します。価格と製品の約束事は例示であることを明記してください。購入ボタンは接続されていないサンプルのままにし、FAQの開閉にはネイティブの details/summary を使用してください。価格切り替え、実際の課金、検証済みの運用データが実装されているかのような表現は避けてください。

3. 比較しやすいプランカードを作る

   すべてのプランで、対象ユーザー、価格の状態、機能、アクションという同じ情報の流れにします。Teamのおすすめは視覚的に目立たせつつ、SoloとEnterpriseへの中立的な導線も残します。Teamの最も長い機能ラベルがアクションを押しのけていないか確認してください。

4. 判断材料を加える

   カードの後に、共通機能とアップグレード限定の機能を区別する比較表を置きます。最後に、プラン変更、無料利用、シート単位の課金に関する簡潔な質問を3つ添えます。提案する操作はデザイン内にとどめ、製品に関する主張は別途検証してください。

5. エクスポートして共有リンクを取得

   完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。