Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yuki Tanabe

May 25, 2022
Tweet

More Decks by Yuki Tanabe

Other Decks in Programming

Transcript

  1. モバイルファーストデザインの爆速実装を考える
    Details Tech Session Vol.2
    2022/05/25

    View full-size slide

  2. 私はだれ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 今日話すこと

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. なるほど

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. モバイルがこう!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 理想は…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 納期に間に合ってみんな幸せ!!
    LOVE!!!

    View full-size slide

  22. ということで

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. ここから実装の話

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 爆速実装への戦略

    View full-size slide

  29. 「Media Queryを使わない!!」

    View full-size slide

  30. これは面倒!

    View full-size slide

  31. 二つの神器を使う

    View full-size slide

  32. 「rem」 と 「min()」

    View full-size slide

  33. 「rem」の復習

    View full-size slide

  34. ルート要素(htmlタグ)のfont-size
    を基準にした値
    これ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 「min()」の復習

    View full-size slide

  38. min(A, B)のうち、小さい方が選択される

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. ここから応用問題!

    View full-size slide

  43. このCSSが意味するものとは?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 「Media Queryいらない!!」

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. 注意事項

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide