目次
- Webシステムとは？システムの種類について
- システムとは
- Webシステムとは
- クライアントサーバシステム
- スタンドアロンシステム
- WebシステムとWebアプリの違い
- Webシステムのメリット
- 管理・メンテナンス・アップデートが容易
- 大量のデータの処理・保存ができる
- 柔軟性が高い
- 拡張性が高い
- Webシステム開発の仕組みと特徴
- Webシステムの仕組み
- サーバーサイド開発（バックエンド開発）
- クライアントサイド開発（フロントエンド開発）
- Webシステム開発の流れ
- 要件定義
- 外部設計
- 内部設計
- プログラミング
- 単体テスト
- 結合テスト
- 運用テスト
- システム移行
- 保守・運用
- Webシステム開発事例のご紹介
- 1.金属部品製造企業の基幹システム新規開発
- 2.他社で構築された写真館の業務システム改修
- Webシステム導入時の注意点
- システムを利用することで何ができるかを把握する
- セキュリティへの配慮
- 運用保守について検討する
- Webシステム開発の基礎知識・まとめ
- お問い合わせ・ご相談はこちらから
- 関連記事
最終更新日：2024年1月10日
「仕事を早く終わらせたい」「業務効率化を進めたい」ビジネスマンにつきもののお悩みを解決する方法の一つとして、システム導入があります。システムに興味があっても、以下のようなお悩みを抱える方も少なくないのではないでしょうか。
「Webシステムって何？」
「システムとWebシステムは同じ？違いはある？」
「WebシステムとWebアプリは何が違う？」
「Webシステムを開発したらなにができる？」
この記事ではシステムにまつわるお悩みの答えを、Webシステムの開発を専門に行うアクシアが解説します。初心者の方にも分かりやすいよう、できるだけ専門用語を使わずに紹介します。システムの知識や導入時の流れを知る手助けになりましたら幸いです。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
Webシステムとは？システムの種類について
システムとWebシステムは、別ものというわけではありません。「システム」という大きなカテゴリの中に「Webシステム」「クライアントサーバシステム」「スタンドアロンシステム」というカテゴリが存在するイメージです。これらは、システムを動かす環境やシステム設計によって区別されます。
ここでは、Webシステムをはじめとしたシステムの種類について解説していきます。
システムとは
一般的にシステムという言葉は、「〇〇をする仕組み」という意味で使用されることが多い傾向にあります。
ITの分野では、コンピュータなどの機械やソフトウェア、データ、通信ネットワークなどさまざまな要素を組み合わせ、全体として何らかの機能を発揮する仕組みをシステムということが多いです。
IT分野で使われるシステムはとても多様です。
- 基幹システム
- 業務システム
- 勤怠管理システム
- 販売管理システム
- 労務システム
- 営業支援システム……など
Webシステムとは
WebシステムはWeb技術をベースに開発・構築されたシステムです。インターネットに接続し、Webブラウザ（Google ChromeやSafariなど）を介して閲覧・利用できるシステムのことを指します。Webブラウザを介してインターネットに接続し、 Web経由でサーバに構築されたアプリケーションやサービスを利用する形態をとります。
Webシステムは、アプリケーションやソフトウェアのインストール不要でシステムを利用できることが特徴です。
Webシステム以外のシステム
Webシステム以外のシステムは、以下の2つがあります。
- クライアントサーバシステム
- スタンドアロンシステム
この2つのシステムとWebシステムの違いは、「パソコンにソフトをインストールする必要があるか」「データの保存や処理をどこで行うか」です（詳しくは後述します）。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
クライアントサーバシステム
クライアントサーバシステムは、コンピュータの役割を「サーバ」と「クライアント」に分け、それらのコンピュータがネットワークを介して相互に連携し処理を行うシステムです。
「サーバ」は、サービスやデータなどの機能を提供するコンピュータです。システムで利用されるデータの保存・管理機能（データベース）、データ処理機能、接続された周辺機器の管理機能を持つコンピュータやソフトウェアのことを指します。これらの機能や情報を、ネットワークを通じて外部に提供します。
「クライアント」は、機能を利用するコンピュータです。私たちが普段使用するパソコンやスマートフォンなどは、クライアントにあたります。クライアントとなるパソコンなどを通じて私たちユーザーが「このデータが見たい」などの要求を行うと、その要求にサーバが応答して処理を行います。必要に応じてデータベースにアクセスして、データやサービスを返すという仕組みです。クライアントが要求することを「リクエスト」、サーバーが応答することを「レスポンス」と呼びます。
クライアントサーバシステムは、クライアントにソフト（アプリケーション）をインストールして使用します。ソフトをインストールすることで、クライアント側でも一部のデータ保持や処理をし、サーバとの負荷分散を行うことが特徴です。スマホアプリなどのネイティブアプリは、クライアントサーバシステムで構築されているものが多いです。
関連記事：サーバーとはそもそも何？種類や役割、選び方をわかりやすく解説
※広義の意味では、 Webシステムもクライアントサーバシステムに分類されます。
クライアントサーバのうち、Webブラウザをクライアントとして利用するクライアントサーバシステムがWebシステムです。ソフトのインストール不要のため、クライアント側ではデータ保持や処理を行わず、すべてサーバー側で処理を行うことも特徴です。Webシステムの仕組みについては後述します。
※ネットワークとインターネットの違い
ネットワーク（通信ネットワーク）は複数のコンピュータを繋いで情報のやり取りをできる状態にした仕組みです。会社や家など、単位ごとにLANケーブルや無線LANなどで繋いで仕組みを作っている場面がイメージしやすいかと思います。
インターネットは世界規模で繋がっている、とても大きなネットワークです。会社や家などから、さらに外部のネットワークに繋げるための仕組みです。インターネットに繋げるためにはルーター機器や、インターネットサービスプロバイダという通信事業者のサービス（OCN、au one net、Yahoo!BBなど）を利用します。
ネットワークという大きなカテゴリの中に「インターネット」というカテゴリがあります。
スタンドアロンシステム
スタンドアロンシステムは、単一のコンピュータで独自に処理を行うシステムです。他のコンピュータやインターネットに接続しなくても使えることが特徴です。
サーバーを用意することなく、1台のパソコンの中にデータベースを含むシステムを搭載し、データ処理を行います。メモ帳やペイント、パッケージ版のExcelなどはスタンドアロンシステムといえます。
ネットワークに繋がっていないためセキュリティが強いというメリットの反面、他の人とのデータ共有に手間がかかる、共同作業ができないというデメリットがあります。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
WebシステムとWebアプリの違い
Webアプリ（Webアプリケーション）は、Webブラウザを介して利用するアプリケーションです。機能としては、WebシステムとWebアプリは同じと考えて問題はありません。規模の違いでWebアプリとWebシステムは区別されます。
Webアプリは一般的に、特定の目的やタスクを実行するために設計された独立したアプリケーションです。例えば、ブラウザ版Facebook、ブラウザ版Youtube、ブラウザで動かせるメールや勤怠管理などがWebアプリケーションに当てはまります。
Webシステムは、上記のようなアプリケーションを動かすための仕組み全体のことを指します。複数のWebアプリやWebページを組み合わせて、一連の複雑なタスクを実行するために構築されています。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
Webシステムのメリット
3つのシステムの違いと特徴がわかったところで、Webシステムを利用するメリットをご紹介します。
管理・メンテナンス・アップデートが容易
サーバに処理を集中させるWebシステムでは、サーバのみを対象に管理・メンテナンス・アップデートするだけで済みます。
クライアント側のソフトウェアのインストールや更新が不要なため、管理コストを削減できます。
大量のデータの処理・保存ができる
Webシステムを開発し、データベースサーバーを活用すれば大量のデータを処理・保存が可能です。データベースの活用により、大規模な業務システムの開発も実現します。
勤怠管理システム、顧客管理システム、在庫管理システムなど、クラウド型の業務システムの多くはWebシステムです。
柔軟性が高い
Webブラウザを介してアクセスするため、インターネットに接続できる状態であれば場所やデバイスに依存せずにシステムを利用できます。
拡張性が高い
Webシステムは、Webテクノロジーを使用して構築されているため、必要に応じて拡張できます。また、新しい機能やアップデートが簡単に追加できます。
Webシステム開発の仕組みと特徴
ここではWebシステムの通信の仕組みや、開発（システム構築方法）の特徴について解説します。
Webシステムの仕組み
冒頭でお話ししたとおり、WebシステムはWeb技術をベースに開発・構築されています。おおまかな構成は、次のようになっています。
- クライアント……画面表示、入力の受け付け。
- サーバ……業務を処理。
- データベース…データを格納。
Webシステムもクライアントサーバシステム同様に、コンピュータの役割を「サーバ」と「クライアント」に分けてシステムを構築しています。クライアントはWebブラウザであることがWebシステムの特徴です。
クライアントは画面表示やユーザーからの入力の受け付けを担当します。データを処理したり、サービスを提供するのはサーバの役割です。クライアントサーバシステムと違い、全ての処理をサーバ側で行います。
ユーザーがWebブラウザを使ってシステムを利用し、ブラウザで入力した情報がサーバに送信（リクエスト）されます。サーバ内で処理が行われ、必要に応じてデータベースにアクセスして、結果をレスポンスします。そのレスポンスがブラウザに表示されます。
Webで情報のやりとりを行う際は、決められたルール（=IT用語でプロトコル）に沿ってやりとりを行います。このルールのことをHTTPと呼びます。Webのリクエストは「HTTPリクエスト」、同じくレスポンスは「HTTPレスポンス」と言います。プロトコルとHTTPは、言葉だけでも知っていると調べものがスムーズになるかと思います。
Webシステムを開発する際は、データ処理などのためのプログラム開発と、その結果をクライアントに表示するための開発が必要になります。前者を「サーバサイド開発（バックエンド開発）」、後者を「クライアントサイド開発（フロントエンド開発）」と呼びます。
サーバーサイド開発（バックエンド開発）
サーバーサイド開発はシステムの設計や、データ処理をするプログラムを担当します。ユーザーが直接目にする部分ではありませんが、サービスや機能の出来を左右する重要な部分です。
サーバーサイド開発は具体的には、データベースの設計、APIの設計、サーバーサイドのプログラミングなどを行います。プログラミングでは、例えば個人情報の登録や、クレジット決済に必要な読み込みなどを行う機能を開発します。
安定して動作するシステムを提供するために、セキュリティ対策やパフォーマンスチューニングなども行います。
サーバーサイド開発で利用されるプログラミング言語は多岐にわたります。この記事では、メジャーな言語であるJava、PHP、Pythonを取り上げて紹介します。
Java
OSなどに依存しない、高い汎用性が特徴のプログラミング言語です。Webシステムだけでなく、スマホアプリや金融機関の基幹システム、カーナビや家電の組み込み、IoT機器にも採用されています。
Android向けのスマホアプリを開発する主要な四つの言語の一つでもあり、多くのAndroid向けアプリがJavaで開発されています。JavaScriptとはまったく別の言語です。
PHP
表示されたページの内容を動的に、つまりユーザーのリクエストやアクセスタイミングに応じて生成することができます。また、データベースとの連携にも強いことが特徴で、Webアプリケーションの開発によく使われています。有名なブログシステム「WordPress」もPHPで開発されています。
Python
数値計算や統計処理に強く、最近では特にAI（人工知能）や機械学習（マシンラーニング）の分野での活用が広がっています。「できるだけシンプルに」「やり方は1つ」という考え方に基づいており、他人が書いたコードでもわかりやすいという特徴があります。AI、機械学習以外でも利用が広がっています。
データベースについて
データベースとは、決まった形式（データモデル）で整理されたデータの集まりのことです。例えば顧客の個人情報や、商品価格、商品コードなどの情報をここに保存できます。
クライアントからのリクエストに応じてデータを処理するWebシステムでは、データベースが欠かせません。つまりサーバサイド（バックエンド）開発では、データベース開発も必須です。
データベースを作成する際に使われるのがデータベース言語の「SQL」です。SQLは、Webシステム開発でよく使われるMySQL、PostgreSQL、Oracleなどのデータベースに採用されています。
クライアントサイド開発（フロントエンド開発）
クライアントサイド開発は、ブラウザに表示される部分を担当します。つまりユーザーが直接触れる部分を開発するため、ユーザーにとって使いやすく、わかりやすい画面を提供することが求められます。
具体的には、HTML、CSS、JavaScriptといった言語を使用して開発を行います。
HTML
「HTML（Hyper Text Markup Language）」は、テキスト情報の構造を表すマークアップ言語です。
コンピュータはテキストだけだと、そのテキストが見出しなのか、本文なのか、メニュー部分なのかが判断できません。上から順番に情報を処理していくだけです。
コンピュータがテキストの役割を判断できるようにするには、マークアップ（識別のためのタグづけ）を行う必要があります。この作業をするときに使う言語がHTMLです。HTMLはプログラミング言語ではない、ということも抑えておきたいポイントです。
CSS
「CSS（Cascading Style Sheets）」は、HTMLが表した文章の構造にデザインを加えるものです。日本ではスタイルシートと呼ばれることもあります。CSSを使うことで文字の大きさや字間を調整したり、色をつけたり、簡単なアニメーションを加えたりと、さらに表現の自由度を高めることができます。
JavaScript
JavaScriptは、Webサイトに動きを加えるために開発されたプログラミング言語です。HTML、CSSと組み合わせて使うと、動きのある表現が可能になります。
クライアントサイドで使われるプログラミング言語ですが、近年はサーバサイド開発にも使われるなど、用途が広がっています。名前の似たプログラミング言語にJavaがありますが、まったく別の言語ですので注意が必要です。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
Webシステム開発の流れ
Webシステム開発の流れは以下のようになります。
要件定義
何をシステム化して問題解決するか（逆に何をシステム化しないか）を明確にする工程です。あれもこれもと希望を全てシステム化してしまうと、予算ばかり高くなり実際には使用しない機能を作成してしまうことになります。
要件定義では、システムで扱うことになるデータ量、ユーザー数、利用予定のデバイスも定義することがあります。具体的にはシステムを運用するサーバ構成や、使用するプログラミング言語、ミドルウェア（システムが動作するために必要な、サーバー上で動くこととなるサーバーソフト）などです。
関連記事：システム開発の重要な工程「要件定義」とは？スムーズに行うコツを解説
外部設計
基本設計とも呼ばれることがあります。一般的には、要件を満たすために必要機能を洗い出して設計し、必要なUI（ユーザーインターフェース…画面のこと）の設計と、各画面の偏移の仕様を明確にする工程です。
次の段階の「内部設計」に進むために、業務ロジック（目的の処理をするために必要な顧客特有の仕様）を明確にしておきます。
関連記事：システム設計とは？設計を行う上で重要なポイントを解説
内部設計
詳細設計とも呼ばれることがあります。一般的には、具体的なプログラムの仕様書を書く工程です。代表的な仕様書としては、以下の5つがあります。
- コード定義書（実際にプログラムを管理するコードを定義・管理する）
- テーブル定義書（テーブル＝データを保存する場所 を定義する）
- ER図（テーブルの関係を示した図）
- バッチ処理設計（バッチ＝定期的に処理されるもの の処理概要）
- プログラム一覧（プログラムのソースコード一覧）
プログラミング
プログラマが仕様書に沿って、指定されたプログラミング言語でプログラムを作成する工程です。
プログラミングの工程では、新規に機能を作成する場合と、既存の機能に対して修正をおこなう場合があります。既存の機能を修正する場合、既存の機能に悪影響がないか影響範囲をプログラマが調査した上で適切な修正をおこなう能力が求められます。
フレームワークについて
実際の開発現場では、「フレームワーク」という開発の枠組みとなるものを導入することがほとんどです。JavaScriptではVue.jsやReact、JavaではJSFやSpring Framework、PHPではLaravelなど、プログラミング言語ごとにフレームワークが存在します。
プログラマによってプログラムの書き方の癖があるため、フレームワークを使うことでできるだけ誰が作っても同じようなプログラム構成となるようにしていきます。それでも癖が出るため、コードレビュー（書いたプログラムを他の人がチェックすること）で保守性・汎用性・可読性が低いコードを指摘して修正していきます。
※保守性が低い…作りが複雑で、変更を加える際に修正しにくい状態
※汎用性が低い…同じような処理をいろんなところに書いてしまっている状態
※可読性が低い…プログラム名やプログラム内の変数・定数と呼ばれるものの命名がわかりにくい記述になっていたり、構造が複雑で何をしているかわからない状態、必要な注釈がない状態
関連記事：フレームワークを使うべきではないと主張する人がいる件
単体テスト
単体テストは、機能単位で機能単体の試験を実施することを指す場合と、プログラム単位で単体で試験を実施することの両方の解釈があります。区別するために、「プログラム単位で単体で試験を実施すること」を「ユニットテスト」と呼ぶことがあります。
機能単位で機能単体の試験は、主に画面を実際に操作して、あらかじめ作成したテストの仕様書通りの動きであるかを試験します。このテストのことは、プログラムの中身を見ないでテストをするため「ブラックボックステスト」と呼ばれます。
ユニットテストの場合は、プログラムの中身に沿って動作を試験するため「ホワイトボックステスト」と呼ばれます。ユニットテストの実施には、通常ユニットテストを実行するための仕組みが提供され、その仕組みに沿ってプログラムテスト用のコードを作成します。
関連記事：システム開発におけるテストとは？テストの種類や流れ、ポイントを解説
結合テスト
機能間が連動して動作した場合に、仕様通りにシステムが動作するかを試験する工程です。
単体テストをクリアしたパーツ同士を合わせて、それらがきちんと動くかを確認します。
運用テスト
一般的には、実際の業務の流れに沿ってシステムを運用し、試験することを指します。
システム移行
システムの運用が開始されることを指します。「(本番)リリース」「カットオーバー」「ローンチ」などの用語で呼ばれています。
保守・運用
システム運用開始後は、システムが動き続けるために必要なメンテナンスやシステム監視を行います。異常を早く検知することで大きな問題発生を未然に防ぐ目的があります。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
Webシステム開発事例のご紹介
Web開発の基礎知識についてひととおり解説してきました。しかし、Webシステム開発後の効果はどのようなものがあるのか知りたい方もいらっしゃるのではないでしょうか。
ここでは、弊社アクシアが手がけたWebシステム開発の事例を紹介します。
1.金属部品製造企業の基幹システム新規開発
生産管理システムに必要な機能が一通り揃った、コンパクトな基幹業務システムの構築を行いました。これにより、多数の部品を組み合わせて製品にしている他の製造業にも応用が効くシステムが構築できたと考えます。
システム導入前の課題
発注情報から部品をピックアップして組み立て納品する業務がメインの企業です。
既存システムはMicrosoft Office Accessで構築しており、Excelをフォルダに入れるとAccessが処理を行い、データベースに登録する仕組みでした。
しかし、使い勝手が悪く、組織全体で合計1人分くらいのロスが発生。システム担当者は不在で長いことシステムメンテナンスがされておらず、不具合が発生している状態でした。
システム導入概要
1次開発では受注管理、仕入管理、発注管理、請求管理と最低限ながら使いやすさにフォーカスを当てたシステムを構築しました
新システムを1から構築し、既存のAccessのデータを活かせるようデータ移行を行いました。そのためにAccessの解析を行い、どのような処理を行っているか把握する時間を設けました。
システム導入後の効果
システムの使いやすさが向上し、業務効率がアップしたとのご連絡をいただきました。2次開発では在庫管理、商品管理、棚卸管理機能を追加し、さらなる業務効率アップを目指しました。
これにより毎日の部品理論在庫のチェック、在庫不足分の仕入れが自動化され、在庫管理の負担を減らすことに成功。
既存システムを使用していた際に発生していたロスを解消し、コスト削減も実現できました。
詳細は以下の導入事例ページでご紹介しています。
2.他社で構築された写真館の業務システム改修
他社構築システムの保守移管、改修・機能追加を行ったことにより、業務効率が大幅アップしたクライアントの事例です。ここではシステム改修にフォーカスを当ててご紹介します。
システム改修前の課題
既存のシステムは使い勝手が悪い、正しく動作しないという問題が発生。手作業で行っているデータ変更業務に丸1日時間がかかり、ほかのやるべき業務に時間が割けないことが大きな悩みでした。
また、お客様から予約や注文を受けた後の確認やりとりに工数がかかることも業務が滞りやすい一因でした。
システム改修概要
システム改修では、スピード感を持って不具合修正に取り組みました。
その後、クライアントのお客様向けの予約受付、撮影データの納品・追加注文機能を追加しました。また、クライアント側の管理機能として、注文を受けた商品の納品進捗状況を管理する機能を追加しました。
手作業で行っていたデータ変更業務にはCSVアップロード機能を設け、アップロードするだけで自動で一括変更できる機能を追加しました。
システム改修後の効果
不具合の修正や使い勝手が良くなったことにより大きく業務効率化がすすみ、助かりましたとの声をいただきました。
特に丸1日かかっていたデータ変更業務は、5分で完了できるようになりました。社員だけでなくアルバイトでも行えるようになったため、他の業務に時間を割けるように改善されました。
また、クライアントのお客様側の予約システムに商品の特徴や注意事項を追記・表示できるようになったことで、注文後の確認やりとりを減らすことができました。
詳細は以下の導入事例ページでご紹介しています。
実際の開発費用・期間をまとめた資料を無料で差し上げます。資料請求はこちら>>
Webシステム導入時の注意点
最後に、Webシステムを導入する際にまず押さえておきたいポイントを紹介します。
システムを利用することで何ができるかを把握する
業務と関係のないシステムを導入しても、恩恵は受けられません。システムを導入することで何をしたいか、何ができるかを把握しておくのが理想です。
セキュリティへの配慮
インターネット上の情報は誰にでも閲覧可能です。悪意のあるものからの攻撃を受けるリスクもあります。情報漏洩や改ざん、サイバー攻撃などの発生を防ぐために、セキュリティ対策を十分に行う必要があります。
権限によって編集・閲覧できるページを設定する実装をしたり、暗号化や2段階認証などの実装をしたりする必要があります。
運用保守について検討する
システムは完成して終わりではありません。運用中に障害発生などによりシステムが稼働しなくなれば、業務に大きな支障を来します。
そのため、システムを導入する際は、システムの運用保守についても検討しておく必要があります。定期的なメンテナンスを行い、「システムを常に使い続けられる状態」を保つことを念頭におきましょう。
Webシステム開発の基礎知識・まとめ
Webシステム開発に必要な知識をできるだけ専門用語を使わずに解説しました。普段使わない用語なども出てきたかと思いますが、用語を知っておくだけでそこから必要な時に調べることができると考えます。
Webシステムの仕組みについては簡潔に紹介しましたが、詳しく知りたい方は「Web3層構造」というキーワードで調べていただくとより理解が深まります。（アクシアブログでは以下の記事で少し触れています）
この記事がWebシステム開発を理解するきっかけとなりましたら幸いです。
お問い合わせ・ご相談はこちらから
Webシステム開発や他社システムの保守移管・改修に関するご相談、その他の疑問や要望について、いつでもお待ちしております。お客様のビジネスの成功をサポートするため、専門知識を持ったスタッフが迅速かつ丁寧に対応させていただきます。
お急ぎの方はお電話からもご相談いただけます。
TEL: 03-5835-2820 (平日9時〜18時)
些細なことでも構いませんので、ご不明点やご質問がございましたら上記よりお気軽にご連絡ください。私たちとともに、より良いシステム運用を実現しましょう。