Webアプリ・スマホアプリの開発例30選┃あなたも開発にチャレンジ

近年はWebアプリやスマホアプリなど、色々なアプリが次々とリリースされ、まさにアプリ全盛時代を迎えています。

それだけにアプリを作れるエンジニアは需要が高く、高収入も狙えるということで目指す方も増えているようですね。

これを読むあなたもそんな一人で、以下のような疑問・お悩みはありませんか?

Webアプリやスマホアプリって初心者でも開発できるのかな?
Webで動くアプリって、どんなものがあるんだろう?
Webアプリ開発するのに必要な言語って何だろう?

この記事では、上記のような疑問にお答えします。

具体的には、

  • Webアプリ・スマホアプリの開発例
  • 開発したWebアプリ・スマホアプリを利用した収入を得る方法
  • Webアプリ・スマホアプリの簡単な開発工程と、必要な言語

主に上記2点をわかりやすくまとめました。

Webアプリやスマホアプリを開発してスキルアップしたい、高収入を得たいと考えている初心者のあなたは必読です。ぜひ最後までお読みください!

はじめに:アプリの種類と定義

画像:Shutterstock

アプリにも様々な種類がありますので、まずは代表的なアプリについて概要を解説しておきます。

まず、アプリには大きく以下3種類があります。

  • Webアプリ
  • ネイティブアプリ(スマホアプリ等)
  • ハイブリッドアプリ

Webアプリはインターネットなどのネットワーク上で利用できるアプリのこと。GoogleやYahoo、食べログ等がこの例です。

ネイティブアプリは、スマホやタブレット等の端末にアプリをダウンロードして使用し、端末上のみで作動するアプリのことを言います。

最後のハイブリッドアプリは、上記2のアプリの特徴を兼ね備えたアプリで、ブラウザでも端末にインストールしても使うことができます。

なお、それぞれのより詳細な違い・例については以下の記事にまとめています。あわせてお読みください。

Webアプリ開発とは?入門者がゼロから開発するための知識と学習手順まとめ
更新日 : 2020年10月12日

Webアプリの開発例13選

まずはWebアプリの開発例からご紹介します。

有名どころから、個人の方が制作したものまで幅広くピックアップしました。

食べログ

引用元:食べログ https://tabelog.com/

グルメ情報サイトとして最も有名な「食べログ」は、Webアプリの代表格です。

予約したい日付や時間帯、予約する人数などを指定した上で検索ができる便利な機能が満載です。口コミで店舗の評価を行ったり、飲食の感想を共有できたりと、一般人から有名人まで多くの人が使用しています。

開発にはRubyが使用されており、会員登録、ログイン、検索、時間帯予約、口コミ機能などの作成に使用されています。

  • URL:https://tabelog.com/
  • サービス内容:グルメ検索、予約など
  • 開発言語:Ruby
  • フレームワーク:Ruby on Rails
  • データベース:MySQL

クックパッド

引用元:クックパッド https://cookpad.com/

「クックパッド」は言わずとしれたレシピサイトの最大手です。写真とテキストでレシピをシェアし合うことはもちろん、プロのレシピや調理動画を見ることもできます。開発には、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

引用元:Google https://www.google.com/

おそらく使ったことがない人はいないだろうほど有名な検索サイト「Google」にも、さまざまなWebアプリが搭載されています。

電車や車などのルートを検索したり、電卓機能や付近のお店を地図上に表示したり等、検索に関するありとあらゆる機能を無料で使うことができます。

開発言語としては、C/C++、Java、JavaScript、Python、Goが挙げられます。こちらはGoogle社内で開発のための標準言語として定められています。

  • URL:https://www.google.com/
  • サービス内容:検索サービス
  • 開発言語:C/C++、Java、JavaScript、Python、Go

Yahoo!

引用元:Yahoo! https://www.yahoo.co.jp/

「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 https://localplace.jp/

「locaLPlace」は飲食店や医療機関、サロンやレジャー施設まであらゆる施設を検索できるサービスです。駅や市区町村などの「エリア」と施設の「ジャンル」を入力することで簡単に施設検索ができるのが魅力です。

