[Webサイトギャラリー番外編]2010年FIFAワールドカップトーナメント表デザイン色々

2012年2月22日

さっきの記事に使うのに、トーナメント表を探していたら、
各社色々なデザインや仕様のものを作っているのに気が付きました。
勉強になるかな~と思い、分類して集めてみたよ。
ちなみに画像を保存したのは準決勝前の7/4ですので、クリックすると現在のページを見れます。

CSS組 一枚画像じゃないところに尊敬の念を抱く・・・

TBS



『トーナメント表』でぐぐるだけで一番上にきます。今回一番目にされてるトーナメント表はこれでしょうね。
これの驚くべきところは、一枚画像と思わせつつ、実はhtmlで組んであることです。
ドリで見るとこんな感じ。


divやdtのリストタグを使ってます。しかも、国旗から各チームの詳細ページにリンクします。
雰囲気もシックな感じで好きです。力入ってんなぁ。

サッカーワールドカップ2010南アフリカ大会ガイド



ここもdiv組みです。作るの大変そう~~ISO的にはこれの方がいいのかな。

雰囲気重視組

時事通信社



雰囲気がよく出ていて、デザイン的には一番好きかも。文字も程良く採光になってて読みやすいです。
ここも国旗から各チームの詳細ページにリンクします。

Yahoo!スポーツ&Sportsnavi コラボ



点数もさりげなく表記されております。
ちなみに2006年は単体のトーナメントの形でした。こう見るとずいぶん進化してるよね!

asahi.com



ここは色合いが柔くて個人的には好み。点数もわかりやすいね!
でも、もう少し文字間を開けたほうが読みやすいかと。

シンプルイズザベスト組

スポニチ



潔いデザインです。でも意外にこういう方が見やすかったりする。高齢者狙いの仕様?
ちなみに現在は、スペインとオランダが赤くなってますよ。

ゆうてんじスポーツ x スポーツバー・ジャパン コラボサイト



カラフル&シンプル。しかし色の付け方が謎。グループでも順位でもないし、地域別ってわけでもないし??
ここもさりげなく国名をクリックすると、試合結果&スタメンフォーメーションのページが表示されます。
もっとリンクをわかりやすくした方がいいね。

日刊スポーツ



個人的にはもうひとひねり欲しい。でも修正するのは簡単そう。

と上から目線で語ってしまいましたが、制作に関わってる人にはあと少しの間がんばって!と言いたい。
更新時間とかも大変だろうなぁ・・・。