読者です 読者をやめる 読者になる 読者になる

Hold Fast that Which is Good

良きものをつかむために綴るブログです。皆様のレスポンスが何よりの活力になります。どうぞよろしく。

  follow us in feedly  


ブラウザとWebデザイン

雑記
このエントリーをはてなブックマークに追加
あとで読む

Webサイトを閲覧する環境

f:id:holdfast:20150706135636j:plain

このブログもそうですが、世界には無数のWebサイトが存在しています。
それらのサイトは、製作者側はあらゆる表現方法を駆使して作ったWebページを
Web上に掲載し、利用者側はあらゆる閲覧ツール、いわゆる【ブラウザ】を用いて
そのWebサイトを閲覧します。

今回は利用者側の立場からブラウザを、製作者側の立場からWebデザイン
ピックアップして色々書いていこうかと思っています。
と言うのは、前回の記事でデザインセンスがないやらテーマを変えたいやら
ブログレイアウト云々のことを書いていた時に、
「そもそもこのブログは誰にでもこっちが想定する通りに表示されているのか?」
と、ふとそう思ったからです。

今ではブラウザ毎端末毎解像度毎というように、閲覧環境によって多種多様の
表示方法に対応しなければならなくなった、ブログを含むWebサイト。
そんな過酷とも言える環境下で、Webデザイナーでも技術者でもない
にわか雑兵ブログ作者がどう対応していくべきか、今回は考えてみたいと思います。 

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
 

 

スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ

スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ

 

 

 

自分が見ている環境が【正】とは限らない

f:id:holdfast:20150706164853j:plain

皆さんは普段、どんなブラウザでWebサイトをご覧になっていますでしょうか?
PCとモバイル端末では違ったり、あるいは複数のブラウザを併用したりなど、
あらゆるパターンがあるかと思います。

ブラウザには【HTMLレンダリングエンジン】というものが搭載されていて、
それによって同じWebページでも見方が変わったりすることがあります。
ChromeですとBlinkFirefoxならGeckoといったものになります。
それらはブラウザの処理速度に直結するので、ユーザーはあらゆるブラウザを
比較するなりして最適の、または複数のブラウザを選んでいます。

私もPCやAndroid端末には複数のブラウザを使っています。
私の場合、PCだとChromeFirefoxを併用、
Android端末だとSleipnir一択です。

このように私ですら複数のブラウザを利用しているといった有り様ですので、
皆さんの場合だともっと沢山のブラウザが存在しているかもしれません。
ちょっと調べてみましょう。

f:id:holdfast:20150706170437j:plain

これは、6月5日~7月5日の1ヶ月間、
このブログを訪問された皆さんが何のブラウザを利用したかを
アナリティクスでリサーチしたものです。

やはり王者Chrome58%と他を圧倒していますね。
次いでSafariとなっていますが、これはこのブログではMacユーザーの訪問が
最も高い比率となっていて、開設以来それが続いていることが要因だと思います。
Safari in-appって何だろう・・・iPhoneSafariではなさそうですが)

Android Browser】というのは、Androidの標準ブラウザのことです。
Android 4.3までの端末に存在する、Chromeとは別のブラウザのことで、
未だに人気は高いですね。確かに使いやすいブラウザですし。

そして、Internet ExplorerFirefoxOperaと続く形ですね。
大体予想通りの結果です。

実は私の場合、ブログに記事を投稿する時に、ブラウザチェックを行っています。
PCではChromeFirefoxInternet Explorer、(いずれも最新版)
AndroidではSleipnirで自分のブログにアクセスして、レイアウトの表示が
適切かどうかを簡単にではありますがチェックしています。
(当然ですが、自分のアクセスはアナリティクスでのカウント対象外にしています)
自分が見ていてレイアウトが崩れていたりしたものなら、それは誰が見ても
レイアウトが崩れていると考えるべき話なので、そのあたりは気を使います。

で、つい先日までは「よし、どこも崩れてはいないな」と確認して
記事を投稿し続けていたわけですが、それが間違いだったことに最近気付きました!

私は2台のWindows 7のPCを所有していまして、いつもは1920×1080の解像度のPCで
ブログをチェックしていたのですが、この解像度ですとデフォルトの文字の大きさが
かなり小さいので、ディスプレイの文字の大きさを【125%】にしていました。

その環境ではどこにもおかしい点が見受けられなかったので
そのまま運用していたのですが、つい昨日、もう1台の1366×768の解像度のPCで、
こちらはディスプレイの文字の大きさを【100%】にしてあるやつなので
それでブログをチェックしてみたら、
なんと、記事中のアドセンスのバナー広告が枠外まではみ出ていたのです!

「そんな馬鹿な!確かにはみ出ていなかったはず!」という思い込みは実に虚しく、
即座に修正作業に打ち込まざるを得なくなりました。
今はおそらくはみ出ていないかと思いますが、正直安心はしていません。
所詮はにわかの応急処置です、いつ綻びが出てくるか知れたものではありません。

おそらく皆さんにとっては「今更かよw」という類の話かもしれませんが、
当事者はこんなことに気づくまでにも時間がかかるものなんだな、と
思い知らされました。
解像度や文字サイズによって見え方が違ってくるなど当たり前の話なのに、
何故気が付かなかったのか情けないことこの上ないです。
2ヶ月放置で実に見にくいブログとなっていたことに深くお詫びを申し上げます。

