東京都北区滝野川で80余年、地域に花を届けてきた 有限会社花芳（はなよし） 様のオンラインショップを、
Shopifyで構築しました。
今回の目的は、単に商品を並べて販売することではありませんでした。
お祝い、お供え、胡蝶蘭などの生花ギフトを、用途に合わせて選び、そのままオンラインで決済できるようにすること。そして、店舗側が日々の業務に無理なく取り入れられる形にすることが、大きなテーマでした。
生花店のECには、一般的な物販ECとは違う難しさがあります。
配送エリア、お届け希望日、時間帯、札やメッセージ、夏季の配送制限。こうした確認事項を、電話やメールだけに頼らず、購入画面の中で自然に入力してもらう必要があります。
この記事では、花芳オンラインショップで実際に行った設計・実装のポイントを紹介します。
制作情報
・クライアント：有限会社花芳様
・業種：生花店
・構築：Shopify
・サイト：shop.hanayoshi.info
・対応カテゴリ：お祝い / お供え / 胡蝶蘭
花芳様について
有限会社花芳様は、東京都北区滝野川で創業80余年の老舗生花店です。
地域のお祝いごと、法要、お供え、法人向けの胡蝶蘭など、さまざまな節目に花を届けてこられた店舗です。
今回構築したオンラインショップは、既存の公式サイトからの誘導を想定し、ギフト・お供え用生花のオンライン決済に特化した構成にしています。
今回のテーマは「最小運用で回るEC」
今回、特に意識したのは、店舗側の運用負荷を増やしすぎないことです。
オンラインショップは、作ること自体よりも、作った後に無理なく運用できるかが重要です。特に実店舗がある場合、日々の接客、仕入れ、制作、配達などの業務があります。その中で、ECだけが複雑になりすぎると、結局使い続けるのが難しくなってしまいます。
そのため、今回の構築では、必要以上に有料アプリを増やさず、
Shopifyの標準機能とテーマ側の調整を中心に設計しました。
目指したのは、高機能すぎるECではなく、店舗の日常業務に自然に組み込めるECです。
主な方針は、次の通りです。
・運用を複雑にしすぎない
・注文情報を購入時点で取得する
・配送エリア・送料・夏季制限を購入前に伝える
・お知らせや文言を管理画面から更新できるようにする
生花店ECで難しいのは「注文前の確認事項」が多いこと
一般的なECであれば、商品を選び、数量を決め、カートに入れて決済する流れで成立します。
しかし、生花ギフトの場合はそれだけでは足りません。
たとえば、お祝い用なのか、お供え用なのか。いつ届けたいのか。どの時間帯がよいのか。札やメッセージカードは必要なのか。配送可能なエリアなのか。夏場でも配送できるのか。
こうした確認事項が抜けると、注文後に電話やメールで確認する必要が出てきます。結果として、店舗側の手間が増え、お客様にとってもスムーズな購入体験ではなくなってしまいます。
そこで今回は、できるだけ購入画面の中で必要な情報を自然に入力してもらえるように設計しました。
用途と価格から選べるトップページ
生花ギフトを購入する方の多くは、最初から具体的な商品名が決まっているわけではありません。
「開店祝いに贈りたい」
「法事のお供えを用意したい」
「予算は1万円前後で考えている」
このように、用途や予算から探すケースが多いと考えられます。
そのため、トップページでは大きく2つの導線を用意しました。
1つ目は、用途から選ぶ導線です。
お祝い、お供え、胡蝶蘭の3つのカテゴリを画像付きカードで表示し、それぞれの商品一覧へ進めるようにしています。
2つ目は、価格から選ぶ導線です。
5,500円、8,800円、11,000円、特注といった主要な価格帯をボタン形式で並べ、予算から商品を探せるようにしました。
生花ギフトでは、「何を贈ればいいかわからないけれど、予算は決まっている」というお客様も多いはずです。用途と価格の両方から探せるようにすることで、迷いを減らすことを意識しています。
配送エリアと送料を、購入前にわかりやすく伝える
生花ECでトラブルになりやすいポイントの一つが、配送に関する認識のズレです。
花芳様では、主に次の3つのお届け方法に対応しております
1.自社配達
・送料：1,100円（税込）
・対象エリア：北区・豊島区・板橋区
2.宅配便配送
・送料：2,200円（税込）
・対象エリア：関東圏（一部地域除く）
3.店舗受け取り
・送料：無料
・受け取り場所：滝野川店舗
このような配送条件は、決済直前や注文後に初めて気づく形ではなく、
購入前に自然に確認できることが大切です。
そこで、トップページには配送に関する注意事項への導線を設置し、
下部には3つのお届け方法を整理した案内セクションを用意しました。
また、ご利用ガイドページでは、夏季配送制限についても明記しています。
生花は品質管理が重要な商品です。特に気温の高い時期は、配送可能エリアや配送方法に制限が出る場合があります。こうした店舗側の事情を、お客様にも納得してもらえるよう、事前に説明する構成にしました。
商品詳細ページに、ギフト注文で必要な入力を集約
今回もっとも重要だったのが、商品詳細ページの注文フォームです。
通常のECであれば、商品を選んでカートに入れるだけでも成立します。しかし、生花ギフトでは、購入時に確認したい情報が多くあります。
そのため、商品詳細ページ内で、用途、お届け希望日、時間帯、札・カードの有無、メッセージ内容などを入力できるようにしました。
主な入力項目は、次の通りです。
・用途：商品ごとに選択肢を設定。
・お届け希望日：カレンダーから選択。
・お届け時間帯：午前中 / 12-14時 / 14-16時 などから選択。
・札・カード：なし / 紙札 / 木札 / メッセージカードから選択。
・メッセージ内容：札やカードに記載する文言を入力。
これらの情報は、注文データとしてShopify管理画面に残るようにしています。
これにより、注文後に電話やメールで細かく確認し直す手間を減らし、店舗側も注文内容を見ながら対応しやすくなります。
商品ごとの最短お届け日を、画面側でガイドする
生花商品は、商品によって準備に必要な日数が異なります。
たとえば、アレンジメントと胡蝶蘭では、手配や制作にかかる時間が異なります。すべての商品で同じ最短お届け日を設定してしまうと、受けられない日付で注文が入ってしまう可能性があります。
そこで、商品やバリエーションごとに最短お届け日を設定し、管理画面内で商品ごとに最短お届け日を設定できるように実装させていただきました。
お客様が商品を選ぶと、選択できる日付の範囲もそれに合わせて変わります。
また、「ご注文から○日後以降をお選びください」といった注意書きも表示し、なぜその日付以降しか選べないのかがわかるようにしています。
店舗側の運用ルールを、できるだけお客様が迷わない形で画面に反映することを意識しました。
札・メッセージ入力は、必要なときだけ表示
ギフト注文では、札やメッセージカードの入力も重要です。
ただし、すべてのお客様にメッセージ入力欄を見せると、必要のない人にとってはフォームが複雑に見えてしまいます。
そこで、札・カードの選択に応じて、必要なときだけメッセージ欄を表示するようにしました。
「なし」を選んだ場合は入力欄を表示せず、紙札、木札、メッセージカードを選んだ場合のみ、文言を入力できるようにしています。
また、文字数もわかるようにし、長すぎるメッセージにならないようにしています。
小さな部分ですが、こうしたフォームの出し分けによって、購入時の迷いを減らすことができます。
商品一覧では、色の選択肢をわかりやすく
生花ギフトでは、同じ商品でも色の印象によって用途が変わります。
明るい色合いのお祝い花、落ち着いた色合いのお供え花、おまかせのアレンジなど、色の違いは購入判断に影響します。
そのため、商品一覧の段階でも、選べるカラーがわかるように表示を調整しました。
詳細ページに入る前に、おおまかな色の選択肢が見えることで、「この商品は自分の用途に合いそうか」を判断しやすくしています。
法定ページやお問い合わせも、店舗に合わせて整理
オンラインショップでは、商品ページだけでなく、特定商取引法に基づく表記、配送ポリシー、返金ポリシー、プライバシーポリシーなどの整備も必要です。
今回は、これらのページもShopify上で整理し、サイト全体のトーンに合わせて表示されるようにしました。
お問い合わせページでは、商品について、配達について、オーダーメイドの相談など、問い合わせ内容を選べるようにしています。
また、急ぎの場合は電話で相談できるよう、店舗の連絡先もわかりやすく配置しました。
ネットで完結する部分と、店舗に相談した方がよい部分を切り分けることも、実店舗型ECでは大切だと考えています。
老舗生花店らしい信頼感を、オンラインでも伝える
デザイン面では、老舗生花店としての信頼感と、花を贈るときのやさしい雰囲気を両立することを意識しました。
白と淡いピンクを基調にし、見出しには明朝体を使用。余白を広めに取り、落ち着いた印象になるように調整しています。
オンライン注文では、お客様が実際に店舗へ足を運ぶわけではありません。そのため、画面上で「このお店にお願いして大丈夫そう」と感じてもらえることが大切です。
特に生花ギフトは、贈る相手や場面が大切な商品です。安さや派手さよりも、信頼感、丁寧さ、安心感が伝わるデザインを目指しました。
運用しやすさのために、管理画面から更新できる範囲を広げる
納品後に、ちょっとした文言変更やお知らせ更新のたびにコード修正が必要になると、運用が大変になります。
そのため、トップページの文言、画像、リンク、お知らせなどは、できるだけShopifyの管理画面から更新できるようにしました。
また、新着情報はブログ機能と連動させ、記事を投稿すればトップページにも表示される構成にしています。
ECサイトは公開して終わりではなく、公開後に使い続けられることが重要です。今回も、店舗側が無理なく運用できる範囲を意識して設計しました。
実装メモ
実装面では、Shopifyの注文情報を追加で保存できる仕組みや、商品ごとに設定を持たせるメタフィールドを活用し、用途・お届け希望日・時間帯・札・メッセージ内容などを注文データとして管理できるようにしています。
また、商品ごとの最短お届け日も管理画面側で設定できるようにし、購入画面のカレンダー制御に反映しています。
具体的な実装内容については、別記事で詳しく紹介する予定です。
まとめ
花芳オンラインショップでは、単に商品を並べて決済できるECではなく、
生花店ならではの注文業務に対応できるECを目指しました。
生花ギフトには、用途、配送エリア、お届け日時、札、メッセージ、季節ごとの配送制限など、一般的なECよりも確認すべき項目が多くあります。
それらを注文後のやり取りに任せるのではなく、購入画面やガイドページの中で自然に入力・確認できるように設計しました。
今回のポイントをまとめると、次の通りです。
・用途と価格の2軸で商品を探せるトップページ
・配送エリア・送料・夏季制限を購入前に案内
・ギフト注文に必要な情報を商品詳細ページで取得
・商品ごとの最短お届け日をカレンダーに反映
・札やメッセージ入力を必要なときだけ表示
・実店舗が無理なく運用できる管理画面設計
・老舗生花店らしい信頼感を伝えるデザイン
創業80余年の実店舗の信頼を、オンラインの買い物体験にも引き継ぐ。
そのために、見た目だけでなく、店舗側の業務と購入者側の迷いを整理しながら、Shopifyで形にした案件です。
制作情報
・制作：ナチュラルウーマン株式会社
・サイト：shop.hanayoshi.info
・プラットフォーム：Shopify
対応内容：
Shopify構築 / 商品詳細ページ設計 / 注文フォーム設計 /
配送ガイド設計 / トップページ設計
弊社ではShopifyでのオンラインショップ構築や、
実店舗の業務に合わせたECサイト設計のご相談を承っています。
「EC販売を始めたいが、既存の業務にどう組み込めばいいかわからない」
「通常のECでは対応しづらい注文項目がある」
「小規模でも無理なく運用できるShopifyサイトを作りたい」
このような場合は、お気軽にご相談ください。
事業内容や運用体制に合わせて、いちばん合う形を一緒に考えます。
お問い合わせはこちら
お問い合わせ
また、EC販売で成果を出すための情報を、
YouTube「あやかのShopify予備校」でも発信しています。
Shopifyでのサイト構築、SNS動画での集客、AIの活用など、
実際にECを運営してきた事業者の目線でお話ししています。