SaaS のランディングページテンプレート。
SaaS 製品のための完全な Web サイトです。Fjordly というチーム向け計画ツールを例にした 8 つのレスポンシブページで、トップページや料金から、導入事例、更新履歴、ブログ記事、登録、営業への問い合わせまでそろっています。文章は実在の製品のようで、価格や数字はページ間で一致しています。すべてのページがシンプルな HTML と Tailwind なので、Codex や Claude Code がクローンしてあなたのサイトに作り替えられます。
2026年11月7日 更新
Web サイト · 8 ページ · 無料・オープンソース
01トップ 
02機能 
03料金 
04導入事例 
05更新履歴 
06ブログ記事 
07登録 
08営業問い合わせ
クローンする
npx degit ummydev/ui-templates/sites/saas my-app
リポジトリのほかの部分は含めず、このテンプレートだけを新しいフォルダにコピーします。
自分のものにする
これは codexdesign.io の SaaS ランディングページ テンプレートです。名前を [あなたのプロダクト] に変え、サンプルデータを [あなたの機能] に置き換えて、すべての画面を DESIGN.md のデザインシステムに沿わせてください。
新しいフォルダで、これを Codex や Claude Code に貼り付けてください。
- 使用技術
- HTML · Tailwind CSS v4 · Lucide icons
テンプレートの内容
| ページ | 内容 |
|---|---|
| トップ | 製品を一言で伝える見出し、HTML で描いた製品画面、主な機能、顧客、料金 |
| 機能 | 計画・実行・予定・レポート・連絡の 5 セクション、それぞれに製品画面 |
| 料金 | Free・Team・Enterprise の 3 プラン、月払いと年払いの切り替え、比較表、質問 |
| 導入事例 | 導入前後の数字が入った事例 1 本と、ほかの事例の一覧 |
| 更新履歴 | 日付ごとのリリース。新機能・改善・修正のラベル付き |
| ブログ記事 | 著者、目次、リスト、引用、コード、関連記事 |
| 登録 | Google またはメールでの登録と、得られるものや顧客の声 |
| 営業問い合わせ | チーム規模や要望を入れるデモ申し込みフォームと、申し込み前の質問 |
内容はページ間で一致しています。料金は 10 人まで無料、Team プランは年払いで 1 人月 8 ドル（月払いは 10 ドル）、Enterprise は個別見積もりです。トップページの顧客の声と導入事例は同じ物流会社で、月曜の会議は 90 分から 25 分に、週次レポートは 3 時間から 20 分に減りました。更新履歴の最新項目は、トップページで「New」と表示している機能です。顧客名は架空のもので、仮の人名や lorem ipsum はありません。
各ページは HTML ファイル 1 つで、Tailwind CSS v4 と共通の tokens.css でスタイルを付けています。どのページも幅 390 ピクセルのスマホから広いデスクトップ画面まで対応し、スマホのメニューに JavaScript は要りません。製品画面は画像を貼るのではなく HTML で描いているので、エージェントがサイトのほかの部分と一緒にスタイルを変えられます。どのファイルもブラウザで開くだけで、インストールやビルドは要りません。
Codex や Claude Code で使う
ui-templates リポジトリから、このテンプレートだけをコピーします。
npx degit ummydev/ui-templates/sites/saas my-saas-site
あとはエージェントに、あなたのサイトにするよう頼みます。
このフォルダは SaaS サイトのテンプレートです。[あなたの製品] のサイトに作り替えてください。この製品は [対象ユーザー] のために [何をするか] ものです。DESIGN.md と tokens.css はデザインシステムとして残し、製品画面、機能、料金、導入事例、更新履歴を [あなたのコンテンツ] に置き換えて、価格や数字がページ間で一致するようにしてください。そのうえで [Next.js / Astro / あなたの技術スタック] で実装してください。
デザインシステムが DESIGN.md に書かれているので、エージェントが後から追加するページ（ドキュメント、会社概要、比較ページなど）も、既存の 8 ページとそろいます。
Nordic デザインシステムが土台
このテンプレートは、生産性ツール向けの落ち着いたデザインシステム Nordic を使っています。Manrope、くすんだフィヨルドブルー、12px の角丸、やわらかな影が特徴です。ページではライブプレビュー、DESIGN.md の全文、shadcn テーマを見られます。
よくある質問
この SaaS ランディングページのテンプレートは無料ですか？
はい。MIT ライセンスのオープンソースで、個人でも商用でも使えます。
Next.js、Astro、React でも使えますか？
使えます。ページは Tailwind のクラスを付けたシンプルな HTML なので、エージェントがどのフレームワークのコンポーネントにも移せます。tokens.css と DESIGN.md はそのまま残すよう頼めば、移したあともデザインが崩れません。
ダークテーマはありますか？
あります。どのページでも <html> タグに class="dark" を付けると、Nordic のダークテーマに切り替わります。