ウェブサイトが新しくなりました！

2011年10月4日 by tujcomm 3件のコメント

ものすごくお久しぶりです。
ウェブマスターの方の渡辺です。

すでにお気づきの方もいるかもしれませんが、去る10月1日（正確には9月30日の夜）、テンプルジャパンのウェブサイトの総合情報セクション (www.tuj.ac.jp) の デザインを刷新しました。今回は、そのリニューアルについてご紹介したいと思います。

今回のリニューアルの目的の一つは、よりシンプルに、より使いやすく、よりテンプルらしいウェブサイトにすること。その基盤を築くための第一段階として総合情報セクションを新しくしました。テンプルジャパンのウェブサイトは、大きく分けて以下の3つのセクションに分かれているのですが、今回リニューアルされていない部分も、これから順次新しいデザインに更新していく予定です。

1. 総合情報セクション　→　今回はココを刷新
   大学の総合案内を掲載
2. プログラム・セクション　→　これからリニューアル
   大学学部課程やMBAなど、提供する7つのプログラムの情報を掲載
3. 施設・サービス・セクション　→　これからリニューアル
   就職サポートや図書館など、施設やサービスの情報を掲載

前述のとおり、リニューアルの大きな目的は「訪れるユーザの方々の役に立つウェブサイトに近づくこと」で、そこが一番重要なことなんですが、今回 このブログでは、「こぼれ話」的に技術的な舞台裏の話を少しご紹介したいと思います。目的があって、それを支える技術がある。ユーザの方々の目に触 れない部分ではありますが、こちらも同様に大切な部分だと思っています。少しマニアックな内容になりますが、ご容赦ください。
さて、久々ということもあって、前置きがかなり長くなってしまいましたが、本題に入ります。

新しい試み

今回のリニューアルでは「基盤」を築くために、以前採用したことのない以下のような新しい試みを行なっています。

• スマホ対応
• HTML5・CSS3の導入
• パフォーマンスの最適化
• 日・英フォントサイズの最適化
• フレキシブル・グリッド・デザイン
• 短いURLへの変更

その中から、2つほど、より詳しく紹介させてください。

スマホ対応

今回のリニューアルで、日本でも最近ものすごい勢いで普及しているスマートフォンにウェブサイトが対応しました！
今後、増え続けるスマホ・ユーザの方々が、ストレスなくウェブサイトを閲覧できるように、スマホに最適化された状態でウェブサイトが表示さ れるようになりました。アメリカで1年ほど前から話題になり始めた「レスポンシブ・ウェブ・デザイン」という手法を使って、PCだけでなく、スマホやタブレット端末など、いろいろな機器に最適化された状態でウェブサイトが表示されるようにしました。ウェブ業界では、日本でも最近話題になり始めているホットな手法です。

ぜひ、iPhoneやAndroid携帯からTUJのウェブサイトを見てみてください！

参考：
「レスポンシブ・ウェブ・デザイン」の発端となった、「A List Apart」の2010年5月のEthan Marcotte氏による記事 「Responsive Web Design」： http://www.alistapart.com/articles/responsive-web-design/

Ethan Marcotte氏が「Responsive Web Design」についてまとめた本:
http://www.abookapart.com/products/responsive-web-design

パフォーマンス最適化

この「最適化」。いったいなにかというと、ウェブサイトを訪れた際、より早く・快適にウェブサイトを閲覧できるようにパフォーマンスを向上させる試みです。Flashのアニメーションや大きな画像がなかなか表示されないウェブサイトって、急いでいる時などは見ていてイライラする時もありますよね？ユーザの方々にそんな思いをさせないために、ウェブサイトをチューニングしようという試みです。

たとえば、リニューアル前・後の日本語トップページを比較してみると、以下のような改善を実現しました：

合計ダウンロードサイズ
リニューアル前：　762KB
リニューアル後：　290KB
→ 実に、半分以下のサイズになりました！

ダウンロードするファイルの数
リニューアル前：　64個
リニューアル後：　15個
→ なんと、4分の1以下に！

※Yahoo!が提供している、YSlowというツールを使って計測

こんな風にさらっと数字で書くと、なんか簡単にできちゃいそうに見えますが、実はそれほど簡単ではなくて、ファイルサイズやダウンロード数を減らすため に、見えない所で結構細かいチューニングを行なっています。たとえば、「CSS Sprite」という手法を使って、以前であればバラバラだった画像ファイルを、以下の画像のように一つにまとめて設置しています。ダウンロード数やファイルサイズを大幅に削減できたのは、これが大きく貢献しているからです。

まとめ

今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとしてあります。
学生が切磋琢磨して自分を磨く場所、また、新しい知識を学び、試す場所である大学。そんな場所である大学のウェブサイトとして、常に新しいことに チャレンジしていくべきだと考えました。使い慣れたいつもの手法で、いつものようにやればだいぶ楽だった。。。なんて思うところも多々ありま す。新しいことゆえに問題が発生して困ることも沢山ありました。しかし、そこを知恵と工夫でどうにか解決して前に進んでいく。「大学」とはそういう場所だと考えています。

まだまだ未熟ではありますが、日々、学びながら、大学のウェブサイトらしく、本来の目的から外れることなく、新しいことにチャレンジしていきたいと思っています。「大学のウェブサイト」として学生の方々に真似されるような、「おぉ～、やるね」と思ってもらえるようなウェブサイトを作って行けたらと思っています。

ご意見、ご感想、改善点などありましたら、webmaster@tuj.ac.jp までご連絡ください。次の改善の参考にさせていただければと思います。ぜひ、これからもTUJのウェブサイトをよろしくお願いします。