キャリコおすすめ
本日の人気記事
- 忍者 AdMax が Google AdSense よりも稼げる理由
- 【 ドレッドヘアのお手入れ方法 】よく聞かれる7つの質問にお答えします
- iPhone のテザリングでデスクトップパソコンをインターネットに接続する方法
- SimCity BuildIt(シムシティ ビルドイット)の美しい街の景観30選
- ソフトバンクの157で即オペレーターにつなぐ方法
- エジプト神話 第4話『 太陽神ラー 』
- AmazonJS の商品画像がぐるぐる回って表示されないときの対処法
- エジプト神話 第1話『 創世 』
- 駄菓子屋バーでも食べられて通販もできる懐かしい駄菓子20選#dagashiblog
- 自分の誕生日に満月が見られるのは一生のうち何回か知ってる?
アナタは大丈夫?デザインが崩れてるブログほどダサいものはないと思う
2014/11/05

Photo credit : http://usb.brando.com/
どうも、ネットサーフィンが大好きなキャリコ( @calicocatxyz )です。
お気に入りブログはもちろんのこと、ニュースやまとめサイトだったり、SNS で目にした記事など色々と見てますが… デザインが崩れたブログやサイトなんかをよく見かけます。これをチェックする方法は簡単で、
だけです。今回は気になったデザイン崩れについて、自分のことは棚に上げてお話ししたいと思います。
Ads by Google
拡大・縮小してみよう
キャリコは訳あって解析度の変えられないパソコンを使用しています。これについては前のエントリーでも書いたのですが、大体のブログやサイトは縮小する必要があります。
この拡大・縮小は 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 制作会社が良いサイト作りますとか、フリーランスの人が良い仕事しますよって言っても、デザインが崩れてたらそんなところでは頼みたくないと思うのが普通です。惚れ惚れするほどのデザインで、ブログでもすっごく良いこと言ってるのに、一部のデザインが崩れてるだけで不信感を抱きます。正直もったいないと思います。
そんな機会損失を防ぐためにも、試しに拡大・縮小してみませんか?
まとめ
どうだったでしょうか、拡大・縮小してみる気になってもらえましたか?以上、キャリコが日々気になってることでした。
この記事が気に入ったら
いいね!しよう
キャリコの最新情報をお届けします
Twitter でキャリコをフォローしよう!
おすすめ記事
【キ】 アドセンス用336px
【キ】 アドセンス用336px
関連記事
-
-
ブログの右下にあるページ上部に戻るボタンは要らないんじゃないかって話
最近は押していない、キャリコ( @calicocatxyz )です。 記事を見終 …
-
-
アイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンを設置する方法
SNS でのフォロワーさんが増えてきて喜んでるキャリコ( @calicocatx …
-
-
キャリコがブログカスタマイズするときに気をつけてる5つのこと
寒さを凌ぐために唐辛子を食べてるキャリコ( @calicocatxyz )です。 …
-
-
アイコン型ウェブフォントで表示した SNS アイコンに CSS3 でアニメーションをつける
暖房の暖かさに幸せを感じてるキャリコ( @calicocatxyz )です。 部 …
-
-
見せます!キャリコの STINGER5 カスタマイズ履歴のすべて
こんにちは、キャリコ( @calicocatxyz )です。 敬遠してた Wor …