モバイルアプリのシェル
ステータスバー・大見出しヘッダー・スクロール領域・タブバーのアプリ骨格。上へスクロールすると大見出しが縮んで中央の小さなタイトルになり、PC では中央に端末枠で表示される。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
デザインの要点
- 大見出しは「ここはどの画面か」を最初の一瞬で伝え、読み始めたら縮んで場所を返す
- タブは 4〜5 個・アイコン＋語の二点。現在地は色だけでなく塗りアイコンでも示す
- スクロール領域だけが動き、ステータスバー・ヘッダー・タブバーは動かない。区切り線で層を示す
- PC では端末枠に入れて実寸で見せる。幅 390px 前後で設計した画面をそのまま検証できる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="mf-stage">
<div class="mf-device">
<div class="mf-status" aria-hidden="true">
<span class="mf-time">9:41</span>
<span class="mf-status-icons">
<svg viewBox="0 0 16 12" width="16" height="12"><rect x="0" y="8" width="3" height="4" fill="currentColor"/><rect x="4.5" y="5.5" width="3" height="6.5" fill="currentColor"/><rect x="9" y="3" width="3" height="9" fill="currentColor"/><rect x="13.5" y="0" width="2.5" height="12" fill="currentColor"/></svg>
<svg viewBox="0 0 26 12" width="26" height="12"><rect x="0.5" y="0.5" width="21" height="11" rx="3" fill="none" stroke="currentColor"/><rect x="2" y="2" width="16" height="8" rx="1.5" fill="currentColor"/><rect x="23" y="4" width="2" height="4" rx="1" fill="currentColor"/></svg>
</span>
</div>
<header class="mf-header" id="mf-header">
<div class="mf-bar"><span class="mf-bar-title" id="mf-bar-title">ライブラリ</span><button type="button" class="mf-bar-btn" aria-label="追加">＋</button></div>
<h1 class="mf-large" id="mf-large">ライブラリ</h1>
</header>
<div class="mf-scroll" id="mf-scroll">
<p class="mf-section">最近追加</p>
<ul class="mf-list">
<li class="mf-row"><span class="mf-thumb" style="background:linear-gradient(135deg,#2b50c7,#7c3aed)"></span><span class="mf-row-text"><span class="mf-row-title">夜明けのバス停</span><span class="mf-row-sub">Aoi Sato · 3:42</span></span><span class="mf-chev">›</span></li>
<li class="mf-row"><span class="mf-thumb" style="background:linear-gradient(135deg,#0f766e,#22c55e)"></span><span class="mf-row-text"><span class="mf-row-title">Paper Boats</span><span class="mf-row-sub">Minato Ensemble · 4:18</span></span><span class="mf-chev">›</span></li>
<li class="mf-row"><span class="mf-thumb" style="background:linear-gradient(135deg,#b45309,#f59e0b)"></span><span class="mf-row-text"><span class="mf-row-title">雨のち、珈琲</span><span class="mf-row-sub">Aoi Sato · 3:17</span></span><span class="mf-chev">›</span></li>
</ul>
<p class="mf-section">プレイリスト</p>
<ul class="mf-list">
<li class="mf-row"><span class="mf-thumb" style="background:linear-gradient(135deg,#be185d,#f43f5e)"></span><span class="mf-row-text"><span class="mf-row-title">通勤の 30 分</span><span class="mf-row-sub">12 曲</span></span><span class="mf-chev">›</span></li>
<li class="mf-row"><span class="mf-thumb" style="background:linear-gradient(135deg,#1e3a8a,#06b6d4)"></span><span class="mf-row-text"><span class="mf-row-title">集中したい午後</span><span class="mf-row-sub">24 曲</span></span><span class="mf-chev">›</span></li>
<li class="mf-row"><span class="mf-thumb" style="background:linear-gradient(135deg,#065f46,#10b981)"></span><span class="mf-row-text"><span class="mf-row-title">日曜の朝</span><span class="mf-row-sub">9 曲</span></span><span class="mf-chev">›</span></li>
<li class="mf-row"><span class="mf-thumb" style="background:linear-gradient(135deg,#111827,#374151)"></span><span class="mf-row-text"><span class="mf-row-title">深夜のドライブ</span><span class="mf-row-sub">18 曲</span></span><span class="mf-chev">›</span></li>
<li class="mf-row"><span class="mf-thumb" style="background:linear-gradient(135deg,#7c2d12,#ea580c)"></span><span class="mf-row-text"><span class="mf-row-title">料理しながら</span><span class="mf-row-sub">15 曲</span></span><span class="mf-chev">›</span></li>
</ul>
</div>
<nav class="mf-tabbar" aria-label="主要な画面">
<button type="button" class="mf-tab" aria-current="false"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"><path d="M4 11 12 4l8 7v9h-5v-6H9v6H4z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>ホーム</button>
<button type="button" class="mf-tab" aria-current="false"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"><circle cx="11" cy="11" r="6.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="m16 16 4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>検索</button>
<button type="button" class="mf-tab is-on" aria-current="page"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"><path d="M4 5h3v14H4zM9 5h3v14H9zM14 6l3-1 3 13-3 1z" fill="currentColor"/></svg>ライブラリ</button>
<button type="button" class="mf-tab" aria-current="false"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true"><circle cx="12" cy="9" r="4" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>アカウント</button>
</nav>
</div>
</div>