レジャー・娯楽(株)JTBパブリッシング様

るるぶ.com 富士山特集

http://www.rurubu.com/season/summer/fuji/

デザイン・リニューアル。
マークアップではレガシーブラウザにもしっかり対応

公開日時
2013.07
担当業務
新規サイト構築企画・構成デザインコーディング
るるぶ.com 富士山特集

企画・構成ポイント
初めて興味を持ったユーザーを惹きつける構成

デザインのリニューアルです。
世界文化遺産に登録されたことをきっかけに、一層注目を集めた富士山。
そこで、るるぶさんの特集でも情報に世界遺産のコラムを追加し、
「富士山に登ってみようかな」と思っている方々にとっては最適の情報サイトだと思います。
プランニング&登頂の極意はタブ切り替えだった項目を一覧できるようにし、読みやすくなりました。

デザインポイント
アクセシビリティーを考慮したデザイン

自分でデザインしたサイトを、自分の手でバージョンアップする機会を貰えることはデザイナー冥利につきます。
その半面反省もあり、初回トップページにおいてはデザインを優先し、ほぼ全てを画像で組んでいました。
(ブログ参照。当時はデザインすることが楽しすぎて舞い上がってますね)。
結果として表示速度が遅くなってしまい、アクセシビリティーが悪くなっていたと思います。
今回は反省を活かし、テキストに出来る箇所はテキストに変更したため、より快適に見ていただくことができると思います。

エンジニアポイント
下位IE可読性維持・レイアウトの崩れがないようにこだわる

るるぶさんのマークアップでは、IE6を含めた下位IEでの可読性を維持すること。
そして、IEの「文字サイズ」の拡大・縮小が行われてもレイアウトが崩れないようにすることの2点がポイントになります。
また、下位IEの表示状態を確認するためには、
IETester(http://www.my-debugbar.com/wiki/IETester/HomePage)やIEに搭載されている開発者ツールなどが手軽ですが、
これらで見ても見つからないレイアウトの崩れなどがどうしても存在します。
そのため弊社では、純正のIE6 / IE7 / IE8の実機を維持しており、
これら実機などで実際に確認した上で各種ハックを駆使し、レイアウトの崩れを直していきます。
更に、「表示」→「文字のサイズ」で変更できる「最大・大・中・小・最少」に対応するためデザインを多層に切り分け、
巧みに重ね合わせることにより、可読性を維持しています。
このるるぶさんの作品は、見た目以上に実に細かい作業を行っているため、
社内では、このコーディングを担当することがひとつの登竜門ともなっています。

関連する実績

 
サービス業・コンサル全日本空輸(株)

 

2013.01
がんばろう日本 Gambaro Japan
レジャー・娯楽ヒルトン・ワールドワイド

がんばろう日本 Gambaro Japan

2011.06
るるぶ.com 富士山特集2011
レジャー・娯楽(株)JTBパブリッシング

るるぶ.com 富士山特集2011

2011.05
ページトップへ