クールサイト分析1

クールサイト  2007/4/ 6

いわゆるクールサイトをピックアップし、分析をしてみたいと思います。
とりあえず最初は4月2日にリニューアルしたばかりの"四天王寺大学"という大阪の大学です。
なぜここをピックアップするのか。その1つにMovabletypeでの全面構築があります。

四天王寺大学ホームページ
http://www.shitennoji.ac.jp/ibu/

見ていただければわかりますが、非常に洗練されたデザインのホームページです。
このサイトでまず見ていただきたいのが「IBUサイトのご利用に際して」というページ。

・このウェブサイトについて
・W3C
・Movable Type
・リンクについて
・推奨環境
・免責について
・プラグイン等
・SSLによる安全性の確保について
・ダウンロード
・アクセシビリティ・ユーザビリティについて

など、サイトに関する情報がまるで食品の原材料表示のように並んでいます。
このページには製作者、大学側の担当者の意思が見てとれます。
それに、このように羅列してあるのも珍しいですね。

サイトのソースを見ると、Web標準のとおりスタイルシートを駆使した非常にスッキリとした内容です。
HTMLチェックでも97点。

トップページのFLASHは全体の時間はある程度ありますが、肝心のメニューが即出てきます。
これによりFLASHの良さを出しつつ、ユーザーの使い勝手も失わせない見せ方が出来ます。
これが、数秒待たないとメニューが出てこないのであればアウトです。

次に各ページに飛ぶと、まずタイトル部分がテキストというのが注目すべき点です。
中メニューのタイトルは画像が多いですが、このサイトではテキスト。
この場合、テキストでは線が細いため目立たせるのが難しい面があります。
それを薄い緑をバックに濃い緑で帯を作ることで、画像並にタイトルを引き立てています。
テキストを使うとMTを導入し易いという利点もあります。

全体の配色については、大抵の場合ロゴなどからメインの配色を決めますが、このサイトにおいてはロゴの青と赤を使わずにあえて緑をメインとした配色としています。
この配色はデザイン優先で決めたと思いますが、緑はホームページ作りにおいて強すぎず弱すぎず、非常に使いやすい色です。その緑に対してピンクのリンクカラーを持ってきているのも注目です。

最後にフッターですが、フッターの縦幅、文字と文字の間隔の取り方配色など見やすくて目立ちすぎないデザインの良い例だと思います。特に余白の取り方が上手いため、デザインが良く見えます。
フッターに住所を記載しているのは、ユーザーが大学サイトを見てまず何を知りたいか?を分析した結果なのかもしれません。
四天王寺大学?ドコにあるの?ということで。

このサイトについてザっと書いてきましたが、大学サイトの中では使い易さ、デザインともにトップレベルと言えると思います。MTを使った点も大学としては先進的です。


※クールサイト情報ありましたらご連絡お願いします。

«BACK 

WEBコラムカテゴリー

最近のエントリー

月別アーカイブ