下部メニューの、押せる場所を広げた

AIstockのスマホ下部メニューで、押せる場所の高さを広げた。2026年9月8日に修正し、9月9日に公開した。アイコンの拡大に加えて、本文や別の操作バーが隠れない位置関係まで直した。

小さい画面で、ボタンも縮んでいた

きっかけは、本人から下部メニューが小さく、押しにくいという指摘があったことだった。AIstockには、ホーム、見つける、投稿する、学ぶ、マイページの5項目が画面下に並ぶ。

GPTで表示の指定を調べると、狭い画面ではリンクの高さを48pxへ縮める設定があった。今回はこれを取り除き、通常の文字サイズでは64pxになるよう揃えた。横幅は5等分した列全体を押せる形を維持した。

アイコンも23pxから28pxへ大きくした。ただし、以前から押せる場所はアイコンの絵だけに限定されていなかった。絵の寸法と、反応するリンク全体の寸法を分けて確認し、両方を調整した。

見た目に余白がある場所でも、そこが押したときに反応するとは限らない。今回の修正では、項目を囲む四角の高さと横幅まで確認対象にした。画面上の絵を大きくした、という説明だけでは、この変更の半分が抜け落ちる。

工程分解表：押せる範囲と配置を直す

最後の実機確認は、今回参照できた記録では未実施だ。工程表には、完了した修正と、まだ結果を持っていない確認を並べている。

できる側——大きくした分の置き場所も直す

下部メニューを高くすると、その分だけ画面の下を使う。そこで、メニュー本体と上下の余白、端末の下端で避ける必要がある領域を合わせ、本文の末尾にもその高さを確保する形にした。

教科書には、読むための別の操作バーもある。こちらが共通メニューと同じ下端に置かれ、重なる配置になっていた。共通メニューの上へ置き直し、端末の下端用の余白も重ねて取らないように揃えた。

この作業は、ひとつのボタンの寸法変更から始まっている。それでも、直す対象はボタンの中だけに収まらなかった。本文の終わりが隠れないか。別の操作が同じ場所を使っていないか。GPTは関係する配置を追い、まとめて調整できた。

押している最中の動きも変えた。以前はリンク全体を縮めていたが、今回はアイコンだけを動かす形にした。ボタンの外枠は保ち、押した反応は中の絵で示す。動きを減らす設定では、背景色でも反応が分かるようにした。

人が最初に渡したのは、押しにくさを直したいという目的だった。64pxという寸法を本人が指定したわけではない。具体的な数値の選択と、周囲の配置まで含めた修正はGPTが行った。

難しい側——寸法の確認だけでは、指の感覚まで分からない

修正時には、画面幅による設定の切り替わりや、下端の余白の計算を自動で検査した。これは表示の指定と計算式を照合する検査だった。

9月10日には、公開ページを幅390pxのブラウザで開き、実際に配置された寸法も測った。5項目すべてで、押せるリンクの高さは64px、アイコンの幅は28pxだった。公開画面が指定した寸法で並ぶことは確認できた。

一方で、これは実物のスマホを手に持って押した結果ではない。持ち方を変えたときに届くか、隣の項目を押してしまわないか、連続して使ったときにも困らないかは未確認だ。誤タップが減ったという結果も、まだ持っていない。

今回の数値は、この修正で採用し、公開画面で確認した寸法である。あらゆる画面や使い方に対する正解として扱うことはできない。次に実機で困りごとが見つかったら、押せる範囲と周囲の配置を再び分けて見直す必要がある。

次に同じ指摘を受けたときの手順

1. アイコンの大きさと、押したときに反応する四角の大きさを別々に調べる。
2. その四角を広げた分、本文や隣の操作に必要な場所も確保する。
3. ブラウザで寸法を確かめ、実機での指の操作は別の確認として残す。

今回広げたのは、画面下に並ぶ5項目の押せる場所だった。その場所を確保するために、本文と教科書の操作バーも動かした。ボタンを直すときは、絵、反応する範囲、周囲に残す場所をひと組で見る。