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

この記事では、Webアプリ・スマホアプリの開発例を紹介します。

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

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

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

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

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

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

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

Webアプリ開発とは？初心者からの作り方や学習手順もわかりやすく解説

更新日：2024年11月8日

Webアプリの開発例13選

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

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

食べログ

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

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

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

クックパッド

「クックパッド」は言わずとしれたレシピサイトの最大手です。写真とテキストでレシピをシェアし合うことはもちろん、プロのレシピや調理動画を見ることもできます。開発には、Ruby、Golang、Python、Java、Rustがこれまで使用されてきています。1言語のみ頼ることなく時流によって、技術的に進歩した言語やフレームワークを取り入れて開発を進める姿勢が見受けられます。

なお、転職や副業に向けアプリ開発を学びたい気持ちはあるものの、どのプログラミング言語が自分にあうのか、どう学習を進めればいいのかなどがあいまいな人は「プログラミング学習プラン診断」をお試しください。

かかる時間は1分ほど。4つの質問に答えるだけで、あなたにあう言語や学習プランを診断してもらえます。

効率よくプログラミングを学習したい人は、ぜひ一度お試しください。

＼ 4つの質問に答えるだけ ／

Google

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

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

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

Yahoo！

「Yahoo!」もGoogleと並んで非常に有名なサイトです。ブラウザのトップページをこのサイトにしている方は多いのではないでしょうか？検索機能はもちろん、電車の乗り換え案内やテレビ番組を表示したり、動画視聴やショッピングまで多種多様なサービスが揃う国内最大のポータルサイトです。

開発言語には、Swift、Kotlin、JavaScript、Node.js、PHP、Javaとなります。多数のサービスがあるため、使われている言語も複数となりますが、社内では大人数のチームで開発しやすいよう工夫を凝らしているようです。

なお、IT企業への転職や副業での収入獲得を見据え、独学でWebアプリの開発スキルを習得できるか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。

「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。

＼ 給付金で受講料が最大80%OFF ／

locaLPlace

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

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

Progate

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

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

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

Wantedly

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

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

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

note

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

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

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

なお、副業での収入獲得を目指しているものの、どんな仕事が自分に合うかわからない人は「副業診断」をお試しください。

かかる時間はたった1分ほど。5つの質問に答えるだけで、自分にあう副業を診断してもらえます。

自身が取り組みやすい副業で収入を獲得したい人は、ぜひ一度お試しください。

＼ 5つの質問に答えるだけ ／

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

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

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

ShogiBan to Kif

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

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

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

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

オミカレ

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

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

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

Paletta

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

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

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

みんなの感想文

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

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

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

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

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

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

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

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

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

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

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

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

JapanTaxi

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

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

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

なお、ITの仕事に興味はあるものの、どの職種が自分にあうのかわからない人もいますよね。そんな人は「ITキャリア診断」をお試しください。

かかる時間はたったの1分。5つの質問に答えるだけで、自分にあうIT職種を診断してもらえます。

自身に適した職種が知りたい人は、手軽に試してみると良いですよ。

＼ 5つの質問に答えるだけ ／

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

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

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

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

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

なお、IT企業への転職や副業での収入獲得を見据え、独学でスマホアプリの開発スキルを習得できるか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。

「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。

＼ 給付金で受講料が最大80%OFF ／

残高確認（ジャパンネット銀行）

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

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

RunRing

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

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

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

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

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

ばり馬

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

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

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

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

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

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

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

FORD1 PLUS

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

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

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

なお、IT企業への転職や副業での収入獲得を見据え、独学でWebアプリの開発スキルを習得できるか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。

「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。

＼ 給付金で受講料が最大80%OFF ／

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

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

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

Amazon

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

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

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

AbemaTV

AbemaTVは、アメブロなどで有名なサイバーエージェント社が運営する無料のインターネットテレビ・動画配信サービス。

インターネットのブラウザ上の他、スマホアプリにも、AmazonFireTVなどの動画視聴デバイスのアプリにも対応しています。

開発言語にはGolang、Java、JavaScript、Kotlin、Swiftです。こちらにもWebアプリとスマートフォンアプリどちらも対応できるJavaが使用されています。

⇨ AbemaTV

ZOOM

ZOOMは、ビデオ通話やチャットでのコミュニケーションを無料で利用できるサービス。

PC用のアプリもありますが、Web上からでも利用でき、かつiOS・Androidともにスマホアプリがあります。

Twitter

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

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

minne

ハンドメイド・手作り・クラフト作品のマーケット「minne」も、インターンネット上で閲覧できるサイトとスマホアプリどちらにも対応したハイブリッドアプリ。

商品の売買の他、編集部が配信している読み物も見ることができます。

開発に使用されている言語は、Ruby、Golang、Swift、Objective-C、Java、Kotlinになります。会員登録機能、ログイン機能、決済機能などを作成しています。

クラウドワークス

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

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

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

クックパッド

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

ブラウザ上のWebサイトはもちろん、iOS・Androidともにレシピ検索サービスの他、お弁当や料理の記録サービスなども展開しています。

アプリ開発の工程の例

では、ここまでご紹介してきたアプリはどのような流れで開発されるのでしょうか？

アプリの種類によらず、開発は同じような手順で進み、主に以下5ステップです。

プログラムを書くなどのいわゆる「開発」は3番目で、実際は前段階でも綿密な準備が必要で、開発が終わってからもテストという大事な工程があります。

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

プログラミング初心者がアプリ開発するまでの全手順【準備からリリース】

更新日：2024年11月8日

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

上記でさまざまなアプリ開発開発例を紹介してきました。読者の皆様も「自分でWebアプリ開発したい！！」と思ったかもしれません。

この項目では、実際に自分で開発したWebアプリをどう活かすのか解説します。

せっかく作成したWebアプリですので、自分以外の人に使ってもらったり、評価してもらい次回の開発に活かしたり、収入・スキルアップに繋げましょう。

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

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

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

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

転職活動に活かす

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

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

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

仕事の案件獲得に繋げる

フリーランスエンジニアとして収入を得る方法もあります。

高額な案件も多いですが、1つの案件を獲得するだけでも難しく、辞めてしまう人もいます。

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

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

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

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

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

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

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

Webアプリ開発とは？初心者からの作り方や学習手順もわかりやすく解説

更新日：2024年11月8日

挫折なくアプリ開発スキルの習得を目指すなら

アプリの開発例や必要なスキルを知り、学んでみようかなと興味が湧いてきた方のなかには

と不安な方もいますよね。

実のところ、アプリ開発といったプログラミングの学習途中に挫折する独学者は多くいます。事実、弊社の調査では

などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。

調査概要：プログラミング学習の挫折に関するアンケート
調査対象：10代〜80代の男女298名
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
掲載元：PR TIMES

またこうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では

などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。

調査概要：プログラミングに興味がある方の意識調査
調査期間：2021/11/19~2021/12/3
対象者：プログラミング学習を検討している10代~50代の男女100名
調査媒体：クラウドワークス
掲載元：PR TIMES

加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。

上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。

いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「プログラミングスキルを身につけるのって思っていたよりも難しいんだな…」とアプリの開発自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、アプリ開発エンジニアへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER（侍エンジニア）」です。

料金	月分割4.098円~
実績	・累計指導実績4万5,000名以上 ・受講生の学習完了率98% ・受講生の転職成功率99% ・転職成功後の平均年収65万円UP ・転職成功後の離職率3%

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。

先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、プログラミングスキルを習得するのは非常に難易度が高いといえます。

しかし、侍エンジニアでは

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」「転職成功率99％」という実績からも、侍エンジニアなら挫折しづらい環境でプログラミング学習を進められるといえます。

また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもアプリ開発エンジニアへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なお、ITエンジニアへの転職を見据えアプリ開発を学びたい人は受講料の最大70%が給付される「AIアプリコース」がおすすめです。金銭面での支援を受けつつ、アプリ開発スキルの習得から転職活動・就業後のフォローアップ(※1)までを一貫してサポートしてもらえます。

※1：転職後の1年間、転職先での継続的な就業や転職に伴う賃金上昇などのフォローアップ

学習と金銭面をどちらもサポートしてくれる侍エンジニアなら、未経験からでも安心してアプリの開発スキルを習得できますよ。

公式サイトで詳細を見る