HTML 5

CSS 3/SASS

jQuery

Odoo

ELSA

ウェブサイトデザイン

ELSA は、Laboratoires Salem のために医薬品を医療関係者に販売するEコマースサイトです。バックエンド用に Odoo EPR/CRM を使用した同ウェブサイトのデザインと開発を私が担当しました。

in_browser
img-project-center

ホームページ構造のスケッチ

img-project-center

ホームページのモックアップ

ウェブサイトデザイン

クライアントと協力して、サイトの構造とコンテンツを決定しました。サイトマップは意図的に小さく浅めにし、ウェブサイトのナビゲーションがやりやすいようにしました。

同プロジェクトには、訪問者が Laboratoires Salem の販売する各種の製品を購入できるようにすることと、同社をユーザーに紹介すること、という2つの目標がありました。クライアントとのミーティングの後、私はほとんどのEコマースサイトで使われている従来方式の製品リストやスライダーとは違った構造を探し始めました。製品のリストを直ちに見せるのではなく、最新キャンペーンや新発売の製品、といった最重要の情報だけをまず見せるやり方を探していました。そうすれば、会社の紹介をきちんとできるようなスペースが十分に確保できると思ったのです。

クライアントにこの初期段階における方向性に満足していただいた後、フォトショップに移行し、忠実度の高い試作を作成しました

img-project-center
img-project-center

ホームページのモックアップ

製品リストのページでは、追加スペースを確保して特定の製品を販促したり最新の製品やキャンペーンを表示することができるようにしたほか、買い物カートに直接アクセスできるようにしました。製品はカテゴリーで見つけることができ、検索バーは製品リストのトップに見えるように置き、個々の製品をすばやく簡単に検索できるようにしました。

img-project-center

製品リストモックアップ

img-project-center

ショッピングカートページのモックアップ

開発

クライアントは Odoo をすでに他の業務で使われていましたので、ELSA サイトもこの既存のインフラストラクチャに統合できるようにすることを望まれました。

したがって同サイトは、バックエンド用に Odoo を、フロントエンド用に HTML と CSS/SASS を使って開発されました。Odoo は Python、XML、JavaScript、そして Odoo 自体のテンプレートエンジン言語Qwebをベースにしたオープンソースの ERP/CRM で、Eコマース対応機能も備えています。