Web制作で必要になる50のルール(要約)

Posted on 6月 29, 2010

0


Webデザイン超基本のお作法50選 – MdN Design Interactive

  1. ターゲットの明確化
  2. サイトの構成・ルール

    • イメージを紙に描く
    • 見出し、本文の大きさ、文字の色
    • CSSのクラス名、ID名
    • ナビゲーション以外の小さなボタンのデザイン
    • フォルダー構造、名前
    • リンクなどにつける三角の矢印の大きさ、色、向き

  3. 800×600のサイズでレイアウト

    • リキッドレイアウト*1にする

  4. 1ページは最大2画面まで
  5. 場合によってはテーブルレイアウト
  6. リンクできるものはわかりやすく
  7. サイトマップを用意
  8. ナビゲーションの内容に優先順位をつける
  9. リンク先の内容の明確化

    • ここをクリック等を使わない

  10. ロゴにトップページへのリンク
  11. 画面上で読みやすいフォントの選択
  12. テキストの位置揃えに配慮

    • 中央揃え:視線を集めたい場合、区切り、アクセントなどに使用する
    • 右揃え:重要性の低いもの(フッター部分のコピーライト)などに使用する

  13. 字間の調整

    • トラッキング*2やカーニング*3を整える

  14. レイアウトをスペースや改行で調整しない
  15. 文字サイズはできる限り相対サイズで指定
  16. 見出しタグは重要度に合わせる
  17. 文章にインデントを使う
  18. 文章を読みやすく

    • 見出しをつける
    • 強調する:<strong>タグをつける
    • リスト化する
    • 一行は多くても50字程度にする

  19. 数値は基本的に半角
  20. 機種依存文字を使わない
  21. 外国語を避け日本語を使う

    • HOME、CONTACTをホーム、お問い合わせ等にする

  22. metaタグで文字コードを指定
  23. 英単語はできる限り小文字
  24. テキストの画像化しない
  25. 配色を考える

    • 配色は「テーマ」、「ベース」、「アクセントカラー」を中心に構成される

  26. サイトのイメージや内容にあった配色
  27. 読ませたい箇所を色彩で強調
  28. 背景と文字色のコントラストに配慮
  29. 画像の属性を正しく記述
  30. 画像の書き出し方

  31. テキスト画像

    • 小さなテキスト画像はアンチエイリアスしない

  32. パディングをとる
  33. グリットシステム*4でレイアウト
  34. 近接の法則*5
  35. 視線の移動を意識したレイアウト

    • 視線は左から右に移動する。右の方に目立つ色があると、注意をとられ、左の方がおろそかになる

  36. 情報の優先順位を意識したレイアウト

    • 左上から右下に向かって優先順位が下がる

  37. ジャンプ率*6を活用
  38. リンクの表記と配置に注意

    • リンクの間隔が不十分だと見づらい
    • リンクの間に縦線( | )や斜線(/)などを入れると見やすい

  39. 訪問済みのリンクはわかりやすく

    • 訪問済みリンク色にまったく異なる色を使用するとわかりにくくなる
    • リンク色は訪問済みリンクよりも鮮やかで明るい色にする
    • 訪問済みリンクは薄い色を使用する

  40. 異なるブラウザで表示確認
  41. ソース上の見えないスペース、改行に注意
  42. 新しいウインドウが開くことを明記
  43. titleタグの内容をしっかりと考慮

    • SEO的にもtitleタグは重要なので、それぞれのドキュメントの内容を的確に表現し、サイト内での位置づけがわかるようなタイトルにする

  44. 送信ボタンは大きく読みやすく
  45. Flashはできる限り控える
  46. Javascriptの使用は慎重にする
  47. プラグイン(Flash、PDF等)未インストールの場合に対応
  48. PDFへのリンクには容量を明記
  49. mailtoリンクの表記に注意

    • メールのアイコンやポストのアイコンなどを配置したり、メールアドレスを強調する

  50. 印刷を想定するページはサイズを考慮

*1:ブラウザの表示サイズに合わせ相対的に横幅が変わるデザイン

*2:文字全体を均等に詰める方法

*3:文字列の文字と文字の間隔を、文字の形に合わせて一字一字の個別に調整する

*4:画面をグリッドと呼ばれる格子状に分割し、それを基準に画像や見出し、文章などの要素を線に合わせてレイアウトを行うこと

*5:関連が強い情報は極力近くに、逆に関連の弱い情報は遠く配置する

*6:文字のジャンプ率といった場合、見出しの文字サイズと本文の文字サイズの比率を示す。例えば新聞はジャンプ率を上げて各見出しを目立つようにし、見出しだけを読んでも全体の趣旨を理解できるようになっている。

広告
Posted in: Web制作