2011年12月20日火曜日

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

スポンサーリンク

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


フォントサイズの変更


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

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

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

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

どこがくずれるのか


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

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

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

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

文字が重なる原因

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

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

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


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

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

やむを得ない事情

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

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

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

結び


フォントサイズの変更というのは難しい問題です。

結論としては、以下の2点を押さえていれば最低限のラインは守られるかと思います。

  • 文字がある程度大きくなっても可読性が落ちない
  • ナビゲーションのリンクがクリックできる

限界までフォントサイズを大きくしても崩れないレイアウトはまず無理なので、必要最低限を押さえる事が重要ではないでしょうか。

スポンサーリンク

1 件のコメント :

  1. 共感しました。Mac OSXLion Firefox でWebページを閲覧するレアケースな市民として、又、視力低下によりフォントサイズをを20にしなければ読めなくなってきた、中高年として、Web製作者や世界インターネット機構に対し、モノ申す程の事ではないという認識はやはり誤りだろう、と思った次第です。技術は公平平等でなければならないと感じます。今のままでは、強者が優遇され獲得した技術で、更に弱くなった弱者は死滅するしかない世界がやってきます。自分も将来間違いなく弱者の方になる事を理解できない者が、弱者をいじめている愚かなWeb世界を改善すべきです。このコメント投稿欄の文字の小ささも恐らく、いじめ、です。この様にして、弱者はコメントをしなくなっていき、Webから消えていくのです。

    返信削除