スマホの下部メニューは何pxで作るか。解説動画の寸法を、自分のサイトに当てて測った

スマホで見たとき、画面のいちばん下に出るメニュー。ホーム、検索、マイページ……と横に並んでいる、あれです。

このサイトにもあります。ホーム・実績・ブログ・アプリ・一覧の5つ。作ったのは自分なのに、「高さは何pxが正解なのか」「文字は何pxまで小さくしていいのか」を聞かれたら、根拠を持って答えられる自信がありませんでした。なんとなく、よく見る形に合わせていただけなんですよね。

そんなときに教えてもらったのが、uxpeak というUIデザインの解説チャンネルの動画です。24分ほどあって、下部メニューの作り方のコツを20個近く順番に説明しています。なかでも5分16秒からの「サイズ・余白」の章に、寸法を全部書き込んだ図が出てきます。これが本当にためになりました。

ただ、動画の数字をそのまま書き写しても、あまり意味がない気がしていて。なので今回は、動画の数字をAppleとGoogleの公式の数字と並べてから、このサイトの下部メニューを本番で実際に測りました。数字どおりに作れていたところが半分。残りは、数字だけでは見えない落とし穴です。

動画の図は、幅393ptのiPhone（14 Pro や 15 Pro の幅）を例にしています。数字だけ抜き出して、自分で図にしました。

動画が挙げた数字は次の8つです。

74ptは計算で出せます。393から左右の12ptずつを引くと369。それを5で割ると73.8。つまり「端に少しだけ余白を取って、残りを5等分」という作り方です。

動画はこの数字を「決まりではなく目安」と何度も念を押していました。小さい端末では詰め、大きい端末では少しゆとりを持たせる。画面幅は2〜3種類で作って確かめるといい、という話もありました。

動画の数字がどこまで公式と合っているのか、AppleのHuman Interface Guidelines（HIG）と、GoogleのMaterial Design 3の仕様ページに当たりました。2026年9月27日時点の内容です。

意外だったのは、Appleの側です。「タブバーの高さは49pt」「ラベルは10pt」という数字は、あちこちの記事で見かけます。でも、今のHIGのタブバーのページには、高さも文字サイズも書かれていませんでした。数字として出てくるのはApple TV用の「高さ68pt」だけ。アイコンの寸法表も今のページからは消えていて、2024年9月の版にだけ残っています（丸いアイコンなら25×25pt）。

Appleが今言っているのは、「アイコンはSF Symbols（Apple純正のアイコン集）を使えば、大きさは勝手に合う」という考え方です。寸法を覚えるより、純正の部品に任せる方向に変わってきているんだと思います。

Googleは逆に、数字がはっきりしています。しかも2025年に作り直していて、以前の高さ80dpの形は「もう推奨しない」と書かれていました。今の推奨は高さ64dp、アイコン24dp、アイコンと文字の間4dp、文字12。動画の58pt・6ptと、そう遠くない数字です。

3つを並べてみると、どこでも同じなのは「アイコン24前後」と「タブは5個まで」の2つ。残りは、作る人がそれぞれ決めている、というのが実際のところでした。

動画では、44×44ptは親指の大きさから来た数字で、これより小さいと押し間違いが増える、という説明でした。24×24のような小さい範囲だと、よく外すとも。

公式の数字も確かめました。AppleのHIGのアクセシビリティのページは、iPhoneの部品の標準の大きさを 44×44pt、最小を 28×28pt としています。GoogleのMaterial 3は 48×48dp。同じページの中に「iOSは44×44を推奨している」と、Appleの数字をわざわざ併記していました。

Webの基準のWCAG 2.2は、2段になっています。AA（普通に満たすべき水準）が 24×24 CSSピクセル、AAA（より高い水準）が 44×44 CSSピクセル。24は「最低ライン」で、44は「目指す大きさ」と読むのがいいと思います。

下部メニューの場合、タブの幅と高さがそのまま押せる範囲になります。幅390pxで5等分すれば1つ78px、高さが58〜64pxあれば、44も48も楽に超えます。気をつけるのは、アイコンの絵の部分（24px）だけを押せるようにしてしまう作り方。見た目は同じでも、押せる範囲は4分の1以下になります。

今のiPhoneには物理的なホームボタンがなく、画面の一番下に黒い横棒（ホームインジケーター）があります。上にスワイプするとホーム画面に戻る、あの棒です。

