3 HTMLとcss ・ユーザビリティの観点からHPがどうあるべきか、はだいたいお分かりいただけたと思います

Presentation on theme: "3 HTMLとcss ・ユーザビリティの観点からHPがどうあるべきか、はだいたいお分かりいただけたと思います"— Presentation transcript:

1 3 HTMLとcss ・ユーザビリティの観点からHPがどうあるべきか、はだいたいお分かりいただけたと思います

2 HTMLの基本ルール ホームページの内容（テキストなど）をタグと呼ばれる記号ではさむこと 挟み込まれる内容に適した種類のタグを使うこと
・普段からHPを作っている方には釈迦に説法になってしまうかもしれませんが… ・ホームページのソースはHTMLという言語で書かれています。 ・HTMLの基本ルールは２つしかありません

3 HTMLとcssの分業 内容 構成 デザイン XXX.html XXX.css

4 cssZenGarden ユーザビリティはどこへ… ・cssZenGardenというサイトです。
・いろいろなサンプルを見せる ・内容が同じであるのに、その表現の仕方が変わるだけで、まったく違ったページになるいい例です ・アートとしてはすばらしいが、はたしてユーザビリティの観点からはどうなのか？ ・cssを使う本当の意味はどこにあるのか？ Cssで遊んでいるだけではないか？

5 4 MoogaOne 作り手には作りやすく 使い手には使いやすく
・cssがその進化を発揮できる、作る側にも、使う側にもユーザビリティの高いページを極めてみようと思いました ・作っているうちに自分のサイトだけではなく、これをひな型として他のHP作成者にも使ってもらいたいと思うようになりました

6 MoogaOne使用例 国際基督教大学図書館 ・使用例です ・国際基督教大学図書館トップページ

7 MoogaOneの特長 ・ テキスト優先。画像は最小限に ・ リンクは全て文字（リンク標準色に準拠）
・ 全サイトに亘って統一デザイン（レイアウト・色ほか） ・ できるだけ日本語を使用 ・ UNICODEに準拠 ・ リンク名は短く内容が分かり他と違い造語は避ける ・ パンくずリンクを使用 ・ 全ページに適切なタイトルを ・ 全てのページに連絡先を ・ レイアウト用のテーブルタグは使わない ・一つ一つの特長を説明してはICULib.トップを見る。 ・Another HTML-lint gatewayを使って自分のホームページをチェックしてみましょう！ ・大学図書館トップページのガイドラインを参照する ・ フレームは使わない ・ デザインすべてをcssで制御 ・ サイトの階層は最小限に ・ トップメニュー構成は「大学図書館トップページのガイドライン」を使用 ・ 正しいHTML

8 メニューの決定 (a) 短いほうが良い (b) 内容が分かる表現が良い (c) 日本語が良い (d) 造語は避ける
(e) 専門用語・組織内用語は避ける (f) 他のメニューと明らかに異なる名前にする ・マニュアル5ページを参照しながら (g) 表現に統一性があったほうが良い (h) 「～について」という表現はできるだけやめましょう

9 新規ページの作成

10 スタイルの作成

11 リンクの設定 (a) 相対リンクと絶対リンク (b) サイト機能の活用 HTMLリンクの自動修正 css参照の自動修正
<A HREF=“../../C/index.htm”>ここだよ</A> <A HREF=“

12 視覚・色覚障害者への配慮 隠しナビゲーションリンク → http://www-lib.icu.ac.jp/index.html
テキスト版カレンダ → ・最後に視覚障害者・色覚障害者のための対策をしていることもアピール （トップページのHiddenNavigation、カレンダーのテキスト版をHomepageReader、配色ColorAccessでも変わらず） 配色 →

13 MoogaOneの欠点？ ｃｓｓの弱点？ ・ ブラウザによる解釈の違いと未対応部分 →最低限のスタイルを用いて差異が最小になるよう努力
→印刷だけがネック →新しいブラウザ・バージョンは対応している ・ 機能優先主義による遊び心の欠如 ・ デザイン以外の共通部分の一括編集が不可能 ・NetscapeとIEで国際基督教大学図書館ウェブページを見て比較する ・MoogaOneにプラスアルファして視覚障害者へ配慮 国際基督教大学図書館トップの各セクションへのリンク 国際基督教大学図書館 ・Mooga2による欠点の克服 ・Mooga2の利点 →Mooga2 開発中

14 参考文献・リンク一覧 “Homepage Usability: 50 Websites Deconstructed” Nielsen, J. et al. (New Riders Press, 2001) 『HTMLとスタイルシートによる最新Webサイト作成術』 （エクスナレッジ, 2002） 『スタイルシートスタイルブック』 有坂陽子ほか（翔泳社, 2004） 『Webスタイルシートデザインガイド』 エビスコム（MdNコーポレーション, 2002） 『HTML+CSS Webデザインスタイルガイド』 エ・ビスコム・テック・ラボ（毎日コミュニケーションズ, 2003） 『MovableType標準ハンドブック』 平田大治ほか(インプレス, 2005) 『Movable Type スタイルコンテンツデザインガイド』 エ・ビスコム・テック・ラボ（毎日コミュニケーションズ, 2005） 『工作図鑑』 木内勝（福音館書店, 2000） MoogaOne Mooga2 国際基督教大学図書館 人間中心設計推進機構 U-Site cssZenGarden 大学図書館トップページのガイドライン Another HTML-lint gateway IBMホームページリーダー ColorAccess 入手サイト