0円のweb素材屋さん

ホームページ作成素材 カテゴリー 第 1 位 / 2,653 PV

閲覧数: 2,653  投稿日: 2008 5 25 日  更新日: 2017 8 7

0円のweb素材屋さん とは?

基本情報

< 2017年8月4日 >

title
・商用利用可のアイコン&ホームページ素材が無料

description
・ホームページ制作に役立つ商用利用可能な無料web素材を配布中。アイコンやボタン、バナー等、ショップ素材をプロのWEBデザイナーがフリーで提供中です。


< 2008年5月25日 >

アイコン/WEBデザイン素材/ホームページ作成素材を無料で配布!
・ホームページ作成やブログに使える無料アイコン/無料イラスト/ボタン/看板/壁紙/ブログテンプレート等のHP素材が全部無料。ホームページ作成の為の「無料素材」なら0円のweb素材屋さんへ!

このサイトを見て再認識したことは、誰にでも受け入れられるサイト作りを目指すことの重要性だ。
例えば、サイト制作をお笑いに例えると、「特定の人のツボにだけ強烈にハマる笑い」と「万人にウケる笑い」。どちらを目指すべきか? という話だ。

パッとこのサイトを見たとき、スゴいサイトだと感じたのだが、どうしてそう思ったのかを自分なりに整理してみた。
・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の勧奨内容だってこれから随時変化していくと思われるので……。大事なことは、誰にでも(いかに多くの素人の方に)受け入れらか、この一点をまずは目標にしたい、……。……。

定点キャプチャで振り返る。「0円のweb素材屋さん」 の変遷

2008

2008年5月、5月25日
5月25日

2017

2017年8月、8月4日
8月4日。商用利用可のアイコン&ホームページ素材が無料
矢印キーで移動します

しましまの町