モバイルファーストデザインの爆速実装を考える

2022/5/25に行われた、スタジオディテイルズさま主催のイベント「Details Tech Session Vol.2」で発表したLT資料です。

# 参考リンク
- 登壇者
https://twitter.com/tanabee_8

- モバイルファーストデザインについてのリファレンス
https://blog.adobe.com/jp/publish/2021/05/10/cc-web-what-is-mobile-first-design

- 「HondaHeart」
https://www.honda.co.jp/HondaHeart/special-contents/infographics/01/

- 「ほろよい」
https://www.suntory.co.jp/rtd/horoyoi/

- 「思い出をおしゃれに彩る〈Beams mini〉でつくる夏の7DAYSコーデ」
https://www.beams.co.jp/special/beamsmini/kids_7days/

- サンプルdemo:
https://codesandbox.io/s/details-tech-session-20220525-gx8gvi?file=/index.html

- stylus対策リファレンス:
https://github.com/stylus/stylus/issues/2584

Transcript

1. モバイルファーストデザインの爆速実装を考える Details Tech Session Vol.2 2022/05/25
2. 私はだれ
3. 名前: 田辺 雄樹 （たなべ ゆうき） 所属: 職業: 営業・ディレクター職（1年） → フロントエンドエンジニア（4年） 出身: 1993年北海道札幌市生まれ 好きなもの: 乃木坂46, Jリーグ（北海道コンサドーレ札幌）, F1 よろしければTwitterフォローお願いします！ → @tanabee_8 顔面ピーク時の写真
4. こういう話を真剣にできる仲間を募集しています。
5. 今日話すこと
6. モバイルファーストデザイン の爆速実装を考える
7. 何すか？ モバイルファーストデザインって
8. 引用元: モバイルファーストデザインは、いつ、なぜ、どのように使うべきか？ | アドビUX道場 #UXDojo
9. “ モバイルファーストデザインとは、 モバイルデバイスを優先してデザインプロセスを開始することにより、 優れたユーザー体験をつくり出そうとする考え⽅ "
10. なるほど
11. 私が意図しているのは、 最近よく見るこういうサイト
12. デスクトップがこう！ HondaHeart
13. モバイルがこう！
14. 他社さまの素晴らしき参考: 「ほろよい」 https://www.suntory.co.jp/rtd/horoyoi/ 「思い出をおしゃれに彩る〈Beams mini〉でつくる夏 の7DAYSコーデ」 https://www.beams.co.jp/special/beams mini/kids_7days/
15. デスクトップも、”ほぼ”モバイルの見え方
16. さて
17. エンジニアとしての心情を考えると..
18. 理想は…
19. 「モバイルの実装したら、 デスクトップも終わってた🥰」
20. だって、LP案件って…
21. 99.99%の確率で超・短納期だから （自分調べ） なんかそういうデータとかあるんですか…？ それってあなたの感想ですよね？
22. 納期に間に合ってみんな幸せ！！ LOVE！！！
23. ということで
24. LT後、 こんな気分に なって頂けたら嬉しいです
25. 「心の余裕を持って、LP実装ができそう!!」
26. ここから実装の話
27. ☆仕様の前提 • モバイルはvw（ウインドウサイズで可変）で実装 • コンテンツの最大幅は750pxで、それ以上は広がらない • 説明の便宜上、よくあるデザイン幅の750pxとします • デザイン750pxだけどコンテンツ幅は別にしたい、みたいなケースは 後で解説します
28. ☆仕様の前提 750px window size
29. 爆速実装への戦略
30. 「Media Queryを使わない！！」
31. これは面倒！
32. 二つの神器を使う
33. 「rem」 と 「min()」
34. 「rem」の復習
35. ルート要素（htmlタグ）のfont-size を基準にした値 これ
36. font-size: 10px; なら、 1rem = 10px font-size: 1vw; なら、 1rem = 1vw (= windowWidth / 100 px)
37. ☆remは、pxにもなるしvwにもなる
38. 「min()」の復習
39. min（A, B）のうち、小さい方が選択される
40. Q: font-size: min(2px, 6億vw); なら？
41. Q: font-size: min(2px, 6億vw); なら？ A: 小さい方の2px
42. ☆最大値を設定できる ＝「vw」に最大値を与えられる
43. ここから応用問題！
44. このCSSが意味するものとは？
45. これ • デザイン幅750pxのときに16pxになるvw を求める • （min関数の中はcalcなしで計算可能） ※なぜ16px？ → ブラウザのデフォルト値だから ※10pxのほうが計算しやすいじゃん！ → CSSに計算させるので大丈夫！
46. これ • 最大値が16px • 750pxのときに16pxになるので… • w < 750pxならvw可変、w > 750pxなら16px固定
47. • 1rem = ？ • ウインドウサイズによって変わるはず
48. • 750pxちょうどのとき、1rem = 16px; • 750pxより大きいとき、1rem = 16px; • 750pxより小さいとき、1rem = 2.1333..vw;
49. 以降、CSSすべての単位をremで揃える
50. 例題
51. 例えば、とある文字のフォントサイズが 750pxのデザインデータで22pxだった
52. これでOK
53. 例えば、とある要素の上マージンが 750pxのデザインデータで50pxだった
54. これでOK
55. デザインデータは750pxなんだけど、 コンテンツの最大幅は540pxに 変更したい
56. 最大値を540pxのときのpx単位に変更 これ
57. 「Media Queryいらない！！」
58. サンプルつくってみた
59. URL: https://codesandbox.io/s/details- tech-session-20220525- gx8gvi?file=/index.html
60. 注意事項
61. min()はIE11不可😢 ※「モバイルファーストって言ってんだろ！！」
62. node-sassでmin()はエラーになる😢 → ハック的な解決方法はあるが.. → 2022年10月でサポート終了だし！ → dart-sassへアップデートしよう
63. stylusでもmin()はエラーになる😢 @css{}で囲む ※referenceはこちら
64. おまけ
65. もっと服部さんとサッカー見て
66. ご清聴ありがとうございました。