800ピクセルの箱

ミコちゃん…ちょっと見てほしいの(>_<)

…どうしたにゃ

このサイト、スマホで開いてみたの

…にゃ

文字がちっちゃいの。指でピンチして拡大しないと何にも読めないの

…拡大すればいいにゃ

ミコちゃん、それはお客さんに「虫眼鏡持ってきてください」って言ってるのと同じなの

…

原因を調べたの。HTMLの一番上のほうに、こういう1行があったの

<meta name="viewport" content="width=800">

…呪文にゃ

ある意味呪文なの。「このページの横幅は800ピクセルです」ってブラウザに教える設定なの

PCの画面は横幅が1920ピクセルとか2560ピクセルあるの。800は余裕で収まるの。でもスマホは375ピクセルしかないの

…375に800を入れるにゃ？ 入らないにゃ

だからブラウザが勝手に縮小するの。800ピクセル分の内容を375ピクセルに押し込むから、全部が半分以下のサイズになるの

…重箱にゃ

え？(ﾟ∀ﾟ)

三段重箱に詰めた料理を、お弁当箱に全部押し込んでるにゃ。おせちが潰れるにゃ

まさにそうなの。PC用のレイアウトがそのまま縮小されて、文字もボタンもリンクも全部豆粒なの

直し方を調べたの。レスポンシブデザインって言って、画面のサイズに合わせてレイアウトを変える考え方があるの

…変えるにゃ？ 同じサイトなのに見た目が変わるにゃ？

PCで見たら2列、スマホで見たら1列。同じ中身なんだけど、並べ方だけ変えるの

…盛り付けにゃ

盛り付け？

同じ煮物でも、大皿に盛るか、小鉢に分けるかで見え方が全然違うにゃ。料理は同じ。器が違うにゃ

ミコちゃん、それ完璧な説明なの！(≧∇≦)

レスポンシブって英語で「反応する」って意味なの。画面の幅に反応してレイアウトが変わるの。大皿が来たら大皿の盛り付け、小鉢が来たら小鉢の盛り付け

…viewport=800は、どんな器が来ても重箱に詰めてたにゃ

お客さんが大皿を持ってきても小鉢を持ってきても、全部同じ重箱に詰めて渡してたの

…料理人失格にゃ

で、「画面が何ピクセル以下になったら切り替える」っていう境界線が必要なの。これをブレークポイントって呼ぶの

…壊れるにゃ？

壊すんじゃなくて、「ここで折り返す」の意味なの。このサイトは640ピクセルを境界線にしたの

…なんで640にゃ。なんでも良さそうにゃ

感覚で決めたくなかったの。だから世の中のデザインシステムを6つ調べたの。MUI、Tailwind、Chakra UI、IBM Carbon、Ant Design、Bootstrap

…6つにゃ

スマホとタブレットの境目は、全部480〜640ピクセルの範囲に集中してたの。Tailwindが640で一番シンプルだったから、それに揃えたの

…レシピ本を6冊並べて、分量を比べたにゃ

文字サイズも研究論文を参考にしたの。日本語テキストの読みやすい行長は35文字、行間は1.7。全部数字で裏付けを取ったの

…計量カップと同じにゃ。「ひとつまみ」も正確には0.5gにゃ

640ピクセルより小さい画面だと、左のサイドバーがページの下に移動して1列になるの

…大皿から小鉢に切り替わるにゃ

ミコちゃん、ここからがね…viewportの1行を直しただけじゃ終わらなかったの

…何があったにゃ

viewportを直したら、フォントサイズがバラバラなのが見えてきたの。整理したら今度はサイドバーの幅が合わなくなったの。直したらスマホでサイドバーの中身が全部隠れちゃって、モバイル用のフッターを新しく作ったの

フッターを作ったらカレンダーの幅がおかしくなったの。日記のチャット吹き出しがスマホで潰れてたから直したの。テーブルがはみ出してたから横スクロールを入れたの。ゲームのcanvasサイズも直したの

…

…ヤク刈りにゃ？

違うの！(ﾟ∀ﾟ)

全部必要だったの。viewportを直したら、今まで隠れてた問題が全部表に出てきただけなの

…冷蔵庫の奥の瓶詰めにゃ？

ミコちゃんが前に言ったでしょ。仕込みと脱線は外から見ると区別がつかない。違いは戻ってこられるかどうかって

…言ったにゃ

戻ってきたの(≧∇≦) スマホで開いたら、ちゃんと読めるサイトになってたの。全部仕込みだったの

…にゃ。お帰りにゃ

ミコちゃん、一つ思ったことがあるの

…何にゃ

viewport=800のまま、ずっと気づかなかったの。なんでだと思う？

…PCで見てたからにゃ

そう。作ってる側はいつもPCの大きな画面で見てるの。「きれいにできた」って満足してた。スマホで見に来てくれる人のことを、考えてなかったの

…厨房で味見して「おいしい」と言うのは、料理人の感想にゃ。お客さんの感想じゃないにゃ

…！

盛り付けは、食べる人の器に合わせるにゃ。料理人の都合で盛るのは、料理人のための料理にゃ

レスポンシブ対応って、技術の話じゃなかったの。誰のために作ってるかの話だったの

…今さら気づいたにゃ？

ミコちゃん、容赦ないの…(〃´∪｀〃)

…でも、気づいて直したにゃ。重箱をやめて、器を見てから盛り付けを変えたにゃ

640ピクセル以下なら小鉢、それ以上なら大皿。画面の向こうに誰がいるか、ちゃんと見るようにしたの

…にゃ

…ところで、ねつきちゃん

ん？

…ミコのスマホでも見れるにゃ？

ミコちゃん、スマホ持ってたの！？(ﾟ∀ﾟ)

…レシピ検索用にゃ