近年はWebアプリやスマホアプリなど、色々なアプリが次々とリリースされ、まさにアプリ全盛時代を迎えています。
それだけにアプリを作れるエンジニアは需要が高く、高収入も狙えるということで目指す方も増えているようですね。
これを読むあなたもそんな一人で、以下のような疑問・お悩みはありませんか?
Webで動くアプリって、どんなものがあるんだろう?
Webアプリ開発するのに必要な言語って何だろう?
この記事では、上記のような疑問にお答えします。
具体的には、
- Webアプリ・スマホアプリの開発例
- 開発したWebアプリ・スマホアプリを利用した収入を得る方法
- Webアプリ・スマホアプリの簡単な開発工程と、必要な言語
主に上記2点をわかりやすくまとめました。
Webアプリやスマホアプリを開発してスキルアップしたい、高収入を得たいと考えている初心者のあなたは必読です。ぜひ最後までお読みください!
この記事の目次
はじめに:アプリの種類と定義
アプリにも様々な種類がありますので、まずは代表的なアプリについて概要を解説しておきます。
まず、アプリには大きく以下3種類があります。
- Webアプリ
- ネイティブアプリ(スマホアプリ等)
- ハイブリッドアプリ
Webアプリはインターネットなどのネットワーク上で利用できるアプリのこと。GoogleやYahoo、食べログ等がこの例です。
ネイティブアプリは、スマホやタブレット等の端末にアプリをダウンロードして使用し、端末上のみで作動するアプリのことを言います。
最後のハイブリッドアプリは、上記2のアプリの特徴を兼ね備えたアプリで、ブラウザでも端末にインストールしても使うことができます。
なお、それぞれのより詳細な違い・例については以下の記事にまとめています。あわせてお読みください。


