Webサイトで販売したい、業務の効率化を図りたいなど現状の仕組みを変えるためにWebアプリの開発を検討している方もいらっしゃるでしょう。

ところが、開発手順が分からない・どこに頼めばよいか分からないという悩みはありませんか？

この記事は、Webアプリ開発を行いたい企業の担当者に、外注前に知っておくべき基礎知識を解説します。

この記事を読むことで、開発手順や必要な物、外注の流れなどを理解することができるのです。

また、開発後の運用・保守も重要ということが分かるでしょう。

アプリとは？

Webアプリは、Webの仕組みを利用したアプリケーションのことです。

様々な機能を持つWebサイトで、一般的なコーポレートサイトやブログサイトなどとは異なるのです。

例えばネットバンキング・ECサイト・飲食店の予約サイトなどがあげられます。

Webアプリを開発するにはプログラミング言語を使うフレームワークを利用し開発するのです。

他のWebアプリ機能と連携するため「Web API」を利用することもあるのです。
 
ECサイト制作の事例はこちら  

Webアプリの開発手順

Webアプリ開発の流れは、どのようなWebアプリを作るかで異なります。

アプリの開発は設計から公開までには様々な工程がありますが開発言語・フレームワーク・開発ツールを選ぶことから始まるのです。

これらについて説明します。

設計

設計には、要件定義・外部設計・内部設計があります。

• 要件定義

要件定義は、Webアプリに必要な機能やユーザーの要求をまとめて、要件定義書を作成するのです。

Webアプリを開発をする目的や機能・構成図・予算・人員・開発期間などを決めて、それを元に作業工程を決めていきます。

ウォーターフォールの場合、1つ前の工程が完了しないと次の工程に進めないので注意が必要です。

細かく計画を立て、後戻りがないようにします。

• 外部設計

外部設計は、要件定義した内容に沿ったユーザーインターフェース（UI）を作成するのです。

利用者が使いやすいよう、ユーザーインターフェースは画面の見やすさや操作のしやすさが大事となります。

利用者にとって使いやすいかどうかに直結する工程であるため、外部設計は重要です。

• 内部設計

外部設計が決まったら、今度は内部設計を行っていきます。内部設計は、Webアプリを開発をする成果物の中身を設計することです。

プログラミング言語を何にするかデータベースをどのようにするかを決めます。

システム内部の動作・機能・物理データなどを開発者目線で設計するのです。

開発言語

Webアプリを開発するための主な言語について説明します。

• HTML

HTMLはWebアプリの文字を表示させるものです。WebページのほとんどはHTMLを使って開発されています。

HTMLのルールに沿って指示する内容をテキストで打ち込むと、指示した内容が実際に公開するWebページに反映されます。

Webサイトの礎ともいえる言語のため、企業でECサイトやコーポレートサイトなどを制作する際にも用いられるプログラミング言語です。

• CSS

HTMLが文字を表示させるのに対し、Webアプリに飾り付けをするのがCSSです。

太文字・フォント・ボタン・アニメーション等をWebアプリに加えます。

HTMLと組み合わせることで、Webサイトを見やすくしたり、利用しやすくしたりしてくれるのです。

• JavaScript

JavaScriptは、Webアプリを表示するブラウザ上で動くプログラムに関する指示を出すために必要な言語のことです。

JavaScriptを用いることで、画像をほかのものに変更したり、拡大表示や自由に動かしたりできます。

また、入力フォームをページ内に設置して、ユーザーからの問い合わせが受けられるようにすることも可能です。

• SQL

SQLはデータベース言語の一つで、Web画面に投入されたデータを保存したり必要なデータを取り出したり、データの計算をします。

Webアプリには欠かすことのできないプログラム言語です。

SQLはISO（国際標準化機構）で規格が標準化されており、一度学習すればほかのデータベースでもほぼ同じように操作可能です。

開発言語には、Ruby・PHP・Python等がありますが、フレームワークという枠組みがあるので次に説明します。

フレームワーク

フレームワークとは、Webアプリやシステムを開発するために必要な機能があらかじめ用意された枠組みのことです。

フレームワークを使えば、開発に必要な機能をそろえていますのでゼロから用意する必要がありません。

フレームワークを使うメリットは次の３点です。

• 開発にかかる時間を削減できる
• ミスやエラーを減らせる
• ルールが統一される

