PCでは見やすかった地図アプリをスマホで開くと、説明欄と操作ボタンで地図がほとんど隠れてしまう。画面の幅には収まっているのに、使いたい場所が狭い。地図を中心にしたアプリでは、こうした問題が起きます。
HAIZUでは、地図を見るときは操作を小さく、細かく動かすときは時間操作を広げ、条件を変えるときは入力画面を開くという切り替え方にしています。必要なものをすべて常時表示するのではなく、何をしたい場面かによって見せる量を変える設計です。
第3回では、地図と降灰画像の重ね方を説明しました。第4回は、その地図を小さな画面でも見ながら使うための工夫です。説明の折りたたみ、時間バーとボタン、条件入力の開き方を、実装と画面からたどります。
前回：第3回：地図に火山灰の広がりを重ねるには？座標・色・透明度を図解
シリーズの入口：紹介・第0回：HAIZUの完成画面と開発ログ
HAIZUは防災学習・参考情報のためのアプリで、実際の噴火や降灰を予測するものではありません。本記事のキャプチャは、2026年10月18日に公開Web版をブラウザの390×844pxの表示領域で撮影したものです。背景の降灰は初期の操作体験用デモで、実計算結果ではありません。スマホ実機での撮影とも区別します。
スマホ対応は、画面を縮めるだけでは終わらない
スマホ対応というと、「横幅をはみ出さないようにすること」を思い浮かべるかもしれません。これは必要ですが、地図アプリではもう一つ、地図を見るための面積を残す必要があります。
HAIZUには、火山の説明、条件の表示、時間バー、再生や前後移動、凡例、地点の情報などがあります。PCでそれぞれ配置できても、そのままスマホへ詰め込むと、地図の上に説明と操作が積み重なります。文字を小さくするだけでは、読むことも押すことも難しくなってしまいます。
この状態で見てほしいのは、下部の操作欄の小ささだけではありません。地図を動かす場所と、時間や条件を変える場所が分かれていることです。画面の中央には地図を触る余地を残し、時間操作は下、条件変更への入口はさらにその下へ配置しています。
こうした配置の切り替えは「レスポンシブ対応」と呼ばれます。画面の大きさなどに合わせて、並べ方や見せ方を変えることです。HAIZUでも、狭い画面向けのCSSで、カードの左右位置、文字の大きさ、表示する説明などを調整しています。
ただし、横幅に収まることと、内容を読み取れることは別です。たとえば画面下の注意書きは小さく、展開した操作欄には細かな文字も残っています。「収まったので完了」とせず、文字の読みやすさと実際の押しやすさは、引き続き見る必要があります。
「地図を見る」と「細かく操作する」を切り替える
HAIZUの時間操作は、縮めた表示と、詳しい操作を開いた表示を切り替えられます。どちらが正解というより、使う目的に合わせた二つの状態です。
縮めた状態では、現在の経過時間、時間バー、0時間に戻す操作、再生・一時停止を使えます。地図全体の広がりを見たいときに、細かな説明や操作を全部開いておく必要はありません。
展開すると、1時間・6時間・24時間の送り幅、前後への移動、端点への移動、再生速度などを選べます。少しずつ時間を比べたい場合や、凡例を確認したい場合に使う状態です。その代わり、下のカードが広がって地図に重なります。
「機能を減らせば地図は広くなるけれど、必要な操作ができない」「全部見せると地図が狭くなる」。その間を、利用者が切り替えられるようにしています。折りたたみは単なる省スペースの仕掛けではなく、見る作業と操作する作業の切り替えです。
実装上も、詳しい操作を消して作り直すというより、展開状態に応じて表示を変えます。現在の時刻や条件は、カードを縮めても保持します。画面を整理する操作のたびに、利用者の作業まで最初へ戻さないようにする考え方です。
縮めても、よく使う操作への入口を残す
折りたためば地図は広くなります。しかし、使いたいボタンまで隠してしまうと、そのたびにカードを開き直すことになります。
HAIZUでは、縮めた状態にも再生・一時停止ボタンを置きました。「地図を広く見ながら時間を進める」という使い方を、その状態のまま続けるためです。0時間へ戻すボタンも、展開の中だけには入れていません。
紹介記事の開発ログには、時間バーと0時間へ戻すボタンの間隔を見直し、縮小表示にも再生ボタンを追加した経緯を記録しています。小さくすること自体より、縮めた後にも操作が成立するかが問題でした。
時間バーは、広い期間から見たい時刻へ近づくのに便利です。一方、指で狙った時刻へぴったり合わせるのは、画面の幅や期間によって難しくなります。細かな前後移動のボタンを別に用意しておくと、ドラッグだけに頼らずに済みます。
また、送り幅と再生速度は違う設定です。送り幅は前後へ移動する時刻の幅、再生速度は再生の進み方を変えるものです。小さな画面でも、単に数字だけを並べるのではなく、何を変える数字かが分かるようにラベルを付けます。
実際の再生や時間バーの操作時には、広告が表示される場合があります。この記事のキャプチャでは再生を開始せず、操作欄の構成を確認しています。広告を含めた運用の話と、今回のボタン配置の説明は分けて扱います。
条件入力は、地図の上へ常駐させず必要なときに開く
風向きや噴煙高度を入力する欄も、地図の横にずっと並べておくには場所を取ります。HAIZUでは、条件変更の入口から入力画面を開く方式にしています。
このように、他の操作の上に開いて、いったん入力へ集中する画面を「モーダル」と呼びます。スマホでは下に寄せたシートの形にし、上の角を丸めています。PCでは、同じ内容を中央の入力画面として見せます。
HAIZUの条件入力は、HTMLのdialog要素を使っています。ブラウザのモーダル表示の仕組みを利用し、開いている間の操作を入力画面へ集めます。見た目だけ大きな白い箱を置く場合とは、使う仕組みも異なります。
条件の選択中と、地図に反映されている条件も分けています。入力画面では編集用の値を持ち、「表示を更新」を実行して結果の準備に成功してから、地図側の条件へ反映します。入力欄を触っただけで、背景の結果が新しい条件に変わったように見せないためです。
風向きの「風が吹いてくる方向」、噴煙高度の「海抜」など、意味を取り違えやすい説明も入力欄の近くへ置いています。小さな画面だからといって単位や基準を全部省くと、操作できても条件を誤解する可能性があります。
入力画面は、開けるだけでなく最後まで操作できるかを見る
長い条件入力を一枚の画面に収めることはできません。そこでシート自体の高さに上限を付け、その内側をスクロールして下の項目へ進めるようにしています。
確認したいのは、下へスクロールできるか、更新ボタンが画面外へ隠れたままにならないか、どこを触ると地図へ戻れるかです。最初に入力画面を開いた見た目だけを確認しても、この部分は分かりません。
詳細設定は、最初からすべてを並べるのではなく、開いたときに見せます。通常の条件と、細かい仮定を変える項目を分けるためです。ただし、設定を奥へ置くほど見つけにくくもなります。隠せばよいのではなく、入口の名前と、その中で何を変えられるかが伝わる必要があります。
「表示を更新」は、結果を準備している間は押せなくし、進行中の案内を表示します。失敗したときは入力画面にエラーを出し、正常に更新できたように扱わないようにしています。小さな画面でも、ボタンを押した後に何が起きているかを説明することは省けません。
今回のブラウザ確認では、390×844pxと、さらに狭い320×740pxで、条件入力をスクロールして更新ボタンへ到達できることを確認しました。いずれも画面内にボタンが収まることを確かめたもので、すべてのスマホ環境での動作を保証する確認ではありません。
押しやすさは、ボタンの見た目と間隔を一緒に考える
ボタンの文字やアイコンが見えることと、指で押しやすいことは違います。近い場所に別の操作を置くと、狙った操作とは違う結果になりやすくなります。特に、時間を動かす操作と0時間へ戻す操作は、結果が大きく変わるので分けて考えたいところです。
HAIZUでは、時間バーの下に独立した操作行を置き、戻すボタンと再生ボタンを離しています。縮小表示の再生ボタンには、CSSで最小の高さ44px、最小の幅88pxを指定しています。これはこのボタンの実装値であり、すべての操作部品が同じ大きさという意味ではありません。
詳しい時間操作を開くと、前後移動や再生速度などの小さな部品も出てきます。多くの機能を一列に収めることと、押しやすさには折り合いが必要です。自分のPCのマウスで押せたというだけでは、指での使い心地まで確認できません。
時間バーも、見えている線の細さだけでなく、触れる領域や隣の要素との距離を見る必要があります。配置を詰めると見た目は整っても、操作の余白が減ることがあります。画面の余白は、飾りだけでなく、別の操作を誤って押さないための間隔にもなります。
アイコン中心のボタンには、見た目だけでなく「再生」「一時停止」「表示設定」などの名前も設定しています。名前がコードにあることと、読み上げ環境で十分に使えることは別なので、そこは別の確認課題として扱います。
CSSだけでなく、画面の状態も管理する
画面幅によって位置や大きさを変える部分には、CSSのメディアクエリーを使います。「この幅以下なら、この配置にする」という条件付きの指定です。考え方はMDNのメディアクエリーの説明でも確認できます。
一方、「利用者が時間操作を展開した」「説明を縮めた」という情報は、幅だけでは決まりません。HAIZUではReact側で開閉の状態を持ち、それに応じて表示やボタンの名前を変えています。幅に合わせた配置と、利用者が選んだ状態を分けて管理します。
火山の説明と時間操作の開閉状態は、ブラウザ内の保存領域にも記録します。そのため、同じブラウザで再度開いたときに、前回の選択が影響することがあります。新しく開いた画面を確認するときも、保存済みの状態なのか、初期の状態なのかを区別する必要があります。
また、地点の情報と時間操作を両方詳しく開くと、地図の領域を取り合います。現行の実装では、スマホ幅で時間操作を展開する際に、地点情報の詳細表示を縮める処理があります。一つのカードだけでなく、複数の表示を同時に開いたときも考える設計です。
「展開」「縮める」というボタンには、開閉状態を示すaria-expandedなども設定しています。画面の見た目、ボタンの説明、内部の状態をそろえるためです。こうした対応も、単にPCの画面を縮小するだけでは足りない部分になります。
ブラウザでの幅確認と、スマホ実機の確認は分けて残す
今回のキャプチャは、ブラウザの表示領域をスマホ相当の幅にして撮影しました。狭い幅での配置、折りたたみ、内部スクロール、更新ボタンへの到達を見るには役立ちます。一方、スマホ実機のすべてを再現する確認ではありません。
実機では、ブラウザのアドレス欄が出たり引っ込んだりすること、画面の向きが変わること、入力時にキーボードが出ることもあります。端末の文字サイズの設定や、指でのドラッグも使い心地に影響します。画面幅が同じというだけで、同じ操作体験になるとは限りません。
確認項目は、操作の流れにしておくと抜けを見つけやすくなります。たとえば次の順序です。
- 説明と時間操作を縮め、地図を見たり動かしたりする。
- 時間操作を展開し、前後移動や送り幅の選択を行う。
- 条件入力を開き、下までスクロールして更新ボタンへ進む。
- 更新後の地図で、条件と表示時刻を確認する。
- 地点情報など別の表示も開き、操作同士が邪魔しないかを見る。
この一覧は確認のための手順例です。今回の撮影では初期デモのまま開閉とスクロールを確認しており、条件を変更してサーバーの結果を更新する工程までを実行したわけではありません。どの状態で何を確かめたかを残しておくと、画面確認と計算結果の確認を混同しにくくなります。
また、プログラムのテストで値が正しく切り替わることを確認しても、文字が読めるか、指で押せるかまでは分かりません。コードで確認する部分と、人が実画面を触って確かめる部分を組み合わせる必要があります。
「小さく収める」より、何をしたい場面かを決める
HAIZUのスマホ画面で中心に置いたのは、地図を見るための面積と、必要な操作への入口を両立することです。常にすべてを見せるのではなく、地図を見る状態、時間を細かく操作する状態、条件を入力する状態を切り替えます。
| したいこと | HAIZUの見せ方 | 確認したい点 |
|---|---|---|
| 地図全体を見たい | 説明と時間操作を縮める | 再生や条件変更への入口が残るか |
| 時刻を細かく比べたい | 時間操作を展開する | 送り幅や前後移動を選べるか |
| 条件を変えたい | 入力用のシートを開く | 下まで進み、更新を実行できるか |
| 気になる地点を見たい | 地点情報を表示・縮小する | 地図や時間操作と重なりすぎないか |
この考え方は、地図以外にも使えます。グラフや写真など、主に見せたいものがある画面では、説明や操作をすべて常駐させる必要があるかを見直せます。折りたたんだ先の機能に戻れるか、入力を最後まで終えられるかまで考えると、「幅に収まる」から一歩進められます。
次回の第5回は「火山灰の分布は、どう計算しているのか？」を予定しています。Tephra2へ渡す条件と、結果を受け取って表示用の値へつなぐ部分を、単位や仮定も含めて説明します。
HAIZU開発シリーズ
紹介・第0回：HAIZUの完成画面と開発ログ
第1回：アプリを作る前に、何を決めたのか？
第2回：画面・サーバー・計算係の役割は？
第3回：地図に火山灰の広がりを重ねるには？
第4回：スマホでも使いやすい操作画面を考える（この記事）
第5回：火山灰の分布は、どう計算しているのか？（執筆予定。公開後にリンクを追加します）
HAIZUをブラウザで開く ／ 使い方とシミュレーションの前提を読む
本記事は2026年10月18日に確認した実装と公開Web版の表示に基づきます。キャプチャはすべて同日にブラウザで撮影しました。実際の火山活動や避難等の判断には、気象庁の火山情報や自治体の案内を確認してください。
参考情報
- MDN：メディアクエリーの使用：画面幅などの条件に合わせて配置を変える基本。
- HAIZUの紹介と開発ログ：時間操作やスマホ表示を見直した記録。
- HAIZUの使い方とシミュレーションの前提：利用方法とモデルの限界。
