HSP3Dish.jsでフルスクリーン化2（1）

目次

フルスクリーン表示で何が問題になるのか

　フルスクリーン表示は、画面を最大限に使える反面、端末ごとの差がそのまま表面化する表示方式でもあります。

　PCやスマートフォンは、画面サイズや縦横比が端末ごとに異なります。特にスマートフォンでは、同じ「フルスクリーン」でも表示領域の形は大きく変わります。

そのため、ある端末では問題なく表示されていても、

• 別の端末では一部が見切れる
• 余白が大きく空いてしまう

といった差が生じます。
これはフルスクリーン表示そのものが持つ特性です。

フルスクリーン対応では、

• 見切れを許容するのか
• 余白を許容するのか
• 拡大・縮小を行うのか

といった判断が必ず必要になります。 つまり、フルスクリーン表示はひとつの正しいやり方を行うものではなく、どの方針を選ぶかを決めることが重要です。

解像度の考え方を整理する

　フルスクリーン表示を考える際に重要になるのが「解像度」です。この解像度は、PCとスマートフォンでは前提が大きく異なります。

物理ピクセルと論理ピクセル

　ディスプレイが実際に持っている画素数を物理ピクセル（デバイスピクセル）、アプリやブラウザが表示に使う基準を論理ピクセル（CSSピクセル、ビューポート解像度）と呼びます。 フルスクリーン表示を設計する際に基準となるのは、物理ピクセルではなく論理ピクセルです。

PCの場合

　PCでは多くの場合、物理ピクセルと論理ピクセルは一致しています。1920×1080 のディスプレイであれば、そのまま 1920×1080 の表示領域として扱われます。

　そのため、PCでは解像度の違いをあまり意識せずに開発することができます。

スマートフォンの場合

　スマートフォンでは、物理ピクセルと論理ピクセルが一致しません。高精細なディスプレイであっても、アプリ側からは低解像度として扱われます。

例えば iPhone 14 の場合です。

• 物理ピクセル：1170 × 2532
• 論理ピクセル：390 × 844

　一般的なPCは 1920 × 1080 程度なので、スマートフォンの論理ピクセルは、数値だけを見てもPCよりかなり小さいことが分かります。 同じフルスクリーン表示でも、PCとスマートフォンでは表示できる情報量に大きな差があります。

　では、物理ピクセルを基準に作ってしまえばいいのでは？と考えるかもしれません。物理ピクセルを基準に作ると、PC向けに作ったものはスマートフォンでは文字やボタンが小さすぎて操作できず、スマートフォン向けに作ったものはPCでは全体が不必要に大きくなってしまいます。

　論理ピクセルを用いることで、端末が違っても同じ指定サイズの要素を、画面上でおおよそ同じ大きさとして扱えるようになります。

　フルスクリーン対応では、端末の画素数ではなく、論理ピクセルを前提に考えることが重要です。

参考記事：
Android端末｜論理解像度一覧2023(CSS解像度/CSSピクセル/論理ピクセル)
https://pixelstock0.com/6198/

iPhone/iPad/Apple Watch解像度(画面サイズ)早見表
https://qiita.com/tomohisaota/items/f8857d01f328e34fb551

画面最大化の代表的な方針

　フルスクリーン表示では、画面領域をどのように割り当てるかという「方針」を最初に決める必要があります。 ここでは、代表的な考え方をいくつか紹介します。

固定解像度（はみ出しを許容する）

　あらかじめ決めた解像度で描画し、画面からはみ出す部分は表示しない方針です。 端末によって見える範囲は変わりますが、レイアウトは常に一定になります。

　設計はシンプルですが、端末によっては重要な要素が見切れる可能性があります。

固定解像度（画面に合わせて拡大・縮小する）

　あらかじめ決めた解像度で作成して、画面サイズに合わせて全体を拡大・縮小する方針です。 縦横比を維持するため、上下または左右に余白が生じる場合があります。

　異なる環境でも同じ見た目を維持できる一方で、拡大・縮小を行うため、文字や画像のエッジがぼやけた印象になります。

可変解像度（縦横比を固定する）

　画面サイズに応じて解像度を変えつつ、縦横比は固定する方針です。 多くのゲームやアプリで採用されている考え方です。

　端末差への対応力は高いですが、実行環境ごとに解像度が異なるためレイアウト設計はやや複雑になります。

可変解像度（縦横比も可変にする）

　画面サイズに合わせて、解像度も縦横比も柔軟に変える方針です。 画面を余すことなく使える反面、端末ごとに見た目が大きく変わります。

　UIや演出の設計には最も注意が必要です。

方針の選び方

　ここまで、画面最大化の代表的な方針をいくつか紹介しました。 とはいえ、ゲームやアプリを作る場合、「結局どれを選べばいいのか」が一番の疑問になると思います。

　まず大切なのは、作ろうとしているゲームの作り込みの量を意識することです。 個人で作る小規模なゲームやツールでは、複雑な対応よりも「最後まで作り切れる設計」を選ぶ方がうまくいきます。

　たとえば、ドット絵や2Dゲームで見た目を揃えたい場合は、 固定解像度で拡大・縮小する方式が分かりやすく、初心者でも扱いやすいです。 多少ぼやけることはありますが、レイアウトが崩れにくく、作る側の負担も小さくなります。

　一方で、画面いっぱいを使いたい場合や、スマホとPCの両方を意識する場合は、縦横比を固定した可変解像度が無難な選択になります。 多くのゲームで採用されている考え方らしいので、参考になる情報や実例も見つけやすいです。

　最初から「すべての端末に完璧に対応しよう」と考える必要はありません。 むしろ、対象を絞って「動くものを完成させる」ことの方が重要です。 後から方針を見直すことも十分可能なので、最初は「自分が管理できる範囲」を優先しましょう。