基本的に使用している言語はPHPです。WEBアプリとの親和性が高い言語なので、検索機能や予約システムに使用されることが多いです。

  • URL:https://localplace.jp/
  • サービス内容:施設検索、オンライン予約など
  • 開発言語:PHP
  • フレームワーク:Laravel
  • データベース:MySQL

Progate

引用元:Progate https://prog-8.com/

「Progate」は初心者向けのプログラミング学習サービスです。

HTMLCSSRubyなどの言語を、スライド形式で「技術の解説」→「設問」を繰り返し学習できます。入門編は無料で使え、ゲーム感覚でプログラミング学習ができます。特に自分のペースで学習を進めていきたいと考える人には、うってつけのプログラミング学習サイトです。

過去の公式アカウントのつぶやきでは、開発にはRubyが使用されているようです。日本生まれのこのプログラミング言語はとても人気です。

  • URL:https://prog-8.com/
  • サービス内容:プログラミングの学習サービス
  • 開発言語:Ruby
  • フレームワーク:Ruby on Rails

Wantedly

引用元:Wantedly https://www.wantedly.com/

「Wantedly」は、スタートアップやベンチャー企業に人気のビジネスSNSです。

ユーザー(求職者)と企業の採用担当者が直接やりとりし、 転職だけではなく、新卒やインターン、業務委託まで様々な雇用形態で仕事を募集・応募することができます。

開発言語にはRubyを使用しています。「日本企業が出しているWEBアプリは全部Rubyで開発しているんじゃないの?」と思うぐらい、Rubyは日本で人気です。

  • URL:https://www.wantedly.com/
  • サービス内容:求人サイト機能、ブログ機能など
  • 開発言語:Ruby
  • フレームワーク:Ruby on Rails
  • データベース:PostgreSQL

note

引用元:note https://note.com/

「note」は、文章、写真、イラスト、音楽、映像などの作品を公開・販売・購入などができるプラットフォームです。

人気のジャンルやタグからクリエイターや作品を探したり、SNS機能も付いていたり等、ここ数年で一気に認知度を広めた人気のサービスです。

開発言語には、RubyとJavaScriptが使用されています。公式によると表示速度の改善のため、JavaScriptのフレームワークであるAngular.js1系からNuxt.jsへ変更したみたいです。

  • URL:https://note.com/
  • サービス内容:文章、写真、イラスト、音楽、映像などの作品を公開・販売・購入
  • 開発言語:Ruby、JavaScript
  • フレームワーク:Ruby on Rails、Nuxt.js

プログラミング学習プラン診断

当サイトにも、あなたが学習すべきプログラミング言語などを1分で診断できるWebアプリがあります。

3つの質問を選ぶだけで、プログラミング言語と学習プラン(期間や学習スケジュール)を簡単に提案させていただきます(もちろん無料です)。

ShogiBan to Kif

引用元:ShogiBan to Kif https://shogi.nkkuma.tokyo/

ここからは個人が制作したWebアプリをご紹介します。

「ShogiBan to Kif」は、将棋盤面と持ち駒をスマホで撮影してWebサーバに送信すると、AI(人工知能)が即座に局面データとして変換するWebアプリ。

東京農工大学大学院工学研究院の大学院生が開発したアプリです。

開発言語には、Pythonを使用しているのではないかと思います。PythonにはAIや機械学習に必須なライブラリが多数あるのが特徴で、2020年代最も人気のあるプログラミング言語になるのではと注目を集めています。

オミカレ


引用元:オミカレ to Kif https://party-calendar.net/

日本最大級の婚活・お見合いパーティー情報サイトです。
都道府県別に職業や年齢など条件別に検索システムが搭載されており、参加体験談など口コミ情報を投稿することもできます。

検索やマッチングシステム、口コミ投稿機能など、アプリ開発による機能が満載です。

開発言語にはPHPが使用されています。

  • URL:https://party-calendar.net/
  • サービス内容:マッチングサービス
  • 開発言語:PHP
  • フレームワーク:CodeIgniter 2
  • データベース:Amazon Aurora 1

Paletta

引用元:Paletta http://paletta.mrk1869.com/

「Paletta」は、石丸 翔也さんが制作した、プログラマー向けのカラーパレットツールです。

