Design Wedge原です。秋も深まり、そろそろ肌寒くなってきました。10月と言えばモスのクラムチャウダーの解禁の季節です。4月以降まったく飲めなかったので(沖縄だと夏でも飲めるみたいだけど飲み損ねました)、解禁早々立て続けに2杯飲みました。しかし、毎年思うのですが、何故モスのクラムチャウダーはMとかLとかサイズの指定が出来ないのでしょうか。僕ならLを頼んでたっぷりおかずにしたいと思うんですが。
さて、今回の海外サイトデザイン探訪もサイズに関する話です。世の中のウェブサイトは解像度の増加に合わせて順調に横幅が拡大中ですが、その一方で横幅を必要以上にとらず、コンパクトにまとめているサイトもいくつか存在します。今回は最近デザインされたサイトで、横幅が小さいサイトを見ていきましょう。

Nashville's Smallest Art Gallery
横幅は320pxと、iPhoneのようなモバイルデバイスでも十分に見れる横幅を持ったサイトです。ナッシュビルの最も小さいアートギャラリーと名付けられているだけあってサイトの構成も最小限です。メニューの背景にもなっている背景部分はロードするたびに変わるスタイルになっており、メニューはCSSで透過させるように設定してあります。これがデザイン上のスパイスになっています。
この実装方法は、Firebugなどでソースを見るとすぐわかりますが、透過PNGをhoverに設定して実現しています。この会社の所在地を表すGoogle Mapを利用した地図も最低限の表示になっていてかわいげがあります。

LetSnow } Flash snow effect component
LetSnowでは、名前のとおり雪を降らせるActionScriptを販売しています。冬に近づくこの時期雪が恋しいという人もいるのではないでしょうか。この雪はActionScript3にも対応しており、サイト上でデモを見ることもできます。このサイトも幅が短く、600px足らずとVGAのPCですら表示できる横幅となっています。デザインはDetrans-Studioが担当しており、サイトを見るに限られた面積をうまく使えるタイプのデザインをするスタジオだと感じました。

Bombia Design | Blog
Web2.0以降のデザインを感じさせる硬質でシックな配色のこのサイトも、コンパクトな作りをしています。どちらかというと個人でやっているデザインスタジオにコンパクトなスタイルのサイトが多く、個人であり小回りがきくということをアピールしている気がします。アイコンのアプローチは要注目箇所の一つで、Web2.0時代のツルリとした反射エフェクトではなく、地面がツヤ消し状態であるかのような鈍い反射のエフェクトはこれから流行っていくかもしれません。このサイトも横幅は600pxとなっています。

Wish Tree
あなたのWishを記録するというコンセプトのサイトですが、ビジュアルデザインが秀逸です。Wish Treeを表す木のイラストを中心にダルトーンをベースにした配色でまとめられています。投稿されたWishのタイトルは新しい順に並び、地面のようにゆっくりとグラデーションをかけながらフェードアウトしていきます。
サイトの背景はよくあるマイページのカスタマイズ機能のように変えることが出来ますが、透過PNGを使ったデザインとフェードアウトのJavaScriptのおかげで、スムーズかつ劇的な変化を生み出しています。横幅は535pxとなってます。

Yannick Myrtil
このサイトは、おそらく「Blogの次の形はこういうスタイルだろうな」と感じさせる形態をしています。個人の活動を一つの自分のページの中でまとめるために、今どきのサービスを余すところなく取り込んでいます。Twitterでのつぶやきがステータスとして表示され、Facebookなどの別のフィールドで活躍しているマイページへのリンクと最近撮った写真の一覧、ヘッダーの隠しメニューには個人のプロフィールとレジュメが置いてあります。550pxで綺麗にまとめられています。
新刊書「速習Webテクニック Smarty動的Webサイト構築入門」のご紹介
私が手がけた久々の新作本「速習Webテクニック Smarty動的Webサイト構築入門」が出ました。技術評論社から出ている速習Webテクニックというシリーズの一つです。この本は、動的Webサイト構築入門と名前がついていますが、プログラマー向けの書籍ではありません。
むしろデザイナーをやっている人で、より広い範囲の職域をゲットしようという方にうってつけの書籍です。Smartyというテンプレート言語は、PHP上で動作し、プログラマーが書くPHP部分と見た目に相当するテンプレート部分を分離できるというメリットがあります。
たとえば、デザインからコーディングまではやるけど、サーバーに組み込むのはプログラマーがHTMLを分解してテンプレートとして組み込むというスタイルの案件をやった経験がある人ならわかると思いますが、デザイナーの職域としては本来であれば、表示(ビュー)部分を最後まで責任を持って制作するということがあります。
しかし、現状、テンプレートから先のビューに関する部分はプログラマーが請け負っていたりすることが多々あり、これでは表示とロジックを分離できている仕組みがあるのに仕事としては分離できていなかったりします。
そういった状況にある人が読むことで、少しでもサーバサイドテンプレートの仕組みなどを理解できれば、との願いを込めて書いてます。Movable Typeがなんとなくわかった人なら読み進めると思います。
あとがき
もうすぐ11月ですね。そろそろスノーボードの季節ということで、ボードの手入れなどを始めようかと思ってます。実はスノボ好きが高じて、ボードのシルバーアクセサリーを作ってみました。これがなかなかいい出来になったので、ペンダントにして首にかけようと思ってます。
11月7日から行われるWeb Directions Eastに出演します。テーマは「これからのリッチメディアにおけるテクニカルディレクション術」です。もし会場で僕を見かけたら、是非声をかけてください!
関連リンク
WDRDW:海外サイトデザイン探訪 バックナンバー
Nashville's Smallest Art Gallery
LetSnow } Flash snow effect component
Detrans-Studio
Bombia Design | Blog
Wish Tree
Yannick Myrtil
原一浩さんプロフィール
1998年にウェブデザイナーとして独立(karadesign)。同年、ウェブデザイン専門のメールメディア「Design Wedge」を発行開始。ウェブデザイン業務の傍ら、海外のウェブデザインに関する情報発信、研究、開発を行う。2006年株式会社エフエックスビイ設立。「Web Designing」や「web creators」など雑誌への寄稿多数。「Web検定」プロジェクトメンバー。SHIFTにて3年間クールサイトレビュアーを勤めた。最近は映像制作とフレームワークに夢中。
http://www.karadesign.com/
http://www.karadesign.com/designwedge/
http://fxb.jp/
このエントリーをブックマークする
このエントリーにトラックバックする
このエントリーのトラックバックURL
http://withd.jp/mt/mt-tb.cgi/2962
WEBの新着記事
2009.06.29
行動につながる情報を見つけ出す
2009.06.25
人柄のデザイン
2009.06.25
Web標準と接する際の3つの留意点
2009.06.18
3年間ありがとうございました、のブックマーク放出
2009.06.11







