アプリ開発の流れ



アプリ開発の流れについて

アプリ開発の流れページでは、お客様からお問い合わせをいただいてから、アプリ開発をしリリース完了するまでの流れを１から順を追って説明いたします。このページを見ていただければ、お客様の思い描くアプリが実際に形になるまでの工程について、理解が深まると思いますので是非ご覧ください。
また、お問い合わせは無料となっておりますので、お気軽にお問い合わせください。

START !

まずは気軽にお問い合わせ

画面左下のチャットか、お問い合わせページからお気軽にお問い合わせください。
弊社、専門スタッフがお客様の疑問点や開発依頼、お見積り等なんでもお応えいたします。

お問い合わせはこちら

企画

要求調査とは

要求調査とは、開発前にお客様がどんなアプリを作成したいか、要求をヒアリングする工程です。次のような事項を事前にまとめていただけるとスムーズです。
アプリの概要やコンセプト、企画の背景や現状の課題、サービスの展望、ユーザーターゲット、リリースのフェーズ分け、希望リリーススケジュール、対応デバイスやプラットフォーム、予算、その他要望一覧など。何か不明な点があればお気軽にお問い合わせください。

要求調査

要件定義とは

要件定義とは、お客様の要望をシステム上で再現するために必要な項目を設計する工程です。お客様にシステムに関する知識がなくても、弊社のエンジニアが要望をヒアリングしながら要件を作成しますのでご安心ください。
この工程でお客様の要望と要件の間に認識の齟齬が発生したまま開発を進めると、後に大きな修正が必要になる可能性があるため非常に重要な工程となります。認識の齟齬が生じないように、細部までヒアリングしお客様と二人三脚で要件を決定していくようなイメージとなります。

まだ完全に要望が固まっていないけど開発依頼したい

完全に要望が決定していない場合でも問題ありません、まずはお気軽にご相談ください。要望が実現可能かどうかわからない場合は、弊社のエンジニアがご相談に対応し実現に向けて協力いたします。
また考案中のアイデアが最適なのか、結果が出るかわからないケースもあると思います。その場合は実用最小限の機能を実装したサービスを先にリリースし、実際にサービスを使用したユーザーの反応を見てから方針を決定し、機能を追加していく対応方法も可能なのでご相談ください。

スマホアプリやLINEアプリを作成したい

弊社では、スマホアプリやLINEアプリを作成したいという依頼にも対応いたします。
スマホアプリ化すると、ユーザー端末のホーム画面にアイコンをインストールできるため、通常のWebサイトよりアクセスしやすく手軽さという面でメリットがあります。その他にもオフラインでの動作が可能であったり、プッシュ通知によるユーザーへのアクション、GPS（位置情報）の利用なども可能になり、スマホアプリ化することで機能の幅を広げることができます。
LINEアプリでは、すでにLINEが端末にインストールされていれば、すぐにアプリを使用することができるので、ユーザーに利用してもらいやすいメリットがあります。LINE上の会員証と連携させたサービスや、キャンペーンの案内、LINEアプリ上での商品注文、LINE Payの活用などLINEの機能と連携することができ、LINE内だけ完結できるような機能が揃っています。
LINEアプリ開発について、さらにくわしく知りたい方はLINEアプリ開発のページをご覧ください。

MVP開発

MVP(Minimum Viable Product)とは、実用最小限の機能を実装したサービスを開発し、小さいリリースを段階的に繰り返し行う手法のことです。
もし大規模なリリース後にユーザーのニーズに合わなかった場合、修正範囲が大きくなる可能性があります。しかし、MVP開発で小さいリリースを繰り返し行うことにより、早い段階でユーザーのニーズが明確になり、追加要望や修正があった場合でも影響を最小限に抑えられるというメリットがあります。
MVP開発を行ったほうが、より短い時間で理想的なサービスをリリースできるので結果的に開発時間の削減になり、人的コストの削減にも繋がる可能性があります。

要件定義

技術選定とは