『自分が見ている環境が【正】とは限らない』という現実がそこにはありました。
これからは十分に気をつけていきたいと思います。 

そういう意味では、スマホ用ページは貧相ながらもレイアウト崩れは
確認したことがないから、あれはあれで有用ですね。

 

 

自分が思い描く環境通りに人が見るとは限らない

f:id:holdfast:20150706182801j:plain

何とか大丈夫か、と思ったら現実は全く優しくありませんで、
突き詰めてみるとささいなことでレイアウトはガタガタになるものです。

私は【ズーム倍率100%・ブラウザのウィンドウは最大化】という環境で
このブログのレイアウトが最適化となるように運用していますが、
誰もがこの環境でブログを閲覧するとは限らないのです。

そもそも最大化などせずに見る人もいるかもしれない。
「このブログの字は小さくて見にくい!拡大する!」という人もいるかもしれない。
上の画像よりももっと小さいウィンドウサイズで見る人もいるかもしれない。
いやそれ以前にスマホのUser-AgentをPC表示に・・・というかもうそれはキツい!

そうしたらどうなるでしょう?
このブログのレイアウト、もはや原型を留めなくなってしまうでしょうね。
そうなんです、あまりにもウィンドウサイズが小さいとこのブログ、
本来のレイアウトからかけ離れてしまう可能性があります。
文字サイズを大きくし過ぎても問題になると思います。

上の画像は最大化ではないウィンドウサイズで幅を狭めたものですが、
この時点でバナーがまた枠外に突き抜けるし、
【ページTOPへ】プロフィール画像と重なってしまいます。
ここから更に幅を狭めると・・・

 

f:id:holdfast:20150706185242j:plain

なんと右側のカラムが完全に消えてしまいます!
それなのに横スクロールバーが表示されない!よってサイドバーが全く使えない!
(正確には、右側カラムがフッタ部まで移動してしまう)
これではもうレイアウトを語るレベルではないですね。
もうどうしようか呆然としているところです。

確かに誰もが【ズーム倍率100%・最大化】環境で見る道理はないのですが、
もしそれによって見るのに不都合が起きるならそれはそれでマズいですね・・・
こんな個人の雑兵ブログでもかなり笑えない話なのに、
もしこれがPHPも駆使した、商取引を有する商用サイトだったら大問題でしょうね。
いやしかしこれは直せるのかどうかすら見当がつかない・・・

取り敢えず今の私に言えるのは、


「このブログはズーム倍率100%、ウィンドウは最大化の閲覧で最適化されています」


という周知をすることだけです。本当申し訳ないです。  

 

対策には限度がある

f:id:holdfast:20150706192033j:plain

とは言え開き直るわけではないですが、
流石にWebデザイナーではないにわかが対処するには荷が重過ぎるものがあります。
HTMLとCSSは少しは分かりますが、それはYoutube動画の貼付け時にURLの後ろに
【:embed】を忘れずに付けるとかそのような類のレベルです。
もし私に上に挙げた諸問題を解決できるWebデザインのスキルやセンスが有るなら、
今頃はレンタルサーバーを用意してWordPressとかを運用しているでしょう。

Webデザインに詳しい方であれば、これらの諸問題を解決するのは実に容易いのかも
しれません。結局はHTMLとCSSJavascriptの話ですし。
しかしそんなスキルやセンスは持ち合わせていないからはてなブログ
行き着いた経緯もあるので、改善は気長にお待ちいただけるとありがたいです。
対策しない訳ではないんですが、今ちょっと引っ越し作業とかで
リアルがてんてこ舞い
ですので、落ち着けたらということでご勘弁下さい。

それにしてもブログのカスタマイズ性の高さは楽しい反面、
リスクも大きいことがわかり、また1つ勉強になりました。
デザインテーマ自体が枠組みしている手前、対策しようにも
「#containerや#wrapperレベルから見直せ」というのはデザインテーマ全否定にも
つながりかねないですからそれは無理ですし、ましてや私のブログは人様が
制作されたテーマをありがたく使わせていただいている立場なので、
そこ以外で対策できるのならば出来る範囲で・・・という話になると思います。
デザインテーマを1カラムのものにすればマシになったりするのでしょうか・・・ 

Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)

Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)

 

 

8月1日追記:ほぼ解決しました!詳細は以下の記事をご覧ください。 

 

 

まとめ

f:id:holdfast:20150706194743j:plain

「まったく、Webデザイン技能検定なんて受けるんじゃなかった。
3級じゃただのにわかだった。もっと勉強しなければ」

と愚痴りたくなるくらいですが、いずれにせよブログのレイアウトを整えるには
Webデザインと確かなレンダリングが出来るブラウザが必要です。
ブラウザはともかくWebデザインは技術を要するのでハードルが高いんですが、
より良いブログ作成のためには頑張って習得していきたいものですね。

Blue Snow

Blue Snow

 

Purest Blue

Purest Blue

 

 

広告を非表示にする

【DESIRE remaster.ver】応援中!

長編アニメーション映画【planetarian】応援中!