プログラミングでは、フレームワークを活用することが作業の効率化につながります。代表的なフレームワークについて説明します。

• Ruby・・・利用者の多いプログラミング言語です。プログラミングを楽しむことをテーマに日本で開発され、現在は世界中から人気があります。 Ruby on Railsというフレームワークがあります。
• PHP・・・Webサイトにさまざまな動きをつけられるプログラミング言語で、アクセスしたタイミングによって表示内容が変わる動的なWebページの作成に用いられます。Laravelというフレームワークがあります。
• Python・・・機械学習を使ったAI開発や自動データ処理、Webアプリやスマホアプリの開発など、汎用性の高さに魅力があるのです。Djangoというフレームワークがあります。

開発ツール

開発を行うにおいて、仮想開発環境があると便利です。Vagrantは仮想開発環境を構築することが出来るツールです。

いきなり本番環境でWebアプリ開発を始めると、エラーやトラブルが生じたときに1から検証しなければなりません。

そのようなことを考えると仮想開発環境があると便利です。Vagrantは仮想開発環境を構築することが出来るツールです。

開発環境と本番環境は異なるため思わぬバグが発生し、開発環境では問題ないが本番環境では動かないといった事態が起こります。

Vagrantを使うことによって、Webアプリごとに本番環境と同じ環境を構築することができるため、予期せぬ事態を防ぐことができます。

アプリの公開

Webアプリを公開する一般的な方法は、クラウドサービスを利用することです。

自社でWebアプリサーバーを立ち上げると保守や、サーバーの公開等定期的な作業が発生することからクラウドサービスを利用することが多くなっています。

インターネット経由で必要なときに必要な分だけサーバーやデータベース、ソフトウェアなどを利用できるので、急なリソースの変更にも柔軟です。

主なクラウドサービスはこのようになります。

• Heroku Heroku（ヘロク）社が提供するクラウドサービス。
• AWS（Amazon Web Services） Amazonが提供するクラウドサービス。
• Azure（Microsoft Azure） Microsoftが提供するクラウドサービス。
• GCP（Google Cloud Platform） Googleが提供するクラウドサービス。

 

 

アプリ開発に必要なもの

アプリ開発にはツールがあればあるほど、いいものが作れますが、限られた予算内での開発が求められるのです。

アプリ開発に最限低限必要なものを説明します。

PC環境

PC環境として必要なものは次のものです。

• プログラムの実行環境

プログラムを動かすための環境。Ruby・PHP・Pythonなどのプログラミング言語になります。

• データベース

データを保存し、データの登録・検索・編集などを行うため必須です。

メモリの容量

アプリ開発などで仮想環境を利用する場合は、16GB以上のメモリがおすすめです。

なぜなら、開発は複数の作業を同時に実行させるため大量のデータを処理するからです。8GBだと容量が不足してしまうかもしれません。

ネットワーク環境

開発したプログラムを本番環境のクラウドサービスにアップロードしたり、開発中のプログラムをGitHUBにアップしたり、疑問点を検索します。

インターネット環境がなければ開発は困難になります。

まずは、高速通信の光回線でインターネットに接続する環境。

開発中のWebアプリをスマートホンで確認するためのスマートホン・タブレット。

複数名で開発するのであれば社内のWi-Fi環境もあった方がいいでしょう。

アプリ開発ツール

プログラムを書くというのは複雑な作業です。そのため、効率的に作業するには専用のソフトウェア（IDE：統合開発環境）を使うことになります。

IDEは必要な環境が用意されているため、プログラムを書くスピードアップがはかれ、実行が簡単になるのです。

代表的なIDEとして、Eclipse、PyCharm・Visual Studio・Visual Studio Codeなどがあります。

アプリ開発は誰でもできる？

Webアプリ開発は、アプリ開発に必要な環境とスキルの2つを確保すれば可能です。

しかしながら、初心者がWebアプリ開発を一から独自で行うのは、難易度が高いのは事実です。そこで、Webアプリ開発を外注する方法を説明します。

アプリ開発を外注する流れ

Webアプリを開発する際に、初めて開発を外注するときスムーズスにプロジェクトを進めたいです。

どのように、外注先を選んだらいいのか、どのような点に注意すればよいか外注するさいについて説明します。

企画書の作成

