スマホでもタブレットでもパソコンでも使えるアプリにできる？

1つのアプリで使えるが、動くことと使いやすいことは別

「スマホ用とタブレット用で2つ作らないといけないのか」と聞かれることがあります。多くの場合、作るアプリは1つで足ります。ただ、スマホの縦長の画面に合わせて並べたボタンや表を、そのままタブレットやパソコンの大きな画面に出すと、左右に大きな余白ができたり、押す場所が画面の端に離れたりします。

そこで、作る前に「どの端末で、誰が、何をするか」を書き出し、画面の作り方を次の2つから選びます。1つは、同じ画面を画面の幅に合わせて並べ替える作り方です。もう1つは、端末ごとに役割を分けて、それぞれに合った画面を用意する作り方です。両方を組み合わせることもできます。

ストアに出すアプリは、大きな画面でも動く前提になっている

App Storeの審査ガイドラインには、利用者がアプリを十分に活用できるよう、iPhoneのアプリもできる限りiPadで動くようにするという項目があります。お客さんが自分のiPadにアプリを入れる場面も考えておく必要があります。

Appleの開発者向け資料によると、Appleのチップを積んだMacでは、iPhoneやiPadのアプリを作り直さずに動かせます。iPhoneのアプリは、Mac上では大きさの決まったウインドウで開きます。iPhoneにしかない機能に頼るアプリなどは、作る側がMacでは配らない設定にすることもできます。

Androidはスマホに加えて、タブレット、折りたためるスマホ、パソコンのような画面でも使われています。Googleの開発者向け資料では、Android 16（APIレベル36）向けに作ったアプリは、画面の幅が一定以上ある端末で、縦向きだけに固定する設定や画面の縦横の比率を決める設定が効かなくなると説明しています。縦長の画面だけを想定して作った画面は、引き伸ばされて崩れることがあるとも書かれています。

同じ画面を並べ替えるか、役割ごとに画面を分けるか

どちらを選ぶかは、端末ごとにやることが同じか違うかで決まります。次の例は、選び方を説明するための想定です。

役割が分かれるときに1つの画面へすべてを詰め込むと、スマホではボタンが多すぎ、パソコンでは集計表が狭すぎる画面になりがちです。逆に、どの端末でもやることが同じなのに画面を分けると、直すたびに複数の画面を直すことになります。

ブラウザで開くWebアプリなら、端末を選ばずに開ける

ブラウザで開くWebアプリは、同じURLをスマホ・タブレット・パソコンのどれでも開けます。WindowsのパソコンでもMacでも、ストアから入れる手間なしに使えるので、事務所のパソコンから集計を見る画面だけをWebで用意する分け方もあります。

一方で、カメラ、位置情報、通知、NFCタグの読み取りのような端末の機能は、端末やブラウザによって使える範囲が違います。たとえばiPhoneでWebアプリに通知を送るには、ホーム画面への追加と利用者の許可が要ります。使いたい機能があれば、使う予定の端末ごとに確かめてから選びます。

お店や事務所に置くタブレットで決めておくこと

1人1台のスマホと違い、入口やレジ横に置くタブレットは何人もが触ります。画面の作り方とは別に、置いて使う端末ならではの決めごとがあります。

相談の前に書き出しておくこと

次のことが分かっていると、画面を1つにするか分けるか、どの端末で確かめるかを決めやすくなります。決まっていない項目があっても相談はできます。

自分で確かめてみるなら

ふだん使っているお店の予約ページやWebサービスを、スマホとパソコンの両方のブラウザで開き、並びがどう変わるかを見比べてみてください。パソコンでブラウザの窓を細くしていくと、ある幅でメニューがまとまったり列が減ったりする様子が分かります。

タブレットがあれば、スマホで使っているアプリを入れて横向きにしてみるのもおすすめです。大きな画面でどこが使いにくいかを見ておくと、自分のアプリで用意する画面のイメージがつかみやすくなります。