こちらでSIX Revisionさんが、ウェブデザイナーになるために知っておきたい10の項目についてまとめられていました。
ウェブデザインは世の中に沢山あふれるようになりましたが、
レイアウトなどについて知っておくべき事も増えましたよね。
これらを、私風にざっくり要約してみました。
1.JPEG,JPG,PNGなどの画像データのロードタイムを最適化する
もし、あなたのサイトがあなたのパソコンですんなりとロードされていたとしても、意外とまだナローバンドな環境のままホームページを見ていたり、携帯などから(制作者が)意図しないアクセスがあるのが現状なので、
・写真関連やグラデーションなどの入っているのデータはJPGもしくはJPEG
・イラストや単純な画像についてはPNGもしくはGIF
にするのが基本です。
photoshopの「ウェブ用に保存」や、fireworksの「書き出し」あたりで書き出すのが通常だと思いますが、その書き出しの際にJPGの場合は最適化のバーや、GIFの場合は色数などを減らすことで画像を軽くすることができます。
ただ、あんまりやりすぎると色数が増えすぎてなんのこっちゃ分からなくなるので
それもそのときのケースバイケースで、最適な状態を選んでください。
2.クリーンでシンプルにすることを心がける
「本当に良いサイト」というのは、グラフィックがすごいサイトですか?それって利用者にちゃんとつかいやすくできていますか?結局はきちんと整理して、シンプルなデザインが利用者にとって最高のユーザビリティになってるんじゃないかな。
たくさんの項目がいまあなたのサイトにあるなら、こんな質問で最適化していくのはいかがでしょう。
- その項目や、見出し、画像ってほんとうに必要なもの?
- その文章や、説明文は本当にお客様が探したいものを探す手助けができてる?
- もし、この項目を削除して、困る人って誰かいる?
- この項目は、本当にこのサイトのゴール(成約など)や、メッセージや、伝えたかった事?
このチェック項目に当てはまっているような文章があるなら、それは削除しても問題が無いし、削除する事でもっとシンプルに、伝えたい事を伝えられるような、わかりやすいウェブサイトに変わっているはずです。
言いたい事、伝えたい事はたくさんあるでしょうが、シンプルにすることがそれを伝える最短の道なのです。
3.ナビゲーションはウェブデザインの中でいちばんいちばん大事な項目です
「ナビゲーション」という項目は、ホームページのデザインの全体の中でも大変重要な役目を持っています。たとえば、そこがどんな内容のホームページであるか、という要約を示す場所でもあり、(作り手としては)次のページ飛んで、もっともっと沢山のコンテンツを見てほしい訳ですが、その動作に持って行くのも「ナビゲーション」なのです。
最初にたくさんのウェブサイトを参考にしながら、ナビゲーションのデザインについて考えます。
つぎに、スタイルや、javascriptやCSSなどの小技を使うのかどうか、それは使い勝手がいいものか、ということをたくさん考えながらデザインしていきます。
あなたのナビゲーションはCSSを使わないテキストブラウザでもちゃんと表示されますか?
ナビゲーションについては、アクセシビリティ(あなたではない利用者の使い勝手)を一番かんがえていかなくてはいけません。
CSSを使わないテキストブラウザでもliなどのタグを使って、ウェブ標準で上から下へ意味が流れるようにコーディングすれば問題ないでしょう。flashなどを使っている場合は要注意!きちんとアクセシビリティが通るように設定を忘れないでくださいね。
コーディング後に、ブラウザでCSSの表示を外してみてみると、テキストブラウザの気持ちがわかりますよ。
ナビゲーションは、アクセスしやすい場所に配置しておきましょう。でないと、あなたの会社の信用を失う事にもなりかねますよ。
とにかく、ナビゲーションに付いても前途でお話ししている通り、「最終的にお客様に取ってもらいたい行動=ゴール」を中心にデザインすることが大切です。
4.フォントは整然と、きちんと意味を持たせて使いましょう
フォントは山のようにあるけれど、本当にウェブで使えるフォントはほんの少しです。(CSS3ではほとんどのフォントをメジャーなブラウザでサポートするようになるようですが?)ウェブできちんと使える「ウェブセーフフォント」を使うようにしましょう、もし、ウェブセーフなフォントがどうしても合わないような場合は、任意のフォントをきちんと使えるようにしてくれる sIFR や Cufonを使ってみましょう。
フォントは一貫性を持たせるのが基本です。
ヘッダーは普通のテキストと違うイメージにします。空白スペースを編集したり、高さを微調整したり、フォントサイズや行間を設定して、とにかく読みやすくしてください。
ウェブデザイナーがよく間違うのは、フォントサイズです。ウェブページにデザインを合わせたいばかりに、小さい固定サイズのフォントを使う事がよくあります。とりあえずサイズは12px以上であることからはじめてください。殆どの人は小さい文字に目をしかめて読んでいたり、高齢者の方にはとても読む気にもなれないからです。
5.色のアクセシビリティを理解する
先ほどはフォントの話をしましたが、もうひとつ大事なのが色の話です。
背景の色と、全景の色との組み合わせで、コントラストがきまります。みにくくも、みやすくもなるのです。
たとえば、黒い背景に白い文字はコントラストが高いので、読みやすくなります。
コントラストをきちんととっていると、色が見えにくい障害を持っているひとにもとても優しいサイトになります。
・・などなど。とても役に立つ情報がのってました。















