• Facebook
  • Twitter
  • Delicious
  • Digg
  • RSS

ついにリニューアルです

サイトをご覧頂いた方はすでにお気づきかと思いますが・・・名古屋デザイナー学院のWebサイト、１年ぶりのリニューアルです！
（年明けから休みを返上し、何とかオープン予定日に間に合わせることができました・・・）

さて、このリニューアル作業に関して新しく導入したレイアウト法とかソフトの紹介とその苦労話をしたいと思います。

コンセプトは「なデ学のイメージを再現」

今回のコンセプトとして学校全体やパンフレットに現れている様な学校のイメージを出来るだけお伝えすることを念頭に置きました。
学校生活が楽しくて、その中でマジメに学べる。そういうところですよ！と言うイメージが少しでも伝わっていれば嬉しいですね。

レイアウトには960 Grid Systemを導入

960px Grid System

今回のレイアウトにどんなものを使おうかと悩んでいたんですがふとこんなサイトが
【960 Grid System】
このサイトで紹介されている960 Grid と言うのは要は「Webサイト横幅960pxで作ろうぜ！」と言うもの。
なぜ、960pxなのか、その理由はレイアウトの割り方。960と言う数字は2, 3, 4, 5, 6, 8, 10, 12・・・と多くの数字で割れる様になっているため非常に横へのレイアウトがしやすいため。
Webのレイアウトにおいて作る幅を決めるのはとても重要でその中に如何に上手く納まる様に作るかが一つのキーポイントになります。
今回この960 Gridを使う事によってその割り算に沿って作れば良いためその悩みがかなり軽減されました。

全ページをPHP化

これまでサイトをCMSを使わずに手作業で作る場合Dreamweaverを使ってHTMLとして作業、その上で体験入学や資料請求等システム化すべき箇所だけPHP化する、と言う手順で作ってきたのですが2011年度版では全てをPHP化！ページ作りはWordpressの様にパーツ別に変更。各コンテンツに対してヘッダやフッタのパーツをPHPでインクルードする手法になっています。
このPHP化した理由としてはメインメニューを更新しやすくするため。 Dreamweaverでもテンプレート機能を使えば全ページ更新はできるんですがページ数が多いサイトで全更新を行うのは恐怖とリスクが伴いますので・・・。パーツがバラバラになっているおかげで不意なサイト更新に対応出来る様になりました。（ちなみにDWテンプレート別の使い方をしています）

Flash Catalystを使ってみました

インタラクションデザインソフトウェア | Adobe Flash Catalyst CS5

トッページにFlashを、との要望を受けFlashの動き等を考えていてふとCS5で加わったFlash Catalystが目に。
動画で制作風景を見た事はありましたが実際どの程度デザイナーの見方となってくれたのかレビューがてら今回の制作に取り入れてみました。
このCatalystのレビューについてはまた別途記事を書こうと思います。

サイトをグッとシェイプアップ

今回の広報担当の方を一緒に頭を悩ませてリニューアルで肥大化し過ぎたコンテンツを一気にシェイプアップしました。
コンテンツと言うのは多すぎても少なすぎてもダメ。情報として読んで頂くのにちょうど良いボリュームに押さえてあります。

効率化との勝負も！

今回かなり短期での製作であったこともありいかに効率良くサイトを構築し今後の運用に役立てるかが中心となりました。
上記の960px、PHP化、 Catalyst、全てがそこに向いている様にも思えます。
とは言え効率に走り過ぎても結果手を抜くわけにはいかないので絵で作るべき箇所は結構時間をかけました。

そんなこんなで21日にオープンした名古屋デザイナー学院。まだまだ手直ししなければいけない箇所は多いですがまずは一段落、と言う事で。もしよろしければ感想等お待ちしてます！

Share and Enjoy