Webアプリの開発例13選
まずはWebアプリの開発例からご紹介します。
有名どころから、個人の方が制作したものまで幅広くピックアップしました。
食べログ
グルメ情報サイトとして最も有名な「食べログ」は、Webアプリの代表格です。
予約したい日付や時間帯、予約する人数などを指定した上で検索ができる便利な機能が満載です。口コミで店舗の評価を行ったり、飲食の感想を共有できたりと、一般人から有名人まで多くの人が使用しています。
開発にはRubyが使用されており、会員登録、ログイン、検索、時間帯予約、口コミ機能などの作成に使用されています。
- URL:https://tabelog.com/
- サービス内容:グルメ検索、予約など
- 開発言語:Ruby
- フレームワーク:Ruby on Rails
- データベース:MySQL
クックパッド
「クックパッド」は言わずとしれたレシピサイトの最大手です。写真とテキストでレシピをシェアし合うことはもちろん、プロのレシピや調理動画を見ることもできます。開発には、Ruby、Golang、Python、Java、Rustがこれまで使用されてきています。1言語のみ頼ることなく時流によって、技術的に進歩した言語やフレームワークを取り入れて開発を進める姿勢が見受けられます。
- URL:https://cookpad.com/
- サービス内容:レシピ検索、レシピ投稿、ブログ、ニュース機能など
- 開発言語:Ruby、Golang、Python、Java、Rust
- フレームワーク:Ruby on Rails、Spring Boot
- データベース:MySQL、Redis、Amazon Aurora、Amazon DynamoDB、Amazon Redshift
おそらく使ったことがない人はいないだろうほど有名な検索サイト「Google」にも、さまざまなWebアプリが搭載されています。
電車や車などのルートを検索したり、電卓機能や付近のお店を地図上に表示したり等、検索に関するありとあらゆる機能を無料で使うことができます。
開発言語としては、C/C++、Java、JavaScript、Python、Goが挙げられます。こちらはGoogle社内で開発のための標準言語として定められています。
- URL:https://www.google.com/
- サービス内容:検索サービス
- 開発言語:C/C++、Java、JavaScript、Python、Go
Yahoo!
「Yahoo!」もGoogleと並んで非常に有名なサイトです。ブラウザのトップページをこのサイトにしている方は多いのではないでしょうか?検索機能はもちろん、電車の乗り換え案内やテレビ番組を表示したり、動画視聴やショッピングまで多種多様なサービスが揃う国内最大のポータルサイトです。
開発言語には、Swift、Kotlin、JavaScript、Node.js、PHP、Javaとなります。多数のサービスがあるため、使われている言語も複数となりますが、社内では大人数のチームで開発しやすいよう工夫を凝らしているようです。
- URL:https://www.yahoo.co.jp/
- サービス内容:検索、ニュース、ショッピング、動画視聴など多種多様
- 開発言語:Swift、Kotlin、JavaScript、Node.js、PHP、Java
- フレームワーク:Express、SlimFramework
- データベース:MySQL、Redis、Memcached
locaLPlace
「locaLPlace」は飲食店や医療機関、サロンやレジャー施設まであらゆる施設を検索できるサービスです。駅や市区町村などの「エリア」と施設の「ジャンル」を入力することで簡単に施設検索ができるのが魅力です。
基本的に使用している言語はPHPです。WEBアプリとの親和性が高い言語なので、検索機能や予約システムに使用されることが多いです。
- URL:https://localplace.jp/
- サービス内容:施設検索、オンライン予約など
- 開発言語:PHP
- フレームワーク:Laravel
- データベース:MySQL
Progate
「Progate」は初心者向けのプログラミング学習サービスです。
HTML・CSS・Rubyなどの言語を、スライド形式で「技術の解説」→「設問」を繰り返し学習できます。入門編は無料で使え、ゲーム感覚でプログラミング学習ができます。特に自分のペースで学習を進めていきたいと考える人には、うってつけのプログラミング学習サイトです。
過去の公式アカウントのつぶやきでは、開発にはRubyが使用されているようです。日本生まれのこのプログラミング言語はとても人気です。
- URL:https://prog-8.com/
- サービス内容:プログラミングの学習サービス
- 開発言語:Ruby
- フレームワーク:Ruby on Rails
Wantedly
「Wantedly」は、スタートアップやベンチャー企業に人気のビジネスSNSです。
ユーザー(求職者)と企業の採用担当者が直接やりとりし、 転職だけではなく、新卒やインターン、業務委託まで様々な雇用形態で仕事を募集・応募することができます。
開発言語にはRubyを使用しています。「日本企業が出しているWEBアプリは全部Rubyで開発しているんじゃないの?」と思うぐらい、Rubyは日本で人気です。
- URL:https://www.wantedly.com/
- サービス内容:求人サイト機能、ブログ機能など
- 開発言語:Ruby
- フレームワーク:Ruby on Rails
- データベース:PostgreSQL
note
「note」は、文章、写真、イラスト、音楽、映像などの作品を公開・販売・購入などができるプラットフォームです。
人気のジャンルやタグからクリエイターや作品を探したり、SNS機能も付いていたり等、ここ数年で一気に認知度を広めた人気のサービスです。
開発言語には、RubyとJavaScriptが使用されています。公式によると表示速度の改善のため、JavaScriptのフレームワークであるAngular.js1系からNuxt.jsへ変更したみたいです。
- URL:https://note.com/
- サービス内容:文章、写真、イラスト、音楽、映像などの作品を公開・販売・購入
- 開発言語:Ruby、JavaScript
- フレームワーク:Ruby on Rails、Nuxt.js
プログラミング学習プラン診断
当サイトにも、あなたが学習すべきプログラミング言語などを1分で診断できるWebアプリがあります。
3つの質問を選ぶだけで、プログラミング言語と学習プラン(期間や学習スケジュール)を簡単に提案させていただきます(もちろん無料です)。
- URL:https://www.sejuku.net/blog/diagnose/
- サービス内容:プログラミング学習プランの無料診断
ShogiBan to Kif
ここからは個人が制作したWebアプリをご紹介します。
「ShogiBan to Kif」は、将棋盤面と持ち駒をスマホで撮影してWebサーバに送信すると、AI(人工知能)が即座に局面データとして変換するWebアプリ。
東京農工大学大学院工学研究院の大学院生が開発したアプリです。
開発言語には、Pythonを使用しているのではないかと思います。PythonにはAIや機械学習に必須なライブラリが多数あるのが特徴で、2020年代最も人気のあるプログラミング言語になるのではと注目を集めています。
- URL:https://shogi.nkkuma.tokyo/
- サービス内容:将棋盤面と持ち駒をWebデータに変換する
オミカレ
日本最大級の婚活・お見合いパーティー情報サイトです。
都道府県別に職業や年齢など条件別に検索システムが搭載されており、参加体験談など口コミ情報を投稿することもできます。
検索やマッチングシステム、口コミ投稿機能など、アプリ開発による機能が満載です。
開発言語にはPHPが使用されています。
- URL:https://party-calendar.net/
- サービス内容:マッチングサービス
- 開発言語:PHP
- フレームワーク:CodeIgniter 2
- データベース:Amazon Aurora 1
Paletta
「Paletta」は、石丸 翔也さんが制作した、プログラマー向けのカラーパレットツールです。
カラーパレットをクリックすると、その色の同系色がカラーコードとともに表示される、Webサイト等の開発にぴったりな仕様になっています。
こちらはJavaScriptを使用してカラーの表示変換を行っています。HTML&CSSでマークアップされたサイト内の文字や物体を、動かしたり、変化させたりするのはJavaScriptが得意とするところです。
- URL:http://paletta.mrk1869.com/
- サービス内容:カラーパレットツール
- 開発言語:JavaScript
- ライブラリ:jQuery
みんなの感想文
みんなの感想文は、フジワラユウタさん(@Fujiyama_Yuta)が開発した読書感想文をWeb上で作成できるサービス。
ブラウザ上でキーボードを使ってテキストを入力するだけで、入力した内容がリアルタイムで反映されていきます。こちらも、JavaScriptで開発されています。
- URL:https://kansobun.jp/
- サービス内容:Web上で縦書きの読書感想文を作成できる
- 開発言語:JavaScript
ネイティブアプリ(スマホアプリ)の開発例10選
続いてはスマホなどの端末にダウンロードして使う「ネイティブアプリ」をご紹介します。
こちらは、最小限のプログラミング知識で簡単にアプリが作成できるツールを使用して作られたものを中心にピックアップしていきます。
ディノス セール公式アプリ
ディノス セール公式アプリは、通販サイトdinosのスマホアプリ。
商品やお店の検索機能はもちろん、アプリ先行セールや各地で開催されるイベントSALEなどの情報をポップアップ通知する機能があります。
開発に使用された「Yappli」とは、プログラミング言語の知識が乏しくてもスマートフォンアプリを簡単に制作できるアプリ開発サービスです。スマートフォンアプリを簡単に開発が素早くできるので、すでに250社以上で導入されている実績もあります。
- iOSアプリ
- Androidアプリ
- サービス内容:商品・店舗検索、セール情報の配信
- 開発に使用したツール:Yappli
【プ活】プロント公式アプリ
【プ活】は、カフェ・バーのチェーン店として有名なプロントの公式アプリ。
アプリ限定のお得なクーポンや、プロントからの最新メニュー情報を配信したり、位置情報を利用した店舗検索が可能です。
- iOSアプリ
- Androidアプリ
- サービス内容:クーポン、最新情報の配信、店舗検索
- 開発に使用したツール:Yappli
JapanTaxi
こちらは日本交通株式会社が開発した、全国対応のタクシー配車アプリになります。
GPS機能を利用することで、提携先のタクシー会社約2万台の中から、乗車場所の付近を走行しているタクシーを簡単に呼び出すことができるため、急いでいるときなど大変便利なアプリです。
当初の開発言語には「Swift」が使用されています。これはiOSアプリの開発にしようされるプログラミング言語でとても有名です。
- iOSアプリ
- Androidアプリ
- サービス内容:タクシーの配車
- 開発に使用した言語:Swift
タニタの健康管理アプリ ヘルスプラネット
タニタ社が運営する無料健康管理サイト「ヘルスプラネット」のアプリ版です。
体重・体脂肪・歩数などをグラフ化し、効率の良いダイエット・健康管理をサポートします。
開発に使用された「Monaca」の特徴はなんといっても、
- WindowsでもiOSアプリの開発ができる。
- エディタを使わず、ブラウザ上でコーディングができる。
といった点でしょう。開発環境の構築も必要とせず、いつ、どこでもスマートフォンアプリの開発が可能です。
- iOSアプリ
- Androidアプリ
- サービス内容:ダイエット・健康管理サポート
- 開発に使用したツール:Monaca
残高確認(ジャパンネット銀行)
ジャパンネット銀行の公式アプリで、同銀行の口座の残高確認が簡単に行えるもの。
画面上で「ログインパターン」をなぞるだけでログインでき、残高の他、直近の取引明細10件までが確認できるようになっています。こちらの開発にはMonacaが使用されています。
- iOSアプリ
- Androidアプリ
- サービス内容:残高確認、直近の取引明細10件まで確認
- 開発に使用したツール:Monaca
RunRing
RunRingは、日本人初オリンピック400mファイナリストの高野進氏が総合監修したランニングのトレーニングを音楽とリズムに合わせて体現する新感覚エクササイズアプリです。こちらの開発にはMonacaが使用されています。
- iOSアプリ
- Androidアプリ
- サービス内容:ランニングのトレーニングアプリ
- 開発に使用したツール:Monaca
福山ローズファイターズ公式アプリ
福山ローズファイターズ公式アプリは、広島県福山市にある社会人硬式野球クラブチームの公式アプリ。
選手紹介や試合レポートなどの情報をプッシュ通知で配信する、ファン用アプリです。
開発に使用されている「アプスタ」は、主に販促、集客用アプリ作成ツールになります。店舗運営に必要な基本機能は標準搭載されおり、専門的な知識もいらないため、オリジナルの店舗アプリを作成できます。
- iOSアプリ
- Androidアプリ
- サービス内容:選手紹介や試合レポートの配信
- 開発に使用したツール:アプスタ
ばり馬
中国地方を中心にチェーン展開しているラーメン屋さん「ばり馬」の公式アプリです。
クーポンの配信の他、位置情報を利用した近隣店舗の検索も可能です。
こちらもアプスタを使用して開発されています。お店などを経営されている人ならほとんどの方が使用されているのではと思います。
- iOSアプリ
- Androidアプリ
- サービス内容:クーポンの配信、店舗検索
- 開発に使用したツール:アプスタ
DIY育毛「アデランス」Men's公式アプリ
発毛・育毛から増毛・かつらなどのサービスを展開するアデランスの公式アプリです。
ユーザー登録することで毛髪状況や生活環境に合わせたアドバイスを提供したり、ネットショッピングも可能です。
こちらもアプスタを使用して開発されています。販促用でありながらブログ感覚でテキストや画像の投稿が可能なのも特徴的です。
- iOSアプリ
- Androidアプリ
- サービス内容:毛髪状況や生活環境に合わせたアドバイス、ショッピング
- 開発に使用したツール:アプスタ
FORD1 PLUS
FORD1 PLUSは沖縄県リゾートダイビング事業連合会(FORD1)が運営する沖縄スキューバダイビングの総合情報アプリ。
スキューバダイビングのポイント情報から生物情報、様々なイベントを配信しています。
開発に使用されている「SmartAppsMobile」は、モジュールの組み合わせで簡単にアプリを作成できます。スタンプやクーポンのアップ、レストランや店舗用のアプリを作成できるなど、オールラウンドに使用できるツールです。
- iOSアプリ
- Androidアプリ
- サービス内容:スキューバダイビングのポイント情報、生物情報、イベント情報の配信
- 開発に使用したツール:SmartAppsMobile
ハイブリッドアプリの開発例7選
最後に、Web・スマホなどのデバイス両方に対応したハイブリッドアプリの例をご紹介します。
※一部、ここまですでにご紹介した事例も含みます。
Amazon
世界最大のショッピングサイトAmazonは、Webサイト上・スマホアプリなど両面でアプリを開発。
ユーザーが快適に商品を見つけやすい工夫をしています。
開発言語にはJavaが使用されているみたいです。JavaはWebアプリ、スマートフォンアプリどちらの開発にも対応している便利で、人気1,2位をプログラミング言語です。
- URL:https://www.amazon.co.jp/
- サービス内容:オンラインショッピング
- 開発言語:Java
AbemaTV
AbemaTVは、アメブロなどで有名なサイバーエージェント社が運営する無料のインターネットテレビ・動画配信サービス。
インターネットのブラウザ上の他、スマホアプリにも、AmazonFireTVなどの動画視聴デバイスのアプリにも対応しています。
開発言語にはGolang、Java、JavaScript、Kotlin、Swiftです。こちらにもWebアプリとスマートフォンアプリどちらも対応できるJavaが使用されています。
- URL:https://abema.tv/
- サービス内容:TVコンテンツ配信サービス
- 開発言語:Golang、Java、JavaScript、Kotlin、Swift
- データベース:MongoDB、Redis Cluster、Cloud Bigtable
⇨ AbemaTV
ZOOM
ZOOMは、ビデオ通話やチャットでのコミュニケーションを無料で利用できるサービス。
PC用のアプリもありますが、Web上からでも利用でき、かつiOS・Androidともにスマホアプリがあります。
- URL:https://zoom.us/jp-jp/meetings.html
- サービス内容:コミュニケーションサービス
Twitterは言わずとしれた世界有数のSNSサービス。
PC・スマホ対応のWeb上で動くアプリの他、iOS・Androidどちらもアプリがあります。リツイート機能などの開発にはRubyを使用しています。
- URL:https://twitter.com/login
- サービス内容:オンライン掲示板
minne
ハンドメイド・手作り・クラフト作品のマーケット「minne」も、インターンネット上で閲覧できるサイトとスマホアプリどちらにも対応したハイブリッドアプリ。
商品の売買の他、編集部が配信している読み物も見ることができます。
開発に使用されている言語は、Ruby、Golang、Swift、Objective-C、Java、Kotlinになります。会員登録機能、ログイン機能、決済機能などを作成しています。
- URL:https://minne.com/
- サービス内容:オンラインマーケット
- 開発言語:Ruby、Golang、Swift、Objective-C、Java、Kotlin
- フレームワーク:Ruby on Rails、Vue.js
- データベース:Amazon RDS for MySQL、Redis、Elasticsearch、Memcached
クラウドワークス
クラウドワークスは、日本最大級のクラウドソーシングサイト。様々な分野の業務委託案件を依頼・受注できます。
こちらもWebサイトの他スマホアプリにも対応していて、仕事検索以外にも、メッセージのやり取りや条件の交渉機能なども付いています。
開発言語は、Ruby、JavaScriptです。会員登録や案件表示、メッセージのやり取り機能など、多くの機能がこれらの言語で実装されています。
- URL:https://crowdworks.jp/
- サービス内容:クラウドソーシングサービス、人材紹介サービス
- 開発言語:Ruby、JavaScript
- フレームワーク:Ruby on Rails、Vue.js
- データベース:MySQL、Amazon Redshift、Redis、Memcached、Elasticsearch
クックパッド
繰り返しのご紹介になりますが、クックパッドもハイブルッドアプリの代表例です。
ブラウザ上のWebサイトはもちろん、iOS・Androidともにレシピ検索サービスの他、お弁当や料理の記録サービスなども展開しています。
- URL:https://cookpad.com/
- サービス内容:レシピ検索、レシピ投稿、ブログ、ニュース機能など
- 開発言語:Ruby、Golang、Python、Java、Rust
- フレームワーク:Ruby on Rails、Spring Boot
- データベース:MySQL、Redis、Amazon Aurora、Amazon DynamoDB、Amazon Redshift
アプリ開発の工程の例
では、ここまでご紹介してきたアプリはどのような流れで開発されるのでしょうか?
アプリの種類によらず、開発は同じような手順で進み、主に以下5ステップです。
- 環境構築
- 企画
- 開発
- テスト
- リリース
プログラムを書くなどのいわゆる「開発」は3番目で、実際は前段階でも綿密な準備が必要で、開発が終わってからもテストという大事な工程があります。
より詳しい内容は以下の記事にまとめていますのでお読みください。

