フォントサイズの変化でレイアウトはどこまで崩れていいのか。

フォントサイズの変更に耐えうるデザインというのを日頃気にかけているわけですが、実際のところどこまで、どうなんだろうと悩みます。守らなければならないラインは、はたしてどの部分なのか？

フォントサイズの変更

個人的な結論ですが、フォントサイズの変更には「それほど」柔軟でなくてよいと思っています。

理由は、多くの一般的なユーザーはフォントサイズの変更方法を知らないから。加えて、フォントサイズを変更したとしても極端に大きくすることはないでしょうから。

つまり、フォントサイズを10倍にしても崩れないレイアウトを作る必要はありません。

しかしある程度の変化への対応は必要です。レイアウトが崩れると言っても問題の度合いでいくつかに分けて考える事ができるので、その状況を把握した上で対策を施していくべきかと思います。

どこがくずれるのか

レイアウト崩れの現れる状態は様々です。簡単に重要度の高い順から並べると以下のようになるかと思います。

文字が読めなくなる（他の要素の下に潜り込む等）
ナビゲーションが見えなくなる
文字が重なる
カラム落ち
余白が増えて見た目が悪くなる

最も深刻なのはユーザー内容がを把握できない状態。レイアウトがビクともしなくとも文字が読めなければ話になりません。ユーザーはデザインを見に来ているんではなくて情報を見に来ているので、重要度としてはやはり可読性が一番でしょう。

ナビゲーションのリンクが見えなくなる点も大きな問題です。仮に全体が白地で、ナビゲーション背景が黒でリンク文字色が白だとします。背景画像をパタ−ン化してリピートさせたりbackground-colorで作っていなければ、文字が背景をはみ出した時点で見えなくなります。見えなければ、そのページへ移動ができず大問題。

文字が重なる原因

文字が重なる原因は、主にheightを固定しているためです。フォントサイズが大きくなった際に、指定したheightを乗り越えて下の文字にかぶさって読めなくなります。

他には、絶対配置を行った要素も原因となり得ます。

良いデザインとして紹介されている海外サイト

良いデザインとして紹介されている海外のサイトを見かけますが、ちょっとしたフォントサイズの変更にも対応できていないサイトも見かけます。ブラウザのサイズ変更には柔軟でも、フォントサイズの変更には柔軟でないこともちらほら。

もちろん、紹介されているのは良いデザインであって、フォントサイズの変更に対応できているサイトとして紹介されている訳ではありません。しかし実際に納品され稼働しているサイトには違いなく、完成品の要件としてフォントサイズの変更は必須ではないのでしょう。

やむを得ない事情

フォントサイズの変更に対応した、ビジュアルに優れたデザインは非常に手間がかかります。CSS3やHTML5を利用すればかなり楽にはなるでしょうが、それでも紙のレイアウトのようにはいきません。

特にイラストや写真を厳密にレイアウトした場合、見栄えの良さの代償として柔軟さを失います。横方向はともかく縦方向の変化には対応できないのです。基本的にWEBサイトが横ではなく縦に広がるため、個別の問題ではなく根本的な問題だと言えます。

前述のような海外サイトの現状があるならば、フォントサイズ変更への対応は海外でも最重要の項目ではないという証でしょう。