2010 年 6 月 12 日
新規サイト制作中で、背景にこだわりを持ったらPNGを使うことになった。そして、手軽に使える透過PNG方法を試す。
結果。元々使っていたalphafilter.jsに戻る。
iepngfix.jsやIE PNG FIX v2.0 Alpha、jquery.pngfix.jsは当環境では（IE Tester）透過はするが、レイアウトが崩れてしまった。
何かリッチコンテンツを導入しようとすると、別な箇所に影響が出るので困る。ブラウザの挙動についてはクライアントが理解できないので、クレームになっても費用面で解決できなくなる。そろそろどうにかして欲しい。
2010 年 5 月 31 日
今回は2項目。一つ目はFirebugを効率よく使うための説明。Firebugは以前入れてみたことはありましたがほとんど使っていなかったので、個人的にはとても良い内容でした。
FIrebug上でCSSの編集、確認ができたり、確認時不要な内容を一時的に非表示可能。またマージン、パディング、ボーダーなどボックスに設定した状況が一目で分かるなど、作業効率化を上げる機能が搭載。そのほかにサーバー接続時のやり取りなどサーバーの状況を確認することもでき、サーバー不調時に素早い対応がある程度可能になります。
もうひとつの内容は仕事として接客する際の考え方。営業やで動くケースもあるので、非常にうなずくところが多くありました。みんな同じように悩んでどのようにすればよいのか考えているんだなぁという感じでした。
今回撮った写真については、後日参加した皆さんが閲覧できる場所にアップ予定です。
2010 年 5 月 5 日
先月24日に行われたSaCSS Vol.12に参加。
内容は、実際にコーディングをやってみる実践形式と、Webセキュリティの話。
え～、仕事でコーディングやってますので、個人的にはSQLインジェクションに興味を持ちました。最近のWebサイトでDBを使わないものは見かけなくなり、そのためサイト不正改ざんとしてDBに攻撃を仕掛ける方法が目立ち始めています。
SQLインジェクションは、Webサイトのフォームなどの入力する項目に特定のソースを記述することで、DBにアクセスし重要情報を入手することができるという攻撃方法です。これにより、サイトの改ざんや個人情報の漏洩など様々なダメージを被ることになります。
私も仕事柄調べたり、聞いてみたこともあるのでその重要性は知っていますが、厳密にどのようになる、ということはやはり専門家の意見がためになります。詳しい内容は今後続いて紹介されるようなので、引き続き参加したいと思います。
ただ、こういったセキュリティにおけるデメリットとして、クライアントが理解するかどうかが難しいです。サイトに掛けるお金が無い、セキュリティそのものが解らない、なので実装しないまま問題が発生し、トラブルの原因になるケースが出ています。
2010 年 4 月 12 日
Webサイトのデザインなど、サイトヘッダーやコンテンツの幅、高さは時代によって様々変化しています。では、最近のレイアウトはどのようになっているのか、実際に調べた情報を元に指標となるものを考えてみました。
※今回の調査はあくまでも最近のレイアウトトレンドを勝手に考えたものであって、この内容で作れば必ず集客が上がるなどの効果は分かりません。Webサイトはクライアントやエンドユーザー、制作側の目的によりサイトコンテンツは大きく変わります。それを踏まえた上で記事をお読みください。
「最近のモニタサイズの状況とWebサイトの測定結果から各コンテンツ幅のベストな組み合わせ」
なのですが、ただサイトを測るのもいいのですが、もう少し他の情報が欲しいので、下記にネットで得られる情報を拾ってみました。
下記サイトは手軽に現状を調べることができるのでとても重宝しています。
世界の比較なので、日本と同義にはできませんが、こういう結果が出てますよという一つの説得材料になりますね。
Market share for browsers（現在最新の2010年3月に代わっています）より抜粋
| 順位 | 横幅 | 高さ | 比率 |
|---|---|---|---|
| １位 | 1024px | 768px | 26.53% |
| ２位 | 1280px | 800px | 19.71% |
| ３位 | 1280px | 1024px | 10.52% |
| ４位 | 1440px | 900px | 8.75% |
| ５位 | 1680px | 1050px | 5.49% |
これらの解像度は、モニタで定められた解像度の規格そのものです。
詳しくは、ウィキペディアより画面解像度での検索を参照してみてください。
この結果から、昔からある解像度の規格（XGA、SXGA）が基本としてよく使われていますが、ワイド画面（16:10）のPCモニタが普及し、世界でも一般化しつつあることが分かります。ちなみに、国内で販売されているPCモニタはほぼワイド液晶で、21インチ以上の大型タイプが比較的安価（2万円前後）で入手できるようなりました。
では、実際にサイトを測ってみましょう。調査はあるWebサイトのこちらで勝手に指定した任意の1ページとなります。Webサイトをキャプチャし、Fireworksのスライス機能を使い、ざっくりと大まかに調べています。
測定箇所は下記7項目です。
| サイト名 | コンテンツ | ヘッダー | グローバル ナビゲーション |
メイン ビジュアル |
メイン コンテンツ |
サイド カラム |
サイド カラム2 |
フッター |
|---|---|---|---|---|---|---|---|---|
| ソニー | 1024 | 70 | 23 | 261 | 635 | 252 | - | 34 |
| オクルココロ | 900 | 86 | 61 | 399 | 462 | 200 | 181 | 150 |
| m/f | 950 | 72 | 35 | 220 | 660 | 260 | - | 83 |
| 嵐山たなか | 903 | 109 | 37 | 392 | 642 | 232 | - | 31 |
| ゼクシィ | 942 | 83 | 30 | 215 | 688 | 220 | - | 58 |
| 結婚準備室 | 980 | 83 | 36 | 267 | 744 | 220 | - | 75 |
| ウェディングパーク | 930 | 96 | 30 | 370 | 600 | 300 | - | 73 |
| 札幌グランドホテル | 782 | 89 | 60 | 322 | 544 | 201 | - | 171 |
| マイクロソフト | 934 | 80 | 45 | 325 | 500 | 197 | - | 66 |
| ホテルモントレー | 940 | 90 | 40 | 390 | 460 | 240 | 240 | 110 |
| トヨタ自動車 | 980 | 32 | 24 | 280 | 560 | 385 | - | 17 |
| goo | 970 | 131 | - | - | 400 | 200 | 350 | 117 |
| msn | 974 | 135 | 54 | - | 420 | 161 | 350 | 76 |
| yahoo | 950 | 101 | - | - | 410 | 170 | 350 | 73 |
| pansonic | 967 | 54 | 63 | 367 | 475 | 228 | 229 | 69 |
上記実測から分かったことは次の通りです。
2008年頃からサイトコンテンツの幅が広がる傾向がありましたが、大企業のサイトが同じような作りになってきていることが分かります。サイトコンテンツ全体の横幅が1000px以内となっているのは解像度1024pxのモニタサイズから、お気に入り分40pxを引いたサイズが基本となっていると思われます。
ヘッダーやグローバルナビゲーション、メインビジュアルの高さは全体的に縮まり、その分ネットブックや16:9のワイドモニタ1画面でも多く情報を表示できるようサイト構成が変わってきている様に見えます。
興味深いのは、情報系サイトは右側のサイドカラムの幅が皆同じになっていること。また、フッターは表示する情報量により高さが大きく変わる傾向があります。個人ブログなどでよく見られるカテゴリーをフッターに持っていく形が該当すると思います。
上記の結果を踏まえ、例として実寸でサイトコンテンツを色分けしたものを作ってみました（下記画像をクリックすると大きな画像が表示されます）。モニタサイズ1024px×768pxを基本に、調査から導き出されたコンテンツサイズを当てはめています。このようなレイアウトを参考にしていけば、最近のトレンドに近いWebサイトの構築が可能となるでしょう。
他、今後PCモニタの影響からどのようなことが考えられるか、個人的主観ですが挙げておこうと思います。
モニタの比率が16:9に統一化
これは、家庭用テレビのワイド一般化に合わせ、統一しようという動きと考えています。開発側からすれば16:10の方が圧倒的に使いやすいのですが、エンドユーザーである一般ユーザーにしてみれば、大きさの違うモニタがあるのはおかしいと思われるでしょう。
各端末に合わせた解像度によるサイト構築が進む
iPhoneを皮切りにスマートフォン市場が活発化しつつありますが、これに合わせたWebサイトの構築も進むと考えられます。ただし、PC1レイアウトではなく、小型端末に特化したサイトデザインも合わせて構築する必要性が出てくるということです。開発側にまた負担が増えるかも知れないという怖い予想です（笑）。
2010 年 4 月 3 日
先月の27日に行われたSaCSS Vol.11に参加してきました。
今回からWeb制作にまつわるネタを数名がまとめ、発表する形式となり、私も発表させていただきました。
内容は次の5つ。
発言が少ないかな、という主催者HAMさんの予想を裏切り、白熱したやり取りに。最初の掴みだった私の内容で小1時間使うとは…。皆さん、実戦で経験を積まれているため、色々と考えていることや疑問点多々あるようです。
このブログを見ていてSaCSSに参加してみたい方は、今月末にVol.12が開催される予定ですので、THE HAM MEDIAをチェックしてみてください。
ちなみに、私が発表したWebレイアウトの内容は、まとめ次第当ブログに掲載予定です。