世界にひとつを贈る。MARRIEJOIERサイト制作秘話

2021-03-31

知らぬ間に部屋に植物があふれているmokaです。

あんどぷらすでは、オーダーメイドキャンドルを販売するMARRIEJOIER（マリージョア）さんのECサイトを制作しました。

今回はこちらのサイトのポイントを追いながら制作秘話をまとめていこうと思います。

あんどぷらすではクライアントの制作秘話を記事にしています。興味がありましたら、ぜひご覧ください。

あんどぷらすの制作秘話

MARRIEJOIERのこと

MARRIEJOIER（マリージョア）はオーダーメイドキャンドルを中心に販売するギフトブランドです。

こちらのMARRIEJOIERのキャンドルを取り扱っている店舗が、福岡県糸島にあるキャンドルとワークショップのお店「JoieR（ジョアール）」さんです。

糸島市は自然豊かな土地で綺麗な花々が有名です。

（画像：糸島市観光協会公式HPより）

ECサイトで叶えたかったこと

MARRIEJOIERの田中さんにECサイト開設にあたり、叶えたかったことを伺いました。

田中さん（仮面）：一番叶えたかったことは、世界に一つだけのものを作れるオーダーメイドの良さをネット注文で実現させることです。
工場で作られた商品と違って、一つ一つ手作りのためデザインや個性が商品によって微妙に違います。
この個性を活かせるように素材を組み合わせるオーダーメイドの仕組みを構築していただきたいなと思っていました。
お問い合わせフォームやメールベースでオーダーメイドキャンドルが作れるサイトはありますが、素材選びから香りなど全てサイト内で完結するサイトはあまり見ません。

ストーリーのある贈りものを。MARRIEJOIERのサイト制作

MARRIEJOIERさんのサイト制作するにあたり、商品が「オーダーメイドのキャンドル」ということで主に意識したキーワードは以下の二点です。

・ストーリー性

・ギフトブランド

制作メンバーの皆さんにインタビューし、サイトのポイントなどご紹介していきたいと思います。

制作メンバー

今回のサイト制作メンバーはディレクターのakiさん、デザイナーのchinaさん、フロントエンドエンジニアのkaneさんです。

オーダーメイドで世界にひとつを叶えるために

花言葉や色合いなど、相手を想ってつくりあげるキャンドルを大切にしているMARRIEJOIERさん。

今回オープンしたサイトは淡い色合いで繊細なデザインが印象的なサイトです。デザイナーはどんなところにこだわってデザインしたのでしょうか。

MARRIEJOIERさんで販売されているキャンドルに使われるお花は福岡県糸島産のお花です。糸島では自然が豊かな地域で一年を通して四季折々のお花が栽培されています。

そんな中、コロナウイルスの影響でイベントが相次いで中止となってしまいました。お花はイベントの際に贈られるものが多いため、糸島の花生産者さんが大切に育て上げたお花が行き場を失っている状況が続いていました。実店舗のJoieRでも市場に出荷できないお花や廃棄予定だったお花を買い取り、ドライフラワーにしてアレンジメントに取り入れるなど少しでも力になれないかと模索していましたが、実店舗のみではお届けできる範囲が限られていたのです。
そこで、お花を使ったキャンドルを全国で販売することができれば、お花の新しい楽しみ方を提供できると思い立ち、クラウドファンディングを実施することを決めました。
コロナで苦境のお花業界を助けたい！全く新しいお花の楽しみ方を全国で展開！

そういったMARRIEJOIERさんの国産である糸島のお花を使っているという安心感や、天然の素材である植物を使用しているということから、ナチュラルで優しい印象のサイトにしたいなと思いました。なので色合いも優しい色で統一しています。

花言葉から「相手を想って」オーダーするというストーリー性も大切にされているというMARRIEJOIERさんでしたが、ストーリー性を表現するために工夫したことはありますか？

全体的に余白を多くとっています。テキストの色も黒ではなく、グレーにすることで淡い色や世界観にあったデザインとなるようにしました。

サイト内の動き（アニメーション）も相まって、童話の世界に入ったような優しい印象を受けました。サイト内のコンテンツの動きはデザイナーさんが指定するのですか？

イメージに近いサイトのURLをエンジニアさんに送ったり、ふわっとフェードインして欲しいなど言葉でざっくり伝えることもあります。

デザイナーとフロントエンドエンジニアの息が合っていないとできないことですね。。。

今回のMARRIEJOIERさんのサイトでは、キャンドルの美しさがスッと落とし込まれた綺麗なデザインになっていたので、デザイナーさんが作った世界観を崩さないように気をつけました。
アニメーションでいうと、サイトに入った際、TOPページが表示される前の読み込み途中に二重アニメーションを入れました。これはデザインを見てこのアニメーションを入れたらもっと世界観を表せるのではないか？と思ったので、デザイナーさんに提案してイメージを固めていきました。

ECサイト上でオーダーメイドキャンドルが注文できるというサイトはなかなかないと思うのですが、オーダーメイドならではのこだわりはありますか？

オーダーメイドということで、どうしても説明しなければいけないことが多いということですかね。説明が多い＝テキストの量が多いということなので、全て掲載してしまうとその分たくさんスクロールしなければいけなくなってしまいます。

そこで、スクロールを減らすためにもオーダーメイドページはタブボタンで切り替え、なるべく簡潔にわかりやすくしました。

確かに、お花やワックスの種類、香りなど世界にひとつだけのものを作るからこそ、必要な説明がありますよね。

今回、CS-CartではなくShopify（ショピファイ）での構築でしたが、特に苦労した点などあれば教えてください。

CS-Cartではできる機能がShopifyではできなかったり、なかなか癖があって手強いプラットフォームだなと思いました。

ShopifyとCS-Cart、お客様に提案する際はどういった使いわけをしたら良いのでしょうか。

難しいカスタマイズをしないならばShopifyが良いかと思います。ただ、海外製のプラットフォームなので、日本のサイトではメジャーな配送希望日指定や欲しいものリストの機能などが備わっていません。追加でShopifyのアプリを入れなければいけないので、たくさんカスタマイズしたいという方には自由度の高いCS-Cartが良いかと思います。