何気なく利用している「Yahoo! Japan」ですが、テンプレートやスタイルシート(css)の面からデザイン見本として眺めてみると洗練された新たな方向性に驚きを感じさせてくれます。
Yahoo! Japan(以後Yahoo略)のトップページは、インターネットの歴史みたいなもので、htmlで書かれた初期のサイトから最新のCMSで作られる現在のサイト(予想です)まで少しずつ変化を遂げてきました。
最新のトップページに変わったのは2008年の1月だったでしょうか(それ以前からテスト利用はされていましたけど)。
ログインやメールリンクの位置が変わって使いづらさを感じていましたが、今ではすっかり馴染んでいます。
そのYahooのトップページのレイアウトを改めて眺めると、一般的なスタイルを超越したデザインセンスに感動を覚えます。
今でこそ3カラムで中・右を大きく取ったサイトやブログが増えていますが、テストを開始した1年半前なら3カラムであってもホームページ的なデザインが多く見受けられた時期です。
特にYahooの場合は中央のカラムもウィジェット化されていることがポイントでしょう。
広告収入が主となるポータルサイトでは、広告バナーの挿入位置が重要であり、状況に応じた変更の必要性から現在のスタイルになったのと思われますが、1年半も前に実装していたと考えたなら驚きを隠せません。
空き時間と土日を利用してyahoo風のテンプレートを作成してみました。
参考 http://platinumcolor.net/mtos/ya_custom/
*無料テンプレートとして配布したいと考えていますので少々お待ちください。
配布テンプレート用にカスタマイズしながらいろいろ考察してみたのですが、Yahooのトップページと現在主流のデザインで大きく異なる点はトップヘッダー部分に配置されたリンク用のアイコンです。
ロゴマークの左右に配置された6個のアイコン型リンクですが、同様のデザインを用いた海外のYahooでは利用されていません。
日本オリジナルなのでしょうか。
デザイン的にどうなのかや、手本にしたいかどうかはともかく、利用者視点で見れば使いやすい配置です。
その他のデザインは一般的と言えますが、過去のデザインと考えれば先進的かつ素晴らしい発想です。
もちろん、メインのカラムをウィジェット化する必要性はあまりないものの、商用ホームページやアフィリエイトをされている方は利便性の良さを実感するでしょう。
デザインと言うより熟れに近いのですが、Yahooのテンプレートにアフィリエイトバナーを貼っても違和感がありません。
どんなジャンルでも、どんなに派手でも、ごく自然な感じがします・・。
ウィジェットブロックとして仕切られていれば、アフィリエイトバーナー特有の目障りさが軽減されるのでしょうか。
ゴチャゴチャと貼り付けた方がyahooぽくなることに驚きました。
カスタマイズ視点でYahooを見れば、メインカラムのタブ切り替えが困難でした。
配布用に作成しているテンプレートはMovableTypeOSを用いていますが、MovableTypeにはカテゴリIDで一覧表示させるタグが無いことと、再読み込み無しで表示を切り替えるにはJavaを使う必要があることなど、一般利用では高性能なMTも高機能な業務用CMSと比べればかなり劣っています。
WordPressならカテゴリ表示がIDですし、phpなので、もっと近い動きができたかもしれませんね。
熟れてる分だけMTの方が使いやすいもので・・。
まとめとしては、一流企業のデザイナーは流石だなと感じたひとときでした。
物まねデザインでカスタマイズすることに批判的な方もいらっしゃると思いますが、自分には無いセンスを学ぶためにも良い学習方法だと思っています。
言うなれば模写でしょうか。
当スタジオとしてもポータルサイトの作成代行を行っていきたいと考えているため、代表格でもあるYahooは最上の手本です。
またまだ未完成ですがYahoo風テンプレートにカスタマイズして学べた事も数多くあるでしょう。
利用者として使っていると何も感じないサイトも、カスタマイズの手本にしてみると新たな発見があるかもしれません。