技術選定とは、アプリケーションを開発する際に使用する技術を選定することです。お客様が要望するサービスに最適な技術を弊社が選定いたします。
技術の選定基準は、主に「開発速度が上がるか」「品質を高くできるか」の2点です。弊社ではより良いサービスをお客様に提供できるように従来の技術だけではなく、最新の技術も織り交ぜながら高品質で安全なサービスを開発いたします。
しかし、新しい技術は突然サポートを終了したり変動が激しいデメリットもあります。弊社では、そのようなリスクも考慮し技術選定いたします。

最適な技術選定でどんな効果が得られるの？

最適な技術選定をすることで開発速度が上昇し、生産性が上がります。時代とともに便利なサービスやフレームワークが登場し、今まで複雑だったさまざまな処理や作業を効率化できるため開発速度が上がります。
そのためお客様のサービスを速くリリースすることに繋がり、エンジニアの作業時間が短縮されるので人的コスト削減も期待できます。

使用する技術の例

選定する技術はお客様の要望により異なりますが、ここでは弊社が強みとする主な技術を紹介します。
画面デザインは、Figmaというデザインツールを使用しワイヤーフレームやデザインを作成します。フロントエンド開発では、主にVue.js+Nuxt.jsを採用します。バックエンド開発では、主にTypeScript+Node.jsかRuby+Ruby on Railsを採用します。インフラでは、主にAWSのサービスを採用し、高速かつ保守性が高いサーバーレスアーキテクチャを構築した実績も多くあります。
これらの技術についてさらに知りたい方は、このページ内の実装でくわしく紹介しているのでそちらをご覧ください。

技術選定

弊社が推奨する開発形態

弊社が推奨する開発形態は、アジャイル開発とウォーターフォール開発のメリットを両方兼ね備えたハイブリッドな開発形態となります。
アジャイル開発は、1週間～2週間程度の短いスパンで「企画、設計、実装、テスト」を繰り返す開発手法であり、変更に強く柔軟性があるメリットがありますが、開発着手時点で完成するまでの工数と金額が確定されないデメリットがあります。
一方、ウォーターフォール開発は、開発着手時点で完成するまでの工数と金額が確定しますが、開発途中で変更があった場合に、修正箇所が多くなる傾向があり追加費用も多くなるデメリットがあります。
弊社では、アジャイル開発とウォーターフォール開発のデメリットを解消するため、２〜３ヶ月程度のスパンで開発できる範囲の工数と金額を開発着手前に決定し、開発を進行します。これにより、ある程度の変更にも柔軟に対応でき、完成までの工数と金額も把握しやすくなるので、このような形態を推奨しております。

アジャイル開発とは

アジャイル開発とは、「企画、設計、実装、テスト」を1週間～2週間程度の短いスパンで何度も繰り返す開発手法です。アジャイルとは、「素早い」「俊敏な」という意味があります。
要件が完全に決まっていなくてもエンジニアと二人三脚で開発を進めることができ、短いスパンで少しずつ機能を追加していくので、修正や変更があった場合でも戻り工数が少なく、途中の要件変更などに強い傾向があります。アジャイル開発はウォーターフォール開発よりも柔軟性が高く、低リスクな特徴があります。
また、アジャイル開発を繰り返し行っている過程で実用最小限の状態になったらリリースを行い、実際のユーザーの動向を見てから今後の改善計画を立てるアプローチも可能なので、最短距離でユーザーが求めるサービスを実現することができます。
アジャイル開発では、月単位で一定数のエンジニアを確保する形態になります。そのため、月額でエンジニアが開発した工数時間分の費用が発生します。

ウォーターフォール開発とは

ウォーターフォール開発とは、開発開始前に開発にかかる工数とスケジュール・費用を算出し、決められたスケジュール通りに開発を行う開発手法です。「企画、設計、実装、テスト」を後戻りすることなく１つずつ順番通りに開発を進めることから、上流から下流へ流れる滝にたとえて、ウォーターフォール開発と呼ばれています。
ウォーターフォール開発の最大の特徴は、開発開始時点でスケジュールと費用が明確になることです。しかし、開発において後戻りを考えていないモデルであり、途中の仕様変更や追加要件などの変更が発生した場合に対応できない、または多くの追加費用がかかってしまうデメリットがあります。またリリース後に修正を行う場合、すでに大規模なシステムが完成しているため修正箇所が多くなる傾向があります。

