店舗登録から、商品管理、担当別の権限、マニュアルまで。運営の仕組みも含めて、制作費11万円（税込）で制作しました。
愛モール「ひととなり」のデザインを一新し、取材・店舗登録・商品更新までをつなぎました。
公開サイト、管理画面、使い方のマニュアル。日々の運営に必要な三つを、一緒に設計した制作事例です。
紹介するページと、続けられる仕組みを
店舗の魅力を伝えるだけでなく、掲載後に写真を変えたり、商品を追加したりできること。取材を支えるコンシェルジュが増えても、登録や案内を進められること。「ひととなり」では、この二つも制作のテーマになりました。
説明が長い一枚のマニュアルでは、必要な操作を探しにくい。管理画面と公開ページの呼び方が違うと、編集先も分かりにくい。制作中のこうした課題を、画面の名前、登録の流れ、案内する順番から見直しています。
写真と余白で、お店の空気が伝わる
黄色を中心にした旧デザインから、アイボリー、落ち着いた赤茶、明朝体を使ったデザインへ。お店の写真と見出しを主役にして、人柄や雰囲気をゆっくり知ってもらえる見せ方に変えました。
店舗ページは「01 どんなお仕事か」「02 なぜ今の仕事を」「03 商品・企画」の三つ。最初に何をしているお店かを知り、興味を持ったら店主の物語や商品へ進む順番です。パソコンでは写真の大きさと情報量のバランスを取り、スマートフォンでは縦に読み進められるようにしています。
商品を知って、カートへ進める
「03 商品・企画」は、お店自身が商品やサービスを紹介する場所です。名前・税込価格・写真・お届け方法をフォームで登録し、詳しい説明はブロックエディターで編集できます。商品登録の件数に上限は設けていません。
お客様は商品と数量を選び、配送先に応じた送料込みの合計を確認。店舗の決済QRで支払ったあと、必要な情報と支払画面をフォームから送る流れです。注文と支払報告を受けた店舗が、入金を照合します。
QRを載せるだけで販売開始にはしません。店舗・商品の公開、販売条件、送料、支払先、通知先などを整え、店舗の運営担当者が最終確認して受付を始めます。デモ店舗では実際の注文・決済・通知が発生しない体験用の流れを用意しています。
取材の前から、情報を受け取れる
担当するひととなりコンシェルジュが、分かっている店舗情報をCodexに伝え、店舗専用の事前フォームを準備。店舗の方へメールやDMでURLを送り、基本情報と短い質問に答えてもらいます。店舗側のログインやCodexの導入は不要です。
住所・店名・連絡先などの基本情報もここで集め、電話番号は公開するかどうかを選べます。回答が送信されると、担当コンシェルジュへメール通知。通知先はログイン用メールを基本に、別の宛先も設定できます。
- 事前フォーム：基本情報と短い質問に回答。
- インタビュー：回答から業種に合う質問を用意。
- 下書き確認：紹介・ストーリー・商品の内容を確認。
- 公開：店舗の最終OKを受けて掲載。
- 店舗で更新：自分のお店の情報や商品を管理。
写真が多い場合は、メールやDM、共有フォルダのリンクなどで別途受け取ることもできます。回答や取材資料を同じ店舗のチャットに引き継ぎ、毎回一から説明し直さずに制作へ進む設計です。
登録したら、自分のお店の管理画面へ
店舗向けには、専用の登録リンクを用意できるようにしました。届いたリンクから、お名前・メールアドレス・ご自身で決めたパスワードを入力。アカウント作成と店舗への紐づけを行い、そのまま自分のお店の管理画面へ進みます。ログイン方法やマニュアルの場所もメールで案内する構成です。
コンシェルジュから店舗アカウントの招待を依頼する窓口もあります。連絡先などの条件がそろう場合の自動承認と、運営が内容を確認する承認を用意し、アカウント作成・紐づけ・案内メールへつなぎます。
公開画面と同じ言葉で、編集先が分かる
管理画面の入口も、公開ページと同じ「01・02・03」にそろえています。お店で見えている内容を、どこから直せばよいか結び付けるためです。文章と写真の編集だけでなく、販売設定や注文確認への入口もまとめました。
- 01・02：お仕事の紹介、経営者のストーリー、写真をブロックで編集。
- 03：商品・サービス・企画を登録し、価格や写真を更新。
- 送料・販売・QR：配送エリア、送料、販売条件、決済QRを設定。
- メール・LINE通知：通知先メールと既存のLINE公式アカウントの連携を設定。
- 注文・支払報告：届いた注文を確認し、入金や発送・提供の状態を管理。
LINE通知は、店舗側のLINE公式アカウントとの連携設定が必要です。QR決済の入金照合は店舗が行います。こうした運用上の条件も、設定画面とマニュアルで案内しています。
役割に合わせて、できることを分ける
店舗、コンシェルジュ、運営が同じサイトを使うため、アカウントごとの担当範囲を設けています。
- 店舗：自分に紐づいた店舗の紹介・商品・販売設定を管理。
- ひととなりコンシェルジュ：担当店舗の作成・取材・編集と、店舗運営のサポート。
- 運営：店舗とアカウントの対応、招待の確認、サイト全体を管理。
店舗用マニュアルは店舗・コンシェルジュ・運営が閲覧でき、コンシェルジュ用ガイドはコンシェルジュと運営が閲覧できます。ログイン後に、担当する仕事に合う入口と案内が見える構成です。
マニュアルも、使う人から逆算する
店舗用とコンシェルジュ用を分け、さらに「ログイン」「商品登録」「カート」「販売開始」「通知」など、目的ごとのページに整理しました。初回ログインやWordPressへの接続など、先に必要な操作は入口から見える位置に出しています。
Codexを使う方には、導入・WordPress接続・接続後の操作を順番に案内します。依頼文に加えて、Codexから返ってくる内容の見本と、そのあと本人がすることもセットにしました。コンシェルジュの制作支援と、店舗の日々の更新には、それぞれ専用のスキルを用意しています。
店舗の方はCodexを使わず、ブラウザーから更新することもできます。どちらを使っても、やりたい作業から手順を選べるマニュアルです。
サイトと運営を、ひとつの流れに
公開サイトの見せ方から、取材の準備、店舗登録、商品更新、操作ガイドまで。同じ店舗情報と画面の名前を引き継ぐことで、公開後の仕事にもつながる形になりました。
この制作で大切にしたのは、画面だけを個別に増やさず、「誰が、どの情報を受け取り、次に何をするか」を先に決めることです。店舗の方に任せる更新と、コンシェルジュが支える制作、運営が確認する操作を、サイトの中でつないでいます。
地域のポータル、加盟店の管理サイト、会員・講師の紹介サイト、利用者向けのマニュアルサイト。同じように、掲載するページと運営方法を一緒に整理したい方に向く作り方です。大規模な多店舗共通カートや自動決済まで必要な場合は、その要件に合わせて別途設計します。