ちいつる

オンボーディング・ガイド

ウェルカム画面

初回起動のウェルカム画面。アプリマーク・あいさつの見出し・ひと言の価値提案に、主要アクション「はじめる」と副次「ログイン」を中央に配した第一印象の型。

ENGLISH

Welcome Screen

  • CSSのみ
102オンボーディング・ガイド の一覧 →

プレビュー

静的

操作動きのない質感・レイアウトの見本です。

コード(コピーして使えます)

<div class="wc-screen">
  <div class="wc-inner">
    <div class="wc-mark" aria-hidden="true">ち</div>
    <h1 class="wc-title">ようこそ、ちいつるへ</h1>
    <p class="wc-lead">小さな道具で、毎日の手間をひとつ減らす。</p>
    <div class="wc-actions">
      <button class="wc-primary">はじめる</button>
      <button class="wc-secondary">ログイン</button>
    </div>
    <p class="wc-note">アカウントがなくても、無料ですぐに始められます。</p>
  </div>
</div>

タグ

関連パーツ