アプリ画面 · アプリUI
1画面を大きく見せる資産管理アプリの紹介
端末を1台だけ大きく置き、周囲にUIの断片を浮かせるアプリ紹介セクション。数字そのものを主役にする構図で、家計簿・投資・ヘルスケアなど「自分の数値」を扱うアプリに向く設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/fintech-app-showcase/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
資産管理アプリのランディングページのヒーローセクションを作ってください。 要件: - 配色: 背景 #0a0d14 の暗色、文字 #e8ecf4、補助文字 #99a3b8。 アクセントは藍 #6366f1 と水色 #22d3ee の2色だけに絞る。 増加は緑 #34d399、減少は赤 #f87171 で、金額の符号と必ず連動させる。 - 構成: 左に文章、右にスマートフォンを1台。940px 未満では縦積み。 - 端末は9:19の縦長で角丸44px、上部にノッチ。3度ほど傾けて置く。 影は下方向に長く落とし、端末が浮いて見えるようにする。 - 端末の中身は「資産の合計」を最上部に大きく置き、その下に前月比、 折れ線グラフ、期間の切替、直近3件の入出金、最下部にタブバー。 - 端末の外側に、UIの一部を抜き出した小さなカードを3枚だけ浮かせる。 各カードは「見出し1行 + 数値1行」に留め、文章は入れない。 - 数値は等幅フォントで組み、3桁区切りと通貨記号を必ず付ける。 - 見出しは2行で収まる長さにする。日本語の letter-spacing は 0、 line-height は見出し1.4・本文1.85。 - 背景に88px間隔の細いグリッドを敷き、中央から外側へ向けて薄く消す。 - 実績値は3つだけ（連携口座数・評価・利用料）を下部に横並びで置く。 - HTML + CSS のみ。画像は使わず、グラフはインラインSVGで描く。
バリエーション
明るい配色に変える
同じ構成のまま、背景を #f7f8fa の明色に置き換えてください。 端末のフレームだけは暗色のまま残し、画面内は白背景にします。 グロー表現は使わず、影の距離を短くして紙のような質感にしてください。 アクセントは藍1色に減らし、水色は使いません。
端末を2台にする
端末を2台にし、手前に1台・奥に1台を重ねて配置してください。 手前は「資産の合計」画面、奥は「予算」画面にします。 奥の端末は少しだけ小さく、彩度と明度を落として後退させます。 浮かせるカードは3枚から2枚に減らし、情報量の増加を相殺してください。
健康アプリに置き換える
題材を資産管理から睡眠記録に変えてください。 合計金額の位置には「平均睡眠時間 7時間12分」を置き、 折れ線は1週間の推移、入出金の一覧は就寝・起床の記録に読み替えます。 増減の色は緑と赤ではなく、藍と橙にして良し悪しの断定を避けてください。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空のアプリの紹介画面です。端末の画面・口座・残高・評価・利用人数・効果は固定の表示例です。アプリ配布・口座開設・金融取引・認証・外部接続は行いません。
コードを表示
<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>資産管理アプリの単画面ヒーロー — Vibehaus プレビュー</title>
<style>
:root {
--ink: #e8ecf4;
--muted: #99a3b8;
--quiet: #6b7488;
--bg: #0a0d14;
--panel: #111621;
--line: rgba(232, 236, 244, 0.1);
--up: #34d399;
--down: #f87171;
--brand: #6366f1;
--brand-2: #22d3ee;
--font: "Inter", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
--mono: "SFMono-Regular", Consolas, "Roboto Mono", ui-monospace,
"Hiragino Kaku Gothic ProN", "Yu Gothic", monospace;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
line-height: 1.8;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
min-height: 100dvh;
position: relative;
overflow-x: hidden;
}
/* 背景: 中央やや右に置いた広いグロー。端末を光源に見せる */
body::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 50% at 72% 30%, rgba(99, 102, 241, 0.22), transparent 70%),
radial-gradient(45% 45% at 88% 72%, rgba(34, 211, 238, 0.12), transparent 70%);
pointer-events: none;
}
/* 細いグリッド。データプロダクトの規律を背景で示す */
body::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 88px 88px;
mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
opacity: 0.5;
pointer-events: none;
}
header.bar {
position: relative;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.35rem clamp(1rem, 4vw, 3rem);
}
.logo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-weight: 700;
font-size: 1.05rem;
line-height: 1.4;
}
.logo-mark {
width: 26px;
height: 26px;
border-radius: 8px;
background: linear-gradient(140deg, var(--brand), var(--brand-2));
flex: none;
}
.nav {
display: flex;
gap: 1.6rem;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.7;
}
.nav a { color: inherit; text-decoration: none; }
.nav a:hover { color: var(--ink); }
.bar .cta {
border: 1px solid var(--line);
background: rgba(232, 236, 244, 0.06);
color: var(--ink);
border-radius: 999px;
padding: 0.5rem 1.1rem;
font-size: 0.88rem;
font-weight: 600;
line-height: 1.7;
text-decoration: none;
white-space: nowrap;
}
@media (max-width: 860px) { .nav { display: none; } }
.layout {
position: relative;
z-index: 5;
max-width: 1240px;
margin: 0 auto;
padding: clamp(0.5rem, 2vw, 1.5rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.5rem, 5vw, 4rem);
align-items: center;
}
@media (min-width: 940px) {
.layout { grid-template-columns: 1fr 1fr; }
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
color: var(--brand-2);
text-transform: uppercase;
margin: 0 0 1.1rem;
line-height: 1.7;
}
.eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--up);
box-shadow: 0 0 10px var(--up);
}
h1 {
margin: 0 0 1.3rem;
/* 和文見出しは1行の文字数で折り返しが決まる。上限を欲張ると
「〜ように。」の末尾だけが3行目に落ちるので抑えめに取る。 */
font-size: clamp(2rem, 3.9vw, 3rem);
font-weight: 800;
line-height: 1.4;
letter-spacing: 0;
}
h1 .accent {
background: linear-gradient(100deg, var(--brand-2), var(--brand));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lede {
margin: 0 0 2.2rem;
color: var(--muted);
font-size: 1.03rem;
line-height: 1.85;
max-width: 46ch;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.4rem; }
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border-radius: 12px;
padding: 0.85rem 1.4rem;
font-size: 0.94rem;
font-weight: 700;
line-height: 1.7;
text-decoration: none;
border: 1px solid transparent;
}
.btn.primary {
background: linear-gradient(135deg, var(--brand), #4f46e5);
color: #fff;
box-shadow: 0 14px 34px -14px rgba(99, 102, 241, 0.9);
}
.btn.ghost { border-color: var(--line); color: var(--ink); }
.proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
padding-top: 1.6rem;
border-top: 1px solid var(--line);
}
.proof b {
display: block;
font-family: var(--mono);
font-size: clamp(1.25rem, 2.4vw, 1.6rem);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
}
.proof span {
font-size: 0.79rem;
color: var(--quiet);
line-height: 1.7;
}
/* ---- 端末 ---- */
.stage {
position: relative;
display: flex;
justify-content: center;
padding-block: 1rem;
}
.phone {
position: relative;
width: min(330px, 78vw);
aspect-ratio: 9 / 19;
border-radius: 44px;
padding: 11px;
background: linear-gradient(160deg, #2a3142, #12161f 55%);
box-shadow:
0 60px 120px -40px rgba(0, 0, 0, 0.95),
0 0 0 1px rgba(232, 236, 244, 0.09);
transform: rotate(-3deg);
}
.screen {
height: 100%;
border-radius: 34px;
background: linear-gradient(180deg, #0f1420, #0b0f18);
overflow: hidden;
display: flex;
flex-direction: column;
padding: 1.5rem 1.15rem 1.15rem;
gap: 1rem;
}
.notch {
position: absolute;
top: 20px; left: 50%;
transform: translateX(-50%);
width: 96px; height: 22px;
border-radius: 999px;
background: #0a0d14;
z-index: 2;
}
.scr-top {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--quiet);
font-family: var(--mono);
font-size: 0.66rem;
line-height: 1.7;
padding-top: 0.5rem;
}
.balance-label {
color: var(--quiet);
font-size: 0.72rem;
line-height: 1.7;
margin: 0.4rem 0 0.2rem;
}
.balance {
font-family: var(--mono);
font-size: 2rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0;
margin: 0;
}
.delta {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--up);
font-size: 0.76rem;
line-height: 1.7;
margin-top: 0.15rem;
}
.chart {
height: 96px;
border-radius: 14px;
background: rgba(99, 102, 241, 0.08);
border: 1px solid rgba(99, 102, 241, 0.18);
position: relative;
overflow: hidden;
flex: none;
}
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seg {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
background: rgba(232, 236, 244, 0.05);
border-radius: 10px;
padding: 3px;
font-size: 0.7rem;
line-height: 1.7;
text-align: center;
color: var(--quiet);
flex: none;
}
.seg span { padding: 0.3rem 0; border-radius: 7px; }
.seg .on { background: rgba(232, 236, 244, 0.12); color: var(--ink); font-weight: 600; }
.rows { display: flex; flex-direction: column; gap: 0.55rem; }
.row {
display: grid;
grid-template-columns: 30px 1fr auto;
align-items: center;
gap: 0.65rem;
background: rgba(232, 236, 244, 0.04);
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.6rem 0.7rem;
}
.row .ic {
width: 30px; height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 0.8rem;
}
.row .nm { font-size: 0.78rem; font-weight: 600; line-height: 1.6; }
.row .sub { font-size: 0.66rem; color: var(--quiet); line-height: 1.6; }
.row .amt { font-family: var(--mono); font-size: 0.78rem; line-height: 1.6; }
.amt.up { color: var(--up); }
.amt.down { color: var(--down); }
.tabbar {
margin-top: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
border-top: 1px solid var(--line);
padding-top: 0.75rem;
text-align: center;
font-size: 0.6rem;
color: var(--quiet);
line-height: 1.7;
}
.tabbar .on { color: var(--brand-2); }
.tabbar i {
display: block;
width: 16px; height: 16px;
margin: 0 auto 0.2rem;
border-radius: 5px;
background: currentColor;
opacity: 0.75;
}
/* 端末の外に置く実データ断片。UIの一部を拡大して信頼を補強する */
.chip {
position: absolute;
z-index: 7;
background: rgba(17, 22, 33, 0.92);
border: 1px solid var(--line);
border-radius: 14px;
padding: 0.7rem 0.85rem;
box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.95);
backdrop-filter: blur(8px);
font-size: 0.74rem;
line-height: 1.7;
white-space: nowrap;
}
.chip .k { color: var(--quiet); font-size: 0.66rem; line-height: 1.6; }
.chip .v { font-family: var(--mono); font-weight: 700; font-size: 0.92rem; line-height: 1.5; }
.chip-1 { top: 12%; left: -4%; }
.chip-2 { bottom: 26%; right: -6%; }
.chip-3 { bottom: 34%; left: -4%; }
@media (max-width: 620px) { .chip-1, .chip-2, .chip-3 { display: none; } }
[hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#0b1020;color:#eef2ff;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
.layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.copy,.stage{min-width:0}
.phone{max-width:100%}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}
}
.chip-2{right:0}
.chip-1,.chip-3{left:0}
header.bar nav{display:flex;flex-wrap:wrap;gap:.5rem}header.bar nav a{letter-spacing:0}
</style>
</head>
<body>
<header class="bar">
<div class="logo"><span class="logo-mark" aria-hidden="true"></span>Kanaha</div>
<nav class="nav">
<a href="#demo-link-0">機能</a>
<a href="#demo-link-1">手数料</a>
<a href="#demo-link-2">安全性</a>
<a href="#demo-link-3">よくある質問</a>
</nav>
<a class="cta" href="#demo-link-4">口座をひらく</a>
</header>
<div class="layout">
<div class="copy">
<p class="eyebrow"><span class="dot" aria-hidden="true"></span>資産管理アプリ</p>
<h1>数字を、<br /><span class="accent">迷いなく読める</span>ように。</h1>
<p class="lede">
口座・証券・年金をひとつの画面にまとめ、増減の理由まで日本語で表示します。金融の知識がなくても、いま何が起きているかが分かります。
</p>
<div class="actions">
<a class="btn primary" href="#demo-link-5">無料ではじめる</a>
<a class="btn ghost" href="#demo-link-6">機能を見る</a>
</div>
<div class="proof">
<div><b>82万</b><span>連携口座数</span></div>
<div><b>4.8</b><span>App Store 評価</span></div>
<div><b>¥0</b><span>基本利用料</span></div>
</div>
</div>
<div class="stage">
<div class="chip chip-1">
<div class="k">今月の支出</div>
<div class="v">¥182,400</div>
</div>
<div class="chip chip-2">
<div class="k">積立の到達率</div>
<div class="v">68%</div>
</div>
<div class="chip chip-3">
<div class="k">連携済み</div>
<div class="v">6 口座</div>
</div>
<div class="phone">
<div class="notch" aria-hidden="true"></div>
<div class="screen">
<div class="scr-top"><span>9:41</span><span>5G</span></div>
<div>
<p class="balance-label">資産の合計</p>
<p class="balance">¥4,182,600</p>
<span class="delta">▲ ¥62,300（先月比 +1.5%）</span>
</div>
<div class="chart">
<svg viewBox="0 0 300 96" preserveAspectRatio="none" aria-hidden="true">
<defs>
<linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6366f1" stop-opacity="0.5" />
<stop offset="100%" stop-color="#6366f1" stop-opacity="0" />
</linearGradient>
</defs>
<path d="M0 74 L38 66 L76 70 L114 52 L152 58 L190 38 L228 44 L266 24 L300 18 L300 96 L0 96 Z" fill="url(#fill)" />
<path d="M0 74 L38 66 L76 70 L114 52 L152 58 L190 38 L228 44 L266 24 L300 18" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linejoin="round" />
</svg>
</div>
<div class="seg">
<span>1か月</span><span class="on">6か月</span><span>1年</span><span>全期間</span>
</div>
<div class="rows">
<div class="row">
<span class="ic" style="background: rgba(52, 211, 153, 0.16)">積</span>
<span><span class="nm">つみたて投資</span><br /><span class="sub">毎月 25 日・自動</span></span>
<span class="amt up">+¥33,000</span>
</div>
<div class="row">
<span class="ic" style="background: rgba(99, 102, 241, 0.18)">給</span>
<span><span class="nm">給与の入金</span><br /><span class="sub">きのう</span></span>
<span class="amt up">+¥284,000</span>
</div>
<div class="row">
<span class="ic" style="background: rgba(248, 113, 113, 0.16)">家</span>
<span><span class="nm">住居費の引落</span><br /><span class="sub">8 月 12 日</span></span>
<span class="amt down">−¥96,000</span>
</div>
</div>
<div class="tabbar">
<span class="on"><i aria-hidden="true"></i>ホーム</span>
<span><i aria-hidden="true"></i>資産</span>
<span><i aria-hidden="true"></i>予算</span>
<span><i aria-hidden="true"></i>設定</span>
</div>
</div>
</div>
</div>
</div>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空のアプリの紹介画面です。端末の画面・口座・残高・評価・利用人数・効果は固定の表示例です。アプリ配布・口座開設・金融取引・認証・外部接続は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>機能の見本</h3>
<p>機能・導入条件を説明する入口の位置です。アプリの取得・登録・口座連携・問い合わせは実装していません。</p>
</section>
<section id="demo-link-1" tabindex="-1">
<h3>手数料の見本</h3>
<p>機能・導入条件を説明する入口の位置です。アプリの取得・登録・口座連携・問い合わせは実装していません。</p>
</section>
<section id="demo-link-2" tabindex="-1">
<h3>安全性の見本</h3>
<p>機能・導入条件を説明する入口の位置です。アプリの取得・登録・口座連携・問い合わせは実装していません。</p>
</section>
<section id="demo-link-3" tabindex="-1">
<h3>よくある質問の見本</h3>
<p>機能・導入条件を説明する入口の位置です。アプリの取得・登録・口座連携・問い合わせは実装していません。</p>
</section>
<section id="demo-link-4" tabindex="-1">
<h3>口座をひらくの見本</h3>
<p>機能・導入条件を説明する入口の位置です。アプリの取得・登録・口座連携・問い合わせは実装していません。</p>
</section>
<section id="demo-link-5" tabindex="-1">
<h3>無料ではじめるの見本</h3>
<p>機能・導入条件を説明する入口の位置です。アプリの取得・登録・口座連携・問い合わせは実装していません。</p>
</section>
<section id="demo-link-6" tabindex="-1">
<h3>機能を見るの見本</h3>
<p>機能・導入条件を説明する入口の位置です。アプリの取得・登録・口座連携・問い合わせは実装していません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
スマートフォンのアプリを Web で紹介するとき、端末の写真を何台並べるかは古くからの論点です。2007年に iPhone が登場して以来、アプリのプロダクトサイトは「端末のフレームの中に画面を見せる」形式へ急速に収束しました。そこから分かれた二つの型が、複数画面を扇状に広げるコラージュ型と、1台だけを大きく据える単画面ヒーロー型です。金融や計測を扱うアプリが後者を選ぶのには、はっきりした理由があります。
数字は、大きくないと数字にならない
家計簿や投資のアプリを検討している人が最初に知りたいのは、機能の一覧ではありません。「自分のお金がどう見えるのか」です。ところが端末を3台並べると、1台あたりの幅は3分の1になり、金額の桁が潰れて読めなくなります。並べた瞬間に、いちばん見せたかったものが見えなくなるわけです。1台を大きく置き、周囲に数値の断片だけを浮かせる構図は、主題と補足を視線の順序で分けるための配置です。浮かせるカードに文章を入れないのも同じ理由で、あれは読ませるためではなく、画面の外にも情報があると示すための記号です。
崩れる形端末を3台並べる
1台あたりの幅が3分の1になり、金額の桁が潰れて読めなくなります。機能の多さは伝わっても、検討中の人がいちばん知りたい数字が消えます。
効く形1台を大きく据える
中心の数値が原寸で読めます。周囲に浮かせるカードは読ませるためではなく、画面の外にも情報があると示すための記号として置きます。
向く題材と、向かない題材
この型が効くのは、1画面で価値を語り切れるプロダクトに限られます。資産の合計、睡眠時間、走行距離のように、中心に据えるべき数値が一つに定まる場合です。逆に、機能が多岐にわたって画面ごとに役割が違うアプリ——交流サービスや総合的な買い物アプリ——では、1画面を大きく見せても製品の全体像が伝わりません。そういう題材には、素直にコラージュ型かタブ切替型を使うべきです。
仕上げで効いてくるところ
数値は等幅で組んでください。桁が揃うだけで、集計された値だという印象が生まれます。
増減には符号と色を必ず両方付けてください。色だけに頼ると、色覚特性によっては増減が反転して伝わります。
そして暗い配色では、最も薄い補助文字が背景に沈みやすい。装飾を詰める前に、いちばん読みにくい一行のコントラストを先に確かめておくと、後から全体を作り直さずに済みます。
見本で試せる範囲
架空のアプリの紹介画面です。端末の画面・口座・残高・評価・利用人数・効果は固定の表示例です。アプリ配布・口座開設・金融取引・認証・外部接続は行いません。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。
アプリ画面の構成要素
使いどころ
- 家計簿・投資・ヘルスケアなど「自分の数値」を見せるアプリの紹介
- 画面1枚でプロダクトの価値が伝わるアプリのランディングページ
- 数値の信頼性そのものが訴求点になる金融・計測系サービス
- App Store・Google Play への導線を1画面に集約したいとき
このデザインの分類
背景と狙いどころ
よくある質問
端末を1台だけにするのは寂しく見えませんか。
台数ではなく、画面内の情報密度で持たせます。合計・推移・明細の3層を1画面に収めると、端末1台でも見るものは十分にあります。逆に3台並べると1台あたりの幅が3分の1になり、このデザインの主役である数字が読めなくなります。
ダミーの数値はどう決めればいいですか。
実在しそうな桁と端数にしてください。¥4,182,600 のように半端な数にすると本物らしく見えますが、¥5,000,000 のような切りのいい数はサンプルだと一目で分かります。増減の符号と色も必ず一致させてください。
暗い配色だと読みにくくなりませんか。
本文の色を
グラフは画像で用意してもいいですか。
インラインSVGを勧めます。数十行で書けるうえ、配色を変えるときにCSS変数だけで追随できます。画像にすると配色変更のたびに書き出し直しになり、ダークとライトの両対応も面倒になります。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
3画面を重ねるアプリUI
モバイルアプリのプロダクトサイト向けに、傾けた3枚のスマホフレームに UI スクリーンを並べるショーケース。フィットネス・健康・SaaS モバイルアプリの定番表現を CSS だけで構築する尖った設計。
霧の風景ヒーロー
藍色の山と霧の生成背景に、日本語の見出しと淡い緑のボタンを重ねたヒーロー。PCは横長、スマホは縦長の画像に切り替え、暗いグラデーションで文字を読みやすくする。画像入りのHTMLも無料で配布。
寒色グラデーションのAIツール機能紹介
紺の地に水色から藍色へのグラデーションを重ねた、AI議事録ツールの機能紹介セクション。見出しの一部だけを文字の幅で塗り、大きなカード1枚と小さなカード3枚で「何がどれだけ減るか」を数字と帯の長さで見せる。