企画段階ではアイディアを出し合います。ターゲットはだれか、目的はなにか、どのように開発していくのかを決めていくのです。

目的を明確にすることは大変重要です。目的を明確にすることで、具体性が増しよい企画となります。

そして、書面に起こしておくことで、見える化が実現しアプリのイメージを共有できます。

そうすることで曖昧なまま次のステップに進むことなくWebアプリ開発を行えるのです。

プラットフォームの選択

プラットフォームとは、アプリケーションを動作させる基盤（OS・ミドルウェア・データベース）となるものです。

Webアプリの場合は、プラットフォームとなるサーバー類を選定することになります。

Webアプリに求める、レスポンス時間・冗長化の有無・保守体制・予算等を比較し決定すればよいでしょう。

前述のクラウドサービスを利用する場合、GAFAと呼ばれる海外企業が中心ですが、日本語が通じる国内のクラウドサービスも狙い目です。

外注先を選ぶ

社内で企画書が作成できたら外注先を選ぶ作業に入ります。

信頼のある開発会社に取引があればスムーズに進みますが、3社程度相見積もりを取ることが大事です。

1社では気づかないことも、複数社と折衝することで、気づきがあり開発に反映することができます。

また競争することで価格の抑制ができるのです。

サポートが手厚く、担当者とコミュニケーションを取りやすい開発会社を選ぶとトラブルを防止しやすくなります。

問い合わせのさいは、アプリの完成イメージを開発会社へ詳細に伝えることが大切です。

要件定義

要件定義は、本格的な開発工程の前段階で開発者の視点から要求をまとめ、依頼者と具体的な進め方を決めるのです。

Webアプリ開発を依頼されたときは、詳細な機能が明確になっていない場合があります。

開発をスタートする前に要求をまとめておかないと、不備があれば以降の工程にも影響しますのでアプリに求められる要件を過不足なく記載します。

依頼者のニーズが十分に把握できない状態でWebアプリ開発を進めてしまうと、最初から開発しなおすこともありうるのです。

Webアプリに実装する機能・性能などを要件定義に定め、具体的にどのように進めるかが非常に大事です。

効率良く作業を進めるためにも、事前にヒアリングを実施して依頼者のニーズを明確にしておきましょう。

見積り

Webアプリ開発の見積は、各開発会社によって異なります。技術を持つエンジニアのスキルや作成する機能により違いが生じるのです。

そのため、見積り項目が変われば一概に比較できない場合が生じます。

また、見積りによっては、初回見積りから打ち合わせごとに単価や各項目の費用が上がるという場合があります。

その都度確認していくことが必要になるでしょう。

複数社に合い見積もりを取った場合、注意しなければならない点があります。例えば見積りの比較は同じ項目がそろっているかです。

なぜなら、外注先毎に含まれるものやそうでないものがあるため、同じ内容でも費用が大きく異なることもあるからです。

安価に作成するのも価値がありますが、単価だけを基準にしてしまうと品質に問題が発生することもあり得ます。

また、運用・保守費用も計算しておきましょう。

開発会社とサーバー会社の年間ごとの更新の有無や費用は異なるため、開発前に確認しておく必要があります。

要求仕様書の作成

要求様書とは、発注者の機能を修正したり、追加したりする場合要望に従って、対応内容・対応に発生する費用・必要とする開発工期・注意点などを記載し確認するための書類を指します。

要求仕様書を作成する工程は次のようになります。

• 要求収集

開発対象のWebアプリに何を実現させたいのか、どのような役割を持たせるのかを、関係者からヒアリングを行います。

• 要求分析

ヒアリング内容から複数の要望が、それぞれ一貫性（矛盾しないか）・完全性（漏れがないか）をディスカッションを通じて検証します。

• 要求定義（要件定義）

要求分析で得られた情報やデータを開発者がプログラミングできるよう文書を作成します。

• 要求仕様記述

要求仕様供述は、まとまった要求を要件定義を元に、要求側と設計側の橋渡しとなる文書を作成します。

外部設計・内部設計

外部設計とは、基本的に利用者に向けた仕様を設計するのが外部設計です。外部設計は、基本設計や外部設計とも呼ばれます。

システムの基となる重要な設計のため、要件定義で決定した機能や性能等を十分考慮します。

主な設計内容は次のとおりです。

