ケーススタディ

パナソニックの地域密着型EC「ハックツ!」 コミュニティ消費の魅力を引き出す新デザインの狙い

地域に根ざした新しいEC体験を提供する「ハックツ!」。パナソニック ホールディングスの新規事業としてスタートしたこのプロジェクトは、単なるECサイトにとどまらず、地域の生産者と消費者をつなぎ、コミュニティを活性化することを目指しています。

2023年に神奈川県藤沢市と2024年に東京都世田谷区でサービス開始後、さらなる成長を見据えたリニューアルにグッドパッチがデザインパートナーとして参画。リブランディングも同時に行う中、どのような課題に向き合い、デザインを再構築したのか。

本記事では2025年2月にリリースされたばかりのリニューアルデザイン誕生のプロセスを追うとともに、「ハックツ!」が生み出す新たな価値と今後の展望を掘り下げます。

話し手:
パナソニック ホールディングス株式会社 モビリティ事業戦略室 コミュニティ消費プロジェクト 主幹 芦澤さん
パナソニック ホールディングス株式会社 モビリティ事業戦略室 コミュニティ消費プロジェクト 吉武さん
Goodpatch UXデザイナー 神
Goodpatch UIデザイナー 劉

地産地消から共助へ──ECを超えた「ハックツ!」の可能性

──改めて、今回リニューアルしたECサイト「ハックツ!」がどういったサービスなのか教えてください。

パナソニック 吉武さん:
「ハックツ!」は地元で生産された食品やコーヒー、調味料などの商品を集めたECサイトとして誕生しました。2023年5月から神奈川県藤沢市で、2024年9月から東京都世田谷区でそれぞれサービスを展開しています。

購入いただいた商品は個別に配送するのではなく、地域の「受け取りスポット」で受け渡すというのがサービスの特徴です。ちょっと遠くて不便だけど、おいしさや店主の魅力で通ってしまうパン屋さんやコーヒー屋さんってありますよね。一方で、地元のお店で買いたいと思っていても、忙しさゆえに日常的に足を運ぶのは難しいという方も多いかと思います。

「ハックツ!」は毎週火曜日までにECサイト上で注文したものを金曜日に受け取りスポットで受け取れるという仕組み。一般的なECサイトのサービスと異なる点が多いですが、地域における経済循環を生むと同時に、消費者が生産者とつながり、強固なコミュニティを作ることに挑戦しているプロジェクトです。

──「ハックツ!」はパナソニックによる新規事業プロジェクトですが、地元密着型のECサイトというアイデアが生まれたのには、どういった背景があるのでしょう?

パナソニック 吉武さん:
意外に思われるかもしれませんが、パナソニックは地域との繋がりをずっと大切にしてきたメーカーなんです。例えば、家電を売る「街のでんきやさん」というパナソニックショップがあるのですが、そこでも人柄とコミュニケーションの力で、地域に愛されるお店として販売を続けてきた歴史があります。

私も新人研修の際に配属されてお店に立った経験があるのですが、コロナ禍直後だったにもかかわらず、売上が好調だという話を聞いて驚きました。地域のお客さまと以前から関係性を築けていることが電話1本でお客さまのご要望に応えられるといった対応につながり、ときにオンラインや大型店よりも便利で頼もしい存在になることがあるんです。

パナソニック ホールディングス株式会社 モビリティ事業戦略室 コミュニティ消費プロジェクト 吉武さん

パナソニック ホールディングス株式会社 モビリティ事業戦略室 コミュニティ消費プロジェクト 吉武さん

──確かにコロナ禍で人の移動が減ったことで、地元や地域にスポットライトが当たるケースが増えたように思います。

パナソニック 吉武さん:
これから人口が減り、インフラの維持が困難になっていくのではないかという日本社会において、人々が助け合う「共助」がますます大事になってくると私たちは考えています。共助を仕組み化することで、社会の幸福度も増していく。その考えを家電から、より日常生活に近いところに落とし込んだものが「ハックツ!」のベースになっている考えですね。

