ホーム » ビジネスブログ » アークウェブ »

アークウェブのお手伝い事例:洋菓子・パンの「ラ・テール」様ウェブサイトのリニューアル(Zen Cart+Movable Type)

2009年4月24日

アークウェブのお手伝い事例:洋菓子・パンの「ラ・テール」様ウェブサイトのリニューアル(Zen Cart+Movable Type)

カテゴリー: アークウェブ

投稿者 小森

小森です。こんにちは。

東京世田谷を基盤に、素材にこだわった洋菓子とおいしいパンを作り続けている、ラ・テール様のウェブサイトがリニューアルオープンいたしました。
ラ・テール様は、お菓子好き/パン好きの方にも定評のある、地元のみならず全国に根強いファンの多い人気ショップです。

自然素材にこだわった大地の菓子・大地のパン | LA TERRE ラ・テール
http://www.laterre.com/

laterre_top.jpg

開発期間:2009年3月~4月
担当範囲:Zen Cart/CMS設計および実装、マークアップ、システム開発(JavaScript, PHP)、過去記事コンテンツ移行

3年前のリニューアル時に引き続き、今回もアークウェブが開発を担当させていただきました。

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

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

リニューアルの目的

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

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

いたしました。

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

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

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

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

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

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

laterre_patisserie.jpg ラ・テール洋菓子店 laterre_boulangerie.jpgブーランジェリー ラ・テール laterre_terrasaison.jpg テラ・セゾン laterre_artisan.jpg アルティザン・テラ laterre_maison.jpg ラ・テール メゾン laterre_online.jpg オンラインショップ


レイアウト

laterre_wire.gif

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

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


その他のポイント

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

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

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

投稿者 小森 : 2009年4月24日 16:15 | append.gif | delicious_s.gif | このエントリをRetweetする

タグ: ECサイト , Zen Cart , Movable Type , オンラインショップ , Ajax

この記事は参考になりましたか?

参考になった!

トラックバック

このエントリーのトラックバックURL:
http://www.ark-web.jp/blog/mt-tb.cgi/486
【!】本記事への言及がない記事からのトラックバックは、削除する場合があります。


MTプラグインA-Form
ARK-Web×CSR(企業の社会的責任)
みんなの声で選ぼう だれもが使えるウェブコンクール

アークウェブの
自社サービス

ecoったー
Twitterで毎日エコ!
necoったー
Twitterでnecoを飼おう!
Miqqle
「ちょっといいこと」+お得にショッピング

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

人気記事
ランキング

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

RSS配信

 

アークウェブの最新情報

アークウェブのメルマガ(準備中)

アークウェブでは、ウェブのお役立ち情報や新サービスのお知らせなどをお届けするメールマガジンの発行準備中です。ぜひご登録ください!
個人情報保護方針

メールアドレス登録

変更・解除

メールアドレス変更

メールアドレス登録解除

登録に戻る

最新情報・投稿をチェック

  • twitterで最新投稿をつぶやきます
  • friendfeedでフィードをまとめて
  • Tumblrで最新クリップ

サービスおよびソリューション一覧



このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Open Source4.1