mai
/
posimai-store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add design B — warm light theme for general audience

This commit is contained in:
posimai 2026-04-01 09:03:35 +09:00
parent 67fbecb244
commit fad8f01ce3
1 changed files with 658 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

658
index-b.html Normal file
View File

@ -0,0 +1,658 @@
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="description" content="Posimai — 日々の暮らしに、静かに寄り添うアプリ">
<meta name="theme-color" content="#FAFAF8">
<title>Posimai Store — B</title>
<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:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js" integrity="sha384-tTkFttkBclaU1cloKwOi9xk3pbao3VZxTjLNBt8iFABWDBQibbAbWpVmO28zMuxq" crossorigin="anonymous"></script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #FAFAF8;
--bg2: #F3F2EF;
--surface: #FFFFFF;
--border: rgba(0,0,0,0.08);
--border2: rgba(0,0,0,0.05);
--text: #1A1A1A;
--text2: #5A5A5A;
--text3: #9A9A9A;
--accent: #2D9B6B;
--accent-light: rgba(45,155,107,0.08);
--accent-border: rgba(45,155,107,0.2);
--warm: #F5F0E8;
--radius: 20px;
--radius-sm: 12px;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, sans-serif;
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
/* ── Nav ── */
nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
height: 60px;
background: rgba(250,250,248,0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
.nav-brand {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
}
.nav-brand span { color: var(--accent); }
.nav-links {
display: flex;
align-items: center;
gap: 24px;
}
.nav-links a {
font-size: 13px;
color: var(--text2);
transition: color 0.15s;
}
.nav-links a:hover { color: var(--text); }
/* ── Hero ── */
.hero {
max-width: 680px;
margin: 0 auto;
padding: 80px 28px 64px;
text-align: center;
}
.hero-tag {
display: inline-block;
font-size: 12px;
font-weight: 500;
color: var(--accent);
background: var(--accent-light);
border: 1px solid var(--accent-border);
padding: 4px 14px;
border-radius: 100px;
margin-bottom: 24px;
letter-spacing: 0.02em;
}
.hero h1 {
font-size: clamp(30px, 5vw, 48px);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1.2;
color: var(--text);
margin-bottom: 18px;
}
.hero h1 strong {
font-weight: 600;
}
.hero p {
font-size: 16px;
color: var(--text2);
max-width: 440px;
margin: 0 auto;
line-height: 1.8;
}
/* ── Section ── */
.section {
max-width: 880px;
margin: 0 auto;
padding: 0 28px 72px;
}
.section-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text3);
margin-bottom: 28px;
}
/* ── Featured card ── */
.featured-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 2px 24px rgba(0,0,0,0.06);
}
.featured-top {
padding: 40px 40px 32px;
display: flex;
flex-direction: column;
gap: 24px;
}
.app-header {
display: flex;
align-items: center;
gap: 16px;
}
.app-icon-wrap {
width: 56px;
height: 56px;
border-radius: 16px;
background: linear-gradient(135deg, #e8f5f0, #c8e8da);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
flex-shrink: 0;
border: 1px solid var(--accent-border);
}
.app-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.app-subtitle { font-size: 13px; color: var(--text3); margin-top: 2px; }
.app-copy {
font-size: 15px;
color: var(--text2);
line-height: 1.8;
max-width: 520px;
}
.features-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.feature-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text2);
background: var(--bg2);
border: 1px solid var(--border);
padding: 5px 12px;
border-radius: 100px;
}
.feature-pill svg { color: var(--accent); }
/* ── Pricing row ── */
.pricing-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--border);
}
@media (max-width: 560px) {
.pricing-row { grid-template-columns: 1fr; }
.featured-top { padding: 28px 24px; }
}
.plan {
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 14px;
}
.plan + .plan {
border-left: 1px solid var(--border);
background: #F7FBF9;
}
@media (max-width: 560px) {
.plan + .plan { border-left: none; border-top: 1px solid var(--border); }
}
.plan-name {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text3);
}
.plan.paid .plan-name { color: var(--accent); }
.plan-price {
font-size: 32px;
font-weight: 300;
letter-spacing: -0.04em;
line-height: 1;
color: var(--text);
}
.plan-price sup {
font-size: 15px;
font-weight: 500;
vertical-align: super;
}
.plan-note {
font-size: 12px;
color: var(--text3);
line-height: 1.6;
}
.plan-limits {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
}
.plan-limits li {
font-size: 13px;
color: var(--text2);
display: flex;
align-items: center;
gap: 7px;
}
.plan-limits li svg { flex-shrink: 0; }
.plan-limits li.dim { color: var(--text3); }
.plan-limits li.dim svg { opacity: 0.4; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 11px 20px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
transition: all 0.15s;
width: 100%;
}
.btn-outline {
border: 1px solid var(--border);
color: var(--text2);
background: var(--surface);
}
.btn-outline:hover { border-color: rgba(0,0,0,0.2); color: var(--text); }
.btn-primary {
background: var(--accent);
color: #fff;
border: 1px solid transparent;
}
.btn-primary:hover { opacity: 0.88; }
/* ── How it works ── */
.steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 600px) {
.steps { grid-template-columns: 1fr; }
}
.step {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.step-num {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--accent-light);
border: 1px solid var(--accent-border);
color: var(--accent);
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.step-title { font-size: 14px; font-weight: 600; }
.step-desc { font-size: 13px; color: var(--text2); line-height: 1.6; }
/* ── Coming soon ── */
.mini-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.mini-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.mini-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--bg2);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--text2);
}
.mini-name { font-size: 14px; font-weight: 500; }
.mini-desc { font-size: 12px; color: var(--text3); line-height: 1.6; }
.badge-soon {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--text3);
background: var(--bg2);
border: 1px solid var(--border);
padding: 3px 10px;
border-radius: 100px;
width: fit-content;
}
/* ── Brand message ── */
.message {
background: var(--warm);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--radius);
padding: 48px 40px;
text-align: center;
max-width: 880px;
margin: 0 auto 72px;
}
.message p {
font-size: 17px;
font-weight: 300;
line-height: 1.9;
color: var(--text2);
max-width: 560px;
margin: 0 auto;
}
.message p strong { font-weight: 500; color: var(--text); }
/* ── Divider ── */
.divider {
max-width: 880px;
margin: 0 auto 72px;
padding: 0 28px;
border-top: 1px solid var(--border);
}
/* ── Footer ── */
footer {
border-top: 1px solid var(--border);
padding: 32px 28px;
background: var(--surface);
}
.footer-inner {
max-width: 880px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.footer-copy { font-size: 12px; color: var(--text3); }
.footer-links { display: flex; gap: 20px; }
.footer-links a {
font-size: 12px;
color: var(--text3);
transition: color 0.15s;
}
.footer-links a:hover { color: var(--text2); }
</style>
</head>
<body>
<!-- Nav -->
<nav>
<div class="nav-brand">Posimai <span>Store</span></div>
<div class="nav-links">
<a href="#how">使い方</a>
<a href="#apps">アプリ一覧</a>
</div>
</nav>
<!-- Hero -->
<section class="hero">
<div class="hero-tag">広告なし・サブスクなし</div>
<h1>使いやすく、<strong>ずっと使える</strong>アプリを。</h1>
<p>記録が続かないのはアプリのせいかもしれません。<br>Posimaiは余計な機能を省いた、シンプルなアプリです。</p>
</section>
<!-- Featured -->
<section class="section">
<div class="section-label">注目アプリ</div>
<div class="featured-card">
<div class="featured-top">
<div class="app-header">
<div class="app-icon-wrap">
<i data-lucide="wine" style="width:24px;height:24px;"></i>
</div>
<div>
<div class="app-title">Ponshu Room</div>
<div class="app-subtitle">日本酒記録アプリ</div>
</div>
</div>
<p class="app-copy">
飲んだ日本酒を記録して、自分だけのお酒手帳を育てるアプリ。
難しい操作なし。飲んだお酒を選んで、感想をメモするだけ。
産地マップや味の傾向グラフで、好みの一本が見つかります。
</p>
<div class="features-row">
<span class="feature-pill">
<i data-lucide="check" style="width:12px;height:12px;"></i>
記録・評価・メモ
</span>
<span class="feature-pill">
<i data-lucide="check" style="width:12px;height:12px;"></i>
産地マップ
</span>
<span class="feature-pill">
<i data-lucide="check" style="width:12px;height:12px;"></i>
味のグラフ
</span>
<span class="feature-pill">
<i data-lucide="check" style="width:12px;height:12px;"></i>
広告なし
</span>
</div>
</div>
<div class="pricing-row">
<div class="plan free">
<div class="plan-name">無料で試す</div>
<div class="plan-price">¥0</div>
<ul class="plan-limits">
<li>
<i data-lucide="check" style="width:14px;height:14px;color:var(--accent);"></i>
記録10件まで
</li>
<li>
<i data-lucide="check" style="width:14px;height:14px;color:var(--accent);"></i>
すべての機能を試せる
</li>
<li class="dim">
<i data-lucide="minus" style="width:14px;height:14px;"></i>
記録上限あり
</li>
</ul>
<a href="#" class="btn btn-outline">
<i data-lucide="smartphone" style="width:14px;height:14px;"></i>
無料で使ってみる
</a>
</div>
<div class="plan paid">
<div class="plan-name">フル機能</div>
<div class="plan-price"><sup>¥</sup>500</div>
<div class="plan-note">一度の購入で、ずっと使えます</div>
<ul class="plan-limits">
<li>
<i data-lucide="check" style="width:14px;height:14px;color:var(--accent);"></i>
記録無制限
</li>
<li>
<i data-lucide="check" style="width:14px;height:14px;color:var(--accent);"></i>
AI分析・詳細グラフ
</li>
<li>
<i data-lucide="check" style="width:14px;height:14px;color:var(--accent);"></i>
今後の新機能も含む
</li>
</ul>
<a href="#" class="btn btn-primary">
<i data-lucide="credit-card" style="width:14px;height:14px;"></i>
¥500 で購入する
</a>
</div>
</div>
</div>
</section>
<div class="divider" id="how"></div>
<!-- How it works -->
<section class="section">
<div class="section-label">使い方</div>
<div class="steps">
<div class="step">
<div class="step-num">1</div>
<div class="step-title">無料で始める</div>
<div class="step-desc">メールアドレスだけで登録できます。クレジットカード不要。</div>
</div>
<div class="step">
<div class="step-num">2</div>
<div class="step-title">記録してみる</div>
<div class="step-desc">飲んだお酒を選んで、ひとことメモするだけ。10件まで無料で使えます。</div>
</div>
<div class="step">
<div class="step-num">3</div>
<div class="step-title">気に入ったら</div>
<div class="step-desc">続けたいと思ったら¥500で解放。一度の購入でずっと使えます。</div>
</div>
</div>
</section>
<div class="divider" id="apps"></div>
<!-- Coming soon -->
<section class="section">
<div class="section-label">準備中のアプリ</div>
<div class="mini-grid">
<div class="mini-card">
<div class="mini-icon">
<i data-lucide="brain" style="width:16px;height:16px;"></i>
</div>
<div class="mini-name">Brain</div>
<div class="mini-desc">気になった記事を保存するだけ。AIが整理してくれます。</div>
<span class="badge-soon">
<i data-lucide="clock" style="width:10px;height:10px;"></i>
準備中
</span>
</div>
<div class="mini-card">
<div class="mini-icon">
<i data-lucide="check-square" style="width:16px;height:16px;"></i>
</div>
<div class="mini-name">Habit</div>
<div class="mini-desc">毎日の習慣を、シンプルにチェックするだけ。</div>
<span class="badge-soon">
<i data-lucide="clock" style="width:10px;height:10px;"></i>
準備中
</span>
</div>
<div class="mini-card">
<div class="mini-icon">
<i data-lucide="activity" style="width:16px;height:16px;"></i>
</div>
<div class="mini-name">Pulse</div>
<div class="mini-desc">今日の気分を記録して、自分の波を知る。</div>
<span class="badge-soon">
<i data-lucide="clock" style="width:10px;height:10px;"></i>
準備中
</span>
</div>
</div>
</section>
<!-- Brand message -->
<div class="message" style="padding-left:28px;padding-right:28px;">
<p>
Posimaiのアプリは、<strong>使い続けられること</strong>を一番に考えています。<br>
通知で呼び戻す仕掛けも、データを売る仕組みも、持ちません。<br>
あなたの記録は、あなただけのものです。
</p>
</div>
<!-- Footer -->
<footer>
<div class="footer-inner">
<div class="footer-copy">&copy; 2026 Posimai</div>
<div class="footer-links">
<a href="https://posimai.soar-enrich.com/legal/privacy" target="_blank" rel="noopener">プライバシーポリシー</a>
<a href="https://posimai.soar-enrich.com/legal/terms" target="_blank" rel="noopener">利用規約</a>
<a href="https://posimai.soar-enrich.com/legal/tokusho" target="_blank" rel="noopener">特定商取引法</a>
</div>
</div>
</footer>
<script>
if (window.lucide) lucide.createIcons();
</script>
</body>
</html>