この記事は約 9 分で読めます。
筆者プロフィール: ソフトウェアエンジニア。「知った気にならない。いつまでも学び続ける」を信条に、業務と個人開発の両輪で技術を磨いています。AI 駆動開発で複数の個人開発アプリを構築・運用中。
👉 ポートフォリオ: 筆者ホームページ
「サインアップは成功したのに、初回ログインで離脱される」——これ、B2B SaaS でいちばん静かに、いちばん多く起きている事故です。
機能を作り込むほど、私たちは「使い始めるまで」の数分間を軽視しがちです。でも、ユーザーが最初につまずくのは高度な機能ではなく、「組織 ID って何?」「メールが届かない」「リカバリーコードってどこ?」 といった、ごく入口の部分です。
本記事では、運用中の SaaS 「たすきば Knowledge Relay」 の実際のオンボーディング画面を題材に、サインアップ → パスワード設定 → 初回ログイン までを「1 人も迷わせない」ために行った設計判断を整理します。後半は、そのまま 最初の管理者向けの操作ガイド としても読めるように、実画面のスクリーンショット付きで手順を載せています。
サービスの機能紹介・画面イメージ・コンセプトは公式プロダクトページをご覧ください。
👉 たすきば Knowledge Relay — はじめての方向けページ
オンボーディング離脱が起きる 5 つのポイントと、設計判断
最初に「設計の勘所」を表でまとめます。手順だけ知りたい方は次章へ飛んでください。
| 離脱ポイント | 何が起きるか | たすきばの設計判断 |
|---|---|---|
| 組織 ID の入力 | 「組織 ID を決めてください」と言われても、ユーザーは何を入れていいか分からず止まる | ユーザーには決めさせない。 サインアップ後にシステムが自動採番し、案内メールで通知 |
| 確認メールが届かない | 受信トレイに無い=不達と誤解して離脱 | 成功画面に「届かないときのチェックリスト」を常設 + 60 秒に 1 回まで再送可能 |
| 設定リンクの期限切れ | 翌日に作業を再開したらリンクが死んでいる | 有効期限を 24 時間に設定し、画面と本文で明示。再送導線も用意 |
| パスワード忘れ | 問い合わせが殺到し、復旧フローが属人化 | 使い捨てリカバリーコード 10 個を発行し、ユーザー自身でパスワード再設定可能に |
| 再ログイン時の組織 ID 再入力 | 毎回「あの数字なんだっけ」となり再離脱 | 成功した組織 ID を端末に記憶（最大 5 件 / 90 日）。共用端末向けにクリア導線も |
ポイントは一貫して 「ユーザーに自由入力で考えさせる箇所を減らし、システムが決める/覚える」 こと。以下、実画面とともに見ていきます。
全体の流れ (3 ステップ)
最初のログインまでは、3 つのステップで完了します。所要時間はメール待ちを含めて 5〜10 分 です。
| ステップ | 何をする? | 目安時間 |
|---|---|---|
| ① サインアップ | 組織名・お名前・プランを入力（Expert / Pro は請求先も） | 約 3〜5 分 |
| ② パスワードを決める | 届いたメールのリンクからパスワード設定 + リカバリーコード保存 | 約 2 分 |
| ③ ログインする | 組織 ID + メールアドレス + パスワード でログイン | すぐ |
先に押さえておきたい 3 つの言葉
後の手順で何度も出てくる用語です。ここで概念だけつかんでおくと、つまずきが激減します。
| 言葉 | どういうもの? | どこで使う? |
|---|---|---|
| 組織 ID | 組織を見分ける数字の ID（例: 100001）。サインアップ後にシステムが自動採番し、案内メールで通知します。 |
ログインのたびに毎回入力。社員証番号のようなものです。 |
| パスワード | あなた専用の合言葉。 | ログインのたびに毎回入力します。 |
| リカバリーコード | パスワードを忘れたとき使う、10 個の使い捨ての合言葉。 | パスワード再設定で使用。1 つ使うと消えます。 |
組織 ID はシステムが自動で割り当てます。 後から変更できないため、案内メールは大切に保存してください。
ステップ ① サインアップ
1. たすきばの入り口（ログイン画面）にアクセス
まずはたすきばの入り口（ログイン画面）にアクセスしてください。
2. ログイン画面の下にある「サインアップ」をクリック
ログイン画面の下のほうに 「新規組織でご利用ですか? サインアップ」 という案内があります。これをクリックすると、サインアップ画面に切り替わります。
設計メモ: 「新規」と「既存ログイン」を 1 画面に同居させ、迷いを 1 クリックに収束させています。入口を分散させないことが離脱率に効きます。
3. 「組織(テナント)」のところを入力する
最初に、組織の情報を入れます。
- 表示用のテナント名: 画面に表示される組織の名前です。「株式会社サンプル」「企画部」など、社内で呼びやすい名前で構いません。
組織 ID はここでは入力しません。 サインアップ完了後にシステムが自動で割り当て、案内メールでお知らせします。ユーザーに ID を考えさせない——これが最初の離脱を防ぐ最大のポイントです。
4. 「最初の管理者(あなた)」のところを入力する
- 氏名: 最初の管理者となる方(=あなた)のお名前です。
- メールアドレス: ここに次のステップで使う 案内メール が届きます。ログイン時にも使うので、普段からチェックしているアドレス を使ってください。
5. 「プラン」を選ぶ
- Beginner（無料・90 日間お試し）: まず試したい方向け。請求先情報の入力は不要です。
- Expert: 本格運用に入る個人・チーム向け。次のステップで請求先の入力が必要です。
- Pro: 判断の質を最重視する方向け。同じく請求先の入力が必要です。
6. 「請求先」を入力する（Expert / Pro プランの場合のみ）
Beginner プランを選んだ方はこのステップをスキップできます。 請求先の入力欄は表示されません。次の「7. 利用規約…」へお進みください。
Expert または Pro プランを選んだ場合は、請求書の送付先情報を入力します。
- 請求種別: 「法人」または「個人」を選びます。
- 会社名（法人の場合のみ、必須）: 会社名または法人名を入れます。
- 請求担当者名: 請求書の宛先となる方のお名前です(あなたご自身でも構いません)。
- 請求先メール: 請求書や領収書をお送りするメールアドレスです。
- 住所: 郵便番号、都道府県、市区町村、番地（いずれも必須）。建物名は任意です。
- 電話番号: 入れなくても構いません(任意)。
サインアップ直後に引き落としが発生するわけではありません。請求書の発行は月末締めで翌月となります。まずは安心してご入力ください。
7. 利用規約とプライバシーポリシーに同意する
フォーム最下部に、利用規約とプライバシーポリシーへの同意チェックボックスが 2 つあります。両方にチェックを入れてください。内容は たすきばのご紹介ページ の同セクションで確認できます。
8. 「サインアップ」ボタンを押す
すべての必須項目を入力したら、画面下部の 「サインアップ」 ボタンを押します。
成功すると 「招待メールを送信しました」 という画面に切り替わります。この画面には送信先や「メールが届かないときのチェックリスト」も表示されます。メールは「noreply@tasukiba.com」から送付されます。
設計メモ: 「メールを送りました」で終わらせず、届かないときの自己解決導線をその場に置く。これだけで「不達=離脱」を大幅に減らせます。
もしメールが届かない場合
- 迷惑メール / 受信トレイ以外のフォルダ を確認。最も多いのが迷惑メールフォルダへの振り分けです。
- 1〜2 分待ってから受信箱を更新。メールサーバの都合で遅れて届くこともあります。
- 法人メールの場合、社内の受信ルールでブロックされている可能性があります。情シス担当の方に確認を。
- それでも届かなければ、成功画面の 「メールを再送する」ボタン を押してください(60 秒に 1 回まで)。
- 上記すべて実施後も確認できない場合は、お問い合わせより「たすきばに関するお問い合わせ」を選択して運営にご連絡ください。
ステップ ② パスワードを決めて、リカバリーコードを保存する
1. 届いたメールを開く
ステップ ① で入力したメールアドレス宛に、件名 「たすきば - アカウントの設定」 のメールが届きます。
このメールには、【重要】組織 ID が書かれています。以降ログインのたびに毎回この組織 ID が必要になります。このメールは絶対に削除せず、大切に保存してください。 スター(★)を付けたり専用フォルダに移すと、後で見つけやすくなります。
2. 「パスワードを設定する」リンクをクリック
メール本文の 「パスワードを設定する」 リンク(または URL)をクリックします。
このリンクには有効期限があります(24 時間)。 1 日を過ぎた場合は、成功画面の「メールを再送する」ボタンを使うか、もう一度サインアップをやり直してください。
3. パスワードを決める
リンクを開くと、パスワードを 2 回入力する画面が表示されます。確認のため同じパスワードを 2 回入力し、「設定」 ボタンを押してください。
パスワードのルール:
- 12 文字以上
- 次の 4 種類のうち 3 種類以上 を含めること
- 英大文字(A〜Z)
- 英小文字(a〜z)
- 数字(0〜9)
- 記号(!、#、@ など)
4. リカバリーコード(10 個)を必ず保存する
「設定」ボタンを押すと、画面に リカバリーコードが 10 個 表示されます。これは このとき一度だけ 表示されるもので、画面を閉じると二度と見られません。
⚠️ 大切なお願い
リカバリーコードは、パスワードを忘れたときの命綱 です。必ず保存してください。
10 個すべて保存し終わったら、画面の 「ログイン画面へ」 ボタンを押します。
設計メモ: 「パスワードを忘れた」を全部サポート対応にすると運用が破綻します。使い捨てコードでユーザー自身がセルフ復旧できる設計にしておくと、問い合わせと属人化を同時に減らせます。
ステップ ③ いよいよ初回ログイン
1. ログイン画面を開く
ステップ ② 最後の「ログイン画面へ」ボタンから、または、サービスのトップ URL に直接アクセスしてください。
2. 3 つの項目を入力する
ログイン画面で、次の 3 つを入力します。
-
組織 ID: システムが自動採番した組織 ID。届いた案内メール本文の「【重要】組織 ID」に書かれています。例:
100001 - メールアドレス: サインアップ時に最初の管理者として入力したメールアドレス。
- パスワード: ステップ ② で設定したパスワード。
一度ログインに成功した組織 ID は、お使いの端末のブラウザに記憶され、次回から自動で候補表示されます(最大 5 件、90 日間)。共用 PC の場合は「履歴をクリア」のリンクで消せます。
3. 「ログイン」ボタンを押す
3 つすべて入力したら 「ログイン」 ボタンを押してください。正しく認証されると、OnBoarding画面 が表示されます。 —— おめでとうございます、これで初回ログインは完了です。
(任意) 多要素認証(MFA)を有効化する
セキュリティをより強くしたい場合は、業務で使い始める前に MFA を有効にすることをおすすめします。スマートフォンの認証アプリで 6 桁の数字を入力する、あの仕組みです。
- 画面上部のメニューから 「設定」 を開く
- 「MFA を有効化する」ボタンを押す
- 認証アプリ(Google Authenticator、Authy、1Password など)で、表示された QR コードを読み取る
- アプリに表示された 6 桁の数字を入力して有効化
うまくログインできなかったときは
よくある原因とその直し方をまとめました。エラーメッセージ別にたためる形式にしています。
「組織 ID が違います」と表示される
-
届いた案内メール本文の「【重要】組織 ID」をもう一度確認してください。 システムが自動採番した数字の ID です（例:
100001）。 - 半角の数字 で入力されているか確認を。全角(日本語入力モード)だと見た目が似ていてもログインできません。
- 過去にこの端末からログインに成功した組織 ID は、入力欄をクリック(空欄のまま)すると候補表示されます。
「メールアドレスが違います」と表示される
- サインアップ時に入力したメールアドレスと 完全に同じ綴り か確認してください。
- 会社で「メールエイリアス」(別名アドレス)を使っている場合、登録したのは別のアドレスかもしれません。サインアップ完了時の案内メールが、どのアドレス宛に届いたか確認を。
「パスワードが違います」と表示される
- パスワードマネージャから貼り付けた場合、前後に余分な空白が入っていないか 確認を。
- 何度も間違えると、30 分間ログインができなくなります。 ロックされる前に正しい情報を確認してください。
パスワードを忘れてしまった
- ログイン画面の 「パスワードをお忘れですか?」 をクリック。
- 組織 ID + メールアドレス + リカバリーコード(1 個) を入力します(リカバリーコードは、ステップ ② で保存した 10 個のうち未使用の 1 つ)。
- 本人確認が完了すると、新しいパスワードの設定画面に進みます。
リカバリーコードもなくした場合は、お問い合わせフォーム から運営にご連絡ください(種別「たすきばに関するお問い合わせ」)。
案内メール自体が届いていない
- 迷惑メールフォルダ を確認。
- 1〜2 分待ってから 受信箱を更新(メールサーバの都合で遅れることがあります)。
- 法人メールの場合、社内の受信ルールで自動ブロックされている可能性があります。情シス担当の方に確認を。
- それでも届かなければ、成功画面の 「メールを再送する」ボタン を利用してください(60 秒に 1 回まで)。
まとめ — オンボーディング設計チェックリスト
最後に、本記事の設計判断を「自分の SaaS でも使えるチェックリスト」にして再掲します。
| 設計項目 | 効果 | あなたのプロダクトでは? |
|---|---|---|
| 識別子はユーザーに考えさせず自動採番 | 入口での思考停止を防ぐ | ☐ |
| 確認メール送信画面に自己解決導線を常設 | 「不達=離脱」を削減 | ☐ |
| 設定リンクに有効期限 + 再送導線 | 翌日再開でも詰まらない | ☐ |
| 使い捨てリカバリーコードでセルフ復旧 | 問い合わせ・属人化を削減 | ☐ |
| 成功した識別子を端末に記憶 | 再ログインの摩擦をゼロに | ☐ |
| 連続失敗時のロック + MFA 任意化 | 利便性とセキュリティの両立 | ☐ |
「最初の 5 分」をどれだけ滑らかにできるかは、機能の多さより 離脱率に直結 します。サインアップ直後の数画面こそ、いちばん丁寧に設計する価値があります。
本記事のオンボーディングは、運用中の SaaS 「たすきば Knowledge Relay」 で実際に動いている画面そのものです。「こんな初歩的なことを聞いていいのかな」とためらう必要はまったくありません。ログインまでつまずきなく進めていただくこと が、このオンボーディングのいちばんの目的です。
- 👉 たすきば Knowledge Relay — はじめての方向けページ（機能・料金・FAQ をまとめたメインページ）
- 👉 お問い合わせフォーム — 種別「たすきばに関するお問い合わせ」を選んでお送りください。運営者本人が直接拝見します。
- 👉 Discord コミュニティ — 開発者・他のユーザの方々と気軽にお話しいただける場所です。
- 👉 たすきば 開発メンバー募集 — 開発に関わってみたい方向け