アークウェブのブログ

※前回のブログ記事もご覧ください

ラ･テール様のWebサイトリニューアルをお手伝いしました : アークウェブ ビジネスブログ
https://www.ark-web.jp/blog/archives/2006/07/post_19.html

リニューアルの目的

今回のリニューアルにあたり、

• 新たに2つの新ブランド（店舗）の情報と商品を追加
• ブランド追加に伴い、デザインとレイアウトを見直し、よりブランドの存在感を強めた構成に変更

いたしました。

システム面では、前回開発したシステムを踏襲して、

• 商品カタログとEC部分には引き続きZen Cartを使用
• コンテンツの更新にはMovableType（4.25）を使用

しています。
ベースのシステムがあったこと、テンプレートシステムの活用、お客様の協力体制もあり、1ヶ月という極めて短期間でスピード構築することができました。

デザインのバリエーション

以前よりブランドが増えたこと、扱う商品に重なりがあること、打ち出したいイメージも若干違うということから、ひとつのマナーのもとに束ねるというより、よりブランドイメージを差別化し、存在を打ち出していく形に方針を定めました。

共通のテンプレートを使用しているため、レイアウト構成は同じである必要がありました。そこで色使いやフォント使いなど、あしらいの面でブランドごとの差別感を与えながらも全体として統一感がある、というデザインを目指しました。以下がそのバリエーションになります。
アナログ感を生かしたデザインは今回も健在です。

ラ・テール洋菓子店

ブーランジェリー ラ・テール

テラ・セゾン

アルティザン・テラ

ラ･テール メゾン

オンラインショップ

レイアウト

今回は対象画面解像度を上げ、横960pxで制作いたしました。
商品写真は前回から比較的大きめのものを使用していたのですが、それを活かし、コンテンツエリアは横いっぱいを贅沢に使用し、情報をゆったりと見せています。

構造的にも、視線の流れを考慮し、横にカラムを分けるのではなくリンクを下に集めることで、ほかの商品やページに横移動しやすく、回遊しやすい構造といたしました。

その他のポイント

• 店舗トップに外部ブログ・お知らせをインクルード表示し、各店の最新情報をわかりやすく提示
• jQueryによるスライドショーを使ったフィーチャーエリアを設け、訴求力アップ（そのときフィーチャーしたい内容により、件数可変に対応）
• MTを3.2から4.25にアップグレードし、担当者による更新性アップ

などなどありますが、全体として世界観を伝えながら、より情報のわかりやすさが向上したサイトになったと思います。

ラ･テールさんのおいしい洋菓子やパンは、世田谷・東京駅の店舗のほか、渋谷東急でも販売しています。もちろん、オンラインショップでも（一部商品ですが）販売しておりますので、こだわって作られたお菓子やパンを、ぜひご賞味ください！