TSUDOWATETSU WORKSCLIENT SERVICES
相談する
MENU
ADMIN DASHBOARD村ごと、ゆっくり確かに運ぶ。イメージイラスト
← 制作例一覧

SELF-INITIATED DEMO / 自主制作

ADMIN DASHBOARD — 顧客管理ダッシュボード

OVERVIEW

顧客も取引状況も、届いた問い合わせも、ひとつの台帳に。

Next.jsReactTypeScriptCSS
Live Demoを操作する

架空データです。ブラウザ内保存のみで、認証・共有DB・バックアップはありません。同名の別会社を取り違えないよう、問い合わせの自動紐づけは行いません。実顧客情報を入力しないでください。

AI
使っていません計算と決まった規則だけで動きます。
保存先
このブラウザ顧客の一覧と操作の履歴をこのブラウザに保存します。問い合わせとの紐づけは RELAY・SMART INBOX と共通の記録に入ります。
外部送信
なし入力した内容は、このブラウザの外へ送られません。
MAIN VISUAL / LIVE DEMO
ADMIN DASHBOARDの実装済みDesktop画面
実際に操作できる自主制作デモ
SCOPE
Design + Build + QA
EST. DELIVERY / 納期目安
仕様確認後に提示
PRICE GUIDE / 参考価格
要件により見積

01THE PROBLEM

保存データの破損や入力ミスへの対処と、問い合わせとの取り違え防止。

想定したクライアント
顧客情報を表計算ソフトで管理している小さなチーム（架空）
想定依頼
顧客情報の追加・編集と状況確認をしたい。
起きていること
顧客の一覧と問い合わせの記録が別々にあり、誰がどの問い合わせの人か、毎回探している。
困りごと
入力ミスや保存データの破損で、一覧がいつの間にか壊れている。
制作コンセプト
小さなチームのためのシンプルな管理画面。

想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。

02SIGNATURE JOURNEY

顧客と問い合わせを、人が確かめてから結びつける台帳。

CRUDと保存検証、削除前確認、操作履歴に加え、問い合わせを顧客へ明示的に紐づける導線を実装しました。

  1. ADMIN DASHBOARDの顧客一覧

    顧客を探す

    名前や会社で検索し、ステータスで絞り込み。累計の売上と件数がひと目で分かります。

  2. ADMIN DASHBOARDの問い合わせとの紐づけ

    問い合わせを結びつける

    RELAY・SMART INBOX から来た「未紐づけ」の問い合わせを、既存の顧客に紐づけるか、新しい顧客として追加します。

  3. ADMIN DASHBOARDで顧客の行に問い合わせ件数が出た状態

    件数と履歴に残る

    顧客の行に問い合わせの件数と未完了の数が出て、操作の履歴にも残ります。

画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す

03KEY INTERACTIONS

触って確かめられる操作

見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。

04BEHIND THE SYSTEM

画面の裏で、何が決まっているか

データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。

データ

  • 顧客（名前・連絡先・ステータス・累計売上）
  • 操作の履歴（直近30件）
  • 問い合わせとの紐づけ（問い合わせ側に、人が選んだ顧客IDを持つ）

状態の流れ

  1. 未紐づけ
  2. 紐づけ済み
  3. 顧客の行に件数を表示

安全のための決まりごと

  • 問い合わせと顧客を自動で照合しない
  • 削除・初期化の前に確認をはさむ
  • 保存データが壊れていても、画面は止めずに知らせる

05RESPONSIVE & ACCESSIBILITY

ひとつの体験を、どの画面でも。

PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。

顧客管理ダッシュボード / Desktop Preview
Desktop Preview
顧客管理ダッシュボード / Tablet Preview
Tablet Preview
顧客管理ダッシュボード / Mobile Preview
Mobile Preview

06SCOPE & BOUNDARIES

できること・していないことを、先に書く

自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。

実装済み

このデモで実際に動くこと

  • 顧客の追加・編集・削除・検索・絞り込み
  • 問い合わせとの紐づけ・問い合わせからの顧客作成
  • 操作の履歴と、サンプルに戻す操作

デモ限定

見せ方のために簡略化していること

  • 顧客は架空のサンプル6件から始まる
  • 集計は累計の売上と件数（期間別のグラフはない）

未接続

公開版では接続していないもの

  • 共有データベース・認証
  • バックアップ
  • 外部のCRM

本番化に必要なこと

実案件で追加で設計・実装するもの

  • ログインと権限（閲覧だけ・編集できる人）
  • サーバー側の保存・バックアップ・変更履歴
  • 既存の表計算データの取り込みと重複の整理

07DELIVERY & QUOTE

納品物と、見積もりの目安

参考価格 要件により見積／納期目安 仕様確認後に提示。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。

もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
TECH STACK / 使用技術

Next.js / React / TypeScript / CSS

対応範囲

設計・デザイン・実装・内部QA・ドキュメント整理

制作期間目安

仕様確認後に提示

参考価格

要件により見積

実装した機能
  • 顧客CRUD・検索・フィルタ
  • 問い合わせと顧客の紐づけ（自動照合はしない）
  • 問い合わせから顧客を作成
  • localStorage保存と操作履歴
DELIVERABLES / 納品可能物
  • ソースコード・設定ファイル
  • 起動・更新手順のREADME
  • 画面仕様・検証項目一覧
QA内容・確認項目
  • PC / Tablet / Mobile表示
  • キーボード操作・コントラスト
  • リンク・入力・エラー状態

見積もりが変わるところ

  • 顧客の項目数と、既存データの取り込み
  • ログイン・権限の有無
  • 問い合わせや請求など、ほかのデータとの連携
  • 集計やグラフの種類

参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。

RELATED SERVICES

この制作に近いサービス

Webアプリ / 管理画面TypeScript / Next.jsテスト / QA / 納品

08CONTEXTUAL CONTACT

このデモのような制作を相談する

近いと感じた機能に印をつけてください。相談フォームに「ADMIN DASHBOARDを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。

参考にしたい機能（任意・複数可）

この時点では何も送信されません。フォームを開くだけです。

MESSAGE-ONLY OK

メッセージだけでも、進められます。

仕様確認・進捗共有・修正確認・納品まで、クラウドソーシング上のメッセージを中心に対応。Zoom / Google Meetは必須ではありません。

相談内容をまとめる
A GOOD PLACE TO START / TETSU WORKS

つくりたいものを、
聞かせてください。

まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。

相談内容を入力する ↓
まずは文章で。
打ち合わせの前に、相談できます。
  1. 01相談を送信
  2. 02内容を確認
  3. 03メールで返信
  4. 04合意して制作開始

金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。

案件サイトからのご相談は、そのサービス内メッセージでも進められます。

YOUR NEXT PROJECT必須はお名前・メール・ご相談内容
01 何を相談したいですか？ 未定でも大丈夫
02 いま、考えていること

困っていること、つくりたいものを自由に。10〜2,000文字。秘密情報・パスワードは入力しないでください。

予算・希望時期・参考資料を添える 任意

予算・時期はご希望の目安です。制作範囲を確認してお見積もりします。

03 お返事先

送信内容はお問い合わせ対応のために利用します。

受付状況を確認しています。

案件サイトのメッセージで相談したい方へ

入力内容をコピーして、ご利用中のサービスへ貼り付けられます。ここからは送信しません。