動画が一番強く言っていたのは、ここにメニューを重ねないこと。棒を隠したり、形を変えたりもしない。メニューが下に寄りすぎていると、タブを押したつもりでホームに戻ってしまいます。片手で持っているときほど起きやすい、という話でした。

そのため、下部メニューは棒の上に乗せて、棒の領域（動画では34pt）は空けておきます。Webなら、viewport-fit=cover を指定したうえで、padding-bottom: env(safe-area-inset-bottom) で端末ごとの必要な余白を足すのが定番の書き方です。

ちなみに、この「34」という数字も、AppleのHIGには見当たりませんでした。HIGは「安全な領域（セーフエリア）を守る」とは書いていますが、下に何pt空けるかは書いていません。端末から実際の値を受け取って使う前提なので、34を決め打ちで書くより、env() に任せるほうが確実です。

ここからが本題です。2026年9月27日、本番の ブログ一覧 を Playwright というブラウザ自動操作の道具で開き、幅375・390・393・430pxの4通りで下部メニューの寸法を数字で取り出しました。

並べてみると、大きく外れてはいませんでした。アイコンは24pxでぴったり。押せる範囲は78×64pxあるので、44pxの目安は余裕で超えています。

選択中の見せ方も合格だと思います。動画では「色だけ、文字だけのように1か所しか変えないと、今どこにいるのか分かりにくい。最低2つ変える」という話をしていました。このサイトは、線のアイコンが塗りつぶしに変わる、灰色から橙に変わる、1.1倍に大きくなる、の3つが同時に変わります。

文字の色も測りました。選んでいないタブの灰色は白地に対して 7.56:1、選んでいる橙は 5.18:1。WCAG（Webのアクセシビリティの国際基準）がアイコンなどの部品に求める 3:1 を、どちらも大きく上回っていました。動画では「選んでいないタブを薄くしすぎて見えなくなる失敗」が挙げられていましたが、ここは大丈夫です。

動画の「文字10〜12pt」は、英語のラベルを前提にした数字です。Home、Search、Profile。アルファベットは画数が少ないので、10ptでも形が崩れません。

日本語は事情が違います。「実績」の「績」、「一覧」の「覧」。画数の多い漢字は、10pxだと線がくっついて、ほぼ塊に見えます。iPhoneと同じ3倍の密度、同じヒラギノで並べてみました。

10pxと12pxを見比べると、差ははっきりしています。このサイトは今10pxです。動画の範囲には入っているのに、日本語で見ると下限ぎりぎりでした。

実は、10pxの文字で痛い目を見たことがあります。8月31日にサイトの問い合わせ導線を調べたとき、幅390pxのスマホで見ると、13ページ中10ページで「相談する」への入口が下部メニューの10pxのタブ1つだけでした。問い合わせが来なかった理由を数えたら、本数ではなく大きさの問題だったんです。そのときは「相談」タブを外して、画面下に追従する大きめのボタンに置き換えました。

実測の写真をよく見ると、「ホーム」「実績」の文字の裏に、本文の「連載目次を読む →」がうっすら透けています。

原因は背景です。白を90%の濃さにして、後ろをぼかす指定にしていました。iPhoneの純正アプリっぽいすりガラスの見た目を狙ったものです。ただ、10pxの小さい文字の後ろで別の文字が動くと、読みにくさが一段上がります。

動画の終盤に「プロでもやる大きな失敗」として出てくるのが、まさにこれでした。下部メニューと本文を分けていない、という話です。分け方として挙がっていたのは3つ。上に1pxの線を引く、本文と背景色を変える（本文が白ならメニューは薄い灰色）、ごく弱い影を付ける。このサイトは1pxの線は引いてありましたが、背景が透けているせいで効きが弱くなっていました。

動画の目安6ptに対して、このサイトは2px。アイコンと文字がくっついて見えるので、1つの記号として読みにくくなります。高さが64pxあって縦には余裕があるので、ここは広げられます。

寸法の前に、動画は「何を入れるか」から話を始めていました。ここも整理しておきます。

入れていいのは、一番よく使う場所だけ。ホーム、検索、投稿する（作る）、メッセージ、マイページ、あたり。逆に入れないほうがいいのは、ヘルプ、ログアウト、規約やプライバシーポリシー。どれも毎日押すものではないので、マイページの中やサイドメニューに置けば十分です。