カラーパレットをクリックすると、その色の同系色がカラーコードとともに表示される、Webサイト等の開発にぴったりな仕様になっています。

こちらはJavaScriptを使用してカラーの表示変換を行っています。HTML&CSSでマークアップされたサイト内の文字や物体を、動かしたり、変化させたりするのはJavaScriptが得意とするところです。

  • URL:http://paletta.mrk1869.com/
  • サービス内容:カラーパレットツール
  • 開発言語:JavaScript
  • ライブラリ:jQuery

みんなの感想文

引用元:みんなの感想文 https://kansobun.jp/

みんなの感想文は、フジワラユウタさん(@Fujiyama_Yuta)が開発した読書感想文をWeb上で作成できるサービス。

ブラウザ上でキーボードを使ってテキストを入力するだけで、入力した内容がリアルタイムで反映されていきます。こちらも、JavaScriptで開発されています。

  • URL:https://kansobun.jp/
  • サービス内容:Web上で縦書きの読書感想文を作成できる
  • 開発言語:JavaScript

ネイティブアプリ(スマホアプリ)の開発例10選

続いてはスマホなどの端末にダウンロードして使う「ネイティブアプリ」をご紹介します。

こちらは、最小限のプログラミング知識で簡単にアプリが作成できるツールを使用して作られたものを中心にピックアップしていきます。

ディノス セール公式アプリ

ディノス セール公式アプリは、通販サイトdinosのスマホアプリ。

商品やお店の検索機能はもちろん、アプリ先行セールや各地で開催されるイベントSALEなどの情報をポップアップ通知する機能があります。

開発に使用された「Yappli」とは、プログラミング言語の知識が乏しくてもスマートフォンアプリを簡単に制作できるアプリ開発サービスです。スマートフォンアプリを簡単に開発が素早くできるので、すでに250社以上で導入されている実績もあります。

【プ活】プロント公式アプリ

引用元:【プ活】プロント公式アプリ   https://play.google.com/store/apps/details?id=li.yapp.app610DFF23&hl=ja

【プ活】は、カフェ・バーのチェーン店として有名なプロントの公式アプリ。

アプリ限定のお得なクーポンや、プロントからの最新メニュー情報を配信したり、位置情報を利用した店舗検索が可能です。

JapanTaxi

こちらは日本交通株式会社が開発した、全国対応のタクシー配車アプリになります。

GPS機能を利用することで、提携先のタクシー会社約2万台の中から、乗車場所の付近を走行しているタクシーを簡単に呼び出すことができるため、急いでいるときなど大変便利なアプリです。

当初の開発言語には「Swift」が使用されています。これはiOSアプリの開発にしようされるプログラミング言語でとても有名です。

  • iOSアプリ
  • Androidアプリ
  • サービス内容:タクシーの配車
  • 開発に使用した言語:Swift

タニタの健康管理アプリ ヘルスプラネット

引用元:タニタの無料健康管理アプリ ヘルスプラネッhttps://play.google.com/store/apps/details?id=jp.healthplanet.healthplanetapp

タニタ社が運営する無料健康管理サイト「ヘルスプラネット」のアプリ版です。

体重・体脂肪・歩数などをグラフ化し、効率の良いダイエット・健康管理をサポートします。

開発に使用された「Monaca」の特徴はなんといっても、

  • WindowsでもiOSアプリの開発ができる。
  • エディタを使わず、ブラウザ上でコーディングができる。

といった点でしょう。開発環境の構築も必要とせず、いつ、どこでもスマートフォンアプリの開発が可能です。

残高確認(ジャパンネット銀行)

ジャパンネット銀行の公式アプリで、同銀行の口座の残高確認が簡単に行えるもの。

画面上で「ログインパターン」をなぞるだけでログインでき、残高の他、直近の取引明細10件までが確認できるようになっています。こちらの開発にはMonacaが使用されています。

RunRing

RunRingは、日本人初オリンピック400mファイナリストの高野進氏が総合監修したランニングのトレーニングを音楽とリズムに合わせて体現する新感覚エクササイズアプリです。こちらの開発にはMonacaが使用されています。

福山ローズファイターズ公式アプリ

引用元:福山ローズファイターズ https://play.google.com/store/apps/details?id=jp.appsta.fses

