ダメなWebデザイン 正解がわかる実践テクニック -詳細目次 | デザインってオモシロイ -MdN Design Interactive-

ダメなWebデザイン 正解がわかる実践テクニック -詳細目次

2019.4.25 THU

contents

ダメなWebデザイン 正解がわかる実践テクニック


  本書について

BASIC
  だめといわれるページとは/ターゲットユーザーを考える
ユーザビリティ/ナビゲーション/ブラウザの種類

第1章 ページ
  ×ページタイトルがいいかげんなページ
 ○検索エンジンを考慮したページタイトルをつける
×ページ情報が多すぎるページ
 ○検索エンジン用に情報を整理する
×表示の遅いページ
 ○はやく表示されるようにする
×ユーザーに制限を求めるページ
 ○制限しないためのポイント

第2章 テキスト
  ×文字化けするページ
 ○言語コードを指定する
×文字サイズが小さすぎるページ
 ○文字サイズが変わるようにする(段階別のサイズで指定する場合)
 ○文字サイズが変わるようにする(割合で指定する場合)
×文字が汚く表示されるページ
 ○文字をきれいに表示するための文字サイズ
×指定したフォントで表示されないページ
 ○ユーザー環境にあるフォントを使う
×行間がつまりすぎたページ
 ○行間を調節したページ
×段落間のスペースがないページ
 ○段落間のスペースを調節する
 ○小見出しを入れる
×1行の文字数が多いページ
 ○テキストの横幅を調整する
×1行ごとに改行を入れたページ
 ○改行位置をコントロールする方法
×ウィンドウの横幅にコンテンツが収まらないページ
 ○ウィンドウサイズに合わせて横幅が変わるようにする
 ○コンテンツの段組を工夫する
×テキストを中央で揃えたページ
 ○左揃えにしたテキストを中央で揃える

第3章 リンク/メニュー/ナビゲーション
  ×他のページへのリンクがないページ
 ○他のページへのリンクを用意する
×JavaScriptによるBackボタン
 ○HTMLによるBackボタン
×ブラウザの「戻る」がきかないページ
 ○ユーザーの行動を阻害しない
×どこがリンクかわからない
 ○リンクであることがわかるようにデザインする
×アイコンメニュー
 ○アイコンとテキストの共用
×カーソルを重ねないと内容がわからないメニュー
 ○ロールオーバー活用方法
×プルダウンメニューの問題
 ○プルダウンの構造
×サブウィンドウにメニューを表示するページ
 ○フレーム
×全てのソースがロードされるまで機能しないメニュー
 ○リンクデータの読み込み

第4章 画像/色
  ×画像情報のないページ
 ○検索エンジン用に画像情報を入れる
×読みにくい色のページ
 ○色の調節
×イメージとテキストの間隔
 ○間隔の調節
×文字がつぶれて読めないページ
 ○アンチエイリアスなしでイメージ化する
×なかなか表示されない画像データ

第5章 フレーム/ウィンドウ
  ×リンク先を個別のウィンドウに開くページ
 ○リンク先を開くウィンドウを1つに統一
×サイズを固定したサブウィンドウを開くページ
 ○JavaScriptを使わずにサブウィンドウを開く
 ○検索エンジン用にリンクページを用意する
 ○JavaScriptを使わずにサブウィンドウを開き、
  サブウィンドウ側でウィンドウサイズを変更する
×フレームサイズを固定したページ

第6章 特殊効果
  ×HPのポップアップメッセージ
×ステータスバーに流れるメッセージ
×イメージがカーソルについて動くページ
×Flashのイントロムービー
×ページにアイテムを盛り込みすぎてシステムに負荷をかけるページ
×高レベルのシステム処理を要求するフラッシュ

付録




twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

アクセスランキング

4.22(昨日)

MdN BOOKS|デザインの本