2011年1月13日木曜日

MacとWin。フォント表示の違いによるレイアウト崩れ。

スポンサーリンク

MacとWinでフォント表示の違いによるレイアウト崩れが見られる件について。

ブラウザでWEBサイトを閲覧する際、フォントの表示違いの話は良く出ます。
フォントのアンチエイリアスなどもデザイン的に大事な話ではあるのですが、それ以上に大きな問題がレイアウト崩れです。


状況


見た方が分かりやすいので、下記をどうぞ。
このブログの右サイドにあるナビゲーション部分です。
左がMacで右がWin。どちらもFirefoxで表示しました。





ご覧のように明らかな違いが出ています。

レイアウト崩れの問題点


簡単に言えば、日本語のひらがなカタカナ部分の字間(文字と文字の間の部分)が違うようです。
アルファベットや漢字の部分にはそれほど違いが感じられません。

CSSでletter-spacingを用いて詰めてしまうと、ひらがなカタカナ部分は良くても他の字間がつまり過ぎます。
個別にspanなどのタグでくくる方法もありますが、手間が借り過ぎるため現実的ではないでしょう。

グローバルナビゲーションの場合

グローバルナビゲーションが画像ではなくテキストの場合、レイアウト崩れは大きな問題です。

実際に大手やWEB制作会社さんのサイトでも時々見かけるのですが...。
ナビゲーションラベルを1列に配置するデザインを意図しているのに2列となり、コンテンツ部分に食い込んでいます。
見た目におかしいだけではなく、落ちた項目が見づらい場合は存在すら見落とされてしまいます。

コンテンツの場合

サイズを固定した背景画像を使っている場合、テキストが背景からはみ出して見えます。
サイズを固定せずにbackground-repeartをnone以外に設定していれば、はみ出した方向に背景が繰り返されて更におかしな表示になる場合があります。

グラフィカルなサイトで稀に見かけますが、フォントによるレイアウト崩れに一切対応していない場合があります。
フォントの変化を気にしない分、より自由にデザインが作れるためメリットがあるのですが...。
崩れてしまっていては台無しです。

フォントによるレイアウト崩れに対応するべきか?


フォントサイズを任意で変更する場合は別ですが、OSや主要ブラウザの違いで現れる変化には対応するべきです。

Macのシェアがどれほど増えて行くのか、あるいは減少して行くのか定かではありませんが現実に存在しています。
対応の為に、文字サイズの変更にフレシキブルに対応するほどの労力はいりません。
レイアウトが崩れても問題なく機能するように少しばかり気をつけておけば良いのですから。

対応策

heigtを指定せずにpaddingやmarginで高さを確保したうえで、widthで幅を制限する方法もあります。
しかし、もっと簡単で単純な方法を。

単純に、内容を壊さないように文字数を増減させる方法です。

カラム落ちへの対応の様な感覚で、安全な文字数で作業を進めるのです。
文字を折り返さないように短くするか、わざと折り返させてそれ以上行が増えないようにするか。
ごく単純な方法です。

グローバルナビゲーションに関してはラベルの文字数を変更できない事が多いので、画像に置換える方法も検討するべきかもしれません。
内部リンクのためのアンカーテキストではありますが、ユーザーが使いにくくなるのであれば検討しなければなりません。

結び


普段Macを使っているので、レイアウト崩れを度々見かけていました。
Winに比べてユーザーの数は少ないですし、ブラウザチェックに入っていないのだとは思います。

しかし、デフォルトの状態で閲覧しているのに崩れているのはベターな状態とは言えません。
繰り返しになりますが、ユーザーによるフォントサイズの変更に対応しなければならないと言っているのではありません。
せめてデフォルトでは崩れないことが必要なのではないでしょうか?

スポンサーリンク

0 件のコメント :

コメントを投稿