キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

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

      2014/11/05

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

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

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

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

拡大・縮小する

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

Ads by Google

拡大・縮小してみよう

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

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

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

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

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

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

コンテンツが見られない

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

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

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

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

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

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

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

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

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

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

不良品

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

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

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

まとめ

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

ライター紹介

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

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

 - ウェブデザイン , ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

アイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンを設置する方法

SNS でのフォロワーさんが増えてきて喜んでるキャリコ( @calicocatx …

見せます!キャリコの STINGER5 カスタマイズ履歴のすべて

こんにちは、キャリコ( @calicocatxyz )です。 敬遠してた Wor …

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

寒さを凌ぐために唐辛子を食べてるキャリコ( @calicocatxyz )です。 …

パソコンの場合
ブログの右下にあるページ上部に戻るボタンは要らないんじゃないかって話

最近は押していない、キャリコ( @calicocatxyz )です。 記事を見終 …

アイコン型ウェブフォントで表示した SNS アイコンに CSS3 でアニメーションをつける

暖房の暖かさに幸せを感じてるキャリコ( @calicocatxyz )です。 部 …