アナタは大丈夫？デザインが崩れてるブログほどダサいものはないと思う

Photo credit : http://usb.brando.com/

どうも、ネットサーフィンが大好きなキャリコ（ @calicocatxyz ）です。

お気に入りブログはもちろんのこと、ニュースやまとめサイトだったり、SNS で目にした記事など色々と見てますが… デザインが崩れたブログやサイトなんかをよく見かけます。これをチェックする方法は簡単で、

だけです。今回は気になったデザイン崩れについて、自分のことは棚に上げてお話ししたいと思います。

拡大・縮小してみよう

キャリコは訳あって解析度の変えられないパソコンを使用しています。これについては前のエントリーでも書いたのですが、大体のブログやサイトは縮小する必要があります。

• • 
  • キャリコ
  • キャリコがブログカスタマイズするときに気をつけてる5つのこと

この拡大・縮小は Windows の場合「 Ctrl 」を押しながら、Mac の場合「 Command 」を押しながら、マウスを上下にスクロールすると出来ます。

画面からはみ出したらレスポンシブ非対応

拡大したまま何でもいいのでサイトを開いてみましょう。そのサイトは画面にピッタリに収まってますか？それともはみ出して横スクロールバーが出てしまってるでしょうか？もし前者であればレスポンシブ対応、後者なら非レスポンシブ（ もしかしたらアダプティブ・デザイン ）ということになります。

やってみるとこれが意外にも Facebook や Twitter、Yahoo など有名どころはレスポンシブじゃないことがわかります。Gunosy や新しくなった msn などはレスポンシブ対応で見やすいですね。レスポンシブ対応だと拡大・縮小したままサイトを開いても、その比率に合わせた画面表示をしてくれます。キャリコが使ってる WordPress テーマの STINGER5 もそうですね。

よくあるデザイン崩れの特徴

Photo credit : http://www.milk.com.hk/

コンテンツが見られない

一番気になるのがコンテンツが見えなくなってしまってること、これはもう致命的です。追随する SNS ボタンやトップページに戻るボタン、グーグルアドセンスが拡大・縮小しないせいでコンテンツにかぶっているケースをよく見かけます。

float によるレイアウトの崩れ

これもよく見ますね。float 指定したものが親ボックスを突き抜けたり、綺麗にカラム落ちしてなかったりします。これは拡大・縮小で簡単にチェック出来ることなので、float で回り込みの指定をよく使う人は確認してみるといいでしょう。

サイドバー固定の挙動がおかしい

ある程度スクロールするとサイドバーが固定される手法は多くみられますが、これがきちんと固定されないブログやサイトも目立ちます。症状としてはフッターにかぶってる、意図しない場所で固定される、固定されたあと上にスクロールしても固定されたまま、もしくは固定された部分にサイドバーが重なって表示される、こんなところでしょうか。

これらの症状ですが… 残念ながら Web 制作会社やフリーランスのデザイナーのブログやサイトなんかでも見かけたりします。

プロは完璧でなければいけない

Photo credit : http://usb.brando.com/

Web 制作を生業にしてる人は、会社もしくは自身のブログやサイトでデザイン崩れがあってはいけません。どんなブラウザ、どんなデバイスで見ても綺麗に表示されるように、あらゆるブラウザ、あらゆるデバイスで確認するのが当たり前だと思います。だって Web 制作の対価としてお金をもらってるのですから。もしもデザインが崩れていたら、それは単なる

です。家電量販店で不良品が売られてたら誰が買うでしょうか？

Web 制作会社が良いサイト作りますとか、フリーランスの人が良い仕事しますよって言っても、デザインが崩れてたらそんなところでは頼みたくないと思うのが普通です。惚れ惚れするほどのデザインで、ブログでもすっごく良いこと言ってるのに、一部のデザインが崩れてるだけで不信感を抱きます。正直もったいないと思います。

そんな機会損失を防ぐためにも、試しに拡大・縮小してみませんか？

まとめ

どうだったでしょうか、拡大・縮小してみる気になってもらえましたか？以上、キャリコが日々気になってることでした。

テトリスライト

TruffleShuffle

ライター紹介

キャリコ　統括、ライターの猫たちを束ねるボス

キャリコの創設者であり、助手には書けないようなネタをお届けします。