メモ：書道教室のWEBサイトについて

昔通っていた書道教室のホームページができていて、そこのデザインが素晴らしかったのでそのことについてのメモ。

・全体について

　空間を生かしたレイアウトがされている。
　文字サイズが全体に小さいが、ターゲットの年齢層を考えると妥当。
　マークアップは正しくない。
　テーブル要素によるデザインをすることについてはメリットもあるので何とも言えないが、タイトルはfont sizeではなくHx要素を指定しcssに寄るマークアップをするのが理想的である。
　また、表示も文字サイズ中の人向けにしか作られていない。
　割り切ってpx表示にするか、大きめに作ると言ったことを考える必要がある。

・トップページについて

　その書道教室が持っていた「自由で開放的な雰囲気」が、広く空間をとったレイアウトでよく表現されている。
　またメニューにはJavaScriptを利用して、フォーカスしているオブジェクトに対応したコメントを出すことでアクセシビリティに配慮をしている。また、リストの先頭にアクセントカラーを用いることでユーザビリティを高めている。

・コンテンツページについて

　トップと同じjavaを利用したメニューバーを右上に、またhtmlのメニューをページ最下段に配することでアクセビリティを高めている。また、ヘッダー領域とボディ領域にトップページの背景画像の上部2pxを利用することで統一感を出している。
　ページによっては情報の量が多くなっているので整理か、ページ毎のリストが必要。

　見出し文字の大きさは全て同じになっているが、その代わりに
　　大きな見出しはページを横切るラインで区切りを表現している。
　　小さな見出しには書道教室を連想させる背景画像を用いることで他の情報との差別化をしている。

　→イントロダクション
　　「　」（スペース）を使って右に寄せるデザインがある。
　　文字サイズの変更によってずれてしまう。

　→イベント
　　チラシを縮小し、そのまま表示している。
　　そのために一部の文字が潰れてしまい、全てを読むことはできない。

　→エキシビジョン
　　っていうか生徒作品の展示のページで使っている一覧画像が明らかにエクスプローラの縮小表示をキャプチャしただけ。
　　せめて画像フォルダを示す背景を消すくらいorz

＿＿＿＿＿＿＿＿＿＿

ちょっとやってみた。こういうノートを持っておくと面白そうかな。

まじめにデザイン考えよう、、、そのまえに勉強だぜ。勉強と言えばアクションスクリプトの勉強したい。