公開後に自分のiPhoneで開いたら、4か所が壊れていました。 固定バーでページ下の68pxが常に隠れる、下まで読むとメニューに戻れない、フッターのリンクが15pxしかない、見出しが単語の途中で折れる。
作っているあいだ、ほとんどパソコンの画面しか見ていなかったからです。その反省と、直した記録です。
「なんとなく見にくい」を数字にする
最初に感じたのは「なんか見にくいな」でした。ただ、その言葉のままでは直せません。どこが、どれだけまずいのかを測るところから始めました。
測ってみると、思っていたより具体的でした。
① ページの一番下、68pxが常に隠れていた
画面の下に「チャットで相談」の帯を固定していました。高さ56px、下の余白12px。ところがページ側にその分の余白を用意していなかったので、どのページでも一番下の68pxが帯の下に永久に隠れていました。
隠れていたのは、フッターの最後の行。「プライバシーポリシー」のリンクが、スマホからは押せない状態でした。
② 下まで読むと、メニューに戻る手段がなくなる
ヘッダーが画面に固定されていませんでした。記事を下まで読むと、ハンバーガーは画面の上へ流れて消えます。そこから他のページへ行く方法が、一つも残っていません。
しかも、コードにはこう書いてありました。
// ヘッダーが追従しないので、開くときは先頭に戻してから重ねる
if (!open) window.scrollTo({ top: 0, behavior: 'auto' });やっと上まで戻ってメニューを開くと、読んでいた場所を失うという作りです。自分で書いておいて、自分で困りました。
③ フッターのリンクの高さが15px
指で押す部分の大きさは、Appleが44px以上、Googleが48px以上を目安にしています。15pxはその3分の1です。押せないわけではありませんが、隣を押してしまいます。
④ 見出しが単語の途中で折れる
「まずは、お話をお聞かせください。」が「お聞か／せください。」と折れていました。
日本語の折り返しを賢くする word-break: auto-phrase という指定は入れてあったのですが、これはSafariが対応していません。 iPhoneで見れば当然、働いていませんでした。パソコンのChromeでは正しく折れていたので、気づけませんでした。
直した順
影響の大きい順に手を入れました。
下に余白を作る。 これで隠れていた68pxが戻りました。iPhoneのホームバーのぶんも足しています。
ヘッダーを画面の上に固定する。 どこまで読んでも、ハンバーガーがそこにあります。先頭へ飛ばす一行は消しました。メニューを閉じれば、読んでいた場所に戻ります。
押す部分を大きくする。 フッターのリンクは15px→41pxに。文字も13px→14pxにしました。
見出しを少しだけ小さくする。 折り返しの指定をブラウザ任せにするのをやめ、狭い画面では文字を小さくして、そもそも1行に収まるようにしました。「まずは、お話をお聞かせください。」は今、iPhoneで1行に収まっています。
画面の下を占領しない
ここは作り直しました。
チャットのボタンは、画面いっぱいの帯をやめて右下の丸ボタンに。占める面積は6分の1ほどになりました。さらに、下へ読み進めているあいだは引っ込みます。 手を止めるか、少し上へ動かすと戻ってきます。
チャットの画面そのものも、これまでは全画面に開いていました。サイトから切り離された別のアプリのように見えてしまうので、画面の下から引き出すドロワーに変えました。上に少しページが見えているので「サイトの上に乗っている」と分かりますし、後ろの暗い部分をタップすれば閉じられます。上端のつまみを下へ払っても閉じます。
OSノートの絞り込みタブも、4つが2行に折り返していました。1行に並べて、指で横に送る形にしています。
ついでに見つかった、別の不具合
直した画面を確認していて、記事の本文に ** という記号がそのまま出ているのを見つけました。
原因はMarkdownの仕様でした。閉じる ** の直前が句読点で、直後が文字だと、太字として認識されません。
✗ **ここが大事です。**つづき → ** がそのまま出る
○ **ここが大事です**。つづき → 太字になる英語なら単語のあとに必ず空白が入るので、まず起きません。日本語で書くときだけ踏む落とし穴です。
調べたら、17記事・3言語で200か所以上ありました。全部直しました。書き方の注意も、記事を書くための手順書に足しています。
学んだこと
作った人間は、自分のパソコンでしか見ない。
これに尽きます。1440pxの画面では全部きれいに並んでいました。並んでいたからこそ、確認したつもりになっていました。
原状回復の現場でも同じことがあります。立って見れば仕上がっている壁が、しゃがんで見ると継ぎ目が目立つ。見る位置を変えないと分からない不具合があります。
今回は、幅320px・375px・390px・430px・560px・768pxの6通りで、全ページを1枚ずつ確認しました。次からはこれを公開前の手順に入れます。
まだ気づいていない場所はあると思います。見つけたら、また直します。