2014年4月16日

こんにちわ。kimonoです :-)

今日は、4/14に新たに大呉服祭特設サイトを加え、リニューアルオープンしました、オビタスターが運営する関連会社「呉服のまつかわや」の制作事例を紹介させていただきます。

全体を通して共通のデザインとしてあり、サイト間で違うシステムで移動しても、他のサイトに移動したと違和感のない作りとなっております。

また、現在どのサイトを閲覧しているかを明示的に色で表示することで迷子になることを防ぐような作りにもなっております。

呉服のまつかわや - 貴方は着物を十倍高く買っています。250年の信用と実績

【Zen Cart制作事例】
呉服のまつかわや – 貴方は着物を十倍高く買っています。250年の信用と実績

呉服のまつかわやブログ - 貴方は着物を十倍高く買っています。250年の信用と実績

【Geeklog制作事例】
呉服のまつかわやブログ – 貴方は着物を十倍高く買っています。250年の信用と実績

御福 まつかわや 大呉服祭 特設サイト

【Geeklog制作事例】
御福 まつかわや 大呉服祭 特設サイト

【Zen Cart制作事例】呉服のまつかわや – 貴方は着物を十倍高く買っています。250年の信用と実績

今回3つのサイトになり、統一したデザインになるため、デザインをリニューアルしてのリニューアルOPENとなります。

TOPページ中央部分は、定番ページを5つ用意し、そこに記載しているものが自動的にループ表示する仕組みとなっております。

グローバルナビカテゴリオープンタブ

上部のグローバルナビのタブにあります、カテゴリのボタンを押しますと、それぞれその下に存在しているサブカテゴリが下に自動的に表示される仕組みとなっており、分かりやすく、利用しやすい形となっております。

画像にマウスを重ねると価格の表示

TOPページ、および商品一覧(カテゴリ)ページでは、余計な情報をなくし、画像だけを一覧に表示するようにし、一目でどれがいいかを選択できるようになっており、いいなと思った商品にマウスを重ねることにより、価格が表示されるようになっており、情報過多になりがちな文字情報を削減し、直感的に分かりやすい商品一覧ショーケースを目指しました。更に画像をクリックしますと、商品の詳細ページに入ることができるようになっています。

商品詳細ページ上

商品詳細ページ下

商品の詳細ページでは分かりやすく枠と色目を使ってまとめ、必要な情報を閲覧しやすいようにしました。

 

「Geeklog制作事例」呉服のまつかわやブログ – 貴方は着物を十倍高く買っています。250年の信用と実績

こちらもデザインを統一のために、リニューアルオープンとなりました。

見た目や、色目、色合いもショップサイトや、呉服祭サイトと違和感のない作りとなっております。

iPad表示上

iPad表示下

iPhone表示

また、こちらのサイトは、iPadやiPhone、スマートフォン、タブレットにあわせてサイズが自動調整されて表示される「レスポンシブWEBデザイン」となっており、そのままスマートフォンやタブレットで表示することができるようになっております。

 

【Geeklog制作事例】御福 まつかわや 大呉服祭 特設サイト

最後にご紹介させていただきますこちらのサイトは、今回新しく作成させていただきましたサイトになります。

現在、年に3回行わせていただいております呉服祭(夏の浴衣や夏着物の呉服祭、秋の呉服祭、春の呉服祭)の特設サイトとなっております。

多くの皆様方にご来場いただき、ご愛好いただいております呉服祭の情報を一つのサイトにまとめさせていただきました。

過去に行われました呉服祭の様子を写真でまとめさせていただき、更に次の呉服祭の情報をいち早く知ることができるサイトとなっております。

TOPページ情報

TOPページでは各種情報が、静的ページ4つをループさせて表示させており、それぞれの静的ページを編集すると、変わる仕組みとなっております。

更にその下には、呉服祭へ向けての情報の投稿された記事が新着として表示される仕組みとなっております。

スマートフォン上

スマートフォン下

また、こちらのサイトも、「レスポンシブWebデザイン」となっており、スマートフォンやタブレットのサイズに応じて自動的に調整され、表示されるようになっております。

上部のメニューは、利用しやすいようにボタンとして折りたたまれていることが分かると思います。

 

ちなみに。

現在はリニューアルオープン記念としまして、まつかわやのネットショップでは、4/27まで

全品20%OFF! ※夏着物・夏帯・浴衣など一部商品は除きます。

ポイント2倍【10%還元!】

のセールを開催しているとのことです。

皆さん、是非ともご利用くださいませ :mrgreen:

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

コメントを投稿するにはログインしてください。