Framerのブレークポイントと、スマホでページが崩れない作り方

Framerのブレークポイントは3つ、Desktop、Tablet、Phoneです。Desktopで作ると、変更は下の2つに流れていきます。小さいサイズで何かを変えると、それは上書きとしてその場に固定されます。Framerで起きるスマホの不具合は、ほぼ1つの原因にたどり着きます。可変に切り替え忘れた、ピクセル固定の幅です。

3つのブレークポイントが実際に指す範囲

Framer自身の製品ページでは、キャンバスのタブがDesktop 1200、Tablet 810と表示されています。framer.comで公開されているコードも同じです。レスポンシブ画像は、min-width 1200px、810pxから1199.98pxまで、そしてmax-width 809.98pxという条件で配信されています。つまりDesktopは1200以上、Tabletはおよそ810から1199、Phoneは810未満のすべてです。レイアウトは、この3つの区切りすべてで壊れずに済む必要があります。

変更は下へ流れる。上書きは上へ戻らない

Desktopで編集すると、その変更はTabletとPhoneにも流れます。Phoneで編集すると、そこだけに残る上書きになります。Framerは上書きしたプロパティをすべて色付きで示します。値が基準のブレークポイントと合わなくなり、それ以降は変更を受け継がなくなるからです。戻すときは、プロパティ名をクリックしてReset Overrideを押します。だからDesktopのレイアウトを仕上げてから、Phoneを開くのです。早すぎる上書きは、同じ変更を2回する羽目になります。

はみ出す原因は固定幅

Framerには短いトラブルシューティングの記事があり、内容も的確です。Phoneのブレークポイントで画面いっぱいに表示されないときは、ほぼ必ず、どれか1つの要素がスマホの画面より広くなっています。見るところは2つです。100%や1frにしたかった場所に残っている321pxのような固定幅。そして、スマホの画面より大きいMax Widthです。どちらも右パネルのSizeで直します。Widthを100%か1frにして、コンテンツを包む要素以外からはMax Widthを外します。直したら再公開してください。キャンバスの変更は、公開して初めて実際のサイトに反映されます。

あとはスタックの向きと余白

Phoneでは、横並びのスタックのほとんどを縦に変える必要があります。スタックを選んで向きを切り替え、間隔もパソコン向けの値より小さくします。次にセクションの余白を削ります。上下120ピクセルはパソコンでは余裕に見えますが、スマホでは空っぽの画面に見えます。左右80ピクセルの余白があると、スマホの訪問者は細い帯のような文章を読むことになります。40と20あたりが妥当な出発点です。Phoneのブレークポイントでセクションを上から順に見て、何もない部分をスクロールさせている箇所を縮めていきましょう。

文字は別に一通り見直す

64ピクセルの見出しは、スマホでは6行に折り返し、ボタンをファーストビューの外に押し出します。レイヤーごとに直すのではなく、テキストスタイルで一度だけ直します。左サイドバーのAssetsを開き、スタイルを開いて、Edit StyleのダイアログでBreakpointsの項目からAdd Breakpointを押します。Desktop（L）、Tablet（M）、Mobile（S）が選べます。それぞれで文字サイズ、行間、字間、段落の間隔を設定できます。H1をここで一度決めれば、サイト内のすべてのH1がその設定に従います。

訪問者が見るとおりに確認する

先に癖をひとつ。Framerは、ブラウザのウィンドウやモニターの解像度より広いブレークポイントを選べなくします。だから小さいノートPCではDesktopのプレビューがグレーになることがあります。Framerが案内している対処は、ウィンドウを広げる、大きいモニターに移る、または公開して実際のURLで確認する、の3つです。そのうえで、本番の確認はブラウザで行います。ウィンドウの幅を、広いところからゆっくり狭めていく。どの幅で行が収まらなくなるかを見つけ、ブレークポイントの境目ではなく、その幅で直します。最後に、実際のURLを自分のスマホでモバイル回線から開き、ページを最後までスクロールします。端末エミュレーションでは、遅い回線もアプリ内ブラウザのツールバーも再現できません。

10分でできるレスポンシブ確認

上から下へ、セクションを1つずつ見ていきます。包んでいる要素はすべて100%か1frにする。Max Widthはコンテンツを包む要素の1か所だけに残す。Phoneでは横並びのスタックを縦にする。セクションの余白を半分にする。H1、H2、本文のテキストスタイルに、ブレークポイントごとのサイズを足す。再公開して、スマホでページを開き、スクロールせずに最初のボタンが見えるか確認する。この一通りで、問題の大半は見つかります。何度かやれば、1ページあたり10分ほどで終わります。