Blog

Fantasista Webサイト公開!

fanta.jpg

デザイン会社、FantasistaのWebサイトを制作しました。
http://www.fantasista.co.jp/

サイト自体は4/1日にオープンしたのですが、そこからさらに機能をちょこちょこと追加し、
ついに先日完成したのです。

制作の進め方としては、最初にデザイナーの榊原くん(写真中央)から、サイトのコンセプトや、目指す雰囲気などをヒアリングし、基本デザインをもらって、そこから僕のフィードバックを重ね、二人であれやこれや意見を詰めていきながら少しずつくみ上げていった流れです。

キバラくん(榊原くん)は、デザイナーとしての経験が非常に豊富で、DTPの技術も長けているので、"グラフィックデザイナー" vs "Webクリエイター"としてのお互いのこだわり、また、できることできないことをぶつけ合ってサイトを作っていく作業がすごく刺激的で楽しくて経験にもなりました。

ちなみにキバラくんのワークスはこちらです↓
http://www.fantasista.co.jp/sakakibara/

そしてFantasistaサイト制作にあたって、主に次のような機能を盛り込みました。

  1. 社内スタッフ全員が簡単に記事を作成、更新可能にする
  2. リストページを2段組にして、一覧性をあげる
  3. 各記事のメイン画像をサムネイルで切り替え可能にし、簡単に更新できるようにする
  4. トップページはリストページと少しフォーマットが違うため、
    更新システムの負荷、柔軟性を考慮し、Flashで作成する
  5. 映像作品は作品の性質上Youtubeなどの共有サイトでアップ不可のため、
    オリジナルのプレイヤーを作成し、簡単にアップロードできるようにする
fanta_palaning.jpg

(2) の2段組は、メイン画像のサイズがリスト用に小さくなるように、アップ時に、小さくリサイズした画像も書き出しくれるプラグイン実装しました。

(3) のサムネイルでの切り替えは、更新システムにmootoolsというライブラリを使用することで実現しました。最初、jQueryを使っていたのですが、jQuery独特のバグというか仕様で、ブラウザによってうまく表示できないことがあったのでやめました。
編集者はメイン画像5つまでとサムネイル画像をアップするだけで、ページに反映されるようになっています。

(4) のトップページは、Javascriptがオフの場合、また、iPhone、iPadなどのFlashプレイヤーが使用できない端末で閲覧した場合にも、HTMLで表示されます。
Flashの裏側のソースが常に最新の記事になることで、検索エンジン対策にもなっています。

(5) は、編集者がアップしたFlv動画のファイル名を更新システムが取得し、HTMLの flashvar を介してFlashムービープレイヤーが、ファイル名を読み込むという形にして実現しました。
最近実装したばかりなのですが、徐々にアップされる予定です。
参考 → http://www.fantasista.co.jp/works/commercial-film/-shs-id.html

とはいえ、一番大事なのは、サイト内の記事の充実です。
Fantaサイトにはすでにたくさん記事がアップされていますのでぜひ見てみてください〜


Fantasista inc. :
http://www.fantasista.co.jp/

mootools参考:
http://tenderfeel.xsrv.jp/mootools/279/

10.07.17.PM08:25

Voice

1

お久しぶりです~!
一度拝見させてもらってからかなり充実していますね><更新システムが気になります・・・

是非、制作秘話を聞きたいです(笑)

近藤さんとも話していたのですが、今度ご飯でもどうですか~♪
久しぶりにみんなで集まって語りましょう!!

2010.07.22 | post by nogud url

2

ども、お久しぶりです!
Twitterで拝見してるのですが、めちゃめちゃ忙しそうですね。
ぜひぜひ、今度飯食いながらnogud話も聞かせてください!

2010.07.22 | post by plamo

3

やったね!みきちゃん!ありがとー!

2010.07.23 | post by キバラ url

4

おおー、バラック!
こちらこそありがとうー
映像UP楽しみにしてますー

2010.07.23 | post by plamo

5

リリースおめでとうございます。
かっこいいサイトですねー。
そして構築が大変そう。。。

こんどは技術的に挑戦的なやつ、一緒にやりましょう!

2010.08.05 | post by キウチ

6

ありがとうございます!
ぜひぜひやりましょー!

2010.09.21 | post by plamo

Leave a Reply
name:
e-mail:
url:
voice:

Track Back

http://plamo-tokyo.com/site/mt-tb.cgi/89