コンセプトの発展に伴い、リブランディングを決意 ECサイトのリニューアルへ

──2023年にサービスをリリースされていますが、リニューアルを決められた経緯や当時の課題はどこにあったのでしょうか?

パナソニック 芦澤さん:
2023年5月に藤沢版をリリースしてから半年ほど経ったころにリブランドを含めたリニューアルを行うことを考え始めました。

リリース時は「地産地消」をコンセプトの柱としたECサイトという意味合いが強かったのですが、サービスを展開していく中で次第に「コミュニティ」や「共助」というワードとの親和性や重要性を感じるようになったのが大きいですね。当時はサービスの名称も変えることも検討していました。

──サービスの方向性が変わりつつあったわけですね。

パナソニック 芦澤さん:
それに伴い、サービス内容も変える必要が出てきました。例えば、それまで自分たちで行ってきた商品の仕分け作業を、地域の就労支援事業所に委託して福祉施設の方々と協業するなど、コミュニティを強く意識した取り組みに変えていったんです。

ECサイトをリニューアルするにあたって、最初のコンセプトを踏まえつつ、新たに加わったキーワードやその先の未来までも見据えた「ありたい姿」を問うところから始める必要がありまして。そのタイミングでグッドパッチさんにご相談しました。

パナソニック ホールディングス株式会社 モビリティ事業戦略室 コミュニティ消費プロジェクト 主幹 芦澤さん

パナソニック ホールディングス株式会社 モビリティ事業戦略室 コミュニティ消費プロジェクト 主幹 芦澤さん

──グッドパッチのお二人はプロジェクト当初、「ハックツ!」に対してどういった印象を持たれていましたか?

Goodpatch 神:
お話を伺って、素晴らしい取り組みだなと感じました。実際に私も福祉施設を訪問したり、スポットでの受け取りを体験したりして、地域を知ることが親しみだけでなく安心感に繋がると実感しましたね。自分自身が住む地域の生産者や販売所を知らないという点においても「ハックツ!」のサービスに興味を持ちました。

Goodpatch 劉:
私は外国人として日本を見たときに、どうしても人気のある場所やカルチャーに知識が偏ってしまう傾向があったのですが、このプロジェクトに参加したことで、街に根付いている文化や人と人の深いつながりを知り感銘を受けました。普段から忙しく生活しているユーザーさんたちに「ハックツ!」の世界観や思いを、いかにデザインで伝えられるかが重要だとプロジェクト当初から感じていました。

──グッドパッチ側から見たとき、リニューアルで着目した点はどういったところでしたか?

Goodpatch 神:
受け取り方法をはじめとしたサービスのコンセプトは異なるものの、形としては一般的なECサイトの姿をしています。普段からオンラインで購入することに慣れているユーザーはECに対するリテラシーが高いです。リニューアル前のサイトを拝見して、もっと親しみを感じられるようなユーザー体験にできると考えていました。

サービスの価値に共感してくれる人を増やすと同時に、利益を上げるということをデザイン視点でどうバランスよく実現させるかがポイントでしたね。

対面での会議でサービスの根底にある価値観を共有 リニューアルの方針がまとまった

──プロジェクトの進め方についてお伺いします。リニューアルにあたり、まず何から取り掛かったのでしょうか?

Goodpatch 神:
大きく2つあります。まずはリニューアル前のECサイトを含めた「ハックツ!」の現状の理解です。先ほど触れた、福祉施設や受け取りスポット訪問なども行いました。もう一つは、どんなユーザー体験にしていくのかというディスカッションです。

Goodpatch UXデザイナー 神

Goodpatch UXデザイナー 神

──キャッチアップ期間を経て、リニューアル方針がスムーズに決まったのでしょうか?

Goodpatch 神:
いや……それが、なかなかまとまらなくて(笑)。