開発形態選択

見積もりとは

見積もりでは、「要件定義、技術選定、開発形態」の内容を踏まえて、工数と金額を算出した見積もりを作成いたします。見積書の内容に承諾いただければ、ここから開発をスタートさせていただきます。

見積もり

設計

画面設計とは

画面設計とは、画面レイアウトや表示項目などの設計を行うことです。で決定した要件をもとに必要な画面や要素を「何を、どこに、どのように」配置するか決定し、ユーザーにとってわかりやすく、操作しやすくなるように画面を設計します。

ワイヤーフレームとは

ワイヤーフレームとは、Webページのレイアウトを定めるラフデザインのような設計図のことです。
このワイヤーフレームをもとにお客様と確認を取りながら、イメージの共有や表示項目の確認などを行いデザインを確定させていきます。ワイヤーフレームが確定した段階で、Webページの色や画像がついたデザインを作成します。

デザインツールのご紹介

ワイヤーフレームとデザインを作成するツールとして弊社では、主にFigmaというツールを採用しています。Figmaは、Webデザイン作成に特化したデザインツールであり、高機能かつ直感的な操作ができるためスピーディーなデザイン作成が可能です。
また、大きな特徴としてリアルタイム共同編集やコメント共有機能があり、お客様との確認作業を円滑に進めることができます。Figmaとよく比較されるデザインツールとしてAdobeXDがありますが、Figmaのほうが情報共有のしやすさがあり、スピーディーなやり取りができると感じているため、弊社ではFigmaを推奨しています。

画面設計

インフラ設計とは

インフラとは、インフラストラクチャーの略で「基盤」という意味があります。このインフラ設計の工程では、アプリケーションを動かすためのネットワークやサーバーなどに関する設計を行います。
インフラ設計では、価格、拡張性、運用負荷、セキュリティなどを観点に、お客様が要望されるアプリケーションに合わせた最適なインフラを弊社エンジニアが設計いたします。弊社では、主にAWSのサービスを中心にインフラ設計を行うケースが多いです。

AWSとは

弊社が得意とするのは、AWS（Amazon Web Services）と呼ばれるAmazon.comが提供するクラウドコンピューティングサービスを利用したインフラ構築です。
AWSはクラウドインフラ市場のシェアで世界首位であり、高機能かつ最先端の技術を利用できるさまざまなサービスがあります。また料金は利用料に応じた従量課金制なので、コストを最低限に抑えることも可能です。AWSについてはさらに知りたい方はこちらをご参考ください。

インフラ設計

DB設計とは

DB設計とは、データベースに関する設計をする工程です。信頼性、拡張性が高く、要件を満たすデータベースを設計します。弊社では、サーバーレスアーキテクチャを採用する例がありますので、その場合にはお客様の要件に合わせてAmazon RDSやAmazon DynamoDBを採用します。

DB設計

API設計とは

API設計とは、WebAPIを設計する工程です。リソース設計、URI設計、レスポンスデータ設計や例外設計、ログ設計などを行い、さまざまな要件とのバランスを保ちつつ、効率的に開発ができるようなAPI設計をします。

API設計

実装

インフラ構築とは

インフラ構築の工程では、インフラ設計をもとにインフラの構築を行います。
具体的には、CI/CDを導入しテスト自動化、AWSを使用したインフラ構築、DockerやKubernetesを利用し仮想環境であるコンテナを作成や管理を行います。

サーバーレス

サーバーレスとは、サーバーの構築や保守などの面倒な管理をすることなく、プログラムを実行できる仕組みです。サーバー"レス"とは言っても、実際にはサーバーは存在するのですが、開発者がサーバーの存在を意識しなくて済むように、AWSなどのサービスがサーバーの構築や保守を代行します。
そして、エンジニアはサービス開発のみに専念することで、高速かつ安全で高品質なサービスを開発できます。弊社では、要望されるサービスによって異なりますが、API Gateway、Lambda、DynamoDB、Amplify、Elasticsearch ServiceなどのAWSサービスを採用することで、サーバーレスアプリケーションを構築します。

