「予約の受付を楽にしたい」「見積書を早く作りたい」「顧客情報を社内で共有したい」。このような相談では、ホームページを増やすだけでなく、仕事を動かすWebシステムが必要になることがあります。
しかし、最初から機能や技術を決めてしまうと、使いにくい仕組みや、管理が大変な仕組みになりがちです。Webシステム開発で先に考えるべきなのは、「何を作るか」よりも「誰の、どの仕事を、どう改善するか」です。
ホームページとWebシステムの違い
ホームページは、会社やサービスの情報を見てもらう役割が中心です。会社案内、商品紹介、店舗情報、問い合わせへの入り口などが代表的です。
Webシステムは、ブラウザ上で入力、検索、保存、更新などを行い、仕事を進める仕組みです。
たとえば、次のようなものがあります。
- 予約の受付と空き状況の管理
- 顧客情報や対応履歴の共有
- 見積書の作成と承認
- 在庫数の確認と更新
- 会員だけが見られる専用ページ
- 社内申請や点検結果の記録
「会社案内」と「受付・事務室」の違い
ホームページを店舗の案内看板にたとえるなら、Webシステムは受付と事務室を組み合わせたものです。
看板は営業時間やサービスを伝えます。受付では予約や申込みを受け、事務室では内容を確認し、記録し、担当者へ引き継ぎます。Webシステムは、この一連の仕事をブラウザ上で行えるようにします。
ただし、両者の境界は完全には分かれません。ホームページの問い合わせフォームも小さな仕組みの一つです。大切なのは名前ではなく、見てもらうことが目的なのか、その場で仕事を進めることが目的なのかです。
Webシステムの中では何が動いているのか
専門用語をすべて覚える必要はありません。まずは、店舗の仕事に置き換えて考えてみましょう。
| Webシステムの要素 | 店舗にたとえると | 主な役割 |
|---|---|---|
| ブラウザ | お客様や担当者が立つ受付 | 画面を表示し、入力や操作を受け付ける |
| フロントエンド | 受付票や案内表示 | 見た目、ボタン、入力欄、操作の分かりやすさ |
| サーバー・バックエンド | 事務室 | 入力を確認し、業務ルールに従って処理する |
| データベース | 整理された台帳 | 顧客、予約、商品、履歴などを保存する |
| API | 部署間の受け渡し窓口 | 決まった形式で別の機能やサービスと情報を渡す |
たとえば予約フォームでは、利用者がブラウザから希望日を入力します。サーバー側が空き状況や入力内容を確認し、データベースへ保存して、結果を画面へ返します。
画面だけがきれいでも、裏側の処理やデータの持ち方が整理されていなければ、正しい予約管理はできません。反対に、裏側が高性能でも、操作が分かりにくければ現場では使われません。
本当に新しく作る必要があるかを確かめる
Webシステムを作る前に、既存の予約サービス、フォーム、表計算、顧客管理サービス、ネットショップなどで解決できないかを確認します。
既存サービスで十分なら、新規開発をしない方が、費用も保守の負担も小さくなります。一方、次のような状況では、独自のWebシステムを検討する意味があります。
- 自社独自の仕事の流れがあり、既存サービスでは合わせにくい
- 同じ情報を複数の表やサービスへ何度も入力している
- 担当者ごとに見せる情報や操作を分けたい
- 見積、予約、在庫などの情報を連携したい
- 手作業による確認漏れや転記ミスを減らしたい
「作れるから作る」のではなく、現在の手間や損失と、開発後の費用や管理負担を比べることが重要です。
要件定義は「欲しい機能一覧」ではない
要件定義とは、作り始める前に、誰が、どの場面で、何を終えられればよいかを整理することです。
最初に、次の質問へ答えます。
- 誰が使うのか
- いつ、どこで使うのか
- 今はどのように仕事をしているのか
- どこに時間やミスが発生しているのか
- システムを使った後、何ができれば成功なのか
- システムが止まったとき、どの方法へ戻るのか
画面より先に仕事の流れを書く
予約管理を例にすると、いきなり「予約一覧画面が欲しい」と考えるのではなく、仕事を順番にします。
- お客様が予約を申し込む
- 担当者が内容と空きを確認する
- 予約を確定または調整する
- お客様へ結果を伝える
- 当日の担当者が予約内容を確認する
この流れが見えると、必要な画面や通知、保存する情報が分かります。反対に、仕事の流れが曖昧なまま画面を作ると、後から機能追加が続き、費用も操作も複雑になります。
一ページの要件定義で決める六つのこと
小さなWebシステムなら、最初の要件定義は一ページから始められます。
| 項目 | 決める内容 | 予約管理の例 |
|---|---|---|
| 利用者 | 誰が使うか | お客様、受付担当者、管理者 |
| 利用の流れ | 開始から完了まで | 申込み、確認、確定、連絡 |
| 画面 | 何を見て操作するか | 申込画面、予約一覧、予約詳細 |
| 機能 | 何ができるか | 登録、検索、状態変更、取消し |
| データ | 何を保存するか | 希望日時、連絡先、状態、変更履歴 |
| 権限 | 誰が何をできるか | お客様は申込み、担当者は確認、管理者は設定 |
画面・機能・データを分けて考える
画面は、利用者が見る場所です。機能は、その画面でできることです。データは、仕事を続けるために保存する情報です。
この三つを分けると、「一覧画面はあるが検索できない」「状態を変更できるが、誰が変えたか残らない」といった抜けを見つけやすくなります。
保存する情報は、多ければよいわけではありません。使う目的が説明できない個人情報は、最初から集めない方が安全です。
ログインと権限は後回しにしない
ログインは「誰なのかを確かめること」、権限は「その人が何を見て、何を変更できるかを決めること」です。
たとえば、受付担当者には予約内容が必要でも、システム設定の変更権限までは必要ありません。最初は必要最小限だけを許可し、必要になったときに追加する方が安全です。
最初の試作は一つの仕事に絞る
初回から予約、顧客管理、売上集計、請求、メール配信をすべて作ろうとすると、完成までの時間も確認項目も増えます。
まずは、一人の利用者が、一つの仕事を最後まで終えられる範囲へ絞ります。
予約管理なら、最初の試作は「受付担当者が予約申込みを確認し、状態を確定へ変更できる」といった範囲です。支払い、複雑な会員制度、外部サービスとの自動連携などは、必要性を確かめてから追加します。
合格条件も具体的にします。
- 必須項目が不足していると保存できない
- 受付担当者だけが予約内容を確認できる
- 状態を変更すると履歴が残る
- スマートフォンとパソコンで必要な操作ができる
- 問題が起きたとき、元の管理方法へ戻れる
小さく作ることで、実際に使う人から早く意見をもらい、間違った方向へ大きく投資することを防げます。
ViteかNext.jsかは、要件の後で決める
Web開発では、React、Vite、Next.js、データベース、クラウドなど多くの技術名が出てきます。これらを組み合わせた開発環境を、技術スタックと呼びます。
Viteは、主に画面側の開発を速く進め、本番用のファイルを作るためのビルドツールです。Next.jsは、Reactを使ったWebアプリケーション向けのフレームワークで、画面だけでなく、ページの構成、表示方法、サーバー側の処理などもまとめて扱えます。
どちらが常に優れているという話ではありません。
- 公開情報が中心か、ログイン後の業務画面が中心か
- 情報はどのくらいの頻度で変わるか
- サーバー側の処理がどこまで必要か
- 検索から見つけてもらう必要があるか
- 誰が更新・保守を続けるか
- 利用する外部サービスやデータベースは何か
こうした条件を確認してから、必要十分な技術を選びます。技術名から企画を始めると、事業に合わない複雑さを抱えることがあります。
AIで開発が速くなった今こそ、目的地が重要
AIを使うことで、画面案の作成、コードの下書き、修正、テストなどは以前より速く進めやすくなりました。
しかし、AIは「誰のどの仕事を良くするか」を経営者に代わって決めることはできません。目的やルールが曖昧なままでは、必要のない機能まで速く作ってしまう可能性があります。
高性能な車とナビがあっても、目的地が決まっていなければ正しい道は選べません。AI時代のWebシステム開発では、コードを書く前の業務整理と要件定義が、これまで以上に重要になります。
YMWorksが大切にするWebシステム開発
YMWorksでは、Webシステムを単なる画面制作ではなく、事業の流れを改善する仕組みとして考えます。
- 現在の仕事と困りごとを整理する
- 既存サービスで解決できるかも含めて検討する
- 利用者、画面、機能、データ、権限を言葉にする
- 最小限の試作から始める
- 実際の利用結果を見ながら改善する
Webシステムが必要か、ホームページや既存サービスで十分か分からない段階でも、相談の入口になります。大切なのは大きな仕組みを作ることではなく、事業に必要な仕事が、無理なく続けられる形になることです。
まとめ
Webシステム開発は、技術を選ぶところから始まりません。
- ホームページは情報を伝え、Webシステムは仕事を進める
- まず利用者と現在の仕事、解決したい問題を整理する
- 画面、機能、データ、権限を分けて考える
- 既存サービスで足りるなら、新しく作らない選択もある
- 最初は一人・一仕事・一つの成果へ絞る
- ViteやNext.jsなどの技術は、要件の後で選ぶ
この順番を守ることで、見た目は立派でも使われないシステムではなく、毎日の仕事を支える仕組みへ近づけます。