パナソニック 芦澤さん:
当時、「ハックツ!」の世田谷拠点の立ち上げ、リブランド、そしてサイトリニューアルが同時進行していて、本当に慌ただしい時期でした。グッドパッチさんとのやり取りもオンライン中心だったのですが、こちらの意図をうまく言語化して伝えるのが難しいと感じていました。そこで、あえて対面での会議をお願いしたんです。

というのも、オンライン会議はどうしても一人ずつしか話せず、1対1のコミュニケーションに偏りがちなんですよね。複数人で参加していても、全体の議論が活性化しにくい。対面なら、空気感や表情の変化、ちょっとした相づちなどの“ニュアンス”まで共有できる。そうしたリアルな会話の中で、チーム全体で考えを整理し、前に進むきっかけを作れると思ったんです。

Goodpatch 神:
それまでオンライン中心で行ってきたことはこちらの反省点です。Web会議は同時に一人しか話せず、どうしてもコミュニケーション量が減ってしまうというデメリットがありますから。

対面でお会いした際、それまでの話を受けて私たちが考える「ハックツ!」のあるべき姿やリニューアル方針について言語化・図示した提案書をお持ちしたのですが、話し合う中で、これまでの議論してきた要素が、線のようにつながった感覚がありました。

パナソニック 芦澤さん:
当初は、私たちが目指している「ハックツ!」というサービスの本質や価値を、なかなかうまく共有できていない感覚がありました。ですが、神さんや劉さんと対話を重ねる中で、互いが抱えていた認識のズレやモヤモヤを一つひとつ整理し、言葉にしていくことができたんです。

その過程で、お互いの目指す方向が少しずつ重なっていき、チームとしての視界が一気に開けた。「伴走してもらった」というよりは、同じテーブルで真剣に向き合いながら、共に“ハックツ!”の輪郭を描き出せた時間だったと思います。

Goodpatch 劉:
デザインする側としても、芦澤さんや吉武さんからサービスに込められた意図を一つひとつ聞けたことが方針の糸口になりました。なぜ、受け取りスポットでの受け取るシステムなのか、なぜ受取日が金曜日なのか。コミュニティづくりへの意識や週末を楽しんでほしいという思い。「ハックツ!」の根底にある価値観を共有できたことで、意思疎通がスムーズになったと思います。

Goodpatch UIデザイナー 劉

Goodpatch UIデザイナー 劉

「ハックツ!」の世界観を具現化したデザイン提案、一発OKが出た理由とは?

──目指す方向性の合意が取れたあとは、リニューアルの具体的なデザインの提案へという流れですか?

Goodpatch 神:
そうですね。サービスのコンセプトやありたい姿についてワード整理をしたあと、その中でも大事なキーワードを抽出してマッピングを行いました。そこから2パターンのデザイン・トーン&マナー案をご提案したのですが、芦澤さんから一発でOKが出まして。うれしかったですね。

パナソニック 芦澤さん:
これは見た瞬間、すごいアウトプットを作ってくれたと思いました。ご提案いただいたデザインが本当に良かったので、こちら側でこねくり回すようなことはしたくなかったんです。「折衷案」ってよくあるじゃないですか。でもそれは中途半端ということでもあります。僕は劉さんのデザイン案に賭けたいと思いました。

──思い切った決断だと思います。具体的にどういったデザイン案だったのでしょうか?

Goodpatch 劉:
先ほどお話ししたように、ディスカッションを経て合意が取れていたので、ビジュアルの方向性はおよそ決まっている状態でした。その上で、パッと見たときに「親しみやすさ」や「ワクワク感」を感じてもらえるデザインを検討しました。

メインカラーは海、緑、土といった自然を想起させるカラーを抽出しています。さらに街のイメージを象徴するようなシティカラーを藤沢と世田谷それぞれに指定しました。文字組みやレイアウトは柔らかさを意識したもので、背景などに曲線を用いてワクワク感を表現しています。今回はリブランドでもあるので、「ハックツ!」がもともと持っている考え方を大事にしつつ、人と人のつながりといったコンセプトを体現するような、親しみやすいデザインを心がけました。