CI/CD

CI/CDとは、テストやビルド、デプロイを自動化し、品質管理を行う手法のことです。
CI/CD導入により開発中アプリケーションのコード変更を感知し自動テスト行うことができ、常に本番環境にリリース可能な状態を維持できます。
またテストされたコードのマージや、本番環境向けのビルドの作成を自動的に行うことで手間を省くことができます。コードの品質を保ちながら、手間を省くことができるので開発速度が向上します。

Docker・Kubernetes

Dockerとは、コンテナ型の仮想環境を作成、配布、実行するためのプラットフォームであり、軽量で高速に起動や停止などが可能です。
Dockerを使用する利点は、コード化されたファイルを共有することで誰でも同じ環境が作れること、作成した環境を配布しやすいこと、スクラップ＆ビルドが容易にできることが挙げられます。Dockerを導入することで、開発環境の違いによる不具合を防ぐことができます。
また複数のDockerコンテナを管理し、自動化するものとしてKubernetesというツールがあります。
Kubernetesを使用することで、複数のDockerホスト管理やオートスケーリング、コンテナの死活管理、ロードバランシング、ログ管理などDocker単体では難しかった問題を解決することが可能です。弊社では、この学習コストが高いKubernetesの導入サポートも行っております。
くわしくはKubernetes導入サポートのページをご覧ください

インフラ構築

フロントエンドとは

フロントエンドとは、アプリケーションの画面デザインやユーザーが入力したデータをサーバー側に送信することなどを担当する領域を指します。もう少しフロントエンドが担当する工程を紹介すると、画面デザインのマークアップ、画面遷移、データの表示、データの入力制限、データの加工、サーバー側へのデータ送信、SEOの最適化、ブラウザへのデータ保存、状態管理などさまざまな項目があります。
弊社では、標準のフロントエンドフレームワークとして、Nuxt.js(Vue.js)を採用しています。また、スマホアプリやLINEアプリの開発にも対応いたしますので、お気軽にお問い合わせください。

Nuxt.js

弊社では標準のフロントエンドフレームワークとして、Nuxt.js(Vue.js)を採用しています。Nuxt.jsとは、Vue.jsをベースにしアプリケーション開発をより速く品質を高いものにするフレームワークです。
Nuxt.jsを使用することで、Vue.jsの課題であったサーバーサイドレンダリング（SSR）の問題を解決することでページの表示を高速化でき、SEO対策も十分なものとなっています。</p><p>Nuxt.jsは基本のフォルダ構成があらかじめ決まっており、規約に則ったコーディングをする必要があるので、人によって違った実装方法になる問題がなく品質を保つことができます。また、Nuxt.js内でTypeScriptを採用することにより、型安全なシステムが構築でき、品質の向上を図ることが可能です。

マークアップ

マークアップとは、HTMLやCSSなどの言語を使用し、画面デザインを構築する工程のことをいいます。
画面設計で作成されたデザインをもとに、実際のアプリケーションで表示されるようにHTMLとCSS、JavaScriptを使用しコーディングします。HTML、CSS、JavaScriptを簡単に説明すると、HTMLでシンプルなボタンの骨組みを作成し、CSSでボタンの色や大きさや影を装飾し、JavaScriptでボタンが押されたらどう機能するかを制御します。
このマークアップの作業を簡単にしてくれるフレームワークがあり、弊社はVuetifyやTailwindCSSを使用した事例があります。
Vuetifyは、Vue.jsのUIフレームワークであり、直感的に高品質なコンポーネント（部品）を使用できます。Vuetifyが多機能かつ高品質であり、安定した動作が実現できるためVue.jsのUIフレームワークの中ではもっとも優れていると感じます。しかし、Vuetifyは決まったコンポーネントが用意されているため、あまり柔軟性がなくお客様の要望されるデザインにするには少々問題が発生するかもしれません。
柔軟性があるデザイン対応する場合には、TailwindCSSというフレームワークを使用します。TailwindCSSとは、2018年に登場してから人気が急上昇しているユーティリティ系のCSSクラスを集合させたフレームワークです。TailwindCSSを使用することで、CSSの初期化が非常に簡単になり、クラス名を考える手間が省け、すでにルール化されたクラスを使うことで高速かつ再利用しやすいデザインを作成できます。

