Webサービス開発の流れとは？作り方や大変な工程などを実際に調査
Webサービスの開発を検討している方でも、実務に携わった経験が無ければ、手順や全体像について分からない点ばかりではないでしょうか。
今回はWebサービスの具体的な種類や、Webサービスの開発の流れについて、詳しく解説していきます。
またWebサービスの開発の中で大変だった工程を、実際にアンケートで調査しています。こちらも参考にしてみてください。
Webサービスとは？
Webサービスとは「インターネット上で提供されるサービス全般を指す言葉」です。似た言葉として「Webサイト」や「Webアプリ」が挙げられますが、Webサービスの一形態と考えられます。
具体的なWebサービスの種類は下記の通りです。
- 情報提供サービス
- ショッピングサービス
- 決済サービス
- マッチングサービス
- 相談サービス
- オンライン会議サービス
- 業務効率化サービス
- ストレージサービス
ビジネスパーソンであれば、無意識にでも普段からWebサービスを使用しているのではないでしょうか。
Webサービスの開発の流れ
Webサービスの開発の流れは下記の手順となります。
- 企画
- 戦略設計
- 要件定義
- 設計
- 開発
- テスト
各工程ごとに詳しく解説していきます。
企画
まずはじめに、どのようなWebサービスを構築したいのか計画を立てます。
Webサービスを開発することで、どのように自社や顧客の課題を解決できるのか考えてみてください。実現可能性は一旦考えずに、できるだけ多くのアイデアを出すことが大切です。
アイデアや構想を具体的にするための方法として、ラフスケッチに取り組んでみましょう。ラフスケッチの作成のポイントは下記の通りです。
- どのような場面でどんなユーザーがWebサービスを必要とするのか設定する
- 自社や顧客の課題や取り入れたい機能をひたすら書き出す
ラフスケッチの目的はアイデアを出して整理することなので、最初から綺麗に体系立てる必要はありません。デザインのイメージが思いつくなら、後の工程で参考にするためにメモしておきましょう。
戦略設計
Webサービスの戦略設計にあたり、抑えておきたい3つのポイントを紹介します。
- UXデザイン
- 価値定義
- プロジェクト憲章
UXデザイン
UXデザインとは、ユーザーの要望やニーズを正確に把握し、「ユーザーにとって良い体験ができるように設計する」ことです。
UXの設計において「UXデザインの5段階モデル」と呼ばれる、デザイナーのJesse James Garrett 氏の『Elements of User Experience』によって提唱された考え方をご紹介します。
- 戦略：ユーザーニーズとプロダクト目的の設定
- 要件：ユーザーに必要なコンテンツ・機能の設計
- 構造：ユーザーが欲しい情報や機能にたどり着くための全体構造設計
- 骨格：ユーザーが理解しやすいインターフェース上の情報設計
- 表層：ユーザーが視覚的に認識するデザイン
戦略から表層までのステップを、Webサービス開発のガイドラインとして設定しています。抽象的な概念である戦略を土台として、具体的な段階に移行していくことで、本来の目的から外れないWebサービスの開発が可能となります。
価値定義
Webサービスの開発は、エンジニアの人件費さえ確保できれば、技術的に模倣することは難しくありません。容易に参入や撤退することも可能です。似たようなWebサービスが簡単に作れるからこそ、「ユーザーに何を与えられるのか」「企業やWebサービスの立ち位置としてどうあるべきか」といった方針や理念が重要になります。
プロジェクト憲章
最後に、プロジェクト憲章について紹介します。プロジェクト憲章とは「プロジェクトを遂行していくために必要な企画書」のことです。プロジェクトのオーナーがメンバーに対して想いを伝えるツールで、Webサービスの新規事業担当者のような立場の人が作成するものです。
プロジェクト憲章の作成のポイントは下記の通りです。
- 目的や目標を明確にする
- プロジェクトスコープを明確にする
- プロジェクトの関係者を明らかにする
具体的に記載すべき情報は、下記の通りです。
- 目的や目標
- スコープの定義
- 条件
- スケジュール
- 予算
- リスク
- 関係者
目的や目標を逐一確認したり、オーナーとメンバーの間での認識のズレを防ぐ効果があります。プロジェクト憲章の作成により、円滑なプロジェクトの遂行を目指しましょう。
要件定義
要件定義とは「開発者の視点から発注者の要求をまとめて、解決するための具体的な方法を決める」ことです。要件定義書の作成は、一般的に発注者の要求をまとめたうえで開発者が作成します。
新規事業担当者のような発注者が要望や課題を文書にまとめて提示するケースもありますが、これは「要求定義書」と呼ばれます。
発注者がシステムに関する知識が乏しいと、実際のシステムと理想とするWebサービスとの間で乖離が生じてしまいます。「要求定義」を行うためにも、新規事業担当者は「要件定義」について知る必要があります。
要件定義の流れは下記の通りです。
- ユーザーニーズの選定
- 要求の細分化
- 要件定義書の作成
一般的な要件定義のアウトプットの例は下記の通りです。
- 課題の整理
- 目的と解決策の定義
- 業務フローの整理
- 機能要件（必ず搭載すべき機能のこと）
- 非機能要件（機能要件以外の部分のこと ユーザビリティ、セキュリティなど）
Webサービスの開発を成功させるためにも、最上流の工程である要件定義をいかに正確に行うかが大切です。
設計
設計とは「Webサービスをどのように組み立てて、イメージを作り上げるか」を指します。
設計を具体化するために、以下を作成するケースが多いです。
サイトマップ
サイトマップとは「Webサービス全体の構成を一覧で記載しているページ」のことです。いわば地図のような役割を果たします。どのようなページが遷移するのかを視覚的に理解することが可能です。
ワイヤーフレーム
ワイヤーフレームとは「Webサービスのレイアウトやコンテンツの配置を定めた設計図」のことです。線や文字だけで構成され、画像・テキスト・ボタンなどの配置を決めるために作成します。
プロトタイプ
プロトタイプとは「発注者がイメージや使用感を確かめるための試作品」のことです。実際にイメージを具現化することで、発注者と開発者との認識をすり合わせることができます。またプロトタイプの段階では作り直しができるので、早いサイクルでの仮説検証も可能です。
開発
設計が完了したら、次は開発のステップです。要件定義の段階で、使用するプログラミング言語・フレームワーク・必要な機能などは明確になっているので、コーディングの作業に入る流れとなります。
Webサービスの構築では、サーバーサイド開発とフロントエンド開発を行います。
サーバーサイドとは「サーバーの側で動く機能」を指します。Webサービスの場合は、ユーザーの操作に応じて動く機能のことであり、直接目には見えない部分のことです。開発言語としては「Java」「Ruby」「PHP」などが挙げられます。
料理店の予約サイトを具体例とした、サーバーサイド開発は下記の通りです。
- 指定した条件に当てはまるレストランのデータの取得
- レストランの空き情報を確認するための情報取得
- クレジットカードによる料金支払いの処理
フロントエンドとは「ユーザーから見える部分」を指します。Webサービスの場合は、ブラウザに表示される部分を指します。開発言語としては「HTML」「CSS」「JavaScript」などが挙げられます。
料理店の予約サイトを具体例とした、フロントエンド開発は下記の通りです。
- 予約日や人数の指定
- 地域の指定
- 選択した画像の表示
サーバサイド開発とフロントエンド開発は、同時進行する場合もあります。また効率性を重視するために、既存のフレームワークを活用するケースもあり、開発環境やスケジュールに応じて異なります。
テスト
Webサービスが意図した通りに動作するのか確かめるために、テストのプロセスが非常に重要です。システムエラーを未然に防ぐという効果もあります。
テストの種類や方法は様々ですが、ここでは単体テスト・結合テスト・受け入れテストをご紹介します。
単体テスト及び結合テストは「Webサービスのリリース前に、ユーザーが求めている機能を問題なく反映できているかを確認するテスト」のことです。
単体テストと結合テストの概要を下記の表にまとめています。
| 単体テスト | 結合テスト | |
| テストの範囲 | 機能を単体でテストする | 他のシステムとの連携などをテストする |
| 目的 | 関数単位でのエラーを検出するため | システム内の連携が機能するかを確認するため |
| メリット | 問題点を特定しやすい | 単体テストでは確認できない連結部分を確認できる |
| デメリット | 作業時間や人員の増加によるコスト負担 | 問題点の復旧に時間がかかる |
受け入れテストとは「開発したWebサービスが、発注者の要求通りに動作するか確認するためのテスト」のことです。つまり、発注者が実際にテストを行うことになります。
疑問点や不具合があれば、発注者が受注者に問い合わせを行う流れになります。受け入れテストは最終確認となるため、発注者が成果物として適切かどうかを見極めることが目的となります。
Webサービス開発で一番大変な工程を調査しました
当社は、2023年9月にシステム開発を外注したことがある約30名の担当者にアンケート調査を実施しました。「開発の外注で最も大変だったこと」について質問したところ、約47％の人が要件定義、続いて、約25%の人がテストと回答しています。
要件定義をしっかりとしないと後々トラブルが発生するので、要件定義をしっかりサポートしてもらえる制作会社かどうか、外注の際には必ず確認をしましょう。
また、テストフェーズでは、想定以上の不具合や障害が発生し、苦労するケースが多いです。外注先を決める際は、テスト体制や品質を向上させる取り組みを確認し、品質に重きを置いているか確認するのがポイントと言えます。
Webサービスを自社で開発するメリット・デメリットを紹介
Webサービスの開発を自社で行うか外注するか悩んでいる方もいると思うので、ここからは自社開発と外注のメリット・デメリットを解説したいと思います。
まずは、Webサービスを自社開発するメリット・デメリットを紹介します。
自社開発のメリット
自社開発のメリットは下記の通りです。
- コストの削減
- スピーディーな対応
- 開発のナレッジやノウハウが蓄積される
外注費がかからなくなるので、当然ながらコストは削減されます。ただし自社開発による開発ツールやエンジニアの育成のための投資が必要になるので、コスト削減は副次的な効果と考えておきましょう。
外注先とのやり取りが無くなるため、工数削減により開発のスピードは上がります。自社内であれば、現場からの要求にも迅速に対応しやすいというメリットもあります。
また自社開発であれば独自のナレッジやノウハウが蓄積され、中長期的に自社の優位性や競争力の増加に繋がるでしょう。
自社開発のデメリット
自社開発のデメリットは下記の通りです。
- 開発する人材への投資や育成を行い、確保する必要がある
- 運用や保守まで見据える必要が生じる
- コストに対する意識が低下する恐れがある
自社開発において最も課題となる点は、人材の確保です。社内で人材育成をするとなれば、育成のためのノウハウを獲得しなければなりません。特に外注期間が長くなるほど、経験や知識を持つ人材が育っていないことになり、1から人材育成を行う必要があります。
保守や運用のために、どの程度のランニングコストが生じるのかを把握しなければなりません。業務ごとの稼働時間を区別するのが難しくなるため、人件費の内訳を正確に把握できず、費用対効果に対する意識が低下する恐れもあります。
Webサービスの開発を外注するメリット・デメリットを紹介
Webサービスを外注するメリット・デメリットを紹介します。
外注のメリット
外注のメリットは下記の通りです。
- エンジニアの採用や育成をしなくても開発ができる
- 開発の状況に応じて柔軟に対応できる
- 投資費用や必要経費を明確にできる
外注することで、エンジニアの採用や育成をしなくても、すぐに開発を行うことが可能です。「短期間で開発したいが、採用がうまくいかない」、「作りたいWebサービスは決まっているが、エンジニアのリソースが足りない」といった悩みが解消されます。
開発の状況に応じて、人数の増減や交代など柔軟な対応が可能となります。内製化の場合だと「必要なリソースを必要なときにだけ確保する」のは難しいのが実情です。
外注であれば見積もりの段階で金額が提示され、不具合が発生した場合でも、無償修正など対応を行ってくれます。納期も初期段階で決まるため、大幅なスケジュールの遅延というリスクも軽減されます。
外注のデメリット
外注のデメリットは、自社開発と比較すると費用が高くなりやすい点です。開発したいWebサービスの費用に見合っているのか、依頼を行う前に慎重に検討しておく必要があります。
しかし初期段階から要件定義を明確に行ってくれる外注先であれば、開発段階での修正コストも発生しにくくなり、費用を抑えながら短期間でのWebサービスの開発が可能となります。
Webサービスの開発は外注がおすすめ
Webサービスの外注は、社内の開発リソースが乏しい場合や、専門性の高い技術が要求されるときに有効な選択肢となります。マネジメント能力が求められるような大規模なシステム開発の場合も、外注先に任せるべきでしょう。
やはり品質にこだわりたいなら、Webサービス開発のプロである開発会社に外注するのが安全です。社内に専門知識を持った人材がいなくても、質の高いWebサービスを短いスケジュールで開発することが可能となります。
外注先に全て丸投げするのではなく、システム開発の知識を吸収しながら、Webサービスの開発会社への外注を検討してみてください。