開発したWebアプリをどう活かす?
上記でさまざまなアプリ開発開発例を紹介してきました。読者の皆様も「自分でWebアプリ開発したい!!」と思ったかもしれません。
この項目では、実際に自分で開発したWebアプリをどう活かすのか解説します。
せっかく作成したWebアプリですので、自分以外の人に使ってもらったり、評価してもらい次回の開発に活かしたり、収入・スキルアップに繋げましょう。
アプリを配布し収入を得る
作成したアプリを配布して収入を得る方法があり、主に以下の3つです。
- 有料アプリによる収入
- アプリ内課金による収入
- アプリ上の広告表示による収入
初心者ですと、無料ダウンロードアプリを開発して、アプリ上の広告表示で稼ぐのがおすすめです。
稼ぎにならなくとも、自作アプリを配布するとで評価を得ることができ、次回はより高機能を搭載したアプリを開発できるようになります。
転職活動に活かす
2020年はAI時代とも言われるように、転職市場ではITエンジニアの採用が高まっています。転職の選考で必ず聞かれるのが、「プログラミング言語は何が使えるか」、「開発経験はあるか」です。この2点の有無により年収も決定します。
面接時なら口頭でも説明しますが、履歴書や職務経歴書に事前にWebアプリのURLと概要を記載しておくとおすすめです。
自身で開発した作成物があるかないかで、内定の獲得しやすさや年収に大きく違いが出てくるので、ぜひ自身でWebアプリを開発し、有利に転職活動を進めてください。
仕事の案件獲得に繋げる
フリーランスエンジニアとして収入を得る方法もあります。
高額な案件も多いですが、1つの案件を獲得するだけでも難しく、辞めてしまう人もいます。
そんなときにポートフォリオとして開発したWebアプリを紹介して、案件獲得の成功率をアップさせましょう。クライアントも高いお金を支払うため、依頼する相手を慎重に選びます。
作成したWebアプリがある人なら、スキルがどの程度あるか1目で分かります。そのためクライアントも仕事相手を選出しやすくなり、あなたをパートナーとして選んでくれる可能性が高くなります。
アプリ開発に必要なスキルは?
続いて、アプリ開発に必要なスキル(プログラミング言語など)の例を挙げると、以下の図のとおりです。
【Webアプリを開発するためのスキル例】
- Webの基礎知識・仕組み
- プログラミング言語・フレームワークなど
【スマホアプリを開発するためのスキル例】
- プログラミング言語(Swift、Java、Kotlinなど)
- アプリ開発ツール(Xcode、Unity、Android Studioなど)
なお、詳しい内容はそれぞれ以下の記事にまとめていますので参考になさってください。
最短でWebアプリ等のアプリ開発を仕事にするには?
ここまで読んでくると、
という疑問も出てくることと思います。
そんなあなたは「プログラミングスクール」に通うのが最もおすすめの方法です。
プログラミングスクールは、現役でアプリ開発を行っているエンジニアに直接スキルを教わることができるため、モチベーションを維持しつつ最短で効率よくアプリ開発の技術を学ぶことができます。
このブログを運営する当社でもプログラミングスクール「侍エンジニア」があり、現役エンジニアがあなた専用のオリジナルカリキュラム作成から実際の指導までを行い、さらに就職転職サポート付き。
未経験からアプリ開発の仕事を目指すあなたのため、最適な環境をご用意しています。
まずはオンライン対応の「無料体験レッスン」をお気軽にご利用いただき、疑問・不安を何でもご相談ください!