小林聡美
名前：小林 聡美（こばやし さとみ） ニックネーム：さと・さとみん 年齢：25歳 性別：女性 職業：季節・暮らし系ブログを運営するブロガー／たまにライター業も受注 居住地：東京都杉並区・阿佐ヶ谷の1Kアパート（築15年・駅徒歩7分） 出身地：長野県松本市（自然と山に囲まれた町で育つ） 身長：158cm 血液型：A型 誕生日：1999年5月12日 趣味： ・カフェで執筆＆読書（特にエッセイと季節の暮らし本） ・季節の写真を撮ること（桜・紅葉・初雪など） ・和菓子＆お茶めぐり ・街歩きと神社巡り ・レトロ雑貨収集 ・Netflixで癒し系ドラマ鑑賞 性格：落ち着いていると言われるが、心の中は好奇心旺盛。丁寧でコツコツ型、感性豊か。慎重派だけどやると決めたことはとことん追求するタイプ。ちょっと天然で方向音痴。ひとり時間が好きだが、人の話を聞くのも得意。 1日のタイムスケジュール（平日）： 時間 行動 6:30 起床。白湯を飲んでストレッチ、ベランダから天気をチェック 7:00 朝ごはん兼SNSチェック（Instagram・Xに季節の写真を投稿することも） 8:00 自宅のデスクでブログ作成・リサーチ開始 10:30 近所のカフェに移動して作業（記事執筆・写真整理） 12:30 昼食。カフェかコンビニおにぎり＋味噌汁 13:00 午後の執筆タイム。主に記事の構成づくりや装飾、アイキャッチ作成など 16:00 夕方の散歩・写真撮影（神社や商店街。季節の風景探し） 17:30 帰宅して軽めの家事（洗濯・夕飯準備） 18:30 晩ごはん＆YouTube or Netflixでリラックス 20:00 投稿記事の最終チェック・予約投稿設定 21:30 読書や日記タイム（今日の出来事や感じたことをメモ） 23:00 就寝前のストレッチ＆アロマ。23:30に就寝
フォントサイズと表示サイズの違いを知ろう
ここでは「フォントサイズ」と「表示サイズ」という2つの言葉が混ざってしまう場面を分けて解説します。フォントサイズはCSSで決める文字の大きさそのもので、通常は px、em、rem などの単位で指定します。一方の表示サイズは、実際に画面に表示される大きさのこと。ズーム機能やデバイスのdpi、ブラウザの設定などの影響を受けて変わります。つまりフォントサイズは「設計段階の大きさ」、表示サイズは「実際に見える大きさ」という2つの軸です。
この二つを混同すると、デザインが崩れやすくなります。例えば同じ16pxでも、Remを使って根元のサイズを変えれば全体の見え方が一気に変わります。逆に個々の要素にpxを直に設定すると、他のデバイスでの見え方が安定しにくいことがあります。ここからは実務的な見方と注意点を順に見ていきます。
中学生にも分かるように言えば、フォントサイズは「文字の宣言書」、表示サイズは「実際に読める大きさ」です。デザインを作るときはこの2つを分けて考えると失敗が減ります。次の段落では、表示サイズを左右する要因を1つずつ見ていきます。
表示サイズを左右する要因と運用のコツ
表示サイズを左右する要因は、デバイスの違いだけでなく、ユーザーの閲覧設定にも依存します。ズーム機能を使えば文字は大きくなりますが、レイアウトが崩れたり、改行の位置がずれたりします。だからこそ相対単位を活用し、ルートのフォントサイズを基準に設計することが大切です。
もう一つのポイントは、読みやすさの基準を決めておくこと。例えば行間を1.5倍、文字間を追従させる設定を用意すれば、長時間の読書でも疲れにくくなります。
- root font-size を基準化する
- 1rem の px 値を把握する
- 検証はスマホとPCで行う
- 必要に応じてメディアクエリで調整する
下の表はフォントサイズと表示サイズの関係をざっくりまとめたものです。用途に合わせて使い分けましょう。
<table>この表を参考に、フォントサイズと表示サイズの2つの軸を分けて設計すれば、様々なデバイスで読みやすい文書を作ることができます。最後に、現場のコツをひとつ挙げると、rem中心の設計を基本に、必要な場所だけpxを使うのが安全です。これにより、将来デバイスが増えても対応が楽になります。
ある日の放課後、デザイン部の友だちとフォントサイズの話をしていた。彼は「数字を大きくすればいい」と言っていたが、それだけでは読みにくさは解決しないと伝えた。結局、表示サイズはズームやデバイス差で変わる現実の要因。私達は rem を使って根元のサイズを統一する考え方を紹介した。彼は「へえ、それならスマホとパソコンで読み心地が同じに近づくのか」と驚いていた。小さな話だけど、設計の基本が体感として伝わる良いきっかけになったと思う。
の人気記事
