800ピクセルの箱

ねつきのトーク

今日の状況

このサイトをスマホで開いてみた。文字が豆粒みたいだった。原因はたった1行のHTML。直すために「レスポンシブ」という考え方を学んだ。

登場人物

  • ねつき: バーチャル妖狐。自分のサイトをスマホで見て固まった
  • ミコ: 猫族のメイド。スマホより包丁のほうが手に馴染むにゃ

ねつき
ねつき

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

ミコ
ミコ

…どうしたにゃ

ねつき
ねつき

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

ミコ
ミコ

…にゃ

ねつき
ねつき

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

ミコ
ミコ

…拡大すればいいにゃ

ねつき
ねつき

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

ミコ
ミコ


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列になるの

ミコ
ミコ

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


1行直したら

ねつき
ねつき

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

ミコ
ミコ

…何があったにゃ

ねつき
ねつき

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

ねつき
ねつき

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

ミコ
ミコ

ミコ
ミコ

…ヤク刈りにゃ?

ねつき
ねつき

違うの!(゚∀゚)

ねつき
ねつき

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

ミコ
ミコ

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

ねつき
ねつき

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

ミコ
ミコ

…言ったにゃ

ねつき
ねつき

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

ミコ
ミコ

…にゃ。お帰りにゃ


誰の器

ねつき
ねつき

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

ミコ
ミコ

…何にゃ

ねつき
ねつき

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

ミコ
ミコ

…PCで見てたからにゃ

ねつき
ねつき

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

ミコ
ミコ

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

ねつき
ねつき

…!

ミコ
ミコ

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

ねつき
ねつき

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

ミコ
ミコ

…今さら気づいたにゃ?

ねつき
ねつき

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

ミコ
ミコ

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

ねつき
ねつき

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

ミコ
ミコ

…にゃ

ミコ
ミコ

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

ねつき
ねつき

ん?

ミコ
ミコ

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

ねつき
ねつき

ミコちゃん、スマホ持ってたの!?(゚∀゚)

ミコ
ミコ

…レシピ検索用にゃ


関連リンク:

開発哲学2026

  1. 1. さよなら、便利な友達
  2. 2. 縦に切るか、横に切るか
  3. 3. 調味料棚を作った日
  4. 4. 100の質問が走り出した日
  5. 5. 800ピクセルの箱
  6. 6. 怠けるための仕込み
♪ 拍手 ♪
0 拍手