![タイトル画像](/attach/images/2007january/feature/osaho50/title_saho.gif)
![レベル中級](/attach/images/2007january/feature/osaho50/level02.gif)
「集合」と「近接」でスッキリ見せる
![画像とテキストの間が、すべて等間隔のレイアウト](/attach/images/2007january/feature/osaho50/04_layout/34-01.jpg)
![関連する商品画像とテキストを近づけて配置したもの](/attach/images/2007january/feature/osaho50/04_layout/34-02.jpg)
![関連のある見出しと本文を近くに配置したもの](/attach/images/2007january/feature/osaho50/04_layout/34-03.gif)
お作法一覧へ
其の50 印刷を想定するページはサイズを考慮する
其の49 mailtoリンクの表記に注意
其の48 PDFファイルへのリンクには容量を明記する
其の47 プラグイン使用時のユーザーへの配慮
其の46 Javascriptの扱い方は慎重に
其の45 Flashコンテンツは本当に必要か考える
其の44 フォーム送信ボタンは大きく見やすく
其の43 <title>タグ内の表記は安易に決めない
其の42 新しいウィンドウは開かないようにする
其の41 ソース上の見えないスペース、改行に注意
其の40 複数の異なるブラウザで表示確認を
其の39 訪問済みのリンクは把握しやすいデザインに
其の38 リンクの表記と配置に注意
其の37 ジャンプ率を上手に活用する
其の36 情報の優劣をつけてレイアウトする
其の35 視線の移動を意識したレイアウトに
其の34 「集合」と「近接」でスッキリ見せる
其の33 グリットを有効活用しよう
其の32 マージンを適切にとる
其の31 テキストグラフィックに関する配慮
其の30 画像の書き出し方に考慮する
其の29 画像の属性を正しく記述する
其の28 背景と文字色のコントラストに配慮する
其の27 配色で視線の誘導を行う
其の26 サイトのイメージや内容にあった配色を
其の25 配色のバランスを考える
其の24 テキストは画像化しない
其の23 アルファベットの大文字英単語に注意する
其の22 <meta>タグで文字コードを指定する
其の21 専門用語や外国語の乱用を避ける
其の20 機種依存文字を使用しない
其の19 全角・半角をきちんと区別する
其の18 文章を読みやすくする工夫を
其の17 インデントで文章にメリハリをつける
其の16 要素の重要度に応じた見出しタグをつける
其の15 文字サイズの指定はできる限り相対サイズで
其の14 字間や体裁をスペースで調整しない
其の13 字間(トラッキングやカーニング)を整える
其の12 左揃え、中央揃え、右揃えを適切に使い分ける
其の11 “読みやすさ”に配慮してフォントを選ぶ
其の10 ロゴにはトップページへのリンクを設定する
其の9 リンクテキストにはリンク先の内容を明確に
其の8 ナビゲーションの内容にも優劣を
其の7 サイトマップを用意する
其の6 クリックできる部分はわかりやすく
其の5 テーブルとCSSを使い分ける
其の4 1ページに適切な情報量を考える
其の3 ブラウザのサイズに考慮する
其の2 サイトの構成・ルールを考えてからデザインに入る
其の1 ターゲットとなるユーザーを明確にする
Webデザイン超基本のお作法50選