パソコンのディスプレイが解像度1920×1080ピクセルや1280×800ピクセルなどのワイド型ディスプレイが普及している現在、数年前まで主流だった解像度1280×1024ピクセルで最適に表示されるレイアウトでWEBサイトをデザインした場合、広い範囲が無駄な空白スペースとなってしまいます。その空白スペースを有効に活用させる為、横スクロール型のデザインで設計しました。動作は一見FLASHを使用しているように感じますが、ipadやスマートフォン対策として、全てjavaScriptでプログラミングされています。トップページでは各コンテンツの最新の内容が縦に並び、マウスフィールでディスプレイから隠れている物がスクロールします。左右のボタンは横スクロール用で、左右のボタンをクリックすると隠れているコンテンツが1つずつスライドしピッタリと表示される仕様です。

トップページではディスプレイのサイズに合わせて商品のブロックが自動で整列される可変グリッドレイアウトになっています。トップページだけでなく他のコンテンツページでもディスプレイ全体を有効に活用する為、テキストの表示部分が自動で伸縮する機能やサイト全体が最適にブラウジング出来るようレイアウトされています。

ブログ機能は自社内での更新の場合MovableTypeが最適ですが、一般の方がそれぞれ更新する場合、様々な問題が発生してしまうため、TypePadで構築しました。TypePadの仕様上、アーカイブへの画像表示やレイアウトの調整が難しい部分がありましたが、その部分はJavaScriptで対応し問題なく運営できるよう構築しました。

サイトに訪れたユーザーに対し、強いブランドイメージを与えるため、画像を大きく使用しています。画像の切り替り動作・ディスプレイに合わせての拡大と縮小はJavaScriptで構築してます。商品一覧の表示はカテゴリごとに分割し、クリック時やスクロールの動作にもこだわり、こちらもFLASHではなくJavaScriptで構築しています。このサイトはEC機能を搭載されていますので、見た目ではわからないですが非常に高い技術で構築されています。

新商品の訴求はさりげなく、かつ分かりやすいように動きを加えた表示をしています。ブロック自体の表示・非表示の機能を、ブロック内の商品イメージにもスライド機能を与えユーザビリティとインパクトを併せ持つコンテンツとなっています。