• Home
  • 紹介
Blue Orange Green Pink Purple

ウェブデザイナーための10の項目

Posted in design. on 木曜日, 7月 2nd, 2009 by haco
7月 02

こちらで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.色のアクセシビリティを理解する

先ほどはフォントの話をしましたが、もうひとつ大事なのが色の話です。

背景の色と、全景の色との組み合わせで、コントラストがきまります。みにくくも、みやすくもなるのです。
たとえば、黒い背景に白い文字はコントラストが高いので、読みやすくなります。

コントラストをきちんととっていると、色が見えにくい障害を持っているひとにもとても優しいサイトになります。

・・などなど。とても役に立つ情報がのってました。

詳しくはこちらから、本編をお楽しみくださいー。

ホームページ作成格安大阪
ホームページ作成格安大阪
HTMLコーディングサービス バナー作成サービス flash(フラッシュ)作成サービス 画像写真加工サービス イラスト似顔絵サービス

Leave a Reply

hacotips
ホームページ作成のあれこれをご紹介します

  • recommend

    画像 バナー flash フラッシュ加工 写真加工 HTMLコーディング

    簡単お手軽ホームページテンプレート販売サービス

    楽天ウェブサイト運営制作サポートサービス

    お買い物かごシステム構築サービス ec-cube

    ホームページ 制作 サービス

  • goods

  • category
    • design
    • tools
    • 未分類
  • recent entries
    • PNG画像を綺麗に圧縮する「punypng」
    • 3Dテキストで光彩のかかったイメージを作成するチュートリアル
    • ポートフォリオサイト「FolioFocus」
    • 自分の手書きフォントが簡単にできる「fontcapture」
    • JSなwiswigエディタ+
  • recent comments
    • イラストレーターでモレスキンノート風のアイコンを作るチュートリアル に JAIME より
    • PNG画像を綺麗に圧縮する「punypng」 に TRAVIS より
    • スモーク(煙)ブラシセット に CRAIG より
    • 3Dテキストで光彩のかかったイメージを作成するチュートリアル に ANDREW より
    • 自分の手書きフォントが簡単にできる「fontcapture」 に JEFFREY より
  • links
    • ホームページ制作HACO(ハコ)
  • ブログロール
    • haco×楽天
    • photodesign-ryonkeyroom
    • デザインTシャツ&デザイングッズストア UPSOLD.com
    • ハコTシャツ
    • マネージャーと愉快な仲間たち
  • ad


  • meta discription
    • ログイン
    • 投稿の RSS
    • コメントの RSS
    • WordPress.org
  • Archives
    • 2009年9月
    • 2009年8月
    • 2009年7月
  • Search






  • Home
  • 紹介

© Copyright hacotips. All rights reserved.

Back to Top