Skip to content
淡いピンクの壁の前、薄緑のテーブルに置かれた白い鉢の若いオリーブの木。
#web

Olea Sacra

ストーリーで伝えるウェブサイトとオンラインショップ

> for olea sacraweb · 2017
01· プロジェクト
> Olea Sacra向けに開発

章立てで語る物語

Olea Sacra は、ゲツセマネの園から送られた若いオリーブの木の挿し木で育てたオリーブを、聖地を守るフランシスコ会への寄付と引き換えに届けています。そのウェブサイトは、何かをお願いする前に、まずその物語を伝える必要がありました。

私たちはサイトを7つの章で構成しました。各章は独自の色を持つ全画面で、引用と、手紙や写真、資料を開けるパネルがあり、章から章へはアニメーションで移ります。最後の章がショップです。木の本数と寄付額を選び、カードか銀行振込で支払い、原産地証明書とともに木が届くまで、注文をメールで追えます。その裏には、注文、請求書、発送を管理するバックオフィスがあります。

> cat /works/olea-sacra.md
種類WEB
クライアントOLEA SACRA
年2017
使用技術
  • Ruby on Rails
  • React
  • MongoDB
  • PayPal
  • SendGrid
  • Docker
#web
02· 数字で見る
7> 章
4> 注文から配達までのメール
2> 支払い方法:カードと銀行振込
03· しくみ
淡い緑の第1章。「Ocho olivos milenarios viven en el huerto de Getsemaní」、下に大きく「Olivos santos」。
01

読む

7つの章。それぞれに引用と、手紙や写真を開けるパネルがあります。

黄色の第4章。「Un olivo joven descendiente de los olivos santos de Getsemaní」と線画のオリーブの枝。
02

進む

アニメーションで次の章へ移ります。

デスクトップの購入ページ。「Comprar un olivo」、木の写真、本数と選べる寄付額。
03

寄付

木の本数と寄付額を選び、カードか振込で支払います。

スマホで見る同じ購入ページ。
04

追跡

支払いから配達まで、メールで注文の状況を知らせます。

04· クレジット
for olea sacra. DESIGN - WEB - E-COMMERCE. 2017

似たようなプロジェクトをお考えですか。必要なことをお聞かせください。

05· 次のプロジェクト
> cd /works/las-lomas-de-denia
Las Lomas de Denia> ウェブ
> navbar collapsed · scroll to the end
Crowtec