#見つけて尾道レトロ キャンペーンLP

POINT 制作のポイント

1. 1

   スマートフォンを基準に作り、パソコンで固定する

   375px を基準に px を vw へ変換する関数を用意し、画面幅に合わせて等倍で縮む作りにしました。

   ブレイクポイント以上では px の固定値に切り替え、大きな画面で間延びしないようにしています。

2. 2

   パソコンだけでなく、実機で確認する

   公開して iPhone で開いたところ、パソコンでは見えていなかった不具合が4点出ました。波の飾りの継ぎ目、送信ボタンの文字が白く飛ぶ、など。

   パソコンだけを見ていたら、1つも見つかりませんでした。それ以来、実機での確認は必ず工程に入れています。

3. 3

   画像を92%軽くする

   150ファイル・36.7MB あった画像を、2.9MB まで落としました。

   「新しい形式を足す → 参照を差し替える → 元ファイルを消す」の3段階で進め、参照漏れが出ないようにしています。

4. 4

   装飾は「値」ではなく「作り方」で合わせる

   波の飾りの位置を余白の調整で合わせようとして、何度やってもズレました。

   セクションの高さを固定する作りに変えたら、一度で決まりました。数字が違うのではなく、作り方が違ったという例です。