• 操作画面や操作方法
• データ出力など、利用者から見えるインターフェース部分の仕様
• セキュリティや運用規定
• システム開発のスケジュール
• 費用

一方、内部設計とは、外部設計を経て機能を実装するための設計が内部設計です。

内部設計では外部設計を基に、システム内部の利用者から見えにくい詳細な部分の設計を行います。

外部設計とその後の詳細設計の間にも内部システムに特化した工程がありますが、詳細設計に含む場合があります。

主な設計内容は次のとおりです。

• プログラム機能を単体に分割
• 使用する物理データ
• 入出力

開発

ここまで準備ができれば、開発になります。

そのさい、外注を選ぶか、それとも自社開発を選ぶかは自社の状況に応じて判断することになります。

自社に開発するスキルを持つ社員がいて、開発環境が揃っていれば、自社開発がいいでしょう。
一方で、自社に開発スキルを持つ社員がいない場合は、外注を選択するのがいいでしょう。

外注を選ぶポイントについては後述します。
 
ECサイト制作の事例はこちら  

アプリ開発の費用相場

複数のアプリ開発専用のサイトを見ると、アプリ開発の見積り作成用のシミュレーターでチェックできるのです。

費用の目安は、開発にかかわるエンジニアの人数・作成時間・種類によっても費用は異なりますが大まかな金額はこのようになるのです。

アプリ機能としては次のような費用となります。

• 会員データの管理（もしくは、会員サイト） 50万～70万円
• ユーザーの個人情報、保管・管理システム 60万～100万円
• ログイン機能（メールアドレス使用） 20万～40万円
• 決済システム（クレジットカード・銀行） 各10万～20万円
• アプリのデザイン（一式依頼） 50万～100万円
• アプリのデザイン（自作コンセプト） 20万～30万円
• 他社ツール連動機能（カメラ・マップなど） 40万～80万円

内容（種類）としては次のような費用となります。

• ゲーム 300万～1800万円
• 通話（無料通話・ビデオ通話） 100万～300万円
• SNS（チャット・通話） 1000万～2000万円
• 小型ポータルサイト 1600万～2000万円

このように、実際にアプリ開発に機能を加えていくと、アプリの種類によっても費用の目安が変動するのです。

必要な機能を加算していく方法と、内容（種類）により一式依頼する方法で、見積り方法も異なるでしょう。

外注先を選ぶポイント

アプリ開発を依頼する際は、次のような点に注意する必要があります。

外注先を選ぶ際にはこれらの事項に問題ないか確認するようにしましょう。

• アプリ開発の要件定義
• コミュニケーションの設定
• 契約書について
• 運用・アップデートについて
• 予算の確認

費用はトータルコストで考える

アプリといっても、その種類は多様です。大まかな開発費用はかなりざっくりとした数字で約250万円です。

ただしこれは、厳密にはどのような種類のアプリをどの開発業者に依頼するか、さらにその開発期間によっても相当の開きがでてきます。

Webアプリは開発、公開することで終了ではありません。Webアプリのメンテ、機能追加、障害時の対応がランニングコストとして発生します。

また、Webアプリを導入したことで、人件費等コスト削減が図れるものもあります。

開発費用については、一時的な開発費用だけでなく、ランニングコストやコスト削減のトータルで予算を考えましょう。

担当者とのコミュニケーション

Webアプリの開発では、外注先との認識のズレが生じることがあります。

実際に形になるまでイメージしにくい部分も多く、完成像を共有するのも大変です。

認識が食い違ったまま開発が進んでしまうと、完成間近に致命的な問題が発覚し、一からつくり直すことになりかねません。

こうした認識のずれを回避するために、普段から円滑なコミュニケーションを心がけましょう。

メールなど文章のやりとりでなく、直接会話をしながら、確認していきます。

テキストベースでの食い違いはすみやかに対面で解消しましょう。

UI/UXについても外注先に、必ずその背景を伝えます。

『目的』や意図があって要望を出しているわけですが、アウトプットされた『手段』が必ず外注先に伝わるとは限りません。

ある程度、作業が進んだ時点で双方で確認します。

コミュニケーションの取りやすい外注先を選ぶことが大事です。

外注するときの注意点

Webアプリ開発を外注する際に注目することは、開発しようとしているアプリを得意としているかどうかです。