福山ローズファイターズ公式アプリは、広島県福山市にある社会人硬式野球クラブチームの公式アプリ。

選手紹介や試合レポートなどの情報をプッシュ通知で配信する、ファン用アプリです。

開発に使用されている「アプスタ」は、主に販促、集客用アプリ作成ツールになります。店舗運営に必要な基本機能は標準搭載されおり、専門的な知識もいらないため、オリジナルの店舗アプリを作成できます。

ばり馬

中国地方を中心にチェーン展開しているラーメン屋さん「ばり馬」の公式アプリです。

クーポンの配信の他、位置情報を利用した近隣店舗の検索も可能です。

こちらもアプスタを使用して開発されています。お店などを経営されている人ならほとんどの方が使用されているのではと思います。

DIY育毛「アデランス」Men's公式アプリ

引用元:DIY育毛「アデランス」Men's公式アプリ https://play.google.com/store/apps/details?id=jp.appsta.mensaderans

発毛・育毛から増毛・かつらなどのサービスを展開するアデランスの公式アプリです。

ユーザー登録することで毛髪状況や生活環境に合わせたアドバイスを提供したり、ネットショッピングも可能です。

こちらもアプスタを使用して開発されています。販促用でありながらブログ感覚でテキストや画像の投稿が可能なのも特徴的です。

FORD1 PLUS

FORD1 PLUSは沖縄県リゾートダイビング事業連合会(FORD1)が運営する沖縄スキューバダイビングの総合情報アプリ。

スキューバダイビングのポイント情報から生物情報、様々なイベントを配信しています。

開発に使用されている「SmartAppsMobile」は、モジュールの組み合わせで簡単にアプリを作成できます。スタンプやクーポンのアップ、レストランや店舗用のアプリを作成できるなど、オールラウンドに使用できるツールです。

ハイブリッドアプリの開発例7選

最後に、Web・スマホなどのデバイス両方に対応したハイブリッドアプリの例をご紹介します。

※一部、ここまですでにご紹介した事例も含みます。

Amazon

引用元:Amazon https://www.amazon.co.jp/

世界最大のショッピングサイトAmazonは、Webサイト上・スマホアプリなど両面でアプリを開発。

ユーザーが快適に商品を見つけやすい工夫をしています。

開発言語にはJavaが使用されているみたいです。JavaはWebアプリ、スマートフォンアプリどちらの開発にも対応している便利で、人気1,2位をプログラミング言語です。

AbemaTV

引用元:AbemaTV https://abema.tv/

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ともにスマホアプリがあります。

Twitter

引用元:Twitter https://twitter.com/home

Twitterは言わずとしれた世界有数のSNSサービス。

PC・スマホ対応のWeb上で動くアプリの他、iOS・Androidどちらもアプリがあります。リツイート機能などの開発にはRubyを使用しています。

minne

引用元:minne https://minne.com/

ハンドメイド・手作り・クラフト作品のマーケット「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

クラウドワークス

引用元:クラウドワークス https://crowdworks.jp/

クラウドワークスは、日本最大級のクラウドソーシングサイト。様々な分野の業務委託案件を依頼・受注できます。

こちらもWebサイトの他スマホアプリにも対応していて、仕事検索以外にも、メッセージのやり取りや条件の交渉機能なども付いています。

開発言語は、Ruby、JavaScriptです。会員登録や案件表示、メッセージのやり取り機能など、多くの機能がこれらの言語で実装されています。

  • URL:https://crowdworks.jp/
  • サービス内容:クラウドソーシングサービス、人材紹介サービス
  • 開発言語:Ruby、JavaScript
  • フレームワーク:Ruby on Rails、Vue.js
  • データベース:MySQL、Amazon Redshift、Redis、Memcached、Elasticsearch

クックパッド

引用元:クックパッド https://cookpad.com/

繰り返しのご紹介になりますが、クックパッドもハイブルッドアプリの代表例です。

ブラウザ上の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番目で、実際は前段階でも綿密な準備が必要で、開発が終わってからもテストという大事な工程があります。

より詳しい内容は以下の記事にまとめていますのでお読みください。

