あなたのお役に立ちたいわんど。

焼きたては幸せの香り。マルコデュパンサイト制作秘話

宅配ボックスを確認するときは、サンタさんからのプレゼントが届いているか探しにいくときのようにワクワクした気分になるyuiです。いつの間にか自分もサンタクロースになっていましたが、今年もかわいい甥と姪にたくさんワクワクしてもらえるように頑張ります。

 

さて、あんどぷらすでは、静岡県内に3店舗を構えるマルコデュパンさまのECサイトをShopifyで制作いたしました!

本記事ではサイトの制作過程をまとめつつ、デザインや実装のポイントについてご紹介をしていきたいと思います。
サイトに載せきれなかった素敵な写真もたくさん登場しますので、ぜひお楽しみいただけたら嬉しいです。

マルコデュパンサイトの制作実績はこちら

マルコデュパン トップページのモックアップ

マルコデュパンのこと

いつでも焼きたてのパンを提供してくれる『マルコデュパン』は、静岡市清水区に本社を構える株式会社トークインコーポレーションさまが運営しているパン屋さんです。

聖一色店・清水店・焼津店の3店舗を展開しており、それぞれの店舗にはゆっくりとくつろげるイートインスペースやテラス席を設けています。また、聖一色店と清水店にはお子さまも楽しめるキッズスペースもあるんだとか。家族で行ってもゆっくり楽しむことができますね。

マルコデュパンのこだわり

オンラインでの打ち合わせが増えつつある現在ですが、今回は静岡の企業さまということもあり対面にて打ち合わせ。やっぱりお会いしてお話を聞くことができるのは「クライアントのことをきちんと知る」という観点においてもありがたいです。

地元の方々から愛されるパン屋 マルコデュパンさまのこだわりを、打ち合わせの際にご担当者の皆さまからたくさん教えていただきました。

自慢のスペイン石窯

マルコデュパンさまのことをお伝えするうえで欠かせないのが、聖一色店・清水店に設置されている自慢のスペイン石窯。なんとスペインから来日した職人によって組み上げられたんだとか。

ちなみにこの石窯の特徴は、炎の熱放射を閉じ込めて遠赤外線で包み込むように焼くというところ。おかげで、中はもちもち・外はパリッとした美味しいパンを焼き上げることができるそうです。

どちらのお店もパンを焼いている様子を見ることができる造りになっているので、訪れた際にはぜひ自慢のスペイン石窯を探してみてくださいね。

いつでも焼きたてをご提供

いつ訪れても焼きたての香りを楽しむことができるよう、1日に何度もパンを焼き上げているというマルコデュパンさま。
キャッチコピーに『焼きたては幸せの香り』とあるように、お店を訪れるとパンの香りに包まれてとっても幸せな気分になることができます。

実は先日訪れたときにも「クロワッサン、焼きたてです〜」と良い香りが目の前を通っていったので、ついつい買ってしまいました。

ECサイト制作のきっかけ

今回マルコデュパンさまがサイトを制作することになったきっかけは、訳ありパンを販売することでした。

心を込めて焼いたパンも、天気によっては売れ残ってしまう。売れ残ったパンはそのまま廃棄せざるを得ないため、フードロスにつながってしまいます。

そこで考えたのは、売れ残ったパンを急速冷凍してお得なセットとしてお客さまにお届けをするということ。

そんなマルコデュパンさまのご希望を叶えるために、当初よりお話を伺っていたディスタンス・インターナショナルさまがあんどぷらすにご相談をしてくださり、今回サイトの制作を担当させていただくことになりました。

制作メンバー

あんどぷらすの制作メンバーはこちら。

なお、今回はディスタンス・インターナショナルさまとご一緒に制作を進めていきました。

制作の流れ

制作の流れはこんな感じ。ステップごと分けていますが、実際はそれぞれオーバーラップしながら進めています。

*制作する内容・状況によって変化します。

ちなみにデザイナーのurarinは、ヒアリングをするときに「サイトを制作するきっかけ」や「どうしてあんどぷらすにご依頼してくれたのか」を伺うようにしているんだとか。

きちんと想いを受けとめるからこそ、制作の過程で行き詰まったときや迷ったときに立ち止まって原点を思い返すことができるそうです。

焼きたては、幸せの香り

さてさて、ここからはデザインを担当したurarinへのインタビューをもとに、制作過程やサイトのポイントについてご紹介していきたいと思います!

クライアントの先にいるお客さまを想う

− さっそくですが、サイトを制作するうえで特に意識したことはなんですか?

マルコデュパンさまのお客さまの層が幅広いため、誰にとっても見やすいサイトを心がけました。
例えば、メニューをあえて日本語表記にしてみたり。見たいページにすぐアクセスできるように、それぞれの情報の配置についても意識をしています。

日本語であれば、お子さまもインターネットが苦手なかたも迷うことなくサイトを使用していただけます。


− サイトからはどこかあたたかさや安心感があり、お店に訪れたときと同じような雰囲気を感じることができました。カラーやフォントなどを選ぶときにどんなところにこだわったのでしょうか?

はじめてお店を訪れたとき、建物の木のぬくもりや照明の雰囲気から暖色のイメージを受けました。また、パンの良い香りや店員さんの声は丸みのあるやわらかい印象だったので、フォントやカラーは優しさを感じられるようなものを選びました。
サイトでは常にロゴマークが表示されているので、ロゴマークに近い雰囲気のフォント・ロゴマークと統一感を感じられるカラーリングというのも心がけています。