外注先によりますがEC系が得意・受発注系が得意など扱う分野が異なります。

得意分野があるということは、その分野に関するノウハウやスキルが十分に備わっています。

信頼性の観点からも、開発したい分野に特化した外注先を選びましょう。導入実績、対応のスピードも検討材料になります。

要件定義を伝える

要件定義については、前述しましたがアプリ開発内容の方向性を固めていく作業のことです。

どれくらいの作業や予算をかければWebアプリのゴールにたどり着けるかを逆算するためにも外注先と認識を合わせる必要があるのです。

先ず、アプリ開発の目的を明確化し、そして必要な機能・課題を洗い出します。

予算内でどこまで実現できるか

要件定義でWebアプリ開発の方向性が固まったら、次は見積もりを取ります。

この時、予算内に納めなければなりませんが、安さだけで外注先を選ぶのはやめましょう。

予算内に収めることを考えると、本当に必要な機能を削除しなければならなかったり、後で追加費用が発生したりします。

そして、目的を達成するのが困難になることがあります。

まずは、予算内でどこまで実現できるかを検討するのです。

それから、Webアプリ導入で削減できるコストを考慮し、追加機能の検討を行います。

これからアプリ開発に向けて、パートナーとして付き合っていく外注先です。

料金だけでなく、見積もり時の担当者が真摯に向き合ってくれることも判断材料にしていきましょう。

運用・保守のサポートがあるか

運用や保守についても外注先と確認しましょう。Webアプリ開発と別料金になる場合が多いです。

自社で運用や保守をする場合、依頼先がWebアプリ開発時に使ったツール・コーディングなど引継ぐ必要があります。

ただし、運用・保守も依頼先に任せる場合は、引継ぎの必要はありません。

運用・保守には毎月の定額保守や、一時的にお願いするスポット保守があります。

それぞれ、保守の範囲、障害時の駆けつけ時間など異なりますのでWebアプリの重要度を考慮し検討しましょう。
 

アプリ運用・保守の重要性

アプリを開発したあとでも、アプリ運用とアプリ保守が必要です。

アプリ運用は日々の管理でハードウェアやネットワーク関連の状態を守ります。

クラウドサービスを利用しているときは、ポータルサイトから確認できるのです。

エラーが発生していないかWebアプリが正常に動作しているか確認することになります。

一方のアプリ保守は、バグがあったときに改善をおこなったり機能を追加したりと、システム関連の仕事をしているのが特徴です。

運用も、保守も地味な作業ですが欠かすことのできないものです。
 
ECサイト制作の事例はこちら  

アプリ運用・保守のコストはどのくらい？

Webアプリの規模や追加する機能などで運用・保守費用は変わるため一概にはいえませんがWebアプリ開発費用の15％ほどともいわれています。

Webアプリの公開後にも、サーバーの費用やドメインの費用・OSアップデートに対応する費用・保守対応にかかる費用がかかるためです。

Webアプリを公開してからどのような保守体制で対応してもらえるのか、運用・保守のためにはどれほどの費用がかかるのかという意識を持ち、ユーザーが満足して使い続けてもらえるようなアプリにしましょう。

Webアプリ開発は実績が多い制作会社に依頼しよう

Webアプリ開発実績の豊富さは、技術力や信頼が認められた証しとなります。

いうまでもありませんが、依頼したい分野での実績があるかどうかも重要です。外注先にも得意・不得意分野があるからです。

実績は、ホームページや打ち合わせ時のヒアリング・設立年数などからできます。

また、10年・20年と長い間同じ会社と取引があれば、実績があると考えられるでしょう。

まとめ

Webアプリ開発を行うとき、外注前に知るべき開発手順・開発に必要なものについてを紹介しました。

• Webアプリとは、Webの仕組みを利用したアプリケーションのこと
• HTML・CSS・JavaScript・SQLなどさまざまな開発言語やフレームワークが用いられる
• スムーズな依頼のために発注側も開発の流れを理解しておくことが大切
• アプリ機能や種類によって費用が異なる
• Webアプリ開発だけでなく運用・保守も大事
• 開発の成功には外注先を選ぶポイントや注意点を押さえておく必要がある

Webアプリ開発は企業にとって最も重要な仕事の一つです。

開発のための十分なノウハウやリソースが自社にないなら、外注を利用するのがよいでしょう。