フェンリル

Developer's Blog

WEB ページを作る時に気をつけること

WebDevBlogTitle

こんにちは、WEB 担当の青野です。

今回は、僕がWEB ページを作成するときに気をつけていることをいくつか書こうと思います。
内容的には、HTML、CSS、クロスブラウザでの描画の違いもある程度理解した人が、次の段階として実践する内容です。

CSS のスタイルをリセットしておく

まず CSS を作成する前にしておきたいことの一つが、CSS のスタイルをリセットしておくことです。
これは、ブラウザによってデフォルトのスタイル値が違うために起こる表示のズレなどを回避するために必要となってきます。
CSS リセットの方法はいくつかあり、よく分からない方は有名どころの YUI (Yahoo! UI Library)で公開されている CSS リセットを使うといいと思います。

CSS Reset – YUI Library
http://yuilibrary.com/yui/docs/cssreset/

使い方は簡単で、上記の URL に記載されているリセット用のコードを CSS にコピー、または <link> タグごと HTML に追加するだけで OK です。
CSS リセットについては、ものによって「そんなとこをリセットしなくていい!」というとこまでリセットのために指定されている場合がありますので、細かいところまで拘りたい方は、自身で調整をするといいと思います。

WEB ページのフォントサイズを統一する

CSS を作成する前にしておきたいことのもうひとつがクロスブラウザでの WEB ページのフォントサイズを統一することです。
統一をしていない場合、ユーザーが使用しているブラウザによってページのフォントサイズが作成者の意図とは違って表示されてしまい、フォント自体が見にくくなったり、レイアウトのズレなどがおきてしまいます。
これを回避するための方法もいくつかありますが、CSS リセットと同じでよく分からない方は YUI (Yahoo! UI Library)で公開されている CSS Fonts を使うといいと思います。

CSS Fonts – YUI Library
http://yuilibrary.com/yui/docs/cssfonts/

こちらも使い方は上記の URL に記載されているリセット用のコードを CSS にコピー、または <link> タグごと HTML に追加で OK です。しかし、これだけだと全て 13px に統一されてしまいます。
CSS Fonts でサイズ指定をする場合、px ではなく % を使用します。

サイズごとの % 指定値は以下の表のようになっています。

px 値 % 値
10px 77%
11px 85%
12px 93%
13px 100%
14px 108%
15px 116%
16px 123.1%
17px 131%
18px 138.5%
px 値 % 値
19px 146.5%
20px 153.9%
21px 161.6%
22px 167%
23px 174%
24px 182%
25px 189%
26px 197%

上記の % 値を指定することで、統一することができますが、値が % なので、2重に指定したりしてしまうと意図したサイズにならないので注意してください。

WEB ページで使用する画像を最適化しておく

WEB ページには画像がたくさん使用されていますが、これらの画像を最適化することなく使用するとデータ転送量が大きくなりページの描画速度に時間がかかってしまいます。
しかし、画像を最適化しファイルサイズの削減をすれば見た目がほとんど劣化することなくファイルサイズを削減することができます。
僕は PNG 画像を好んで使用するので、PNG 画像を最適化できるものを使用しています。

PNG 画像の最適化には、有名どころでは OptiPNG や、PNGGauntlet というものがあり、どちらもファイルサイズを60%~90%ほど削減してくれます。

PNGGauntlet では、PNG ファイルに含まれる画像データの以外の情報を取り除くこともできるので、どちらを使えばいいのか良く分からない方は、PNGGauntlet を使用することをおすすめします。

PNGGauntlet – PNG Compression Software | BenHollis.net
http://pnggauntlet.com/

PNGGauntlet の使用方法については既に詳しく説明されているサイト等ありますのでそちらを参照ください。

クロスブラウザチェックは必ず行う

クロスブラウザ確認にはどのような方法をとっているでしょうか?

ツール等を使用し効率的に確認するやり方、実際にブラウザで表示させ確認するやり方、それぞれありますが、僕は実際に各ブラウザでの確認を最低でも公開前に一度するべきだと思っています。

ツール等を使用した場合、効率的に確認をすることができますが、実際にブラウザで表示されるものと違っていることがあります。

説明が足りていない箇所が多々ありますが、これらのことを意識して、ユーザーによりよいものを届けられるようにしましょう。

関連記事

Facebook コメント

コメント

神崎渉瑠2011年11月16日 12:20

視力が弱く、あまりに小さな文字は読めないため、
ブラウザの設定で14px以下の文字は14pxで表示するようにしています。
そのため、77%などで指定しても、14pxで指定したときと同じになり、
もし10pxでデザインしているなら、デザインが狂ったり、枠の外にはみ出る事(この現象はホームページビルダーのどこでも配置モードが有名だと思います。)になります。
YUIやその他、どんなライブラリを使用していても、この条件(フォントサイズが一定以下にならない)は変わる事はありません。

フォントサイズを統一する事ではなく、「どんなフォントサイズでも適切に読めるようなデザインにする」というのを考えるべきだと思います。

ウェブデザインはDTPとは異なり、デザイナーが中心ではありません。
読み手を中心に考える事が、ウェブデザインに置けるユーザビリティーという考え方で、大切な事だと思います。

もちろん、特定ユーザーだけをターゲットにしたページにはこの限りではありませんが、
それを一般化して紹介するのは良くないと思います。

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。