アプリ画面 · アプリUI

3画面を重ねるアプリUI

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/app-screen-showcase/
完全無料・著作権フリー(CC0)· 料金¥0 · 商用利用・改変自由

プレビュー

画面に合わせる

指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。

vibe.itlibra.com/preview/app-screen-showcase/

AIへの指示文

モバイルアプリのプロダクトサイトのファーストビュー+画面ショーケースを作ってください。

要件:
- 配色: グラデ背景(淡い紫 #c4b5fd → ピンク #fda4af → ピーチ #fed7aa)。コンテンツは白+ダーク。
- 中央〜右に 3 枚のスマホフレーム(CSS で iPhone-like、内側角丸 36px、ノッチ)を傾けて重ねる。
- 各フレームには異なる UI スクリーンの簡略表現(ホーム / 詳細 / 設定など)を CSS のみで実装。
- 中央フレームを最前面、左右をやや後ろに 12-18 度傾ける。
- 左に大型見出し + サブテキスト + ストアバッジ風 CTA("App Store" / "Google Play" 風モノクロボタン)。
- 上部に評価★+ ダウンロード数のミニメトリクス。
- 浮遊する小さなUIピル(通知 / 通知バー / ハートアイコン)を背景に散らす。
- フォント: 見出し Inter Display、本文 Inter + Noto Sans JP。
- JS不要、フルレスポンシブ。スマホでは3画面を縦に1枚または2枚に。

バリエーション

ダーク版

背景を暗紺 #0e0e1a + ネオン青 / 紫グラデに。スマホフレームをガラスっぽく半透明化。
ナイト系・ゲーム系アプリ向け。

横並び版

スマホ3枚を傾斜なしで等間隔に水平配置。
フィーチャーフォーカス型のシンプル構成。

このプレビューのコード

HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。架空のアプリの紹介画面です。端末の画面・口座・残高・評価・利用人数・効果は固定の表示例です。アプリ配布・口座開設・金融取引・認証・外部接続は行いません。演出の停止とOSの動き低減に対応します。

CC0 · 改変・商用利用自由 · revision b7b3674c3732

コードを表示
<!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>スマホフレーム重ねの3画面アプリショーケース — Vibehaus プレビュー</title>
    <style>
      :root {
        --lav: #c4b5fd;
        --pink: #fda4af;
        --peach: #fed7aa;
        --ink: #1a1a2e;
        --muted: #5e5e7a;
        --quiet: #8a8aa3;
        --green: #10b981;
        --rose: #f43f5e;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; }
      body {
        font-family: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
          "Yu Gothic", sans-serif;
        background:
          radial-gradient(50% 60% at 80% 0%, rgba(196, 181, 253, 0.55), transparent 70%),
          radial-gradient(45% 55% at 100% 60%, rgba(253, 164, 175, 0.45), transparent 70%),
          radial-gradient(40% 50% at 20% 100%, rgba(254, 215, 170, 0.4), transparent 70%),
          #faf7f5;
        color: var(--ink);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        position: relative;
        overflow-x: hidden;
        min-height: 100dvh;
      }

      /* アプリ画面の上に浮かぶ通知ピル。.layout(z-index:5) より前面に置く。
         背面に回すと端末モックアップや見出しの裏に隠れて読めなくなる。 */
      .float {
        position: absolute;
        z-index: 6;
        font-family: "Inter", sans-serif;
        font-size: 0.78rem;
        background: white;
        border-radius: 12px;
        padding: 0.65rem 0.85rem;
        box-shadow: 0 14px 40px -12px rgba(26, 26, 46, 0.18);
        animation: floaty 6s ease-in-out infinite;
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
      }
      .float-1 {
        top: 16%; right: 8%;
        animation-delay: -1s;
      }
      .float-2 {
        top: 60%; left: 42%;
        animation-delay: -3s;
      }
      .float-3 {
        bottom: 18%; right: 12%;
        animation-delay: -2s;
      }
      .float .dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex: none;
      }
      .float-1 .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
      .float-2 .dot { background: var(--rose); box-shadow: 0 0 10px var(--rose); }
      .float-3 .dot { background: var(--lav); box-shadow: 0 0 10px var(--lav); }
      .float strong { font-weight: 700; }
      .float small { color: var(--quiet); font-size: 0.7rem; }
      @keyframes floaty {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-12px); }
      }
      @media (max-width: 720px) {
        .float-1, .float-2, .float-3 { display: none; }
      }

      header.bar {
        position: relative;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
      }
      .logo {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        font-weight: 800;
        font-size: 1.1rem;
        letter-spacing: -0.02em;
      }
      .logo::before {
        content: "";
        width: 24px; height: 24px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--lav), var(--pink), var(--peach));
        box-shadow: 0 4px 14px -4px rgba(196, 181, 253, 0.6);
      }
      .nav {
        display: inline-flex;
        gap: 1.4rem;
        font-size: 0.9rem;
        color: var(--muted);
      }
      .nav a {
        color: inherit;
        text-decoration: none;
      }
      .nav a:hover { color: var(--ink); }
      @media (max-width: 720px) { .nav { display: none; } }

      .layout {
        position: relative;
        z-index: 5;
        max-width: 1280px;
        margin: 0 auto;
        padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        align-items: center;
      }
      @media (min-width: 880px) {
        .layout { grid-template-columns: 5fr 7fr; }
      }

      /* Left text column */
      .copy { padding-block: 1rem; }
      .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.4rem 0.85rem;
        background: white;
        border: 1px solid rgba(26, 26, 46, 0.12);
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 1.25rem;
      }
      .pill .stars { color: #f59e0b; letter-spacing: 0.05em; }
      .pill small { color: var(--quiet); font-weight: 500; }

      h1 {
        margin: 0 0 1.25rem;
        font-size: clamp(2.4rem, 5vw, 4rem);
        line-height: 1.35;
        letter-spacing: 0;
        font-weight: 800;
      }
      h1 :lang(ja) { letter-spacing: 0; line-height: 1.4; }
      h1 .grad {
        background: linear-gradient(135deg, #7c3aed 0%, #ec4899 60%, #f97316 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .lede {
        margin: 0 0 2rem;
        font-size: 1.1rem;
        line-height: 1.85;
        color: var(--muted);
        max-width: 50ch;
      }

      .stores {
        display: inline-flex;
        gap: 0.85rem;
        flex-wrap: wrap;
      }
      .store {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.7rem 1.2rem;
        background: var(--ink);
        color: white;
        text-decoration: none;
        border-radius: 12px;
        transition: transform 0.15s, box-shadow 0.15s;
      }
      .store:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px -10px rgba(26, 26, 46, 0.4);
      }
      .store .ic { font-size: 1.6rem; line-height: 0; }
      .store small {
        display: block;
        font-size: 0.66rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        opacity: 0.7;
      }
      .store strong {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.005em;
      }

      .stat-row {
        display: flex;
        gap: 2rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(26, 26, 46, 0.12);
        flex-wrap: wrap;
      }
      .stat-row .stat .num {
        display: block;
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.02em;
      }
      .stat-row .stat .lab {
        display: block;
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        color: var(--muted);
      }

      /* Phones — right column */
      .phones {
        position: relative;
        height: clamp(500px, 60vw, 640px);
      }
      .phone {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 240px;
        height: 500px;
        background: var(--ink);
        border-radius: 36px;
        padding: 6px;
        box-shadow:
          0 36px 80px -20px rgba(26, 26, 46, 0.45),
          0 0 0 2px rgba(0, 0, 0, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        animation: phone-float 8s ease-in-out infinite;
      }
      @keyframes phone-float {
        0%, 100% { transform: var(--pose) translateY(0); }
        50% { transform: var(--pose) translateY(-10px); }
      }
      .phone::before {
        /* notch */
        content: "";
        position: absolute;
        top: 12px; left: 50%;
        transform: translateX(-50%);
        width: 90px; height: 22px;
        background: var(--ink);
        border-radius: 14px;
        z-index: 2;
      }
      .phone .scrn {
        width: 100%;
        height: 100%;
        background: white;
        border-radius: 30px;
        overflow: hidden;
        position: relative;
      }

      .phone-l {
        --pose: translate(-130%, -50%) rotate(-12deg);
        transform: var(--pose);
        z-index: 1;
        animation-delay: -2s;
      }
      .phone-c {
        --pose: translate(-50%, -50%) rotate(0deg);
        transform: var(--pose);
        z-index: 3;
      }
      .phone-r {
        --pose: translate(30%, -50%) rotate(12deg);
        transform: var(--pose);
        z-index: 1;
        animation-delay: -4s;
      }

      /* Phone-l: meditation/timer screen */
      .scrn-l { background: linear-gradient(180deg, #c4b5fd 0%, #ddd6fe 100%); }
      .scrn-l .top {
        padding: 50px 20px 12px;
        font-size: 12px;
        color: var(--ink);
        font-weight: 700;
      }
      .scrn-l .top small { display: block; font-weight: 500; opacity: 0.6; font-size: 10px; margin-top: 2px; }
      .scrn-l .ring {
        margin: 30px auto;
        width: 160px; height: 160px;
        border-radius: 50%;
        background:
          conic-gradient(#7c3aed 0deg 240deg, rgba(255,255,255,0.4) 240deg 360deg);
        display: grid;
        place-items: center;
        position: relative;
      }
      .scrn-l .ring::before {
        content: "";
        position: absolute;
        inset: 12px;
        background: var(--lav);
        border-radius: 50%;
      }
      .scrn-l .ring .min {
        position: relative;
        z-index: 2;
        font-family: "Inter", sans-serif;
        font-size: 32px;
        font-weight: 800;
        color: var(--ink);
        letter-spacing: -0.03em;
      }
      .scrn-l .ring .lab {
        position: relative;
        z-index: 2;
        font-size: 9px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--ink);
        opacity: 0.65;
        margin-top: 4px;
      }
      .scrn-l .btn {
        display: block;
        margin: 20px 30px;
        padding: 14px;
        background: var(--ink);
        color: white;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.04em;
      }

      /* Phone-c: home/feed screen */
      .scrn-c { background: white; }
      .scrn-c .top {
        padding: 50px 18px 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .scrn-c .top h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0;
      }
      .scrn-c .top .av {
        width: 30px; height: 30px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--pink), var(--peach));
      }
      .scrn-c .greeting {
        padding: 6px 18px 18px;
        font-size: 12px;
        color: var(--muted);
      }
      .scrn-c .card {
        margin: 0 18px 12px;
        padding: 14px;
        background: linear-gradient(135deg, var(--lav) 0%, var(--pink) 100%);
        color: var(--ink);
        border-radius: 16px;
      }
      .scrn-c .card h4 {
        margin: 0 0 6px;
        font-size: 14px;
        font-weight: 700;
      }
      .scrn-c .card p {
        margin: 0 0 10px;
        font-size: 11px;
        line-height: 1.5;
        opacity: 0.85;
      }
      .scrn-c .card .progress {
        height: 6px;
        background: rgba(255, 255, 255, 0.45);
        border-radius: 999px;
        overflow: hidden;
      }
      .scrn-c .card .progress span {
        display: block;
        height: 100%;
        width: 65%;
        background: var(--ink);
        border-radius: 999px;
      }
      .scrn-c .row {
        margin: 0 18px 8px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .scrn-c .row .tile {
        background: rgba(26, 26, 46, 0.04);
        border-radius: 12px;
        padding: 10px;
      }
      .scrn-c .row .tile .ic {
        width: 24px; height: 24px;
        background: var(--peach);
        border-radius: 8px;
        margin-bottom: 6px;
      }
      .scrn-c .row .tile:nth-child(2) .ic { background: var(--lav); }
      .scrn-c .row .tile h5 {
        margin: 0 0 2px;
        font-size: 11px;
        font-weight: 700;
      }
      .scrn-c .row .tile small {
        font-size: 9px;
        color: var(--quiet);
      }
      .scrn-c .nav-bar {
        position: absolute;
        bottom: 12px; left: 12px; right: 12px;
        height: 48px;
        background: rgba(26, 26, 46, 0.95);
        border-radius: 24px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        backdrop-filter: blur(10px);
      }
      .scrn-c .nav-bar i {
        width: 18px; height: 18px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 4px;
        display: block;
      }
      .scrn-c .nav-bar i:nth-child(2) { background: white; }

      /* Phone-r: stats screen */
      .scrn-r { background: linear-gradient(180deg, #fef3c7 0%, #fed7aa 100%); }
      .scrn-r .top { padding: 50px 18px 14px; }
      .scrn-r .top h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 0; }
      .scrn-r .top small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
      .scrn-r .num-big {
        margin: 8px 18px 18px;
        font-size: 56px;
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1;
        color: var(--ink);
      }
      .scrn-r .num-big small {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        color: var(--green);
        margin-left: 6px;
        vertical-align: middle;
      }
      .scrn-r .chart {
        margin: 0 18px 18px;
        height: 80px;
        background: linear-gradient(180deg, transparent, rgba(26, 26, 46, 0.06));
        border-radius: 12px;
        position: relative;
      }
      .scrn-r .chart::before {
        content: "";
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 70%;
        background: linear-gradient(180deg, transparent, rgba(244, 63, 94, 0.55));
        clip-path: polygon(0 100%, 8% 60%, 18% 75%, 30% 35%, 42% 50%, 54% 25%, 66% 45%, 78% 18%, 90% 35%, 100% 10%, 100% 100%);
      }
      .scrn-r .legend {
        margin: 0 18px;
        display: flex;
        gap: 14px;
        font-size: 9px;
        color: var(--muted);
      }
      .scrn-r .legend i {
        display: inline-block;
        width: 8px; height: 8px;
        border-radius: 2px;
        background: var(--rose);
        margin-right: 4px;
        vertical-align: middle;
      }
      .scrn-r .legend span:nth-child(2) i { background: var(--green); }

      @media (max-width: 879px) {
        .phones { height: clamp(400px, 110vw, 520px); }
        .phone { width: 200px; height: 410px; }
        .phone-l { --pose: translate(-110%, -50%) rotate(-10deg); }
        .phone-r { --pose: translate(10%, -50%) rotate(10deg); }
      }
      @media (max-width: 540px) {
        .phones { height: 460px; }
        .phone-l, .phone-r { display: none; }
        .phone-c { --pose: translate(-50%, -50%); }
      }
      @media (prefers-reduced-motion: reduce) {
        .phone, .float { animation: 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:#f6f1e8;color:#211c17;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}
}
html[data-demo-paused] *,html[data-demo-paused] *::before,html[data-demo-paused] *::after{animation-play-state:paused!important}
html[data-demo-paused] .ticker p{animation:none!important;padding-left:8px;white-space:normal}
.pill small,.float small{color:#626278}
.scrn-l .top small{color:#626278}
@media(min-width:761px) and (max-width:1100px){.layout{grid-template-columns:minmax(0,1fr)}
.phones{width:min(700px,100%);margin-inline:auto}
}
.scrn-l .top small{opacity:1}
header.bar nav{display:flex;flex-wrap:wrap;gap:.5rem}header.bar nav a{letter-spacing:0}
</style>
  <noscript><style>*,*::before,*::after{animation:none!important}.ticker p{padding-left:8px;white-space:normal}</style></noscript>
</head>
  <body>
    <div class="float float-1" aria-hidden="true">
      <span class="dot"></span>
      <div>
        <strong>+12 名がレッスン中</strong>
        <small>5 分前にスタート</small>
      </div>
    </div>
    <div class="float float-2" aria-hidden="true">
      <span class="dot"></span>
      <div>
        <strong>♥ 184</strong>
        <small>今日の応援</small>
      </div>
    </div>
    <div class="float float-3" aria-hidden="true">
      <span class="dot"></span>
      <div>
        <strong>連続 14 日達成</strong>
        <small>記録更新中 ✦</small>
      </div>
    </div>

    <header class="bar">
      <div class="logo">Aurora</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>
    </header>

    <div class="layout">
      <div class="copy">
        <span class="pill"><span class="stars">★ ★ ★ ★ ★</span> 4.9 <small>· App Store / 18,400 件</small></span>
        <h1>毎日 5 分で、<br/><span class="grad">頭の中が、晴れる。</span></h1>
        <p class="lede">
          ガイド付き瞑想・睡眠音声・呼吸エクササイズ。3 ヶ月で続けられる仕組みを、専門家と一緒に設計しました。
        </p>
        <div class="stores">
          <a class="store" href="#demo-link-4">
            <span class="ic" aria-hidden="true"></span>
            <div>
              <small>Download on the</small>
              <strong>App Store</strong>
            </div>
          </a>
          <a class="store" href="#demo-link-5">
            <span class="ic" aria-hidden="true"></span>
            <div>
              <small>Get it on</small>
              <strong>Google Play</strong>
            </div>
          </a>
        </div>
        <div class="stat-row">
          <div class="stat"><span class="num">2.4M+</span><span class="lab">DOWNLOADS</span></div>
          <div class="stat"><span class="num">94%</span><span class="lab">継続率 (30日)</span></div>
          <div class="stat"><span class="num">¥0</span><span class="lab">無料で開始</span></div>
        </div>
      </div>

      <div class="phones" aria-hidden="true">
        <div class="phone phone-l">
          <div class="scrn scrn-l">
            <div class="top">5:42 PM<small>瞑想セッション</small></div>
            <div class="ring">
              <div class="min">12:30</div>
              <div class="lab">残り時間</div>
            </div>
            <div class="btn">続ける ▶</div>
          </div>
        </div>

        <div class="phone phone-c">
          <div class="scrn scrn-c">
            <div class="top">
              <h3>こんにちは、<br/>ゆいさん</h3>
              <span class="av"></span>
            </div>
            <div class="greeting">今日は短めの瞑想がおすすめです</div>
            <div class="card">
              <h4>朝のルーティン · Day 14</h4>
              <p>呼吸 5分 → 瞑想 10分</p>
              <div class="progress"><span></span></div>
            </div>
            <div class="row">
              <div class="tile"><div class="ic"></div><h5>睡眠</h5><small>3 セット</small></div>
              <div class="tile"><div class="ic"></div><h5>集中</h5><small>2 セット</small></div>
            </div>
            <div class="nav-bar">
              <i></i><i></i><i></i><i></i>
            </div>
          </div>
        </div>

        <div class="phone phone-r">
          <div class="scrn scrn-r">
            <div class="top">
              <h3>今週の記録</h3>
              <small>4月20日 〜 4月26日</small>
            </div>
            <div class="num-big">142<span>+18%</span></div>
            <div class="chart"></div>
            <div class="legend">
              <span><i></i>瞑想時間(分)</span>
              <span><i></i>睡眠時間</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  <aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空のアプリの紹介画面です。端末の画面・口座・残高・評価・利用人数・効果は固定の表示例です。アプリ配布・口座開設・金融取引・認証・外部接続は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<div class="demo-motion">
<button type="button" data-demo-motion data-js-control disabled aria-pressed="false">演出を止める</button>
</div>
<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>Download on the App Storeの見本</h3>
<p>機能・導入条件を説明する入口の位置です。アプリの取得・登録・口座連携・問い合わせは実装していません。</p>
</section>
<section id="demo-link-5" tabindex="-1">
<h3>Get it on Google Playの見本</h3>
<p>機能・導入条件を説明する入口の位置です。アプリの取得・登録・口座連携・問い合わせは実装していません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside><script>
const motion=matchMedia('(prefers-reduced-motion: reduce)'),toggle=document.querySelector('[data-demo-motion]');let paused=false;function syncMotion(){const stop=paused||motion.matches;document.documentElement.toggleAttribute('data-demo-paused',stop);toggle.setAttribute('aria-pressed',String(stop));toggle.disabled=motion.matches;toggle.textContent=motion.matches?'動きを減らす設定で停止中':stop?'演出を再開':'演出を止める'}toggle.addEventListener('click',()=>{paused=!paused;syncMotion()});motion.addEventListener('change',syncMotion);
document.querySelectorAll('[data-js-control]').forEach(el=>el.disabled=false);syncMotion();
</script>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

スマートフォンアプリのプロダクトサイトで「端末を斜めに重ねて画面を見せる」構図は、App Store の登場以降ほぼ業界標準として定着しました。理由は単純です——アプリの価値はインストールするまで体験できない。だからこそ画面そのものを物理的なモノとして提示し、「使うとこう見える」を先に手渡す必要があるのです。

3枚で語るストーリー

1枚のスクリーンショットは機能を説明しますが、3枚を傾けて重ねるレイアウトは「流れ」を語れます。手前にホーム画面、奥に詳細・設定——という奥行きは視線に順序を与え、アプリ内の導線を無意識に予感させる。中央を最前面・最大に置き、左右を後退させる構図は、人の視覚が持つ一番大きく手前のものを主役と読む性質を、そのまま利用しています。

12〜18°フレームの傾き。これ以上倒すと画面内のUIが読めない
3枚端末の枚数。1枚は機能、3枚は流れを語る
36px内側の角丸。実機の見えに寄せる値
1〜2個背景に散らす装飾ピル。主役より目立たせない

モックか実機UIか

ローンチ前は、CSSで組んだ擬似UI(色面・ピル・チップの組み合わせ)で十分に世界観を立てられます。むしろ画像を使わない方がページは軽く、グラデ背景にもなじむ。実装が固まった段階で本物のスクリーンショットへ差し替える運用が現実的です。重要なのは3枚それぞれが別の機能を見せていることです。

崩れる形同じ画面の色違いを3枚

枚数だけ増えて情報は増えていない状態。見せかけの豊かさは並べた瞬間に見抜かれます。3枚とも似ていると、読み手は「見るべきものが無い」と判断して離脱します。

効く形ホーム / 詳細 / 設定を1枚ずつ

3枚が別々の機能を担うと、重なりがそのままアプリ内の導線になります。手前から奥への奥行きが、使う順序の予告として働きます。

仕上げの判断軸

ストアバッジ風CTAは画面ショーケースのすぐ隣に置き、「見て→入れる」を最短距離で繋ぎます。上部の★評価・ダウンロード数は、数字が小さくても「他者がすでに使っている」という社会的証明として効く。

背景に散らす通知ピルやハートは1〜2個まで。主役の端末より目立たせないことが、洗練と雑然を分ける境界線です。

見本で試せる範囲

架空のアプリの紹介画面です。端末の画面・口座・残高・評価・利用人数・効果は固定の表示例です。アプリ配布・口座開設・金融取引・認証・外部接続は行いません。演出の停止とOSの動き低減に対応します。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。

アプリ画面の構成要素

アプリ画面の構成要素 画面の役割を1つに絞る 1画面1目的。迷ったら分ける 親指の届く範囲 主要な操作は下側に置く タップ領域は 44px 以上 端末の枠を描くだけで 「アプリの画面」だと伝わる 紹介ページでは、実物の画面より「何ができるか」が先に伝わる構図を選ぶ
アプリ画面の紹介は機能の網羅ではなく、1画面ぶんの体験を見せるほうが伝わります。枠の中に入れる情報を絞ってください。

使いどころ

  • モバイルアプリのストア向けLP
  • 健康・フィットネス・瞑想アプリ
  • フィンテック・銀行アプリ
  • ソーシャル・コミュニケーションアプリ
  • ゲーム・エンタメアプリ

このデザインの分類

カテゴリ
アプリ画面
スタイル
グラデーション / ソフト / プレイフル / SaaS / ネオン

背景と狙いどころ

よくある質問

スマホフレームは画像?
画像不要。CSS の box + border-radius + シャドウだけでiPhone風フレームは再現できます。本制作時は実機UIスクショに差し替え可能。
AndroidとiPhone どちらに合わせるべき?
一般的にはiPhoneフレームが視覚的に整いやすい。Android優位のターゲット(東南アジア・新興国)ならAndroid風(Pixel)を選ぶ。両方並べるパターンも可。
アプリのスクリーンショットは必須?
必須ではない。本物のUIに近い色面+ピル+チップで擬似UIを作れば十分世界観は出せます。実装が固まってから差し替える運用も多い。

この画面を実装する

動くサンプルとコピペできるコードを、技術別にまとめています。