　画面最大化の方針は、技術的な正解よりも「作りやすさ」を基準に選んで問題ありません。

フルスクリーン特有の注意点

　フルスクリーン表示では、画面全体が常に使えるとは限らない点に注意が必要です。

　スマートフォンでは、ノッチ（画面上部の切り欠き）や、画面の四隅が丸くなっている形状によって、実際に表示できる領域が欠ける場合があります。 端末によって欠け方が異なるため、画面の端ギリギリに重要な要素を配置すると、見えなくなる可能性があります。

　フルスクリーン対応を行う場合は「画面の端には余裕を持たせる」という意識だけでも持っておくと安全です。

作例で比較してみる

　ここまで紹介してきた画面最大化の方針は、文章だけでは違いが分かりにくい部分もあります。 というわけで、実際の表示例を見ながら、それぞれの特徴を整理してみましょう。

　それぞれのサンプルは、同じ実行プログラムを表示の仕方だけを変えたものです。サンプル内の各オブジェクトの配置は、以下のような基準で配置しています。

• 背景は描画領域を埋めるため、中央配置＋解像度に応じてサイズを変更。
• 人物はレイアウトが崩れないようにするため、中央を起点とした固定配置。
• メッセージボックスは見切れてはいけないので、取得した実際の表示領域の端を基準にして配置。

　サンプルをフルスクリーン表示するには、ゲーム画面右上の半透明ボタンをクリックしてください。

固定解像度（はみ出しを許容する）

サンプルへのリンク：neta035/adv001_0.html

　実装難易度：中

　この方式では、常に同じレイアウトが保たれ、想定した範囲内であれば余白を作らずに画面全体を利用できます。 その反面、端末によっては画面の一部が見えなくなる可能性があります。

　利用される最低解像度の環境を想定したレイアウトが必要になります。 しかし、そのまま固定配置すると、要素が中央寄りになってしまうため、表示されている画面の端を基準にして配置することで、見切れを防止する工夫も考えられます。 また、背景の大きさを想定する中で最も大きな解像度に合わせておくことで、余白を目立たなくする対応も可能です。

　PCで表示した場合は、かなり余白ができてしまう方式です。 このサンプルでは、余白が大きい場合は、右上に「強制拡大」チェックボックスが表示されます。チェックをONにすると「固定解像度（拡大・縮小）」で動作するようになります。

固定解像度（拡大・縮小）

サンプルへのリンク：neta035/adv001_1.html

　実装難易度：低

　この方式では、どの端末でもほぼ同じ見た目になります。 上下や左右に余白が出ることはありますが、「想定外の崩れ」が起きにくく、完成形をイメージしやすいのが特徴です。 個人制作や、まず1本完成させたい場合に向いています。

　一方で、拡大・縮小を行うため、文字や画像のエッジがぼやけた印象になります。 ドット絵など、エッジをくっきり表示したい場合は、「固定解像度（はみ出しを許容する）」方式の方が向いています。

※このサンプルでは、サイズや位置の指定を簡略化しているため、PCのような大きな画面ではレイアウトが崩れています。

可変解像度（縦横比固定）

サンプルへのリンク：neta035/adv001_2.html

　実装難易度：高

　この方式では、端末の画面サイズによって表示解像度が広くなったり狭くなったりします。 うまく設計できれば端末差への対応力が高く、PCでもスマートフォンでも自然な表示になります。

　その分、レイアウトや演出には工夫が必要です。 たとえば、位置を左上からの固定ドット数で指定するのではなく、割合や相対座標で指定する、 解像度に応じて文字やボタンの大きさを段階的に切り替える、といった対応が考えられます。

※この方式では特に、サイズ指定や基準点の設計が重要になります。サンプルでは簡易的な実装のため、PC環境ではレイアウトが破綻しています。

可変解像度（縦横比も可変）

サンプルへのリンク：neta035/adv001_3.html

実装難易度：非常に高

　この方式は、画面を余すことなく使えますが、端末ごとの差が最も大きくなります。 同じアプリでも、環境によって見た目の印象が大きく変わる点には注意が必要です。

　「可変解像度（縦横比固定）」と同様の工夫に加えて、縦横比の違いも考慮する必要があります。 たとえば、Xperia のような 9:21 の画面がある一方で、iPad の 3:4 の画面もあります。 できるだけ多くの端末に対応しようとすると、レイアウトが破綻しないかの確認が欠かせません。

　どの方式にも正解・不正解はありません。 作りたいものの規模や目的に応じて、「どの違いなら受け入れられるか」を基準に選ぶことが大切です。

まとめ

　ここまでいくつかの画面最大化の方針を紹介してきましたが、 どの方式にもメリット・デメリットがあり、万能な正解はありません。

　そのうえで、個人的なおすすめを挙げるとすれば、 「固定解像度（はみ出しを許容する）」方式かなと思っています。

　この方式は、ほぼ固定に近いレイアウトができるため扱いやすい点に加えて、 拡大・縮小を行わないことで、画像や文字のエッジがぼやけないのが大きな利点です。 ドット絵や2D表現を重視する場合には、特に相性が良い方式と言えます。

　見切れについても、最初からある程度許容する前提で作り、 重要な要素は実際の表示可能領域を基準に配置すれば、大きな問題にはなりません。 また、PCのように極端に解像度差のある環境は割り切って対象外とし、 スマートフォン向けと考えてしまえば、配置のブレを小さく抑えられるため、設計も比較的楽になります。

　「すべてに対応する」よりも、「無理なく破綻しない」設計を選ぶ、 という意味でも、現実的な選択肢だと思います。

次回について

　次回は今回の作例で使用したサンプルプログラムを公開する予定です。 コードの解説もしつつ、使い方について説明する内容になる予定です。