クロスプラットフォームアプリ開発の概要とデザインの重要ポイント

クロスプラットフォームは、特定の OS に依存しないプログラムのことです。

様々な OS のスマートフォンから同じアプリを利用できる環境を指し、さまざまなプラットフォーム上で、同じ仕様のアプリケーションを動かせるプログラムを指します。

この記事では、クロスプラットフォームの概要や種類、クロスプラットフォームの現状、アプリデザインの重要ポイントについて解説します。

1.クロスプラットフォームとは

クロスプラットフォームとは、  iOS  、  Android  、 Windows  、 macOS  など異なるプラットフォーム上で同じ仕様のアプリケーションを動かせるプログラムを指します。

 従来のアプリ開発は、特定の OS に依存して行っていました。
Apple や Google が推奨する開発言語（ネイティブ言語）は、彼らが提供する OS との親和性が高いうえ多くの恩恵を受けられるため、開発者は好んで使用してきました。

 ところが現在は、スマートフォンの多様化によって動作環境もさまざまです。
特定の OS に依存するアプリではユーザーの幅を狭めてしまいます。実際、スマートフォンに対応したアプリ開発では、 iOS と Android の両方に対応せねばならないことがほとんどですから、クロスプラットフォームでのアプリ開発が一般的になっています。

2.クロスプラットフォームの種類

クロスプラットフォームを実現する仕組みは複数あります。ここでは代表的な3つを挙げて解説します。

OS 上のシステムを操作する「ネイティブ型」

ネイティブ型は、 OS プラットフォーム上にある描画エンジンを使用します。
操作性が高く、ネイティブアプリと同等のUIを作成できます。ネイティブ型の開発環境では、 iOS 、 Android 、 Windows など、複数のプラットフォームで動作するランタイムやクラスライブラリが装備されていなければなりません。

ゲームアプリや自己管理系ヘルスケアアプリなど、オフライン環境でも操作できるダウンロード型のアプリケーション開発に向いています。ほかの2タイプと比べて処理が高速なのも特徴です。

WebView 上でネイティブ機能を利用する「ハイブリッド型」

ハイブリッド開発は、 Web アプリ向けの HTML や CSS 、 JavaScript を使って作成する Web View 上で起動するアプリ開発で、アプリ内に Safari や Chrome などのブラウザと同じように Web ページを表示できます。

 機能の一部を Web に頼らねばならないため、使うたびにオンライン接続が必要で処理速度が遅いという特徴があり、ネイティブ型のように高度な機能も実現できません。
また、デバイスによってレイアウトや操作性が変わることがありますが、レイアウトや操作性の影響を受けないニュースアプリや EC サイト系、投稿型サイトなどに最適です。

自前でレンダリングする「独自レンダラ型」

独自レンダラ型とは、レンダリングエンジンと呼ばれる描画のための独自システムを使って画面への描画を行い、 OS に依存しない仕様を実現します。
独自レンダラ型の代表的なサービスに Unity や Flutter があります。主にゲーム開発に向いています。

3.クロスプラットフォームアプリ開発

クロスプラットフォームアプリの開発が普及した背景には、スマートフォンのシェアが多様化していることと、ネイティブ言語による開発コストの問題が挙げられます。
この項目では、クロスプラットフォームアプリ開発の現状と将来について、解説します。

変化の激しい時代の中、アプリ開発で求められること

時代の変化が激しく、技術の進歩が著しいからこそ、アプリ開発にはOSに依存しないアプリ開発が求められます。
 ICT 市場調査コンサルティングの MM 総研の調査によると、 2021 年上期の国内携帯電話端末の出荷台数は 1472.4 万台で、スマートフォン出荷台数シェア 1 位はアップル、 2 位はソニー、 3 位はシャープ、 4 位は Samsung 、 5 位が OPPO 、 6 位が FCNT となっています。

参考資料:スマートフォン出荷のうち5G対応が774.8万台で過半を占める

日本では長く Apple の iPhone シリーズがトップシェアを誇りますが、国外では必ずしもそうとは言い切れません。新興国において、安価で高性能なスマートフォンのニーズが増大しており、特にアジアやアフリカでは Android のシェアが伸長しています。一方、 iPhone は欧米圏を中心に人気が高いです。

 このようなシェアの均衡が、クロスプラットフォームの普及に大きな影響を与え、 OS に依存しないクロスプラットフォームアプリ開発が進んでいます。

また、ネイティブ言語による開発は、コストが増大する傾向にあります。ネイティブ言語によって特定の OS に特化したアプリは、機能性に優れますが、別の OS に対応させようとすると様々な弊害があります。

 OS が変わればその OS に合わせてアプリを作り直す必要があり、時間も費用もかかるため、クロスプラットフォームによるアプリ開発が進められるようになりました。

クロスプラットフォームアプリ開発の現在

クロスプラットフォームでのアプリ開発が、最近のスマホアプリ開発のトレンドとなっています。

 クロスプラットフォームによって OS に依存しないアプリ開発が実現し、自社のエンジニアに合った言語を採用できます。もちろん、クロスプラットフォーム開発ツールに最適な言語を選ばなければなりませんが、 OS のネイティブ言語に依存する必要がないため選択肢が広がり、エンジニアの採用に多様性が生まれます。