もう1つ、「戻る」ボタンやロゴを下部メニューに入れない、という話もありました。ふだん使っているほかのアプリと同じ場所に同じものがあるほうが迷わない（ヤコブの法則）。戻るやロゴは画面の上にある、という慣れを裏切らないためです。反対に、「投稿する」「注文する」のような一番やってほしい操作を真ん中に大きく置くのはいい、とも言っていました。

タブの数は3〜5個。多くても6個まで。増やすほど1個あたりが細くなって押し間違いが増えますし、選択肢が多すぎて選べなくなります。

このサイトでも、実はここで一度迷っています。8月31日の朝の時点で、タブはホーム・実績・ブログ・制作者・相談と一覧の6個ありました。そこへ /apps（アプリの一覧）の入口を足そうとすると7個。390pxを7で割ると1枠55.7pxで、ラベルが崩れます。結局「制作者」と入れ替えて6個のまま入れ、その日の夜に「相談」も外して、今の5個になりました。コードに「枠を増やすと1枠55.7pxでラベルが崩れる」とコメントが残っていて、それを読んで思い出しました。

寸法以外の話も、短くまとめておきます。どれも動画で挙がっていたものに、このサイトの今を添えています。

記事を書いてから、下部メニューをすぐ直しました。文字を10pxから12pxに、アイコンと文字の間を2pxから4pxに、背景を透けない白に。

修正前後を並べました。左の方は10pxの漢字「ロ」「績」「覧」が線がつぶれ、背景のぼかしで後ろの本文が透けています。右の方は文字が整っていて、背景も白く透きません。

測った結果は正しくても、日本語で「10pxぎりぎり」は避ける方がいいと分かりました。下部メニューのような小さな枠では特に。記事に書いたように「問い合わせが0件だった原因は導線の本数ではなく大きさ」という実例があるので、11px以上を前提にしようと思っています。

最後の「押したときの反応」は、動画では照明のスイッチにたとえていました。押しても手応えがないと、ちゃんと押せたのか不安になる。このサイトは押した瞬間に少し縮み、選ばれると1.1倍になります。ここはもう入っていました。

ここまで書いておいて何ですが、今日の時点ではサイトをまだ直していません。

直す候補は3つあります。文字を10pxから12pxへ上げる。アイコンと文字の間を2pxから6px前後に広げる。背景を透けない白にする。どれも数行の変更です。

すぐ直さなかったのは、3つとも「見た目の好み」が混ざる話だからです。すりガラスの背景は、狙ってそうしていました。12pxにすると「アプリ」「ブログ」の幅は足りますが、全体の印象が少し重くなります。記事を書くために測っているうちに、ついでに直してしまうのは違う気がしていて。直すならこの記事とは別に、変更前後のスクショを並べて決めたいと思っています。

正直に言うと、確かめられていないことが残っています。

1つ目は、実機での押しやすさです。今回の数字はすべてパソコン上のブラウザで、iPhoneの画面を再現して測ったものです。動画でも「パソコンの画面で良く見えても、実機で押すと全然違う」と言っていました。指で押した感触はまだ確かめていません。

2つ目は、画面の一番下の余白です。このサイトはホームバーの分だけ下に余白を取る指定を書いてあるのですが、それを効かせるためのもう1つの指定（viewport-fit=cover）が入っていませんでした。この状態だと、その余白は0になります。Safariで普通に開く分には、Safari自身の下のバーがあるので困らないはずです。ただ、ホーム画面に追加してアプリのように開いたときにどう見えるかは、実機で見ていません。

3つ目は、12pxにしたときに本当に読みやすくなったと感じてもらえるか、です。文字を大きくすれば読みやすくなるのは当然として、それで下部メニューを押す人が増えるのかは、測ってみないと分かりません。

自分用に、次に下部メニューを作るときのチェックリストを残しておきます。

動画の寸法図は、一度見ておくと下部メニューを見る目が変わります。英語ですが、5分16秒からの2分半だけでも見る価値がありました。

このサイトで作ってきたアプリやWebサイトは 実績一覧 にまとめています。スマホの画面まわりの相談は、お問い合わせ からどうぞ。直した後の話も、またこの ブログ に書く予定です。