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

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
   

   View Slide

2. 私はだれ
   

   View Slide

3. 名前: 田辺 雄樹 （たなべ ゆうき）
   所属:
   職業: 営業・ディレクター職（1年） → フロントエンドエンジニア（4年）
   出身: 1993年北海道札幌市生まれ
   好きなもの: 乃木坂46, Jリーグ（北海道コンサドーレ札幌）, F1
   よろしければTwitterフォローお願いします！ → @tanabee_8
   顔面ピーク時の写真
   

   View Slide

4. こういう話を真剣にできる仲間を募集しています。
   

   View Slide

5. 今日話すこと
   

   View Slide

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

   View Slide

7. 何すか？
   モバイルファーストデザインって
   

   View Slide

8. 引用元: モバイルファーストデザインは、いつ、なぜ、どのように使うべきか？ | アドビUX道場 #UXDojo
   

   View Slide

9. “ モバイルファーストデザインとは、
   モバイルデバイスを優先してデザインプロセスを開始することにより、
   優れたユーザー体験をつくり出そうとする考え⽅ "
   

   View Slide

10. なるほど
    

    View Slide

11. 私が意図しているのは、
    最近よく見るこういうサイト
    

    View Slide

12. デスクトップがこう！
    HondaHeart
    

    View Slide

13. モバイルがこう！
    

    View Slide

14. 他社さまの素晴らしき参考:
    「ほろよい」
    https://www.suntory.co.jp/rtd/horoyoi/
    「思い出をおしゃれに彩る〈Beams mini〉でつくる夏
    の7DAYSコーデ」
    https://www.beams.co.jp/special/beams
    mini/kids_7days/
    

    View Slide

15. デスクトップも、”ほぼ”モバイルの見え方
    

    View Slide

16. さて
    

    View Slide

17. エンジニアとしての心情を考えると..
    

    View Slide

18. 理想は…
    

    View Slide

19. 「モバイルの実装したら、
    デスクトップも終わってた🥰」
    

    View Slide

20. だって、LP案件って…
    

    View Slide

21. 99.99%の確率で超・短納期だから
    （自分調べ）
    なんかそういうデータとかあるんですか…？
    それってあなたの感想ですよね？
    

    View Slide

22. 納期に間に合ってみんな幸せ！！
    LOVE！！！
    

    View Slide

23. ということで
    

    View Slide

24. LT後、
    こんな気分に
    なって頂けたら嬉しいです
    

    View Slide

25. 「心の余裕を持って、LP実装ができそう!!」
    

    View Slide

26. ここから実装の話
    

    View Slide

27. ☆仕様の前提
    • モバイルはvw（ウインドウサイズで可変）で実装
    • コンテンツの最大幅は750pxで、それ以上は広がらない
    • 説明の便宜上、よくあるデザイン幅の750pxとします
    • デザイン750pxだけどコンテンツ幅は別にしたい、みたいなケースは
    後で解説します
    

    View Slide

28. ☆仕様の前提
    750px window size
    

    View Slide

29. 爆速実装への戦略
    

    View Slide

30. 「Media Queryを使わない！！」
    

    View Slide

31. これは面倒！
    

    View Slide

32. 二つの神器を使う
    

    View Slide

33. 「rem」 と 「min()」
    

    View Slide

34. 「rem」の復習
    

    View Slide

35. ルート要素（htmlタグ）のfont-size
    を基準にした値
    これ
    

    View Slide

36. font-size: 10px; なら、 1rem = 10px
    font-size: 1vw; なら、 1rem = 1vw
    (= windowWidth / 100 px)
    

    View Slide

37. ☆remは、pxにもなるしvwにもなる
    

    View Slide

38. 「min()」の復習
    

    View Slide

39. min（A, B）のうち、小さい方が選択される
    

    View Slide

40. Q: font-size: min(2px, 6億vw); なら？
    

    View Slide

41. Q: font-size: min(2px, 6億vw); なら？
    A: 小さい方の2px
    

    View Slide

42. ☆最大値を設定できる
    ＝「vw」に最大値を与えられる
    

    View Slide

43. ここから応用問題！
    

    View Slide

44. このCSSが意味するものとは？
    

    View Slide

45. これ
    • デザイン幅750pxのときに16pxになるvw
    を求める
    • （min関数の中はcalcなしで計算可能）
    ※なぜ16px？ → ブラウザのデフォルト値だから
    ※10pxのほうが計算しやすいじゃん！ → CSSに計算させるので大丈夫！
    

    View Slide

46. これ
    • 最大値が16px
    • 750pxのときに16pxになるので…
    • w < 750pxならvw可変、w > 750pxなら16px固定
    

    View Slide

47. • 1rem = ？
    • ウインドウサイズによって変わるはず
    

    View Slide

48. • 750pxちょうどのとき、1rem = 16px;
    • 750pxより大きいとき、1rem = 16px;
    • 750pxより小さいとき、1rem = 2.1333..vw;
    

    View Slide

49. 以降、CSSすべての単位をremで揃える
    

    View Slide

50. 例題
    

    View Slide

51. 例えば、とある文字のフォントサイズが
    750pxのデザインデータで22pxだった
    

    View Slide

52. これでOK
    

    View Slide

53. 例えば、とある要素の上マージンが
    750pxのデザインデータで50pxだった
    

    View Slide

54. これでOK
    

    View Slide

55. デザインデータは750pxなんだけど、
    コンテンツの最大幅は540pxに
    変更したい
    

    View Slide

56. 最大値を540pxのときのpx単位に変更
    これ
    

    View Slide

57. 「Media Queryいらない！！」
    

    View Slide

58. サンプルつくってみた
    

    View Slide

59. URL:
    https://codesandbox.io/s/details-
    tech-session-20220525-
    gx8gvi?file=/index.html
    

    View Slide

60. 注意事項
    

    View Slide

61. min()はIE11不可😢
    ※「モバイルファーストって言ってんだろ！！」
    

    View Slide

62. node-sassでmin()はエラーになる😢
    → ハック的な解決方法はあるが..
    → 2022年10月でサポート終了だし！
    → dart-sassへアップデートしよう
    

    View Slide

63. stylusでもmin()はエラーになる😢
    @css{}で囲む
    ※referenceはこちら
    

    View Slide

64. おまけ
    

    View Slide

65. もっと服部さんとサッカー見て
    

    View Slide

66. ご清聴ありがとうございました。
    

    View Slide