TAROSITE.NET | TAROSITE.NET 2008 SPRING MODEL

IDEA

TAROSITE.NET 2008 SPRING MODEL

by TARO MATSUMURA - 2008.03.04 01:07

　TAROSITE.NET、2008年春モデルのリリースです！

　昨年、10周年のリニューアルの際に「写真に力を入れるデザイン」というエントリーで書いた通り、写真を頑張るデザインと言うコンセプトを継続することにした。デザインを掲載する写真に依存させて、特集の写真次第で雰囲気が次々に変わるようなデザインをウェブサイトでも実現したかったのだ。それを、さらに踏み込んで取り組もう、と言うのが今回のリニューアルである。

　要するに、デザイン要素は濃いめの黒のメニュー表示だけ（Helvetica Condense Bold）、あとは写真を使って背景からアイコンまでをデザインするという手法をとった。

カスタムフィールドとFlickr Photo

　トップページを見ていただくと分かる通り、いきなり巨大なサイズの写真が敷き詰められており、そこの上にメニューやフィーチャーしているエントリーへのリンクが表示されている。さらに下へスクロールしていくと、エントリー毎に75×75ピクセルのエントリーの写真が掲載され、マウスオーバーすると左端がぴょこんとオレンジ色に光る仕組みだ。

　これをやるためには、各エントリーが写真の情報を持っていなければならない。そこで今回活躍したのは、Movable Type 4.1で登場したカスタムフィールドとFlickrである。

　このウェブサイトの横幅は1024ピクセル、エントリーの領域の幅は500ピクセル、エントリーの個別ページの右肩にある領域は240ピクセル、そして各所に表示されるサムネイル画像は前述の通り75ピクセルの正方形だ。これらのサイズが何で決まったか、と言われれば、Flickrが自動的に生成する各種サイズの横長写真の幅のバリエーションである（上記の他に、100ピクセル、そしてオリジナルサイズがある）。

　ここで、画像の管理を完全にFlickrに依存する、という意志決定をした上で、これらの画像のバリエーションを規格サイズとしてウェブサイトを組んだのだ。横幅がちょっと大きすぎるかな？と言う懸念もあったけれども。

　そしてMovable Typeのカスタムフィールドである。

　FlickrPhotoというカスタムフィールドを作り、ここにFlickrの写真がアーカイヴされているURLを入力するのだ。ここで1つのポイントは、Flickrの画像の完全なURLではなく、末尾の「_？」と拡張子を取り除いたURLをセットすること。

　つまり横幅240ピクセルの「Smail」サイズの写真をセットする場合は「http://farm1.static.flickr.com/176/434251864_5273da0952_m.jpg」というURLが正解だが、FlickrPhotoフィールドに記述する際には「http://farm1.static.flickr.com/176/434251864_5273da0952」と記入する、と言う意味である。

　Flickrでは、この末尾を変えれば、各種サイズの写真を取り出すことが出来るため、使う箇所のHTMLもしくはCSSで、必要なサイズの末尾を付けて読み込む、と言うことをやっている。

　これによって、エントリーに写真を割り当てれば、トップページで大きく出したり、エントリー中にちょうど良いサイズで出したり、エントリーのメニューで正方形の画像として利用したり、ということが自動的に行われるようになる。

　トップページだけでなく、各個別エントリーやカテゴリのアーカイヴページなんかでも、高さが小さめのヘッダがつく仕組みになった。これは個人的にとても気に入っている。

MacOS X 10.5 Leopardから透明を学ぶ

　もう一つ、今回は初めて透明を使ってみた、と言う点が新しい。これはMacのOSをLeopardにして、初めて壁紙を変更したときの気付きに端を発している。

　Leopardでは宇宙の星雲のカッコイイ壁紙がデフォルトでセットされていて、結構これをそのまま使っている人は多い。先日のMacBook Airの光るキーボードとのマッチングなんか、しびれるほどのビジュアルを醸し出してくれているのも記憶に新しいんだけれども。

　デフォルトが一番カッコイイというのはある種正しいデザインかな、と思うんだけれど、苦労して作る自分のBlogのデザインですら1年で飽きてしまう僕である。そりゃ壁紙なんてしょっちゅう変更して当たり前、というものだ。

