SaaSランディングページ生成プロンプト
フリーのプロンプト百科事典 Wikiprompt より
2025年4月7日
SaaSランディングページ生成プロンプト 高コンバージョンのSaaSランディングページを生成するためのプロンプト。ヒーロー、機能、お客様の声、価格、CTAを含み、HTML/CSS/JSを使用する。
プロンプト内容保存
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blogsmith · From idea to polished post</title>
<!-- Font & Icons -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: #fafafc;
color: #1a1a2e;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* header */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
flex-wrap: wrap;
}
.logo {
font-weight: 700;
font-size: 1.8rem;
letter-spacing: -0.02em;
color: #1a1a2e;
}
.logo span {
color: #4f46e5;
}
.nav-links {
display: flex;
gap: 32px;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: #2d2d44;
font-weight: 500;
font-size: 0.95rem;
}
.nav-links a:hover {
color: #4f46e5;
}
.btn-outline {
border: 1.5px solid #c7c9d9;
background: transparent;
padding: 8px 18px;
border-radius: 40px;
font-weight: 600;
font-size: 0.9rem;
color: #1a1a2e;
cursor: pointer;
transition: 0.2s;
}
.btn-outline:hover {
border-color: #4f46e5;
color: #4f46e5;
}
.btn-primary {
background: #4f46e5;
color: white;
border: none;
padding: 12px 28px;
border-radius: 40px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}
.btn-primary:hover {
background: #4338ca;
transform: translateY(-1px);
}
/* hero */
.hero {
display: flex;
align-items: center;
gap: 40px;
padding: 48px 0 64px;
flex-wrap: wrap;
}
.hero-content {
flex: 1 1 380px;
}
.hero-badge {
display: inline-block;
background: #eef2ff;
color: #4f46e5;
font-weight: 600;
font-size: 0.8rem;
padding: 6px 14px;
border-radius: 40px;
margin-bottom: 20px;
letter-spacing: 0.3px;
}
.hero h1 {
font-size: 3.2rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 20px;
}
.hero h1 .accent {
color: #4f46e5;
border-bottom: 3px solid #c7d2fe;
}
.hero p {
font-size: 1.15rem;
color: #4a4a5e;
max-width: 480px;
margin-bottom: 28px;
}
.hero-cta {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.hero-note {
font-size: 0.85rem;
color: #6b6b80;
margin-top: 12px;
}
/* side-by-side mock */
.hero-visual {
flex: 1 1 380px;
background: white;
border-radius: 24px;
padding: 20px;
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.1);
border: 1px solid #e9eaf0;
}
.compare-grid {
display: flex;
gap: 16px;
align-items: stretch;
}
.compare-card {
flex: 1;
background: #f6f7fb;
border-radius: 16px;
padding: 16px;
border: 1px solid #e6e8f0;
}
.compare-card h4 {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6b6b80;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.raw-idea {
background: #fff8f0;
border-left: 4px solid #f59e0b;
}
.polished-post {
background: #f0fdf4;
border-left: 4px solid #22c55e;
}
.idea-text {
font-size: 0.9rem;
color: #3a3a4e;
font-style: italic;
margin-bottom: 8px;
}
.post-text {
font-size: 0.9rem;
color: #1e293b;
font-weight: 500;
}
.arrow-icon {
align-self: center;
color: #4f46e5;
font-size: 1.4rem;
}
/* logos / social proof */
.proof-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
border-top: 1px solid #e9eaf0;
border-bottom: 1px solid #e9eaf0;
margin-bottom: 64px;
flex-wrap: wrap;
gap: 16px;
}
.proof-bar span {
color: #6b6b80;
font-weight: 500;
font-size: 0.9rem;
}
.logos {
display: flex;
gap: 28px;
font-weight: 600;
color: #8a8aa0;
font-size: 1.1rem;
letter-spacing: -0.01em;
}
/* features */
.features {
padding: 40px 0 64px;
}
.section-title {
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.section-sub {
color: #5a5a70;
max-width: 600px;
margin-bottom: 48px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 32px;
}
.feature-item {
background: white;
border-radius: 20px;
padding: 28px 20px;
border: 1px solid #ececf2;
transition: 0.2s;
}
.feature-item:hover {
box-shadow: 0 12px 24px -12px rgba(0,0,0,0.08);
border-color: #c7d2fe;
}
.feature-icon {
background: #eef2ff;
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #4f46e5;
font-size: 1.4rem;
margin-bottom: 20px;
}
.feature-item h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 8px;
}
.feature-item p {
color: #5a5a70;
font-size: 0.95rem;
}
/* testimonials */
.testimonials {
background: white;
padding: 64px 0;
border-radius: 40px;
margin: 32px 0;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.testimonial-card {
background: #f8f9fe;
border-radius: 20px;
padding: 28px;
border: 1px solid #e9eaf0;
}
.stars {
color: #f59e0b;
margin-bottom: 16px;
font-size: 0.9rem;
}
.testimonial-card blockquote {
font-size: 1rem;
color: #2d2d44;
margin-bottom: 20px;
font-weight: 500;
}
.author {
display: flex;
align-items: center;
gap: 12px;
}
.author img {
width: 44px;
height: 44px;
border-radius: 50%;
background: #c7d2fe;
}
.author-name {
font-weight: 600;
font-size: 0.95rem;
}
.author-role {
font-size: 0.8rem;
color: #6b6b80;
}
/* pricing */
.pricing {
padding: 48px 0 64px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
margin-top: 40px;
}
.pricing-card {
background: white;
border-radius: 24px;
padding: 32px 24px;
border: 1px solid #e6e8f0;
display: flex;
flex-direction: column;
}
.pricing-card.popular {
border: 2px solid #4f46e5;
box-shadow: 0 12px 24px -12px rgba(79,70,229,0.2);
}
.plan-name {
font-weight: 600;
font-size: 1.2rem;
margin-bottom: 8px;
}
.plan-price {
font-size: 2.8rem;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.plan-price span {
font-size: 1rem;
font-weight: 400;
color: #6b6b80;
}
.plan-features {
list-style: none;
margin-bottom: 32px;
flex: 1;
}
.plan-features li {
padding: 8px 0;
border-bottom: 1px solid #f0f0f5;
font-size: 0.95rem;
display: flex;
gap: 10px;
}
.plan-features i {
color: #4f46e5;
width: 18px;
font-size: 0.9rem;
padding-top: 4px;
}
.btn-pricing {
background: #1a1a2e;
color: white;
border: none;
padding: 12px 20px;
border-radius: 40px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.btn-pricing:hover {
background: #4f46e5;
}
.popular .btn-pricing {
background: #4f46e5;
}
/* CTA */
.cta-section {
background: #1a1a2e;
color: white;
border-radius: 40px;
padding: 64px 32px;
text-align: center;
margin: 32px 0 64px;
}
.cta-section h2 {
font-size: 2.5rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.cta-section p {
color: #b8b8d0;
max-width: 480px;
margin: 0 auto 32px;
}
.btn-cta {
background: white;
color: #1a1a2e;
border: none;
padding: 16px 40px;
border-radius: 60px;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
transition: 0.2s;
}
.btn-cta:hover {
background: #e0e7ff;
}
footer {
text-align: center;
padding: 32px 0;
color: #6b6b80;
font-size: 0.9rem;
}
/* responsive */
@media (max-width: 768px) {
.hero h1 { font-size: 2.4rem; }
.compare-grid { flex-direction: column; }
.arrow-icon { transform: rotate(90deg); }
.nav-links { display: none; }
}
</style>
</head>
<body>
<div class="container">
<!-- header -->
<nav class="navbar">
<div class="logo">blog<span>smith</span></div>
<div class="nav-links">
<a href="#">Features</a>
<a href="#">Testimonials</a>
<a href="#">Pricing</a>
<button class="btn-outline">Sign in</button>
<button class="btn-primary">Start free</button>
</div>
</nav>
<!-- hero -->
<section class="hero">
<div class="hero-content">
<div class="hero-badge"><i class="fas fa-bolt" style="margin-right: 6px;"></i> AI-POWERED BLOG GENERATOR</div>
<h1>From idea to <span class="accent">polished post</span> in minutes</h1>
<p>Turn rough thoughts into professional, ready-to-publish articles. Blogsmith uses advanced AI to structure, refine, and elevate your content.</p>
<div class="hero-cta">
<button class="btn-primary">Start writing free →</button>
<button class="btn-outline">Watch demo</button>
</div>
<div class="hero-note">✓ No credit card required · ✓ 5 free posts</div>
</div>
<div class="hero-visual">
<div class="compare-grid">
<div class="compare-card raw-idea">
<h4><i class="fas fa-lightbulb"></i> Raw idea</h4>
<div class="idea-text">"remote work productivity hacks – focus, async, no burnout, tools"</div>
</div>
<div class="arrow-icon"><i class="fas fa-arrow-right"></i></div>
<div class="compare-card polished-post">
<h4><i class="fas fa-file-alt"></i> Polished post</h4>
<div class="post-text">"Mastering Remote Work: 10 Proven Productivity Hacks for Distributed Teams"</div>
<div style="font-size:0.8rem; color:#4a4a5e; margin-top:8px;">✨ + 3 subheadings, intro, and CTA</div>
</div>
</div>
</div>
</section>
<!-- social proof -->
<div class="proof-bar">
<span>TRUSTED BY 2,000+ CONTENT TEAMS</span>
<div class="logos">
<span>Linear</span>
<span>Notion</span>
<span>Vercel</span>
<span>Framer</span>
</div>
</div>
<!-- features -->
<section class="features" id="features">
<h2 class="section-title">Everything you need to publish faster</h2>
<p class="section-sub">From first draft to final edit 、 Blogsmith handles the heavy lifting while you keep your voice.</p>
<div class="feature-grid">
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-magic"></i></div>
<h3>Idea-to-outline</h3>
<p>Drop a sentence, get a structured outline with headings, key points, and suggested angles.</p>
</div>
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-pen-fancy"></i></div>
<h3>Voice matching</h3>
<p>Train on your past posts. Blogsmith mimics your tone, style, and vocabulary.</p>
</div>
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-chart-line"></i></div>
<h3>SEO built-in</h3>
<p>Meta descriptions, keyword suggestions, and readability scores 、 all in real time.</p>
</div>
<div class="feature-item">
<div class="feature-icon"><i class="fas fa-bolt"></i></div>
<h3>One-click publish</h3>
<p>Export to WordPress, Medium, or Markdown. Your content, everywhere.</p>
</div>
</div>
</section>
<!-- testimonials -->
<section class="testimonials" id="testimonials">
<div class="container" style="padding:0;">
<h2 class="section-title">Loved by writers and marketers</h2>
<div class="testimonial-grid">
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>“I turned a messy voice memo into a published article in 12 minutes. It’s like having an editor on call.”</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/100?img=47" alt="avatar">
<div>
<div class="author-name">Maya Chen</div>
<div class="author-role">Content Lead, Linear</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>“The side-by-side preview is genius. I see exactly what the AI does with my raw thoughts.”</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/100?img=32" alt="avatar">
<div>
<div class="author-name">David Okafor</div>
<div class="author-role">Freelance Blogger</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
<blockquote>“We doubled our publishing cadence without hiring. Blogsmith is our secret weapon.”</blockquote>
<div class="author">
<img src="https://i.pravatar.cc/100?img=12" alt="avatar">
<div>
<div class="author-name">Sofia Reyes</div>
<div class="author-role">CMO, Framer</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- pricing -->
<section class="pricing" id="pricing">
<h2 class="section-title">Simple, transparent pricing</h2>
<p class="section-sub">Start free, upgrade when you’re ready. No hidden fees.</p>
<div class="pricing-grid">
<div class="pricing-card">
<div class="plan-name">Starter</div>
<div class="plan-price">$0 <span>/mo</span></div>
<ul class="plan-features">
<li><i class="fas fa-check"></i> 5 AI posts/month</li>
<li><i class="fas fa-check"></i> Basic voice matching</li>
<li><i class="fas fa-check"></i> Markdown export</li>
</ul>
<button class="btn-pricing">Start free</button>
</div>
<div class="pricing-card popular">
<div class="plan-name">Pro</div>
<div class="plan-price">$29 <span>/mo</span></div>
<ul class="plan-features">
<li><i class="fas fa-check"></i> Unlimited posts</li>
<li><i class="fas fa-check"></i> Advanced voice cloning</li>
<li><i class="fas fa-check"></i> SEO & readability</li>
<li><i class="fas fa-check"></i> WordPress / Medium</li>
</ul>
<button class="btn-pricing">Start 7-day trial</button>
</div>
<div class="pricing-card">
<div class="plan-name">Team</div>
<div class="plan-price">$79 <span>/mo</span></div>
<ul class="plan-features">
<li><i class="fas fa-check"></i> 5 team members</li>
<li><i class="fas fa-check"></i> Collaboration & comments</li>
<li><i class="fas fa-check"></i> Priority support</li>
</ul>
<button class="btn-pricing">Contact sales</button>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<h2>Your next post is 10x closer</h2>
<p>Join thousands of creators who turned scattered ideas into a content engine.</p>
<button class="btn-cta">Start creating 、 it’s free</button>
<div style="margin-top: 20px; font-size: 0.9rem; color: #b8b8d0;">No credit card required · Cancel anytime</div>
</section>
<footer>
© 2025 Blogsmith. All rights reserved. · <a href="#" style="color:#6b6b80;">Privacy</a> · <a href="#" style="color:#6b6b80;">Terms</a>
</footer>
</div>
</body>
</html>
ログインして完全なプロンプトを表示
次で続行:
ログインすると、次に同意したことになります： 利用規約 と プライバシーポリシー
使い方
このプロンプトは marketing 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。
最良の結果を得るには、プレースホルダー（角括弧や大文字で示された部分）を具体的な要件に置き換えてください。
ノート
0 件のコメント