2019-2020
サービスサイトによっては、スマートフォン画面の中で複数の小さいボタンが密集するページレイアウトが必要です。
今回はそういったサイト状況下でのボタンの並べ方を、スマートフォンのviewport設定と画面仕様の説明を含めて紹介します。
目次
重要な横画面の解像度
横にボタンがいくつ並べられるかについては、端末の横画面解像度とppi(画素密度)が影響します。
iPhone4/SE系など、横画面解像度640px幅の端末のviewport設定幅は320px/326ppiですが、
普及端末は、iPhone6/SE(2020)系の横画面解像度750px幅の端末のviewport設定幅は375px/326ppiです。
最新のエントリーモデル端末のiPhone11でも、横画面解像度828px幅/326ppiですので、横解像度は大きな違いはありません。
viewport設定について
『viewport』とは、スマートフォン端末ディスプレイの「物理的解像度表示」ではなく、調整可能な「仮想サイズ表示」にする設定です。
スマートフォンの端末はPCなどの画面サイズが大きい端末とは違い小さいため、『viewport』の記述をHTMLのmetaタグ内に設定することで、文字がスマートフォンでも読みやすい表示に設定できます。
<head> <meta name="viewport" content="width=device-width, user-scalable=no"> </head>
※iPhone4以降は高解像度「Retinaディスプレイ」になったため、viewportの横幅ピクセルは端末ディスプレイ解像度の半分に設定されています
また、画面表示の横幅を端末横幅（100％）に合わせる設定も出来ます。
それにより、テキストや画像を横スクロールせずともテキスト改行や画像縮小表示をし、上下スクロールの簡単操作だけでページを確認できるモバイルデバイスに最適化した視認性を再現できます。
ボタンは横に5つまで並べる
「押しやすいボタン」の最小サイズについてはAppleのUIガイドラインでは、（viewport設定で）44ｘ44(px)と設定しており、実サイズでは約7mm × 7mm です。
実解像度では88ｘ88(px)となります。
88px(44px)であれば、横750px（375px）の場合は7個ほどボタンを横に並べることができますが、その場合は文字の書かれないアイコンだけのボタンに限られます。
実際にはボタンに4文字程度の文字/ラベルが書かれることになるため、5個程度が横に並べられる限界数になります。
5つのボタンが並ぶコンポーネント
それでは5つのボタンとそれに近いUIコンポーネント例を紹介します。
『ページ内リンク（アンカータグ）』
ページの長さがある構成の場合はページ内リンクボタンを設置。
『タブ』
カテゴリの違う要素を限られたスペースで出しわける場合に設置し、最も左側は一番優先度が高い項目を置きます。
『セグメンテッドコントロール』
一つの関連性あるデータの集団を各セグメントで切り出して表示させる場合に有効。
「ランキング」「ユーザーデータ」「地域」など。
さいごに
基礎的なボタン設置について紹介しました。
カテゴリ/利用シーンの競合しないタブレットの登場、そして折り畳みスマートホンが登場しておりますが、スマートフォンの登場から現在まで、基本的に画面の大きさには大きな変化はありません。
利用者のアクションは「ボタン」からはじまりますので、適切な設置をしていきましょう。
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。