urarin「フォントの曲線が、パンの湯気みたいじゃない…?」


− ワイヤーの段階で写真を多く使用したデザインだと感じたのですが、ここのこだわりやポイントを教えてください。

ここについてはディスタンス・インターナショナルさまともご相談したうえで、サイトを見てくれたひとがパンを食べたくなってもらえるようにしています。パン屋さんのいちばんの魅力はやっぱりパンですもんね。
今回はカメラマンさんがお写真を撮影してくださるとのことだったので、特にアピールしたいところはより領域をとってデザインしました。素敵な写真がたくさんあったのでかなり迷いました。


− 今回新たにパンのご紹介ページを設けていますね。なぜこのページを作ろうと思ったのでしょうか?

お客さまの声やスタッフのアイデアから新しいパンが生まれることもあるとのことで、豊富なパンの種類が魅力のひとつです。だからこそ、いろんなパンをサイトでも見せたいというご要望をいただきました。
そのため、メニューというかたちでページを作って、パンの種類ごとに見ることができるようにしています。

わたしのちょっとしたこだわりなんですけれど、ご紹介ページでカテゴリーを選んだときに表示されるアイコンをトングにしているんです。パン屋さんでパンを選ぶときみたいに、好きなパンを見つけていただけたら嬉しいです。

選択している「全ての商品」の上にあるアイコンがトングになっています。

ちなみにトップページでは最新の登録した10件が表示されるように実装していただき、毎回サイトに訪れるたびに違うパンに出会うことができる仕組みになっています。

クリスマスのパンたちが並んでいました。


− サイトを制作するうえで、特にここは伝えたいと考えていたことはありますか?

どこも伝えたいけれど、ピックアップするとしたらランキングです。
ここはディスタンス・インターナショナルさまよりご提案いただいたページで、マルコデュパンのスタッフの皆さんがランキングを考えて不定期で更新をするコンテンツになっています。
スタッフの皆さんも参加して創っていくページだからこそより注目していただきたいと思い、パンのイラストをいくつか描きました。写真でも良かったのですが、イラストの方がマルコデュパンさまのやわらかい雰囲気が伝わるかなと考えました。

かわいいパンのイラスト。今後ランキングでさまざまなパンが登場する予定なので、いろんなパンを描いてみたそうです。

足を運んでこそ感じられること

今回の制作ではカメラマンさんにお願いをして「パン屋さんの朝」の様子を撮影するとのことだったので、朝の4:00に集合をして私たちも見学をさせていただきました。そう、皆さんもご存知の通りパン屋さんの朝はとても早いです。

まだ夜も明けない時間から静かに準備をはじめるパン屋さん。
朝の準備の様子を見ることができる機会はなかなかないので、こういった機会をいただけたのはとても嬉しかったです。


− 実際にパン屋さんの朝の準備の様子を見学させていただいたことで、制作するうえでの心境の変化などはありましたか?

朝4時にパン屋さんに行く機会はないので、そんなにも早い時間からパンを作っているスタッフさんの真剣な眼差しを見て、サイトを作ることでこの人たちにも喜んでもらいたいなと思いました。また、朝早くから心を込めて作っているパンを世の中のさまざまな人に伝えるためのサイトを作ることができるんだなと、より気合いが入りましたね。

私たちが見学したのは開店までの2~3時間だったのですが、イートインスペースや石窯など店舗の様子もじっくりと観察できたので、そういった部分でもかなり参考になりました。

せっかくなのでこんな質問もしてみました。

− 見学しているときにいろんなパンを見たと思うのですが、気になったパンを教えてください。

そうだなあ… 帽子パン、美味しそうでしたね。あと、ハムチャボとフランキーボーイも気になります。ネーミングががかわいいですよね、ハムチャボとフランキーボーイ…(微笑み)

トップページで使われているこのパンがハムチャボ。

ここだけのお話

インタビューのときに「誰も気づいていないかもしれないんだけれど、ちょっとこだわり伝えてもいい?」とやや照れながら、サイトに隠したこだわりを教えてくれたurarin。

実はランキングのイラストに使用しているこの王冠、ちょこっとだけマルコデュパンさまのロゴに寄せてデザインしたんだそう…!

たしかに言われてみるとロゴのコック帽のところと似ている…!隠れマルコです。

誰も気づかないかもしれない、でもちょこっとこだわりたい。そんなurarinの制作への想いが垣間見えた瞬間でした。
ぜひ皆さんも隠れマルコ、探してみてくださいね。

まとめ

サイトの制作秘話、いかがだったでしょうか?

ユーザーにはなかなか届かない魅力の部分まできちんと理解をして、Webサイトというかたちで届けていくのが私たちの役目だと思っています。

マルコデュパンさまのパンひとつひとつに込められた小さな手間と愛情が、サイトを通じてより多くのひとに届きますように!
わけありロスパンセットもぜひチェックしてみてくださいね。

マルコデュパン ECサイト

それでは、次の記事をお楽しみに〜!

< すべての記事を見る >

Web制作の株式会社あんどぷらす
ECサイト構築サービス「ウルトコ」
イベントスペース「fuigo」
CS-Cartの情報ポータル「STOCK」