2024-10-23
あなたのお役に立ちたいわんど。
好きの輪を広げたい。ぱん屋ハードケーサイト制作秘話
あんぱんは粒あん派mokaです。
あんどぷらすでは、静岡市に店舗を構えるぱん屋ハードケーさんのECサイトを制作いたしました。
制作実績はこちらから。
本記事では、ハードケーさんのサイト制作過程を踏まえつつ、デザインや実装のポイントなどご紹介していきたいと思います。
あんどぷらすではクライアントの制作秘話を記事にしています。よろしければ他の制作秘話記事もご覧ください。
ぱん屋ハードケーのこと
名前とおり、主にハード系のパンを扱うパン屋さんです。
2019年の7月に設立、9月にオープンしたのでまだまだ新しいパン屋さん。ちなみにロゴのマスコットキャラはハード君です。よく見るとなかなか奇抜な格好をしていてかわいいです。
まずは「クライアントを知る」ということで制作チームでお店に伺うことにしました。
クライアントを知る
あんどぷらすでは極力、クライアントの商品やお店を見る・触れるということを大切にしています。
今回、お店に伺ったのは代表のmmochiさん（社長）、制作を担当するakiさん、kanaさん、取材のためmokaがお邪魔しました。
フロントエンドエンジニアのkaneさんも制作チームですが、店内が密になってしまうことも考え今回はお留守番に。すみません。。。しっかりお話聞いてきます！
静岡市の街中からは少し離れたところにあります。車で伺いましたが、駐車場がお店より少し離れているので、車でお店に行く方は注意してください。
この日はとてもいい天気で気持ちが良かったです。
おしゃれな建物が住宅街に突如現れます。ナチュラルな雰囲気が素敵です。
店内に入るとパンの良い香りが漂ってきます〜〜。幸せ。
パンの種類もたくさんあり、何を注文するか迷ってしまいます。
商品名が書かれたポップの文字もハード感がありこだわりが感じられます。
お店のスタッフさんも気さくで良い方ばかりでした〜！優柔不断な人（わたし）にも優しいお店です。
ここは2階のイートインスペース。1階の店舗で購入したパンをこちらでいただくことができます。
イートインスペースを利用するにはドリンクを頼むことが必須になっているので気をつけてくださいね。
この日はサイトの打ち合わせということで店長の大室さんご夫妻にお話を伺いました。
ハードケーのパンへのこだわり
ハードケー店長の大室千晴さんと代表の大室健さんです。
ぱん屋 ハードケーは名前の通りハード系パンの専門店。
「せっかく食べるなら、美味しくて身体に良いものを。心も身体も喜ぶパンを」という思いでひとつひとつのパンを丁寧に作っています。
ハードケーさんのパンは添加物を極力使用していません。
そのため、一般的に売られているパンよりも食物繊維・ミネラル・ビタミンなどが多く含まれおり、美味しくて身体も喜ぶパンができると言います。
一般的に売られているパンと具体的に何が違うのでしょうか。
一般的なパンの制作手順は以下のとおりです。
ドライイーストを使うと安定して発酵するため、たくさんのパンを早く作りたい規模が大きなお店でよく使われます。1時間から2時間でパンが出来上がりますが、そのぶん小麦の味わいや旨みの少ないふかふかのパンになります。
一方、ハードケーのパンは以下の工程で作っています。
ハードケーでは、酵母も自家製で手作りする天然酵母にこだわっています。
微量の酵母を低温で長時間発酵させることで、小麦の風味を最大限に引き出すことができます。じっくり発酵することで生地からうまみ成分がでて香りの高いパンになります。天然酵母は酵母に使った素材の味わいも加わるため、深い味わいのうまみとなります。
※パンのベンチタイムとは 生地を分割し丸めた後、弾力が強くなってのばしにくくなった生地を休ませる時間のことです。ベンチタイムをとることで生地がゆるみ、無理なく生地を伸ばすことができる。
時間や手間を惜しまず、ひとつひとつ丁寧に作ることがハードケーさんの美味しさの秘密なのですね。
なぜハード系パンに特化したお店をオープンしようと思ったのですか？
元々、わたし自身ハード系のパンが好きだったということもあるのですが、静岡でハード系のパンを作っているお店が少ないなと思っていました。
パン屋さんで働いていた際に、ハード系のパンが好きで来店してくださる方は、ある程度こだわりのあるパンが好きなお客さまが多い印象がありました。そんな「パン好きが集まる」お店にしたかったんです。
ターゲットを絞ったことで、ハードなパンを食べたい方がピンポイントで購入してくれたり、リピーターも多い気がします。
そんなハードケーさんですが、「パン好き」の方々にお届けするからこそ、妥協できないこだわりをお持ちです。今回は素材・具材・酵母の三点についてご紹介していきます。
素材へのこだわり
石臼でゆっくり丁寧に挽かれた２つの石臼挽きの小麦粉を使用。
一般的にはロール挽きという大型の機械で圧力をかけ、高速で小麦を粉砕していく製粉方法だという。ロール挽きは素早く、大量の小麦を挽くことができるが、小麦が鋭く削られて高熱がかかるため、小麦の風味や香りが飛んでしまう。
一方ハードケーさんで採用している石臼挽きは、石臼でゆっくり丁寧に挽かれた小麦であるため、熱による酸化が少なく、粉そのものに奥深い味わいが出る。
2種類の小麦粉のうち1つは甘みが強く、もう1つはコクがありそれぞれ単体でも美味しいですが、いろいろな人が食べやすいようにパンに合わせてそれぞれブレンドして使用している。
具材へのこだわり
ハードケーさんでは、パンを安心して食べていただけるように、パンに入れる具材もこだわっている。
例えば、ハードケーさんで販売しているパンの9割には油や卵、乳製品を使用していない。柔らかさを出したいときは、代わりに白いごま油を使用したり、マフィンなどのお菓子にもバターや牛乳は使用せず、ごま油や豆乳を使用している。
素材はスタッフの皆さんで味見をしたり、何種類も食べ比べなどをしてこだわって選んでいます。また、手間のかかるパンの中に詰める具材もすべて手作りとなっています。
酵母へのこだわり
ハードケーさんでは「自家製天然酵母」を使用しています。
このようにレーズンをはじめとした様々な食べ物からゆっくりと時間をかけて天然酵母を作っています。
天然酵母は酵母の他にも乳酸菌などの複数の微生物が共生しているため、イーストにはない味や風味に深みが生まれます。併せて、酵母の材料に使った素材の味わいも加わり複雑なうま味を味わうことができるといいます。
この他にも天気や気温・湿度に併せて焼き加減など微妙に調整したり、酵母の元気を見て発酵時間を変えるというお話を聞いて、言葉選びからもひとつひとつのパンを「物」ではなく「ひと」と会話するように愛情を持って作っているということを感じました。
パンが好きな人が多く集まるハードケーさんだからこそ、ひとつひとつの素材にこだわり、見えない部分にも気を使っているのです。
ちょっと小話
ちなみにこの日は行けなかった社内のメンバーにもお土産のパンを購入。
美味しそうなパンを吟味する一同。
この日はおやつでパンを食べちゃいました。幸せな1日でした。。。
ここからは、あんどぷらす制作メンバーにもお話を伺ってサイトのポイントなどをご紹介していきたいと思います。
パン好きが集まる場所
店長の大室さんがハードケーパンが好きということ、静岡にハード系のパンを扱っているお店が少ないことから「ぱん屋ハードケー」をオープン。
SNSでパン屋さんを見るのが好きだったと言う大室さん。お取り寄せができたら全国の方に買っていただけるな。と気になっていた矢先、2020年コロナウイルスの感染拡大。
ハードケーさんも出店予定だったイベントが立て続けに無くなり、売り上げ自体落ち込んでしまいました。お家でもパンを楽しんで欲しいという思いからECサイトの立ち上げを決心。
ハードケーさんのこだわりと天然酵母や素材にこだわったパン作りをされているということからサイトのイメージはシンプル、ナチュラルな印象のなかにこだわりを感じられるようなイメージで本サイトは制作しています。
制作メンバー
今回制作を担当したのはkanaさん、kaneさん、akiさんです。
体感したからこそできるデザイン
今回は制作前に店舗に伺いましたが、印象が変わったり制作する上で心境の変化などありましたか？
実際にお店に行ったことで、店舗の内装やショップカードなど細部からもハードケーさんのこだわりを感じることができました。
TOP写真下のグレーは当初、もう少し薄い色だったのですが、ハードケーさんに伺った際に店舗内装にコンクリートを多く使っていたこと、ハードケーさんのショップカードの色も濃いめの灰色だったのでトーンを落とし、濃い灰色にしました。
また、実際にお店で購入したパンを食べたのですが、本当に美味しくて感動しました。
パンが冷めても香りがずっと続いていたんです。家でトーストして食べましたが、再びふわっと香りが広がって。何度も楽しめるパンでした。
そのこだわりやおいしさをサイトでも伝えたいなと思いました。
「美味しさ」をサイトで表現すること難しいと思うのですが、具体的に教えてください。
もちろん、味覚をサイトで伝えることはできませんが、「視覚」からおいしそう！と思っていただくことはできると思っています。そういう点から意識したのは色使いです。
パンの色が茶色なので、暖色系の色を入れるとパンと同系色になってしまいます。そうするとパンよりもポイントとなるカラーが目立ってしまうのではないかと思いました。
かと言って、寒色系の色はパンが美味しく見えなくなってしまうことも考えられます。ハードケーさんのパンを食べて本当に美味しかったので、パンを活かす色としてグレーを選び、パンが主役として「もうひとつの色」となるような配色にしています。
硬いけど、堅くない
今回のサイトでは、かっこいい雰囲気の中にも余白やフォント・色使いからどこか品を感じます。
ハードケーさんのパンは”硬いけど、堅くない。”そんな印象を受けました。
パンはハードで本格派だけど、お店やスタッフさんの雰囲気やお客さんを思って素材にこだわっている姿勢などから「柔らかさ・優しさ」を感じていました。
こちらのパンの値段はこだわりがあるからこそ、少し高めの値段設定ということ、そして食事と一緒に食べられるパンということも伺っていたので他店との差別化として、パンはハードだけど、どこか品のあるデザインにしました。
例えば、TOPのヘッダー（サイトの上部）で使われている透過した部分。 こちらはすりガラスのようにしたくて、エンジニアのkaneさんにお願いしました。
通常の透明度を落とした白ではなく、ショーケースにパンが並んでいるイメージですりガラス風に実装していただきました。
こちらはCSSで実装しています。TOPページ意外にもボタンなどちょっとしたところで実装しているので、ぜひ探してみてください。
サイトで使われているアニメーションがゆったりとした動きのものが多いですね。
アニメーションで特に叶えたかったのは、各ページに飛んだ際に出るタイトル表示のアニメーションです。
グレーの長方形がスライドで出て、そのあとにテキストが表示されます。（下記動画参照）
実は個人的にイメージしたモチーフがあって。長方形がスライドで現れるアニメーションはパンを伸ばしたときのイメージ。テキストがふわっとしたから表示されるのは、パンが焼き上がった様子をイメージしています。
そういったさりげないこだわり、素敵です！サイト内にもパンがたくさん散りばめられていますね。
オリジナルのパンがたくさんあるので、せっかくならサイトでも見せたいと思いました。ラインナップタブを開くとパン・おやつ・ギフト・グッズのアイコンもハードケーさんで販売している商品の写真を使っています。個人店でオリジナルのものを作っているからこそできることでした。
TOPページのパンをふわっと浮かせたいということだったので、パララックス（視差効果）で動きを出しています。あまり動かしすぎてしまうと、テキストよりも動きに目がいってしまうので、あくまでテキストを生かしたさりげない動きにしています。（動画参照）
使う人は誰かを見極める
スマートフォンでECサイトをご覧になる方も多いと思うのですが、スマホの表示でこだわったところなどありますか？
ハードケーさんのロゴは縦長なのですが、スマホで表示するとどうしてもロゴが占める割合が高くなってしまいます。
そこでTOP以外のページではハードくん無しの横長ロゴに変更しています。でもハードくんありきのロゴがもちろん素敵なので、TOPページではそのままの形で使用しています。（PCも同様）
また、スマートフォンではPCよりもパンの表示数を減らしています。
スマートフォンになった際はパンが少ない分、視線に動きを出したかったので配置にこだわりました。
要所要所で背景に使用されているアイテムは、ハードケーさんの厨房にあるタイルとお聞きしたのですが、それはどうしてですか？
ハードケーさんのInstagramを見るとパンが撮影されている場所が同じだなと気がつきました。
お聞きしたところ、店舗のカウンターの大理石ということがわかって、是非これを生かしたいなと。ハードケーさんはInstagramのフォロワーが多いので、InstagramからECサイトに訪れたお客様が「どこかでみた事ある」と気付いてくれたら嬉しいです。
Shopifyでの構築となりましたが、Shopifyならではの機能はあるのでしょうか。
Shopifyでの構築が重なり、ナレッジが溜まってきたのでとても気持ちよく作れました。デザインも素敵だったので、見せ方にこだわって実装ができたと思います。
特に、アニメーションはデザイナーさんやディレクターさんとイメージのすり合わせをしながら作っていきました。
本サイトでは、見せ方としてレイヤーを効果的に使っています。イートインスペースの解説部分はレイヤーを何枚も重ねて奥行きを出しています。
サイトの制作秘話を聞いて、シンプルな中にも随所にこだわりを感じました。
ハードケーさんが日頃当たり前に行っているお客さんへの心配りや優しさがサイトにも現れているようです。何というか、「わざとらしくない、飾らないかっこよさ」がこのサイトでも表現できたのではないでしょうか。
サイト制作を終えて
サイト制作を終えて、大室さんご夫妻にサイトの感想を伺いました！
サイトを作る上で、実店舗とのイメージを一致させたいという想いがありました。しかし、はじめてのECサイト開設と言うこともあり、何から始めたらいいのか、どこからどこまで自分でやっていいのかがわからなかったんです。
また、来店してくださったお客さまと交わす会話がECサイトではできないので、直接お話しできない分ハードケーがこだわっているところも紹介できたらなと思っていました。
今回のサイトでは、ひとつひとつ細かい部分まで質問してくださったので、イメージのすり合わせが上手くできました。お店の雰囲気ももちろんですが、ハードケーのパンのこだわりなどもわかりやすく簡潔にまとめてくださって、想像以上のすごく素敵なサイトになりました！
まとめ
今回のサイト制作秘話はいかがだったでしょうか。
その道を極めている方って、こだわっていることが「普通」になっていて特別なことをしていることになかなか気がつけないんです。だからすごくかっこいいのですが、私たちのように何も知らない人からすると、そういう情報って知りたいし知ったらより買ってみたい！と思う気持ちになる気がしませんか？
だから、私たちはWebサイトを通じて魅力を伝えるお手伝いをしたいと思っています。
パン好きな方が集まるお店のECサイトにさらにパン好きの皆さんが集まったら嬉しいです。
よーし、明日の朝ごはんはパンにしましょうかね。
あんどぷらすのSNS
投稿者プロフィール
- 文字に一生片想ゐ。
最新の投稿
コラム2023.02.21あんどぷらすのオフィス遍歴
コラム2023.02.09HACK BERRY制作秘話
レポート2022.12.21新ものづくり・新サービス展に出展しました
コラム2022.12.09あんどぷらすの職種別1day仕事体験
シェア・購読で応援していただけると喜びます：）
こちらもおすすめ
