技術担当者がいなくてもできる! 自社Webシステムを「1枚の図」で見える化する方法

Web制作・開発
2025.12.05
LYZON編集部

「うちのWebサイトって、結局どういう仕組みで動いているんだっけ?」
「どこがCMSで、どこから先が別システムなのかよく分からない……」
そんなモヤモヤを抱えたまま、リニューアルや新システムの相談をいただくことは少なくありません。

一方で、「全部を正確に把握してからでないと、ベンダーに相談してはいけない」と考えてしまうと、いつまでも前に進めなくなってしまいます。
そこで本記事では、技術部門がいなくてもできる、自社Webシステムの“ざっくり整理術” をご紹介します。
完璧な設計書ではなく、打ち合わせのたたき台として使える1枚の図を3段階に分けて描くイメージです。

目次

    まずは今ある「画面」をざっくり並べる

    最初のステップはとてもシンプルです。
    「ユーザーが実際に目にする画面」をすべて書き出すことから始めます。

    例えば、こんな単位で構いません。

    • コーポレートサイト(www.example.co.jp)
    • 採用サイト
    • 会員サイト(マイページ)
    • キャンペーン用のLP
    • ECサイト
    • 社員だけが使う管理画面(更新用のCMS、受注管理画面 など)

    ポイントは、システムの名前や技術的な呼び名を完璧に思い出そうとしないことです。
    「名前は分からないけれど、広報がニュースを更新している画面」
    「営業が資料DL数を見ている管理画面」
    といったレベルで大丈夫です。

    まず始めに、

    • 四角で「画面の種類」を描く
    • ざっくり「社外向け」「社内向け」に分ける

    くらいのイメージで、紙やホワイトボードにラフに描いてみてください。

    次に「登場人物(ユーザー)」を書き足す

    2ステップ目では、その画面を使っている“人” に注目します。

    社外であれば:

    • 見込み顧客
    • 既存顧客
    • 代理店・パートナー

    社内であれば:

    • 広報・マーケティング担当
    • 営業・インサイドセールス
    • コールセンター
    • 情報システム部門
    • 各事業部の担当者

    などが典型的です。

    画面を並べた図の周りに「登場人物」を配置し、

    • 「誰が」
    • 「どの画面に」
    • 「どんな目的でアクセスしているか」

    を矢印やメモで書き添えていきます。

    例:

    • 見込み顧客 → コーポレートサイト/LP(情報収集・問い合わせ)
    • 既存顧客 → 会員サイト(契約内容確認・申請手続き)
    • 広報 → CMS管理画面(ニュース更新)
    • 営業 → MAやダウンロードログ閲覧画面(リードの状況確認)

    ここまで描くだけでも、

    • 誰にとって重要な画面か
    • どこが「人の動きのハブ」になっているか

    がおおよそ見えてきます。

    「データの流れ」を矢印で描いてみる

    3ステップ目では、データの流れ に注目します。

    代表的な例としては:

    • お問い合わせフォーム → CRM(顧客管理)
    • 資料ダウンロードフォーム → MAツール(スコアリング)
    • ECサイト → 受注管理システム → 倉庫システム
    • 会員登録フォーム → 会員DB → メール配信システム

    などです。

    技術的な用語は分からなくても、
    「このフォームから送られた情報が、最終的にどこで管理されているか?」
    を思い出しながら矢印でつないでいきます。

    もし分からない部分があれば、

    • 「ここから先は不明」
    • 「たぶんSFAと連携?」

    といったメモ書きでも構いません。
    “分からないことがどこにあるのか”が可視化されること自体に意味があります。

    図は「相談のたたき台」になれば十分

    ここまでで、

    1. 画面の一覧(どんな画面が存在するか)
    2. 登場人物と画面の関係(誰がどこを使うのか)
    3. データの流れ(情報がどこからどこへ流れているか)

    という3ステップをひとつにまとめた図ができあがります。

    重要なのは、この図が“正確かどうか”ではありません。

    むしろ、

    • 「社内から見えている姿」はこうなっています
    • 「この部分のつながりがよく分かっていません」
    • 「ここが手作業になっていて、負担を感じています」

    といった現場の感覚が共有できる状態になっていることが価値です。

    弊社のようなWebシステム開発会社としても、
    こうしたラフな図があるだけで、

    • 抜け漏れのチェック
    • 二重管理になっている箇所の洗い出し
    • 将来スケールしたときに困りそうなポイントの発見

    がぐっとやりやすくなります。

    完璧な設計図より、「ざっくりとした1枚」を持とう

    自社のWebシステムをすべて正確に言語化しようとすると、どうしても腰が重くなってしまいます。

    まずは、

    1. 画面(ユーザーが見る世界)
    2. 登場人物(誰が使っているか)
    3. データの流れ(情報がどこからどこに行くか)

    という3段階で作成した“ざっくり図”から始めてみてください。

    そのうえで、

    • 何が分かっていて
    • 何が分かっていないのか

    を一緒に整理していくのが、LYZONのようなパートナーとして伴走する開発ベンダーの役割です。
    「自分たちだけではここから先が整理しきれない」
    「どこから手を付けるべきか相談したい」
    という段階になったら、ぜひお気軽にご相談ください。