やってみよう「次へ」を押すか、横にスワイプしてめくってみてください
表示・レイアウトメジャー（よく見る）
オンボーディング
Onboarding Screens / Walkthrough
アプリを初めて開いたとき、イラスト付きの説明画面を横にめくって紹介する。
別名オンボーディング画面ウォークスルーチュートリアル画面イントロ画面初回説明
どこで使われている？
- よく見かける場所
- 新しく入れたアプリ、銀行アプリ、健康アプリ
- 使うとよい場面
- アプリの価値を最初に短く伝えたいとき
- 避けたい場面
- 説明を読まないと使えない画面の代わり（5枚以上は読まれない）
補足画面を暗くしてボタンを1つずつ照らす説明は「コーチマーク」です。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「オンボーディング（Onboarding Screens / Walkthrough）」を実装してください。 動き：アプリの初回起動時に、大きなイラスト・見出し・短い説明の画面を3枚ほど用意し、横スワイプか「次へ」でめくる。下に今何枚目かを示す点を置き、右上に「スキップ」、最後の画面に「はじめる」ボタンを出す。 使う部品：横スクロールのスライドで自作
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | 横スクロールのスライドで自作 |
|---|---|
| iPhoneアプリなら | TabView + .tabViewStyle(.page) |
| Androidアプリなら | HorizontalPager + ページインジケーター |
| Flutterなら | PageView（introduction_screen パッケージ） |
| React Nativeなら | react-native-onboarding-swiper |