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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

私はだれ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

今日話すこと

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

なるほど

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

デスクトップがこう！ HondaHeart

Slide 13

Slide 13 text

モバイルがこう！

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

さて

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

理想は…

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

だって、LP案件って…

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ということで

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ここから実装の話

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

☆仕様の前提 750px window size

Slide 29

Slide 29 text

爆速実装への戦略

Slide 30

Slide 30 text

「Media Queryを使わない！！」

Slide 31

Slide 31 text

これは面倒！

Slide 32

Slide 32 text

二つの神器を使う

Slide 33

Slide 33 text

「rem」と「min()」

Slide 34

Slide 34 text

「rem」の復習

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

「min()」の復習

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

ここから応用問題！

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

例題

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

これでOK

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

これでOK

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

「Media Queryいらない！！」

Slide 58

Slide 58 text

サンプルつくってみた

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

注意事項

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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