シティカラーとモチーフのトンマナ

シティカラーとモチーフのトンマナ

パナソニック 芦澤さん:
僕らが伝えていた、一般的なECサイトの提供価値と異なる「ハックツ!」の斬新性とありたい姿としての親しみやすさの両方がよく表現されていました。街ごとに異なるカラーもそうですし、背景に使われている曲線の柔らかさも、ECサイトにありがちな「とにかく買ってほしい」という雰囲気を和らげてくれています。思わず買ってみたくなる親しみやすさがありつつ、絶妙なバランスで。

──ロゴのデザインも劉さんがされたと伺いました。

Goodpatch 神:
実は、ロゴのデザインは最初の時点で依頼されていたわけではありませんでした。トーン&マナー案を検討していた際に、劉さんがしれっと新しいロゴを作っていて(笑)。プレゼン資料に入れたら、それを芦澤さんがいち早く見つけて反応してくださったんですよね。

パナソニック 芦澤さん:
見た瞬間に良いものだと感じましたし、デザインに込められた思いやストーリーを伺って、それがまさに「ハックツ!」を体現していると思いました。ワクワクする気持ちが伝わってくる波型の動きや、2つある「ツ」が、いわゆるニコちゃんマークの笑顔に見える。ロゴデザインからサービスの世界観が伝わってきます。ロゴだけでここまで体現するのはすごいなと。

「ハックツ!」のロゴデザイン画像

「ハックツ!」のロゴデザイン画像

──最初のスコープには含まれていなかったとのことですが、劉さんはロゴデザインをどういった思いで提案されたのでしょう?

Goodpatch 劉:
パナソニックのお二人から伺った、サービスに込められたストーリーやキーワードを整理しながら全体のデザインを検討していたら、テンションが上がってしまって(笑)。せっかくのリブランドですから、新たなコンセプトに合致するロゴが欲しいなと。

親しみを持ってサービスを利用いただくには、ロゴを見た瞬間にワクワクを感じてもらえるデザインが欠かせませんから。同時に提案した「ハックツ!」で購入した商品を入れる紙袋用のステッカーも採用いただき、うれしかったです!

「ハックツ!」の拠点モチーフ、ステッカー、SNS画像

「ハックツ!」の拠点モチーフ、ステッカー、SNS画像

──新たなデザインは、社内の他の方々からはどういった反応がありましたか?

パナソニック 吉武さん:
これまでオレンジ1色で構成されていたものから、意味の込められたさまざまなカラーを使用しつつ、柔らかな雰囲気になったことが好評です。私はプレゼン時にその場にいなかったのですが、資料で拝見してすごく「ハックツ!」らしいと感じました。目指す世界観がデザインやロゴにしっかり含まれている。社内でも芦澤さんがずっと「いいなぁ」と言っているのを横で聞いていました。

「ハックツ!」のデザインガイドライン

「ハックツ!」のブランドガイドライン

外部パートナーとの協働で得た視点と成果とは? 「ハックツ!」の挑戦は続く

──新規事業プロジェクトは自社内のリソースで完結させるケースも多いと思います。今回、グッドパッチのような外部のパートナーと協働するメリットをどんなところに感じられましたか?

パナソニック 芦澤さん:
まずは、事業を軌道に乗せるまでのスピードが圧倒的に上がることですね。新規事業立ち上げのために集まるメンバーは、事業のアイデアを磨き、サービスを開発し、改善していくという一連のスキルを必ずしも全て持っているわけではありません。各分野のプロフェッショナルの方々と組むことで、アウトプットの質が向上し、事業も大きく前進することを今回のプロジェクトで経験しました。

──足りない部分を補いながら、スピードアップが図れると。

パナソニック 芦澤さん:
ただ、プロフェッショナルの方々に甘えるだけの形ではダメです。その事業で何を実現したいのか、未来をどう描くのかという点は、私たちが軸を持っていなければ。そうでないと意見交換も議論もできませんから。

また、グッドパッチさんとの協働を通して、僕らのインプットも増え、新たな視点を得られたことも大きな変化でした。インプットや視点が増えれば、それらを整理してアウトプットを出すというサイクルも自ずと生まれます。メディアなど社外に発信する内容も変わりました。その点においても貢献いただいたと感じていますね。

パナソニック 吉武さん:
われわれのグループは製品を作る基幹事業があるため、社内では「新規事業を既存の事業でどう生かすのか」という視点の議論になりがちです。

主軸の事業と離れている「ハックツ!」は「それはパナソニックがやるべきことなのか?」という問いを度々投げかけられてきました。今回グッドパッチさんと協働する中で、先入観を持たない方々と議論することが、客観性を備えながら「ありたい姿」や「今やるべきこと」を明示することにつながった実感があります。

パナソニック 芦澤さん:
社内のメンバーだけでプロジェクトを進めると、どうしても前のめりになって、視野が狭くなりやすいところがあると思いますね。

プロジェクトメンバーの集合写真

──リニューアルしたECサイトが先日リリースされましたが、今回のグッドパッチとのプロジェクトに対する率直な印象をお伺いしたいです。

パナソニック 芦澤さん:
各分野のプロフェッショナルが集まり、同じベクトルを向いて進むということが質の高いアウトプットを生むのだと改めて思ってます。デザインの持つ力が、今回のプロジェクトでよく表現されていたと感じますね。リニューアル前のサイトは「直帰率が高い」という明確な課題を抱えていたのですが、今回のリニューアルで大きく改善されるはずです。それくらい納得のいく魅力的なデザインを作っていただいたと思います。

掲載する写真のクオリティの統一など、まだまだ課題はありますが、リニューアルデザインがECサイト全体のクオリティを底上げしてくれている。そこから生まれた利益で、次の改善に向けたステップを組むといった流れを作れたらと考えています。

パナソニック 吉武さん:
先日、加盟店の皆さんやお客さまにリニューアルデザインをチラ見せする機会があったのですが、「ハックツ!らしいね」というお言葉をいただくなど好評でした。サービスをよく知る方々にそう言っていただけたことで、グッドパッチさんが「仲間」として伴走してくださったことをうれしく思い返しました。

商品や加盟店写真を合わせたビジュアル

商品や加盟店写真を合わせたビジュアル

──ありがとうございました。最後になりますが「ハックツ!」の今後の展望について教えてください。

パナソニック 吉武さん:
「ハックツ!」は今後も変化していくと思いますが、礎になるところをグッドパッチのお二人と作り上げることができました。まさに畑を耕すところをご一緒いただいたので、われわれは軸となるコンセプトからいかに発展させていくかという、「水やり」の部分を次のフェーズで挑戦していきたいと思っています。

パナソニック 芦澤さん:
今後は「コミュニティ」「共助」といったワードに加えて、食品を扱う以上、「食の安全」についても取り組んでいきたいと考えています。具体的には、有機栽培の農家さんにスポットライトを当てて、環境や健康へ関心が高い方々に向けた啓蒙活動を含めた「ハックツ!」らしい選択肢を新たに提供できたらと現在動いています。

そういった新たなキーワードが加わった際にも、柔軟にコンテンツを拡充できるようなサイトの構造に作っていただいたので安心です。今回のプロジェクトでしっかりコンセプトを詰められたからこそ、ブレのない展望が描けています。グッドパッチのお二人とはこれで終わりではなく、パートナーとして、今後のプロダクトも含めて一緒に作っていけたらうれしいですね。

▼UI/UX改善点がよくわかるグッドパッチのDL資料(3点セット)成功事例が満載の人気資料集「UI/UX改善3点セット」