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

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

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

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

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

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

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

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

新規ページの作成

スタイルの作成

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

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

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

参考文献・リンク一覧 “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 http://homepage2.nifty.com/anapa/MoogaOne/index.htm Mooga2 http://homepage2.nifty.com/anapa/Mooga2/index.htm 国際基督教大学図書館 http://www-lib.icu.ac.jp/index.html 人間中心設計推進機構 http://www.hcdnet.org/ U-Site http://www.usability.gr.jp/index.html cssZenGarden http://www.csszengarden.com/ 大学図書館トップページのガイドライン http://www.slis.keio.ac.jp/~ueda/univlibguide/toppageguideline.html Another HTML-lint gateway http://openlab.ring.gr.jp/k16/htmllint/htmllint.html IBMホームページリーダー http://www-6.ibm.com/jp/accessibility/soft/hpr.html ColorAccess 入手サイト http://suginy.no-ip.com/labo/labo.html