もちろん、クロスプラットフォームでのアプリ開発を進めていけば、ほかの OS に対応させるための開発をしなくて済むため、コストダウンできます。さらに、アプリの保守運用やメンテナンスに時間も人員も割かずに済み、開発コストはもちろん運用コストも大きくコストダウンできます。

クロスプラットフォームアプリの今後の未来

クロスプラットフォーム開発向けのフレームワークのうち代表的なのが、 Google が開発した Flutter です。 Google は 2021 年 3 月に、 Flutter の新バージョン であるFlutter2 を公開しています。

Flutter2 の公開後、世界企業である Microsoft （マイクロソフト）、 Canonical （カノニカル）、 TOYOTA （トヨタ）が、 Flutter2 を実装した次世代プロダクトの開発・検討を進めていることを公表しました。 Flutter の将来性は非常に高いことがうかがえます。

Flutter2 をはじめとしたクロスプラットフォーム開発ツールは、 UI デザインを柔軟にカスタマイズできるため、ネイティブ言語と大きく変わらない実装が可能です。クロスプラットフォームでは、よりスピーディに、比較的安価に、質の高いアプリ開発が実現できるため、今後、採用されることが増えていくと予想されます。

4.クロスプラットフォームのアプリデザインの重要ポイント5選

ここでは、クロスプラットフォームのアプリデザインをしていく上で、 iOS と Android でともに違和感のないアプリデザインにする際に特に気をつけるべき点を紹介します。

画面遷移の考え方

iOS と Android は、そもそも思想に違いがあります。画面遷移について、 iOS はタスク進行のため左から右へと潜り、 Android  は新たな画面を生成して上に重ねていく、というイメージです。この違いが UI  に影響します。

 具体的には、 iOS は Push 遷移という階層型の画面遷移をします。ある一つのタスクに向かって階層を掘っていきます。 Android は、画面を上に重ねていきます。今表示されている画面が一番上の階層になります。

 両者の違いが最も分かりやすいのが「戻る」ボタンです。同じような挙動のように見えて、思想の違いによって実は全くの別物だと分かります。特にわかりにくいのが Android  で、戻るボタンが Up （アプリ内の左上にある←ボタン）と  Back （アプリ外で配置されている物理ボタン）の 2 種類あります。
どちらも同じような挙動ですが、実際の役割は異なります。

 Up はアプリ内の遷移だけに使用し、主に1つ上の階層に戻るためのボタンとして機能します。 Back はアプリ内以外にも干渉し、別のアプリやホームアプリにも遷移できます。

 このように、 OS の思想に違いがあることを知っておけば、アプリデザインの際に役立ちます。

システム UI の変更

プラットフォーム特有のステータスバー、ホームインジケーター、ナビゲーションバーなどを調整します。

トップ・ボトムバー 

 iOS と Android 、両者のルールに則ると、アプリの上下に表示するトップ・ボトムバーの形式は自然と決まってきます。もちろん絶対にこうしなければならないというわけではないため例外もありますが、ほとんどのアプリが、それぞれのルールを踏襲したデザインになっています。

情報の切り替え（セグメンテッドコントロールとタブ）

スマートフォンはパソコンやタブレット端末に比べ画面が小さく表示領域が狭いので、表示する情報を絞らなければならないことが多々あります。そのような時に使う機能が、情報の切り替え（セグメンテッドコントロールとタブ）です。

 iOS の情報の切り替えは、タブに見えますが実は別物で、ボタンをいくつかに分割したものです。タブのようにコンテンツ全体を切り替えるのではなく、全体の中からセグメントを分けて表示します。
各セグメント間で表示される情報は、重複することがあります。

 Android では、同レベルの階層の情報を並列に切り替えます。 Android  のタブは、スワイプして切り替えますが、この機能を切ることも出来ます。

モーダルビュー（全画面）

モーダルビュー（全画面）は、モーダルビューのフルスクリーン型です。コンテンツを提示し、終了時にはアクションを必要とします。一時的なモードで、ユーザーをタスクに集中させるためによく使用する手法です。

 iOS では、画面全体をカバーし、前のビューは完全に覆われます。全画面のモーダルビューを閉じるとき、ユーザーはボタンをタップします。

 Android のモーダルビューは、基本的には HIG の Fullscreen と意味合いは同じです。 iOS のような depth がある表現ではなく、 Activity が重なる表現になります。 Up ／ Back  ボタンでタップ前の画面に戻ります。

5.まとめ：クロスプラットフォーム

クロスプラットフォームとは、異なるプラットフォーム上で、同じ仕様のアプリケーションを動かせるプログラムのことです。スマートフォンが多様化し、さまざまな OS に対応するアプリ開発が求められるため、最近のスマホアプリ開発のトレンドとなっており、将来性も抜群です。

 クロスプラットフォームには、ネイティブ型、ハイブリッド型、独自レンダラ型があり、それぞれ特徴があります。制作するアプリに適したタイプを選択し、ツールを用いて開発しましょう。