このサイトを見て再認識したことは、誰にでも受け入れられるサイト作りを目指すことの重要性だ。
例えば、サイト制作をお笑いに例えると、「特定の人のツボにだけ強烈にハマる笑い」と「万人にウケる笑い」。どちらを目指すべきか？ という話だ。
パッとこのサイトを見たとき、スゴいサイトだと感じたのだが、どうしてそう思ったのかを自分なりに整理してみた。
■1.横幅
■2.ヘッダーの高さ
■3.止まらないモーショングラフィックス
■4.目立つグローバルナビ
■5.透明感
■6.情報の序列化
■1.横幅を全体指定。
横幅をいっぱいにとるサイトレイアウトは最近の傾向だと思うが、どうやって指定しているのか確認しようと思い、ソースを見てみた。
まず、目に飛び込んできたのが、headタグ内に記載されていたjsの中にあるskypeという文字。skype? skypeって、あのskype?
injection_graph_funcで検索してみるも、よく分からないが、injection_graph_func.jsとの記載があるので、そういったスクリプトをどこかで配布しているのだろうか？
chrome://skype_ff_toolbar_win/content/injection_graph_func.jsで検索してもよく分からない。
試しに、下記スクリプトを外してみる。
<script src="js/index.js" type="text/javascript"></script>
ヘッダー部分が表示されなくなった。どうやら、この部分を制御しているらしい。
では、次に、js/index.js内に記載されていたhttp://design.it-work.jp/nn/
を覗いてみる。……なるほど…、そういうことか……。どうやら、サイト制作者は、なかなか楽しいキャラの方らしい……。
だが、肝心のサイト構成は、正直、どうなっているのか、よく分からない。
別の視点に切り替えることにする。
まず、bodyの背景画像。別URL(http://www.image-seed.com/design_img/bg_base_body.gif)で3000×1057ピクセル画像を指定している。何のために？ 外してみても変化は見られない。恐らく、解像度が大きい方に向けての対策か？ わざわざ確認するほどの気合は入ってないので、NEXT。
全体構成はざっくりでいくと、
<body>
<table>
</table>
<footer>
</footer>
</body>
のようだ。
<table>と<footer>にwidth:1000pxと指定している。てっきり、width:100%か何か指定しているのかと思ったが、どうやらそういうわけでもないらしい。横幅を固定している、という理解でよいのだろうか？ 何か他にも色々仕掛けとか施しているような気もするが、詳細は不明。
table背景1000×5000ピクセル画像
http://www.image-seed.com/design_img/bg_base_main.gif
■で、1の結論。横幅は、1000ピクセルがベスト。少なくとも、昔、学校で教わった760pxなんて時代じゃなくなってきてるってことは、確かなようだ。
■2.ヘッダーの高さ
ヘッダー部分の高さは、約280ピクセル。これまで、ヘッダーにそこまでの高さを持たせた経験はないが、「情報に序列をつける」・「サイトの分かりやすさを向上させる」という意味で、次回から、こういった手法も取り入れていきたい、と思った。
■3.止まらないモーショングラフィックス
ループし続けるモーショングラフィックスを入れるのは、効果的だと以前から感じていたが、このサイトでも効果的に使われているようだ。
■4.目立つグローバルナビ
実際にサイトを使う立場のユーザーにとっては、グローバルナビは、最も重要な要素である。ナビtdの横幅、287ピクセル。
■5.透明感
・全体の基調色……白
・各ボタンやレイアウト画像で、「背景を透過」あるいは「擬似透過」しているような工夫が施されている。
■6.情報の序列化
「2.ヘッダーの高さ」と被るが、サイト全体の至るところで、情報の序列化が、徹底されている。
□サイト全体の構成が、縦2列のテーブルレイアウトであることや、テーブルの中にdivが入っていることなどは、結局、ユーザーにとってはどうでもよいことだと思う。W3Cに準拠するに越したことはないが、所詮、W3Cの勧奨内容だってこれから随時変化していくと思われるので……。大事なことは、誰にでも(いかに多くの素人の方に)受け入れらか、この一点をまずは目標にしたい、……。……。
http://www.image-seed.com/