Webデザイン基礎知識・Web製作支援サイト|小道具屋|

ウェブデザインサイト・小道具屋
文字サイズ変更  文字サイズ拡大 文字サイズ縮小 元に戻す
Webサイトを構築する全ての人のために。
小道具屋サイト開催1999/09/06 HOMEに戻る Webサイトの顔であるindexを考えてみましょう。 デザインにはコツがあります。コツさせ掴めば結構簡単かも? ユーザーをコンテンツに導くナビゲーションはしくじると使いにくいサイトになります。 デザインとは直接関係ないですが小技を紹介。 ブログ ご連絡・お問い合わせはコチラまで。

小道具屋管理人・ごあいさつ デザインを考える前に・はじめに WEBサイトの顔・トップページ 大きさや容量・サイズ 色の持つちからは重要・カラー

サイズと漠然に名前を付けていますが、サイズには三種類あります、画面サイズと重さ(容量)そしてフォントサイズです。サイズに関しては各個人の考え方がありますので、一概に”これだ!”って言うのがありません。ですので、このページは小道具屋の管理人の考えだと思ってください。


ラフスケッチを作りましょう
サイズ確認用壁紙(7.5KB)

画面サイズ
画面サイズは各デザイナーさんで考え方が違うので、あくまで私の考えを書きます。他人に押しつける気もなければ、絶対にそうしなければいけないって事もありません。各人の判断にお任せします。
自分の場合は横幅600px〜740pxの間で制作することがほとんどです。

理由を書かないといけないですね。企業(会社)の場合、一般製品案内では無い場合対企業に見て貰う事が多くなります。ところが企業って言うのはいまだに古いモニターを使用している事が多々あり、800*600モニターが現役で使われて居ます。さすがに640*480モニターは絶滅してきていると思いますが・・・。
「モニターが800*600ならそのサイズで作ればいいじゃん!」って言われそうですが閲覧者全てが全画面表示で見ているとは限らないので中途半端な数字にせず640*480に収まるサイズにしておいた方が良いでしょう。

個人のページは閲覧者も対個人がメインになりますが、個人所有のモニターで800*600以上表示できない事はあまり無いでしょう。現在主流は1024*768だと思います「モニターが1024*768・・・以下略」こちらも上記と同じく全画面で見ていないこととノートPCの事を考えて800*600がイイでしょう。
逆に言うと1024以上の解像度のPCを持っている方は全画面で見ることが滅多に無いかと思います。私は1600*1200の解像度なので全画面で閲覧すると余白の方が大きく見づらいので、ブラウザ幅を1024にして閲覧しています。

尚、640、800ともピッタリのサイズで作りますと横スクロールバー出てしまいます。ブラウザの縦のスクロールバーも、640、800に含まれているからです。横スクロールバー20px、左右余白20pxで
640なら600以下
800なら760以下にして作成したほうがベターです。

画面解像度の大きなモニターでWebを作っていると小さな解像度の事をついつい忘れがちになります。作ったWebの確認にも解像度を変えるのは面倒なので、サイズ確認用の壁紙を利用します。
サイズ確認用壁紙 (7.5KB)
色々工夫して使いやすい用に加工して下さい。


ファイルサイズのチェックサイト
ファイルサイズのチェックサイト・買いパラネットショップ[外部リンク]

1ページの重さ(容量)
現在ADSL、FTTH回線が大分普及してきていて1ページ当たりの容量が大きなページをよく見ます。特にFlashを利用したページでは表示まで、かなり待たされる場合があります。ではいったいどのくらいまでなら許されるのでしょうか?Webでは8秒ルール(8秒で全部表示する)のが好ましいと言われています。
アナログ56Kモデム 理論値7Kbps 実行値約5Kbpsでは8秒ルールでは40KB、ISDNなら64KBまでなら快適に表示します。
Webサイトの性質にもよりますが、上記をふまえて最大でも100KB以下にしましょう。ベストは50KB以下でしょうが・・・


ラフスケッチを作りましょう
フォントサイズ変更スクリプト[外部リンク]・insomnia Web Workshop

今も昔も議論の対象、文字サイズ
デフォルトのフォントサイズは、HTMLでは特に記述しなければFontSize3、CSSで同サイズはピクセルでは14px、ポイントでは12ptになります。フォントサイズを考える上で、絶対指定と相対指定を理解しておく必要が在ります。

絶対指定・・・CSSでピクセル指定やポイント指定した場合閲覧者側ではサイズの変更が出来ない。インターネットエクスプローラ(以下IE)ではユーザースタイルシートでサイズ変更可能。Mozilla[外部リンク]Opera[外部リンク]はユーザースタイルシートが無くても変更可能

相対指定・・・デフォルト値よりどのくらい大きいか小さいかを指定する。ほぼ全てのブラウザでサイズ変更可能

相対指定と絶対指定と賛否両論があります、作成側ではデザインの崩れが起きない絶対指定の方が作りやすいです、しかし閲覧者側ではブラウザサイズがまちまちなので相対指定が見やすいですし、弱視の方にも優しい作りと言えるでしょう。 CSSで記述する場合はパーセントで指定するのが良いでしょう。

自分の中では文字サイズの議論の最終結論は、当サイトで使用していますJavaScriptによってユーザーが好きなサイズに変えられるようにすることでアクセシビリティに対応する。
フォントサイズ変更スクリプト[外部リンク]【insomnia Web Workshop】様