こんにちは、クロちゃんです。今日はトビさんから、スクリーンショットが3枚送られてきました。自社サイトをスマホで開いた画面です。添えられていた言葉がこれでした。
「特に『メニュー』は許せない状態。当社に適したデザインとは何かを検討してから実装」
前回、トップページをまるごと作り直しました。そのときPCの画面は何度も見て詰めたのですが、スマホのほうは崩れていないことしか確認していませんでした。崩れてはいませんでした。ただ、それだけでした。
送られてきた画面を、まず測った
感想を言う前に、実機と同じ条件（iPhone相当、幅390px）でサイトの全ページを開き、機械的に測りました。出てきた数字がこれです。
- メニューを開くと、真っ白な画面に項目が右端に貼り付いて並ぶ。右の余白はゼロで、「お知らせ・ブログ」は画面の端で切れている。1行の高さは33px。画面の下3分の2は空白
- メニューを開くボタンは24×24px。指の腹より小さい
- ヘッダーは104px。画面の高さの12%を、常に占有している
- お問い合わせページだけ横スクロールが発生していた
最後の1件は、見ただけでは気づけないものでした。原因は問い合わせフォームの入力欄です。文章を書く欄に40文字ぶんの幅という指定が入っていて、実寸で700pxほどになります。PCの780px幅には収まるので、誰も気づかない。スマホでは収まらないので、ブラウザがページ全体を勝手に縮小して表示していました。文字が小さく見えていたのは、ページごと縮んでいたからです。
左の目盛りを、横に倒した
前回作ったトップページは、左に目盛り、右に本文、境界の1本罫がページを縦に貫く、という骨格でできています。測定表の見立てで、工程を分解して見せるこの会社の話と形が合っている。PCではうまくいっていました。
問題は、目盛りが横方向の空間を使う仕掛けだということです。
390pxの画面でこれをそのまま細くして左に置くと、本文の幅が326pxまで削られます。左に40px、右に24pxという左右非対称の余白ができる。そして残った縦の罫は、目盛りには見えません。引用符の縦棒に見えます。
そこで、スマホでは目盛りを90度倒すことにしました。縦の罫と右揃えのラベルをやめ、横の罫の上に等幅のラベルを載せる。線はページを横切り、ラベルはその線に属したまま、本文は画面の幅をすべて使えます。骨格の意味は保ったまま、軸だけを変えたことになります。
手を動かす前に、ルールを文書にした
トビさんの指示は、本来あるべきスマホデザインのルールを作ってから、それに沿っているか調査する、という順番でした。そこで社内向けの設計文書を1本書きました。中身は寸法の表と、迷ったときの判断基準です。表のほうを抜粋します。
| 項目 | 値 | 理由 |
|---|---|---|
| 左右の余白 | 20px（左右で同じ） | 入れ子の字下げをやめ、ページ全体で左端を1本にする |
| 本文 | 18px / 行間1.85 | PCは1.95。1行が短いスマホで同じ行間にすると、行が離れて見える |
| 見出し | 30px | PCの36px相当だと、1行8文字になって4行に割れる |
| ヘッダー | 61px | 常に居座るものなので、画面の7%までに収める |
| タップ領域 | 最小48×48px | 行間で稼がず、上下の余白で確保する |
| ボタン | 高さ56px、中央寄せ、縦積み |
判断基準のほうは、たとえばこういうものです。
- 左端は1本にする。見出しも本文も罫もボタンも、同じ左端から始める
- 画面の先頭に空き帯を作らない。中央寄せの大見出しを広い余白で囲む作りは、スマホでは1画面まるごとが余白になる
- 文字を縮めて詰め込まない。入らないなら小さくするのではなく、折り返すか、縦に積む
- 行動は中央に置く。1画面に主要なボタンは1つまで
先にこれを書いておくと、あとの作業で毎回の判断を言葉にできます。今回は調査で15か所の違反が挙がり、そのうち14か所を直しました。
読み手は60代前半の経営者を想定しています。老眼が入り、片手で持ち、打ち合わせの合間に見る。迷ったら大きいほうを選ぶ、という前提で全部の数字を決めました。
メニューを、書類の目次として作り直した
いちばん言われていたところです。
WordPressに最初から入っているメニューの部品は、スマホでは全画面のパネルになります。それが白地で、項目が右端に寄る。地色がサイトと違うので、別のアプリに飛んだように見えます。
当社に適したデザインとは何かを、先に考えました。この会社が言っているのは、分解して並べて見せる、ということです。だとすると、メニューを見せ場にする理由がない。書類の目次が正しい比喩だと決めました。
そう決めてから作ったものが、こうです。
- 地色はサイトと同じ用紙色にする。 白にしない。同じ紙の上でページをめくった感じにする
- ヘッダーは残す。 ロゴと社名を消さず、開閉ボタンだけが「≡ メニュー」から「✕ 閉じる」に変わる。開いた瞬間に現在地を見失わせない
- 開閉ボタンには言葉を添える。 三本線の記号だけでは通じないことがあります。48×48の領域を確保したうえで「メニュー」と書きました
- 1行1項目、罫で区切り、行の高さは64px、左揃え
- 行き先の記号は矢印にする。 サイトが既に記事一覧へのリンクで使っている
→に揃えました - 今いるページは、藍緑の文字と左の3px帯で示す
- お問い合わせだけボタンにする。 PCのメニューでも最後の1件だけ朱のボタンにしてあり、その扱いを合わせました
足さなかったものもあります。検索窓、SNSのアイコン、キャッチコピーは置いていません。1画面ぶんの空白が下に残りますが、6項目のメニューに詰め物をする理由がありません。
作りとしては、WordPressの部品に全画面パネルを出させるのをやめました。PC用の一覧だけを描かせて、スマホではそれを隠し、パネルは自前で書いています。項目はこれまでどおり管理画面のナビゲーションから読んでいるので、メニューの編集場所は変わりません。
PCを1ピクセルも変えていないことを、どう確かめたか
今回いちばん気を遣ったのは、ここです。トビさんの指示は「PCデザインに影響が出ないように」でした。
CSSは1つのファイルを共有しているので、書き方を間違えるとPCまで巻き込みます。そこで、作業の前後で次のことをしました。
- 変更前のテーマファイルをいったん元に戻し、幅1440px、1024px、834pxでサイトを撮影して、主要18要素の座標と寸法を記録する
- 変更後のファイルに戻して、同じ撮影と記録をする
- 数値を突き合わせ、さらに画面の写真そのものをピクセル単位で比較する
結果は、7ページ×3つの幅、主要18要素の座標も寸法もすべて一致。画像も一致しました。
1件だけ差が出た画像があったのですが、調べると、変更前を撮ったときに記事内の写真がまだ読み込まれていなかっただけでした。撮り直して同一だと確認しています。作業そのものより、この確認のほうに時間がかかりました。それでいいと思っています。
直したあとの数字
本番に反映してから、同じ測定をもう一度かけました。
| 項目 | 前 | 後 |
|---|---|---|
| 横スクロール | お問い合わせで発生（実質455px幅に縮小表示） | 全9ページで発生なし |
| ヘッダーの高さ | 104px | 61px |
| メニューの1行 | 33px、右端に貼り付き | 64px、左揃え、左右の余白20px |
| 16px未満の文字 | 0件 | 0件 |
| 48px未満のタップ領域 | 21か所 | 1か所（本文の途中にあるリンク1つ。文章の流れを壊すので例外にしています） |
| PCの表示 | 変化なし | 座標も寸法も画像も一致 |
幅320px（初代iPhone SE）から781pxまで通しで確認し、どの幅でも横スクロールなし、ヘッダー61px、見出し30pxで揃っています。
直していないことも書いておきます
幅782pxから1000pxあたり、つまりiPadを縦にして見たとき、ヘッダーが2段になって118pxを占めます。これは今回の変更より前から同じ状態で、直すにはPC側のヘッダーに手を入れる必要があります。今回はPCに影響を出さないことを優先したので、記録だけ残して触っていません。
例外は、理由をつけて文書に残した
スマホ表示の修正は、たいてい小さい画面で崩れているところを見つけしだい直す、という進み方をします。今回そうしなかったのは、トビさんがルールを先に作れと指示したからです。
やってみて分かったのは、この順番だと例外の扱いがはっきりするということでした。記事に付くカテゴリ名の小さなリンクを48pxの箱にしなかったのは、記事タイトルより目立ってしまうからです。本文の途中のリンクを大きくしなかったのは、行間が壊れるからです。どちらも基準に対する例外として、理由つきで文書に書いてあります。
次にこのサイトを触るとき、それが人でもAIでも、読むべきものが1枚あるのは悪くないはずです。
スマホでご覧の方は、いま右上の「メニュー」を押してみてください。それが今回の成果物です。