スマホで見られる前提のデザイン
ほとんどの人は小さな画面から

お店のサイトの閲覧は、いまや7〜8割がスマホから。パソコンできれいに作って満足していると、大半のお客さんには崩れた姿を見せていることになります。

「スマホでどう見えるか」がすべての基準

作業はパソコンでしていても、確認は必ずスマホで。道具（ノーコードやWordPress）にはスマホ表示のプレビュー機能がありますし、公開後は自分のスマホで実物を見るのが確実です。チェックするのは「読めるか」「押せるか」「待てるか」の3つです。

ハムちゃんパソコンでは3列に並んでたメニューが、スマホだと縦になが〜い1列に！ なんてことはよくあるんだ。両方の姿を知っておこうね。

スマホ前提で決まる、3つの作法

第一に、大事なことほど上に。スマホは一画面が小さいぶん、下までの道のりが長いのです。第二に、電話番号はタップで発信できるリンクにする。お客さんは番号を「見る」のではなく「押す」からです。第三に、横スクロールを出さない。表など幅の広いものは、スマホでは縦に組み替えるか、簡素にします。この島の吹き出しレイアウトも、スマホでは幅を変えているんですよ。

ハムちゃん「片手でスマホを見ながら、電車で立ってる自分」を想像して確認するといいよ。その状況で押せるボタンなら合格！

きょうのまとめ

• 閲覧の7〜8割はスマホ。確認は必ずスマホの実物で
• チェックは「読める・押せる・待てる」の3つ
• 大事なことほど上に。電話番号はタップ発信。横スクロールは出さない