デザイナーがウェブの文字サイズを小さく固定したがる理由
すっかり出遅れた感はありますが、「ウェブページのフォントサイズ固定は是か非か」という議論が「HTML＋CSSを正しく書く人たち」の間で出ています。その流れで、ねこめし日記（in 娘娘飯店しるきぃうぇぶ）の「豆字デー」（凶悪なほどの極小フォントで固定表示）「巨字デー」（同じく巨大な字で固定表示）が出ました。
ここでは、その辺の話から入って、「なぜデザイナー（notウェブデザイナー）はフォントサイズを小さめに固定したがるのか」というところに持って行きます。本題は後半にあるので、論争に興味のない方はサクッと下の方へ飛んでください。
この記事のリンク用URL|コメント＆トラックバック(24)
新：
はてなブックマークに追加
del.icio.us に追加
MM/Memo に追加
●フォントサイズ固定問題の経緯
以下、ねこめし日記からの孫引きです。
・カススタ on はてなの「 font-size 固定は排除」という基準に徳保氏が意見。
http://deztec.jp/design/note031001.html 平成15年10月11日参照。
・adramine 氏返答。
http://d.hatena.ne.jp/adramine/20031014#p4
・そふぃあ氏参戦（？）
http://d.hatena.ne.jp/jintrick/20031025
*----ここで数日間に及ぶ徳保氏とそふぃあ氏の応酬----*
・さとみちんによる豆字デー。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2003/11a.html#d04n01
・note 氏豆字デーに反応。
http://www10.ocn.ne.jp/~dotnote/diary/200311a.html#date20031104
この一連のやりとりを見て思ったことは、「望ましいHTML＋CSSの書き方」と論じる際に、徳保さんは「HTML＋CSSの文法的にValid（正しい）こと」に限定して語っているのに対し、それに加えてadramineさんは「アクセシビリティ（アクセスしやすさ）まで踏まえた上で望ましい状態」を含めていて、その前提が違うために議論になっているように思います。つまり、アクセシビリティに関する部分は、adramineさんにとってはデザインの範囲ではなく、徳保さんにとってはデザインの範囲である、という前提の違いにすぎないと思われます。
第２ラウンドともいうべき展開は、徳保さんのこの発言に対する反応といえるでしょう。
製作者CSSを閲覧者に押し付けたい人々はよく、閲覧者の立場を装って「文字サイズを固定するな、幅固定をするな、etc.」といいます。しかしそれらは閲覧者CSSでつぶせるのだから、問題ありません。本当の問題は怠惰な受動的精神に染まった閲覧者の啓蒙を、誰もする気がないことです。（備忘録031001-31／趣味のWebデザイン 平成15年10月20日付）徳保さんはまず「文法的に正しいCSSは正しい」という立場に立ち、それに対応していないブラウザや、対応するすべを知らない閲覧者、あるいはその方法を教えないサイト制作者が間違っている、とW3C原理主義的に考えているのだと理解しました。
一方で、それに対して、そふぃあさんやありみかさとみさんの反応は、つまり「読みづらい表示をする人がいても、見づらいのは閲覧者の責任というのかなあ」という、ある意味実際的な対応だと思います。
そして、豆字ページに対して「見づらいスタイルを使っているページでも、こうすれば自分で見やすく変えられるよ」というnoteさんの記事は、徳保さんが本来望んでいたであろう「啓蒙」を実際にやってくれた有用な記事ですね。
もちろん閲覧者が無知であることを助長するようなことになったら問題だとは思いますが、しかし「ページを見ていただく」という立場から考えるなら「様々なブラウズ環境にある閲覧者に対して、できるかぎりこちらの意図がストレートに伝わり、しかも相手にとって見やすい／閲覧可能であるページ作成を心がけるべきである」という点ははずせないと思います。もちろん100％対応などはハナから無理ですが（当サイトもunicode未対応ならつらいでしょうし、Netscape4.xは切り捨てています）、できるだけ多くの方に自分のサイトを「読んでいただく」というのであれば（少なくとも主張サイトはそうあるべきでしょう）「読者に努力を強いない」というのは一つの条件と思われます。
なぜなら、読者が最初から努力を強いられるなら、そのサイトはそもそも読まれません。となると、自分の啓蒙したいことすら伝えられないのです。
もちろん、他の人に読まれたいと思っていないサイトなら「自分で見やすくできないような奴は帰れ」でいいと思うのですが。
というところで、ようやく本題に入ります。
●紙のデザイナーとウェブデザイナー
実は、本の表紙の装丁なども多く手がけているデザイナーの人と一緒にページ作成をする仕事をしたことがあります。この人の表紙デザインは非常にセンスがあります。
ところが、ウェブデザインとなると、とんでもないことに。その人のデザインからHTMLに落とすときに「１ピクセルたりともずれないようにやってください」という厳しい指示があったのです。ブラウザが違うだけでも不可能なこの注文を活かすには、文字サイズ固定、テーブルと画像を使ってガチガチに組み立てる以外になくなります。
枠の大きさも、文字のサイズも当然固定の「紙のデザイナー」さんには、枠の大きさは変わる、文字サイズも変えて読みたい、ましてや同じ設定が環境によってまるで違って見えてしまうというウェブデザインの世界がなかなか理解できなかったのです。
言ってみれば、ゴムの上にデザインしてください、というようなものですからね。根本的に発想を変えなければいけないわけです。
結局、このデザイナーさんにはHTMLを覚えてもらって、いかにウェブデザインが「固定化しづらいもの」であるかを身をもって体験してもらいました。
●デザイナーサイトの文字が小さい理由
プロまたはセミプロのデザイナーさんのサイト、例えばフォント配布サイトなどを見ていると、例外もありますが、「字が小さい」という傾向があるようです。これは、ウェブページのデザインにあたって「文章を読む」より「眺める」ことに意識を注いでいるからなのです。
紙の本を思い出してみてください。
文字で読ませる文庫本、新書版の本の場合を標準的な文字サイズと仮定します。もう少し判型が大きくなると、一般の単行本（四六判とかＢ６判とか）でも文字サイズはやや大きいか、同じくらいでしょう。
ところが、週刊誌やＡ５サイズの本、ムック本などのようにさらにサイズが大きくなると、逆に文字が小さくなります。週刊誌は情報量が勝負なので別としても、このサイズくらいになるとレイアウト・デザインの比重が大きくなります（逆に言えば、図解などが盛りだくさんの視覚的な本を作ろうと思ったら、Ａ５以上が欲しいところ）。
大判のファッション雑誌や音楽雑誌の文字は、もうほとんど添え物というか、デザインの一部のように小さな文字になったりします。それでいて見出しはすごく大きかったり。
つまり、見た目のデザインを重視したい人にとって「文字は小さい方がスタイリッシュ」ということは、もう考えるまでもない事実なのですね。その意識をもってウェブデザインに参入すると、いきなり画像作成ソフトでレイアウトを考えたりするわけで、「文字が小さく、固定」というデザインになってしまうのは避けられないことなのです。
一方で、プログラマーなどコーディングから入った人は、そんな頭などなく、ＳＥＯやアクセシビリティやＨＴＭＬ文法の整合性の方が気になったりするわけで、「デザイナーサイトはＨＴＭＬがデタラメだ！」「Ｗ３Ｃ信者のサイトのデザインはダサい！」というようにお互いに思ってしまうのですね（あくまでも一般論です）。ウェブデザイナーには、ありみかさんのように、デザインとコードの両方の視点を持つことが必要です。
そういうわけで、例えば長文がメインのサイトは、デザイナーに任せずに「文章を読みやすくする」ようにすればいいのではないかと思いますね。
あ、あとこのサイトのソースはあまり厳しくチェックしないでくださいね……ＭＴ自体の吐き出すソースも問題はありますから。
この記事のリンク用URL|コメント＆トラックバック(24)
はてなブックマークに追加
del.icio.us に追加
MM/Memo に追加
コメントとトラックバック
[No.1] 投稿者：doroyamada［2003年11月 8日 22:50］
デザイナー系のウェブサイトの文字が小さいのは私も前から感じていましたが、単に「でっかいディスプレイで作業しとるんやろうな」と思っていました。
[No.2] トラックバック：「font-size: 90% 指定だって豆字固定と大差無い (2003/11/09 - 04:25)」（ねこめしにっき）［2003年11月 9日 05:20］
本文部分に対して font-size: 90% だとか 0.9em だとかを指定してるサイトが、例の豆字の件というかフォントサイズ固定 CSS の件に関して、「だから豆字固定はよくない」あるいは「 px 固定は...……[全文を読む][No.3] 投稿者：松永［2003年11月 9日 12:14］
＞ありみかさん
「 0.9em だとかを指定してるサイトが」ってうちのことだ(;´Д`)
ぼちぼち改善しようと思います。少しずついじってきたのだけど、全体的にマークアップなどから見直すかな。
もっとも理由付けは「このサイトへのアクセスの実数として最も多いユーザー（Win5.5or6.0が８割、Windowsが９割、画面解像度は1024×768が６割・1280×1024が25％）」というあたりの人が「自分の見たいデフォルトの文字サイズもスタイルシートも何もいじっていない」ことを想定してまず最適化し、その上で他の環境でも合わせられる、という感じで考えてました。言い訳になってませんが。
画像が基本的にpx単位基準なのもあって厄介な話ですね。
[No.4] 投稿者：松永［2003年11月 9日 12:18］
＞doroyamadaさん
デザイナーは、でっかいディスプレイでその分大きく表示するかというとそうではなく、例えば1024pxではなく1600px幅にするというような傾向があると思います。
小さなノートパソコンでは640幅とか800幅だけど、デスクトップだったら1024という人は多いと思います。
「大きく表示される」よりも「広く使える」がポイント。広い画面ならその分、画像処理ソフトでの拡大表示も大きくなるので問題ないですし。だから、画面が広くなっても文字サイズは似たようなものになる傾向があると思います。
[No.5] 投稿者：松永［2003年11月 9日 13:56］
このウェブログの本文フォントサイズを1emにしました。
[No.6] 投稿者：松永［2003年11月 9日 14:10］
しかしでかいな。このサイトでは固定幅フォントを使うように指定して（フォント名＋monospace指定なのでCSS的にもブラウザ的にも問題は少ないと思う）行間も広めにとっているからものすごく大きく見える。
ねこめし日記のここはちょっと賛同できない。
http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/07a.html#day10num01
――ブラウザの文字表示デフォサイズがでかいなと感じるなら、そのブラウザの設定を各自が「自分のいちばん読みやすいサイズ」にすればそれで良いんだと思うです。――
自分はそれでいいんだけど、世の中の多数派の人は「デフォルト設定をいじろうなどと考えもしない」人が大半なので、それを期待することもできない。だから多くの人に狙ったデザインで見てもらおうと思えば、「アクセス多数派のデフォルト環境に合わせる」という方針にせざるをえないところがありますね。少数派の人もできるだけ作業が少ないように、しかも多数派は何の労力も必要ないように配慮する、というのがいいかな、と思います。
って、これ独立記事にしろってところですが。
（15:00、フォントサイズを元に戻しました。やっぱり少数者を優遇しすぎて大多数を無視するわけにはいかないので）
[No.7] 投稿者：sansara［2003年11月 9日 18:08］
あの伝説のクリッピングソフト「紙」では
FixedSysの１４
を標準装備しています。
ｗｅｂ画面上がこれが一番い「読みやすい」
とうのが作者のコメントです。
確かに使っていて納得させられるものがあります。
ただ、他の人の画面の設定等との関係で
それが本当にそうかはよくわかりません。
松永さんからのコメントがいただけると嬉しいです。
[No.8] 投稿者：松永［2003年11月 9日 21:06］
今、手元のエディタで「FixedSysの14」にしてみました。確かに読みやすいです。
しかし、画面の大きさや解像度、さらに他にインストールしているフォントとの兼ね合いで、それが「一番」かどうかはわかりません。
そもそもWindowsフォントはMacに比べれば弱いですね。MacのOsakaフォントがWindowsにきちんと移植されればもう一段読みやすくなると思います。
また、一つの画面にどれだけの情報を表示させる必要があるか、ということも関連しますね。今使っている英和翻訳ソフトでは、左右に対訳が並び、さらに上下のできるだけ広い範囲の文章を確認したいこともあって、小さめのフォントサイズにしています。
普通に原稿を書く時もFixedSys14だとちょっと大きすぎるような気がしますね。一つ一つの文字の可読性より、前後の流れを見たいというところもありますので。
というわけで、FixedSys14は「一つの選択肢」として参考に覚えておくといい、と思います。
[No.9] トラックバック：「小さい本文フォントサイズ」（深緑茶）［2003年11月10日 03:09］
アクセス多数派のデフォルトの環境のブラウザ製作者が、そのブラウザを使う大多数の人間が一番読みやすいであろうフォントサイズとして決めている1emが、「デフォルト設定をいじろう...……[全文を読む][No.10] 投稿者：［2003年11月12日 18:02］
W3C＆アクセシビリティ原理主義者が絶対に読みそうにないページ
http://www.shop33.com/freepaper/2003_11/a.html
[No.11] 投稿者：まつやん［2004年1月24日 09:48］
私もHTMLコーダーとして仕事を受けていた時期がありました。コーダーとしてのプライドは
・デザイナーの意図を正確にブラウザに反映させる。
・その為には1pxのずれも許さない、妥協しない事。
・美しいコードを心がける。
ですね。プロのコードはデザインと1pxのずれもないです。
それはデザインの段階でHTMLに反映させたときに「ずれを予測」しているからなんです。
デザイナーはコーダーの力量と共に ブラウザの限界も知る必要があります。デザインの最中はコーダーのデザイナーは常に打ち合わせをしているのですから…。
コーディング作業はちょっとHTMLの知識があれば学生でもできるというイメージが業界の中でもあるのは事実です。でも本当に実力のあるデザイナーはコーダーの指定をします。コーダーはデザイナーにとって、自分のデザインを正確に伝えてくれる一種の媒体でもあるからなのです。
[No.12] 投稿者：GREED［2004年2月 4日 19:03］
小さい文字は大好きですが、このことに悩んだ結果、スタイルシートによる文字サイズ切り替えという結論に辿り着きました。これってどうでしょうか？
[No.13] 投稿者：松永［2004年2月 4日 19:22］
まつやんさん
＞プロのコードはデザインと1pxのずれもないです。
＞それはデザインの段階でHTMLに反映させたときに「ずれを予測」しているからなんです。
それはまさにプロですね。ＨＴＭＬを知らないデザイナーさんだとそうはいきません……。
GREEDさん
それはありだと思います。というかそのボタン面白いですねー。
[No.14] トラックバック：「ＷＥＢデザイン、だれの視点？」（ささやかだけどタイセツなこと）［2004年3月13日 22:17］
デザイナーがウェブの文字サイズを小さく固定したがる理由プロまたはセミプロのデザイナーさんのサイト、例えばフォント配布サイトなどを見ていると、例外もありますが、「字が小さ...……[全文を読む][No.15] 投稿者：t_doumori［2004年3月14日 00:40］
いや。すごいですね。このコメントの数々は。
my blog.listに追加させていただきます。
勉強になります。
[No.16] トラックバック：「デザイナーとフォントサイズ」（pêle-mêle）［2004年7月21日 04:50］
id:tsuruba:20040720#p1より。 デザイナーがIEの表示を「小」や「最小」にする、積極的な理由はあるのだろうか。「そっちのほうが何となくお洒落な感じがするから」は、もちろん理由になら ...……[全文を読む][No.17] トラックバック：「月めくりカレンダー（IFrame）」（一体どうなんでしょう）［2004年9月 8日 23:16］
昨日ゴソゴソやっていた月めくりカレンダーですが 最終的に、IEでどうしても表示が崩れる（文字の大きさを変えたとき）ので カレンダー部分のみフォントサイズを12pxで固定。 作業途中...……[全文を読む][No.18] トラックバック：「月めくりカレンダー（IFrame）」（一体どうなんでしょう）［2004年9月 8日 23:16］
昨日ゴソゴソやっていた月めくりカレンダーですが 最終的に、IEでどうしても表示が崩れる（文字の大きさを変えたとき）ので 渋々カレンダー部分のみフォントサイズを12pxで固定。 作業...……[全文を読む][No.19] トラックバック：「豆字をめぐる冒険」（ner式）［2005年3月10日 00:57］
「10代の若者を引きつけるウェブサイト」の作り方 10代の若者向けのウェブサイ...……[全文を読む][No.20] トラックバック：「うぇぶぺーじの文字の大きさ」（かぶとよもやま話）［2005年5月27日 20:33］
デザイナーがウェブの文字サイズを小さく固定したがる理由 [絵文録ことのは]2003/11/08 すっかり出遅れた感はありますが、「ウェブページのフォントサイズ固定は是か非か」という議論が...……[全文を読む][No.21] 投稿者：通行人［2005年7月22日 19:37］
ウエブデザイナーって、間抜けな商売だと思いますよぉ。
Windows系なら、画面のプロパティで、ウインドウ項目の背景色を、黒とか濃紺の配色にして、ネットサーフィンしてみましょう。
彼らの半端な作業の残骸が、たくさん現れます。
・・・まぁ、同時にアプリケーションの半端な作業も、たっぷり出現しますけどね。
[No.22] トラックバック：「ブログ・ウェブページの文字サイズ」（Boise on my mind）［2005年8月18日 13:30］
Boise on the weblogのほうで「ブログのデフォルトテンプレートの文字サイズはどうしてこんなに小さいのか!!」という不満を述べましたが、これについて、まさに「わが意を得たり」のブログ...……[全文を読む][No.23] トラックバック：「WEBデザインは縦に伸びる」（ウェビンブログ）［2006年2月11日 22:54］
職場でDTP畑の人とやりとりをしていると、非常に勉強になることがあります。 DTPの人は、非常にきっちりしたピクセル単位のデザインをするのです。完成度が...……[全文を読む][No.24] トラックバック：「ブログの字が小さすぎる」（石川の古本屋）［2006年3月25日 17:58］
...……[全文を読む]このエントリー登録状況一覧
旧URL★
はてなブックマーク ★MM/Memo
新URL★
はてなブックマーク ★MM/Memo
トラックバック（参照元逆リンク）用URL
この記事へトラックバックする場合は、このトラックバック用URLを、あなたのウェブログ等の投稿ページの「トラックバック先のURL」欄に入れて更新してください。
トラックバックが重複しても削除依頼コメントは不要です。見つけ次第適当に消します。
こちらの記事へのリンクのないトラックバックは受け付けていません。無関係な記事からのトラックバック、宣伝のみのspamトラックバックは削除することがあります。
記事内容と関係のないコメントは削除します。
コメントならびにトラックバックについては、「管理人がこのブログには必要ないと判断した」というだけの理由で断りなく削除することがあります。
コメント（ご意見・ご感想）を投稿する