なぜ、最後にこれをやるのか
広い画面で整って見えるページが、狭い画面では別物になることがあります。横に並んでいたものが縦に積まれ、大きな写真が思わぬ所で切れ、ボタンが指より小さくなる。
01で決めた「誰」を思い出してください。その人は、たぶんSNSか誰かからのメッセージであなたのページを知ります。つまり、最初の一目はほぼ確実にスマホです。ここで崩れていたら、広い画面の仕上がりは見てもらえません。
確かめ方
ふたつの方法があります。かんたんな順に。
1. プレビューの窓を細くする
いま使っているプレビュー画面の幅を、ぐっと狭めます。窓の端をつかんで、スマホくらいの細さまで。多くの道具には、スマホでの見え方に切り替えるボタンもあります。見つからなければ、AIに「スマホでの見え方を確認したい」と聞けば、その道具でのやり方を教えてくれます。
2. 実物のスマホで開く
できればこちらも。プレビューを共有する機能があれば、そのリンクを自分のスマホに送って開きます。指で触ると、細い窓では気づけないこと——ボタンの押しにくさ、文字の小ささ——が体で分かります。
見る所は4つ
上から順に、ゆっくりスクロールしながら見ます。
1. 文字が読めるか
目を近づけないと読めない文字は、小さすぎます。特に、品書きの説明や住所などの細かい文字。
2. 横にはみ出していないか
スクロール中にページが左右に揺れたら、どこかが画面の幅からはみ出しています。犯人は大きな写真か、長い英単語のことが多い。
3. ボタンが指で押せるか
親指で迷わず押せる大きさか。隣のものと近すぎて押し間違えないか。とくに、いちばん大事な「してほしい行動」のボタン。
4. 写真の切れ方
狭い画面では写真の見える範囲が変わります。人の顔、品物、店の看板——いちばん見せたいものが枠の外に切れていないか。
直しの頼み方
直し方は05と同じです。ひとつだけ言葉を足します——「スマホで見ると」。これがないと、AIは広い画面を直してしまいます。
-
頼み方の例
「スマホで見ると、ページが横に揺れます。はみ出している所を直してください」
「スマホで見ると、品書きの説明の文字が小さすぎます。読める大きさにしてください」
「スマホで見ると、料理長の写真の顔が切れます。顔が入るように写真の見せ方を調整してください」
スマホ側を直したら、広い画面にも戻って一度見ます。片方を直すともう片方が動くことが、たまにあります。両方よければ、それで終わりです。
よくあるつまずき
細い窓だけで済ませる
細い窓は形の確認にはなりますが、指の感覚は分かりません。公開の前に一度は、実物のスマホで。次の一本で公開したら、真っ先に自分のスマホで開くのでも構いません。
スマホ用に作り直そうとする
骨格はもともと、狭い画面に合わせて姿を変えるように作られています。崩れた所だけ直せば足ります。「スマホ版を別に作る」必要はありません。
この一本の終わり
4つの点を確かめて、気になった所が直ったら、終わりです。残るは、あと一歩だけです。