プログラミング初心者でも作れるアプリ開発の全工程
更新日 : 2019年12月5日

開発したWebアプリをどう活かす?

上記でさまざまなアプリ開発開発例を紹介してきました。読者の皆様も「自分でWebアプリ開発したい!!」と思ったかもしれません。
この項目では、実際に自分で開発したWebアプリをどう活かすのか解説します。
せっかく作成したWebアプリですので、自分以外の人に使ってもらったり、評価してもらい次回の開発に活かしたり、収入・スキルアップに繋げましょう。

アプリを配布し収入を得る

作成したアプリを配布して収入を得る方法があり、主に以下の3つです。

  • 有料アプリによる収入
  • アプリ内課金による収入
  • アプリ上の広告表示による収入

初心者ですと、無料ダウンロードアプリを開発して、アプリ上の広告表示で稼ぐのがおすすめです。

稼ぎにならなくとも、自作アプリを配布するとで評価を得ることができ、次回はより高機能を搭載したアプリを開発できるようになります。

転職活動に活かす

2020年はAI時代とも言われるように、転職市場ではITエンジニアの採用が高まっています。転職の選考で必ず聞かれるのが、「プログラミング言語は何が使えるか」、「開発経験はあるか」です。この2点の有無により年収も決定します。

面接時なら口頭でも説明しますが、履歴書や職務経歴書に事前にWebアプリのURLと概要を記載しておくとおすすめです。

自身で開発した作成物があるかないかで、内定の獲得しやすさや年収に大きく違いが出てくるので、ぜひ自身でWebアプリを開発し、有利に転職活動を進めてください。

仕事の案件獲得に繋げる

フリーランスエンジニアとして収入を得る方法もあります。
高額な案件も多いですが、1つの案件を獲得するだけでも難しく、辞めてしまう人もいます。

そんなときにポートフォリオとして開発したWebアプリを紹介して、案件獲得の成功率をアップさせましょう。クライアントも高いお金を支払うため、依頼する相手を慎重に選びます。

作成したWebアプリがある人なら、スキルがどの程度あるか1目で分かります。そのためクライアントも仕事相手を選出しやすくなり、あなたをパートナーとして選んでくれる可能性が高くなります。

アプリ開発に必要なスキルは?

画像:Shutterstock

続いて、アプリ開発に必要なスキル(プログラミング言語など)の例を挙げると、以下の図のとおりです。

【Webアプリを開発するためのスキル例】

  • Webの基礎知識・仕組み
  • プログラミング言語・フレームワークなど


【スマホアプリを開発するためのスキル例】

  • プログラミング言語(Swift、Java、Kotlinなど)
  • アプリ開発ツール(Xcode、Unity、Android Studioなど)


なお、詳しい内容はそれぞれ以下の記事にまとめていますので参考になさってください。


これで失敗なし!スマホアプリ開発の仕事に転職する方法
更新日 : 2019年12月11日

最短でWebアプリ等のアプリ開発を仕事にするには?

画像:Shutterstock

ここまで読んでくると、

じゃあ、Webアプリやスマホアプリの開発の仕事をしたい場合はどうしたらいいの?

という疑問も出てくることと思います。

そんなあなたは「プログラミングスクール」に通うのが最もおすすめの方法です。

プログラミングスクールは、現役でアプリ開発を行っているエンジニアに直接スキルを教わることができるため、モチベーションを維持しつつ最短で効率よくアプリ開発の技術を学ぶことができます。

このブログを運営する当社でもプログラミングスクール「侍エンジニア塾」があり、現役エンジニアがあなた専用のオリジナルカリキュラム作成から実際の指導までを行い、さらに就職転職サポート付き。

未経験からアプリ開発の仕事を目指すあなたのため、最適な環境をご用意しています。

まずはオンライン対応の「無料体験レッスン」をお気軽にご利用いただき、疑問・不安を何でもご相談ください!

無料体験レッスンを予約する

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

れん

WordPress系言語(HMTL・CSS・PHP)を愛する6歳男の子パパ。2020年のプログラミング教育開始に向け、親子プログラミング学習をやってます。息子のプログラミング教室の送り迎えが日課です。
プログラミングスクールやプログラミング学習のブログ書いてます。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー