<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Tech Selection on 設計で、迷わなくなるために | 奥田智紘</title><link>https://design.okuda-studio.com/categories/tech-selection/</link><description>Recent content in Tech Selection on 設計で、迷わなくなるために | 奥田智紘</description><generator>Hugo -- 0.164.0</generator><language>ja</language><lastBuildDate>Wed, 29 Jul 2026 11:00:00 +0900</lastBuildDate><atom:link href="https://design.okuda-studio.com/categories/tech-selection/index.xml" rel="self" type="application/rss+xml"/><item><title>Webアプリとネイティブアプリの違い</title><link>https://design.okuda-studio.com/posts/0040-native-vs-web-app/</link><pubDate>Wed, 29 Jul 2026 11:00:00 +0900</pubDate><guid>https://design.okuda-studio.com/posts/0040-native-vs-web-app/</guid><description>&lt;ul&gt;
&lt;li&gt;&lt;a href="#%E5%88%A4%E6%96%AD%E8%BB%B81%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A7%E3%82%82%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%E3%81%84%E3%81%8B"&gt;判断軸1：オフラインでも利用したいか&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#web%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%A0%B4%E5%90%88"&gt;Webアプリの場合&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%A0%B4%E5%90%88"&gt;ネイティブアプリの場合&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#%E5%88%A4%E6%96%AD%E8%BB%B82%E7%AB%AF%E6%9C%AB%E6%A9%9F%E8%83%BD%E3%82%92%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89%E3%81%A7%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9F%E3%81%84%E3%81%8B"&gt;判断軸2：端末機能をバックグラウンドで利用したいか&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#bluetooth%E3%82%92%E4%BE%8B%E3%81%AB%E8%80%83%E3%81%88%E3%82%8B"&gt;Bluetoothを例に考える&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%A0%B4%E5%90%88-1"&gt;ネイティブアプリの場合&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#web%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%A0%B4%E5%90%88-1"&gt;Webアプリの場合&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#web%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E3%82%82%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89%E5%87%A6%E7%90%86%E3%81%8C%E5%85%A8%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%82%8F%E3%81%91%E3%81%A7%E3%81%AF%E3%81%AA%E3%81%84"&gt;Webアプリでもバックグラウンド処理が全くできないわけではない&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#web%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A8%E3%83%8D%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%9C%AC%E8%B3%AA%E7%9A%84%E3%81%AA%E9%81%95%E3%81%84"&gt;Webアプリとネイティブアプリの本質的な違い&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#%E3%81%BE%E3%81%A8%E3%82%81"&gt;まとめ&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr&gt;
&lt;p&gt;アプリ開発では、「Webアプリで作るべきか」「ネイティブアプリで作るべきか」という判断が必要になります。&lt;/p&gt;
&lt;p&gt;近年ではWeb技術でも高度なUIを実現できるようになり、PWA（Progressive Web App）なども登場しています。&lt;/p&gt;
&lt;p&gt;そのため、単純に「ネイティブアプリのほうが優れている」というわけではありません。&lt;/p&gt;
&lt;p&gt;重要なのは、&lt;strong&gt;ユーザーが求める価値を実現するために、どちらの技術が適しているか判断することです。&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Webアプリとネイティブアプリを選択する際には、様々な点を考慮する必要がありますが、この記事では、主に実現できる機能の違いにフォーカスをあてて、2つの判断軸について整理します。&lt;/p&gt;
&lt;h2 id="判断軸1オフラインでも利用したいか"&gt;判断軸1：オフラインでも利用したいか&lt;/h2&gt;
&lt;p&gt;Webアプリとネイティブアプリの大きな違いの1つが、通信できない環境への対応です。&lt;/p&gt;
&lt;h3 id="webアプリの場合"&gt;Webアプリの場合&lt;/h3&gt;
&lt;p&gt;Webアプリは基本的に、サーバーと通信しながら動作します。&lt;/p&gt;
&lt;pre tabindex="0"&gt;&lt;code&gt;ユーザー
↓
ブラウザ
↓
インターネット
↓
サーバー
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;例えば、データを登録する場合、&lt;/p&gt;
&lt;pre tabindex="0"&gt;&lt;code&gt;入力
↓
サーバーへ送信
↓
保存完了
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;という流れになります。&lt;/p&gt;
&lt;p&gt;そのため、通信できない環境では利用できない、または利用できる機能が制限されることが多いです。&lt;/p&gt;
&lt;h3 id="ネイティブアプリの場合"&gt;ネイティブアプリの場合&lt;/h3&gt;
&lt;p&gt;ネイティブアプリでは、端末内部にデータを保存できます。&lt;/p&gt;
&lt;p&gt;例えば、&lt;/p&gt;
&lt;pre tabindex="0"&gt;&lt;code&gt;ユーザー入力
↓
端末内へ保存
↓
通信復旧後にサーバー同期
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;という設計が可能です。&lt;/p&gt;
&lt;p&gt;そのため、&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;電波の届かない場所での作業&lt;/li&gt;
&lt;li&gt;災害現場での利用&lt;/li&gt;
&lt;li&gt;航空機内での利用&lt;/li&gt;
&lt;li&gt;山間部での作業記録&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;など、通信が不安定な環境ではネイティブアプリが有利になります。&lt;/p&gt;
&lt;h2 id="判断軸2端末機能をバックグラウンドで利用したいか"&gt;判断軸2：端末機能をバックグラウンドで利用したいか&lt;/h2&gt;
&lt;p&gt;スマートフォンには、&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;GPS&lt;/li&gt;
&lt;li&gt;Bluetooth&lt;/li&gt;
&lt;li&gt;NFC&lt;/li&gt;
&lt;li&gt;カメラ&lt;/li&gt;
&lt;li&gt;各種センサー&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;など、多くの端末機能があります。&lt;/p&gt;
&lt;p&gt;Webアプリでも、ブラウザが提供するAPIを利用することで、一部の端末機能を利用できます。&lt;/p&gt;
&lt;p&gt;例えば、&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;カメラでQRコードを読み取る&lt;/li&gt;
&lt;li&gt;現在位置を取得する&lt;/li&gt;
&lt;li&gt;NFCタグを読み取る&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;といった処理は、Webアプリでも実現できる場合があります。&lt;/p&gt;
&lt;p&gt;しかし、Webアプリには大きな制約があります。&lt;/p&gt;
&lt;p&gt;それは、&lt;strong&gt;ブラウザ上で実行される処理であるため、バックグラウンドで継続的に動作することが難しいことです。&lt;/strong&gt;&lt;/p&gt;
&lt;h3 id="bluetoothを例に考える"&gt;Bluetoothを例に考える&lt;/h3&gt;
&lt;p&gt;例えば、温度センサーとBluetoothで通信するアプリを考えます。&lt;/p&gt;
&lt;h4 id="ネイティブアプリの場合-1"&gt;ネイティブアプリの場合&lt;/h4&gt;
&lt;pre tabindex="0"&gt;&lt;code&gt;アプリ起動
↓
Bluetooth接続
↓
アプリがバックグラウンドになる
↓
継続的にデータ取得
↓
サーバーへ送信
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;という設計が可能です。&lt;/p&gt;</description></item></channel></rss>