フロントエンド開発

バックエンドとは

バックエンドとは、サーバーサイドとも呼ばれ、主にサーバーやデータベースとの連携を担当する領域を指します。
たとえば、フロントエンド側でユーザーが送信したログインIDとパスワードのデータをバックエンドが受け取ります。そして、バックエンドでデータベース内に該当するユーザー情報が存在するかを確認し。ユーザー情報があればログインを完了させ、なければフロントエンド側にエラーを送信する機能などをバックエンドが担当します。

TypeScript

弊社は、標準言語としてTypeScriptを採用しております。TypeScriptは、JavaScriptを拡張し型定義が可能になった言語です。
2017年にはGoogleが社内の標準開発言語としてTypeScriptを採用し、近年急速に需要が拡大しており、将来性の高い言語となっています。JavaScriptでは不可能だった型定義が可能になったため品質が向上し、大規模開発でも耐えられるようになりました。
さらに、バックエンドとフロントエンド両方でTypeScriptを使用することで、エンジニアがバックエンド・フロントエンドどちらも開発できるようになるので開発効率が上昇し、データのやり取りも楽になるので非常に有用性が高い言語です。
弊社では、標準言語をTypeScriptとし、実行環境としてNode.jsを採用しています。

RESTful API

バックエンドでは、RESTfulなAPIの開発を行います。RESTful APIとは、RESTの原則に則って構築されたWebシステムのHTTPでの呼び出しインターフェースのことです。RESTとは、アドレス可能性、ステートレス性、接続性、統一インターフェースの4原則からなる設計手法のことです。RESTful APIを採用することで、URIに規律が生まれ開発者が理解しやすくなり、HTTP標準のメソッドを使用することでシンプルで一貫性のあるリクエストを送ることが出来ます。
API開発に使用する技術はお客様の要件によって変動しますが、AWS API GatewayやLambda、Express、Ruby on Railsなどを使用します。

GraphQL

弊社では、要望されるサービスに応じてGraphQLを採用するケースがあります。GraphQLとは、API用のクエリ言語です。
RESTは複数のURLからデータ取得する必要がありますが、GraphQLはリクエストを束ねて効率化することで1回のリクエストですべてのデータを取得することが可能です。GraphQLはマイクロサービスの中間層として良い役割を発揮します。データ取得を効率化することで、シンプルなデータ連携を可能とします。
また、AWS AppSyncというデータをリアルタイムで管理・同期するサービスではGraphQLを使用することができ、変更発生時に各ユーザーのデバイスでどのデータを自動的に同期するか選択することで、ストレージと帯域幅の要件を最小限に抑えることができます。
また、Apollo Serverというサービスを使用することで、既存のREST APIやデータベースなどからGraphQLを経由してデータを取得できるように構築することを可能にします。
以上のようなサービスを使用した開発も受け付けていますので、ご相談ください。

バックエンド開発

テスト

内部結合テストとは

内部結合テストとは、開発したシステムの各機能を結合させ、正しく動作するか検証するテストです。
画面や複数モジュールにまたがった処理やデータフロー、例外処理が正しく行われているかを確認します。内部結合テスト内で不具合が発覚した場合は、該当箇所を修正し、再度内部結合テストを行い、これをすべての問題が解消されるまで繰り返します。

内部結合テスト

外部結合テストとは

外部結合テストとは、実際の本番環境で動作させるようなシステム間を結合させ、正しく動作するか検証するテストです。
システム同士の連携によって処理に不具合が生じないかを検証します。

外部結合テスト

受入テストとは

受入テストとは、開発したアプリケーションをお客様に直接確認していただく、リリース前の最終確認テストとなります。
受入テストは通常のテストと違い、システムの不具合を見つけることが目的ではありませんが、本来の要望や要件通りにシステムが正常に動作するかを検証するものとなります。お客様のイメージするシステムになっているかを確認し、不具合を未然に防ぐためにも必要な工程となります。