　ところが、変えたときにおや、っと思ったのだ。

　デフォルトの壁紙だと分からなかったのだが、もう少し変化のある壁紙にしたとき、画面の上部を占めるメニューバーが半透明であることに気付かされた。裏の背景がぼんやりと透けているのである。

　もちろんメニューバーとしてアリか、ナシか、という議論は分かれるところだと思うのだが、僕はそこで、「透明ってこんなにきれいなモノか」と感心したのである。これを見てしまうと、自分のBlogのメニューだって透明をやりたくて仕方なくなってくるわけで。

　普段使っているモノに影響される、と言うことは多分にあるのだな、と言うことを身を以て体験したエピソードなんだけれど、TAROSITE.NETのオレンジのロゴを透けさせるかどうかはカナリ悩んだ。けれども、結局透けさせて正解だった。これもなかなか気に入っているポイントです。

今までのスタイルに慣れていた方へのエクスキューズ

　TAROSITE.NETをBlogとしてご愛読している方々へのごあんない。

　今回のリニューアルで、記事のリストからさわりや本文が読めるというページは一切廃止してしまった。トップページもアイテムを選ぶようなリストだし、「WEBLOG UPDATE」というボタンから行くことが出来る、縦長の記事リストでも、本文のさわりは読めない。

　これはデザイン上の問題、ということ以上に、サーバの負荷が厳しい状況にある点が影響している。というのも、TAROSITE.NETを格納しているMovable Typeは一応2002年にMovable Typeを始めた頃からのエントリーも含んでいて、そろそろIDが10000になろうか、と言うところまでやってきている。

　そのため、リビルドがとてつもなく重たい。

　もちろんダイナミックパブリッシングにしようかと思ったのだが、ちょっと負荷的に各エントリーのページでそれをやるのもしんどい。結果、Movable Typeのトップ画面を開くにも、エントリーを新規作成するボタンを押してからも、エントリーを保存して再構築するにも、かなり待たされる状態で、時々失敗しました、とくるから何とかしたいと思っていたのだ。

　今回はテキストのボディーを読み出さないリストページの仕様にしたお陰で、リビルドの時間が非常に短くなった。またタグのページを開くのも速くなっている。と言うことで、クリック数は増えてしまうけれど、そのかわり、引きのある見出しを付けるようにしますので、ご容赦下さい。

　一応、これまでのBlogと同じような使い勝手を実現するため、「TAROSITE.NET: WEBLOG UPDATE」（http://www.tarosite.net/archives.html）というページを用意したので、こちらをぜひともご利用下さい。

完全対応にはかなり時間が、、、

　最後に、もう一つ言い訳です。個別エントリーのページが新しいデザインに変更されるには、ちょっとまだ時間がかかりそうなのだ。

　というのも、Blogの入力のフィールドの使い方を変更したからである。これまでは、適当な長さで「本文（MTEntryBody）」と「続き（MTEntryMore）」に分けて入力していた。ところが今回は、「本文」のみを中央に表示して、「続き」は右端の領域、エントリーに関連するリンクや資料となる写真などの「RESOURCE」というコーナーとして使うことにしたのだ。

　問題は、本文はこれまで通りの横幅500ピクセルだが、右端の領域は横幅240ピクセル。しかし以前までは500ピクセルの画像を配置していたし、本文の続きをだらだらと長く記入してある。

　これをうまく本文に統合しなければならない、と言う作業が待っているのである。まあいつかはやらないと、と思っていた作業ではあるのでそれがいま、ということなんだけれども、ちょっとこれには骨が折れそうだ。

　全てのページを新しいデザインで見るには、もう少々お待ち下さいませ。

TAROSITE.NET: tarosite.netタグ
TAROSITE.NETの、特にリニューアルに関する一連のエントリーがまとめてあります。ちなみに前回、2007年3月のリニューアルは10周年という事で、Keynoteに自分向けの企画書というか趣意書を作ってリニューアルに取り組みました。これだけやっても1年で飽きちゃうんだからね。