← Index
Vol. 01 / Reference Library

50 diagram patterns
for the modern web.

プロセス、階層、関係性、データ。Web制作で頻出する50の図解パターンをカテゴリ別に整理した参照集。コピーして調整するための土台として。

50Diagrams
08Categories
SVGFormat

お気に入り

0
各図解の右上の ♡ SAVE ボタンで保存。クリックで展開すると SVG プレビュー+Claude指示プロンプトが取り出せます。
— Theme Customize palette
— 01

Process & Steps

順序ある工程、段階、ステップ。プロセスの方向性を視覚化する。

001 / 050
01 02 03 04 DISCOVER DESIGN DEVELOP DELIVER

Linear 4-Step Process

最も基本的な4ステップの水平フロー。サービス紹介ページの定番。

Linear4 Steps
002 / 050
STEP 01 STEP 02 STEP 03 STEP 04 Research Strategy Execute Review

Chevron Arrow Flow

矢羽根を繋いだ前進感のあるプロセス図。営業フローやロードマップ向け。

ArrowChevron
003 / 050
STAGE 01 STAGE 02 STAGE 03 04 START GOAL

Staircase Steps

階段状に上昇する成長プロセス。事業発展や学習段階の表現に。

StairsGrowth
004 / 050
Phase 01 — Kickoff Phase 02 — Plan Phase 03 — Build Phase 04 — Ship W01 W04 W08 W12

Vertical Process Timeline

縦軸タイムライン。スクロールに沿った長文ストーリーと相性が良い。

VerticalTimeline
005 / 050
DEFINE IDEATE REFINE

Zigzag S-Curve Flow

蛇行するフロー。複数フェーズを限られた幅に収めたいときに有効。

Zigzag3 Steps
006 / 050
01 Plan PHASE 02 Design PHASE 03 Build NOW 04 Launch PHASE

Numbered Step Cards

カード型ステップ。現在地をハイライトして進行状況を示せる。

CardsStatus
— 02

Cycle & Loop

循環、反復、繰り返し。終わりのないプロセスや継続的改善の表現。

007 / 050
01 02 03 04 PLAN DO CHECK ACT

PDCA Cycle

改善サイクルの王道。4要素の循環関係を示すあらゆる場面で。

Loop4 Phase
008 / 050
Learn Apply Reflect CONTINUOUS LOOP

Three-Phase Cycle

3要素の最小限の循環。学習や成長の本質を簡潔に示す。

3 PhaseTriangle
009 / 050
06 PHASES

Segmented Donut Cycle

ドーナツ型の6分割サイクル。配色のグラデーションで段階を表現。

Donut6 Segments
010 / 050
A B Input Output INFINITE LOOP

Infinity Loop

無限大記号型のループ。2要素間の永続的な相互作用を示す。

InfinityTwo-Way
011 / 050
1 2 3 4 5 CYCLE

Radial 5-Stage Cycle

中心を持つ放射型5段階サイクル。価値観や原則の循環表現に。

Radial5 Stages
012 / 050
ITERATIVE GROWTH +

Spiral Iteration

螺旋型の反復成長。アジャイル開発や継続学習の比喩に最適。

SpiralIteration
— 03

Hierarchy

階層、組織、構造。親子関係や上下構造を整理する。

013 / 050
CEO Design Engineering Marketing Team A Team B

Organization Tree

伝統的な組織図。3層構造で部署とチームの関係を整理。

Org Chart3 Levels
014 / 050
VISION STRATEGY TACTICS TOP MID BASE

3-Tier Pyramid

3段ピラミッド。階層ごとの抽象度や優先順位を示す。

Pyramid3 Tiers
015 / 050
CORE A B C D

Radial Mind Map

放射型マインドマップ。中心テーマから派生する要素群を整理。

RadialMind Map
016 / 050
CORE ECOSYSTEM PLATFORM PRODUCT

Nested Containers

入れ子状の包含関係。システム階層や責任範囲を示す。

NestedContainment
017 / 050
AWARENESS INTEREST PURCHASE

Inverted Pyramid / Funnel

逆ピラミッド型のファネル。マーケティングや採用フローの定番。

FunnelMarketing
018 / 050
ROOT BRANCH A BRANCH B BRANCH C Leaf 01 Leaf 02 Leaf 03

Horizontal Decision Tree

横向き分岐ツリー。サイトマップや判断分岐の表現に。

TreeBranches
— 04

Relation

関係性、繋がり、相互作用。要素間のつながりを視覚化する。

019 / 050
USER NEEDS BUSINESS FIT

Two-Circle Venn

2要素の重なりを示す古典的ベン図。スイートスポットの可視化に。

Venn2 Set
020 / 050
DESIRABLE FEASIBLE VIABLE SWEET SPOT

Three-Circle Venn

IDEO型3要素ベン図。中央の重なりが価値の核を示す。

Venn3 Set
021 / 050
HUB

Hub & Spoke

中央集約型の関係図。プラットフォームや統合システムの構造を示す。

HubNetwork
022 / 050
CORE N01 N02 N03 N04

Network Graph

ノードとエッジで構成されるネットワーク図。複雑な相互関係を示す。

NetworkMesh
023 / 050
SUPPLY DEMAND FLOW → ← FEEDBACK

Bidirectional Relation

双方向の関係性。需給・原因と結果・対立要素の相互作用を示す。

Bidirectional2 Way
024 / 050
Low Impact QUICK WIN Avoid Big Bet HIGH LOW

2x2 Matrix

2軸4象限マトリクス。優先順位付けや戦略選択の意思決定支援に。

Matrix2x2
— 05

Timeline

時系列、歴史、ロードマップ。時間軸に沿った変化や計画。

025 / 050
2022 Founded 2023 Launch 2024 Series A 2025 Expansion

Horizontal Milestones

水平軸の節目タイムライン。企業沿革ページの定番。

HorizontalMilestones
026 / 050
Q1 2024 Concept Phase Q2 2024 Beta Release Q3 2024 Public Launch Q4 2024 Scale Phase

Centered Vertical Timeline

中央軸タイムライン。左右に情報を振り分けて読みやすく。

VerticalSplit
027 / 050
Design Development QA Ship JAN FEB MAR APR

Gantt Chart

タスク期間を可視化するガントチャート。プロジェクト計画の標準形式。

GanttSchedule
028 / 050
NOW NEXT LATER PRODUCT ROADMAP

Now / Next / Later Roadmap

プロダクトロードマップの定番形式。優先度と時間軸を同時に示す。

RoadmapProduct
— 06

Comparison

比較、対比、対立。複数選択肢の違いを明確化する。

029 / 050
PLAN A $19/mo — Basic — Solo — 10 GB VS PLAN B $49/mo — Pro — Team — 1 TB

Side-by-Side Cards

価格プラン比較や機能比較に。並列カードで違いを明確化。

VSPricing
030 / 050
Feature Standard Premium Users 5 Storage 10 GB 1 TB Support Email 24/7 API

Comparison Table

機能対応表。多項目を整理して詳細比較したい場合に。

TableFeatures
031 / 050
BEFORE 2.3s Load Time AFTER 0.4s Load Time −83%

Before / After

改善前後の対比。事例紹介ページで成果を強調する場面に。

Before/AfterResult
032 / 050
+ PROS − CONS Fast setup Low cost Scalable Open source Learning curve Limited support No GUI

Pros & Cons List

利点・欠点の対比リスト。判断材料を整理した記事や提案書に。

Pros/ConsDecision
— 07

Data & Stats

数値、統計、構成比。データを視覚化する基本チャート。

033 / 050
Q1 Q2 Q3 Q4 Q5 100 50 0

Bar Chart

縦棒グラフ。期間ごとの数値比較で最も読みやすい基本形。

BarQuarterly
034 / 050
M1 M2 M3 M4 M5 M6

Line Chart

折れ線グラフ。時系列推移やトレンドの可視化に最適。

LineTrend
035 / 050
— Design 40% — Dev 25% — QA 15% — Ops 12% — Other 8%

Pie Chart

円グラフ。構成比や割合を直感的に示す古典的なチャート。

PieComposition
036 / 050
75 PERCENT Completion Rate

Progress Ring

進捗リング。単一指標を強調表示。KPIやスコア提示に。

RingKPI
037 / 050
Speed 85% Quality 72% Cost 58% Scale 42%

Horizontal Progress Bars

スキルレベルやKPI達成率の表示に。複数指標を並列比較できる。

ProgressMulti-metric
038 / 050
UX PERF SEO A11Y SEC

Radar Chart

レーダーチャート。複数軸の評価バランスを一目で示す。

RadarMulti-axis
039 / 050
02M Users +12% YoY 99% Uptime Last 12 mo 4.9 Rating ★★★★★

Stat Highlights

大きな数字で訴求する統計ハイライト。HPトップの実績表示の定番。

StatsHero
040 / 050
38% 25% 19% 18% Direct Organic Social Other TRAFFIC SOURCES

Stacked Bar

積み上げ棒で構成比を可視化。1本で全体内訳を示せるコンパクトさ。

StackedBreakdown
— 08

Concept & Framework

抽象概念、フレームワーク、モデル。アイデアを構造化する。

041 / 050
PEOPLE Team & Culture PROCESS Workflows PRODUCT What we build PLATFORM Tech stack

4-Block Framework

4要素フレームワーク。価値観や事業の柱の整理に。

4 BlocksFramework
042 / 050
CORE VALUE CRAFT CARE CALM CLEAR

Petal Diagram

花弁状のコンセプト図。コアバリューやサービスの柱を表現。

PetalValues
043 / 050
CORE Module A Module B Module C

Hexagon Honeycomb

六角形のハニカム構造。モジュラーなシステムや関連要素を示す。

HexagonModular
044 / 050
PILLAR 01 01 Quality FOCUS PILLAR 02 02 Speed FOCUS PILLAR 03 03 Scale FOCUS

Three Pillars

3本柱フレームワーク。事業や戦略の中核要素を並列に提示。

Pillars3 Cores
045 / 050
SELF-ACTUAL ESTEEM BELONGING SAFETY PHYSIOLOGICAL

5-Tier Pyramid

マズロー型5段階ピラミッド。階層的な欲求やニーズを表す古典。

Pyramid5 Tiers
046 / 050
USER SYSTEM ADMIN Request Verify Confirm

Swimlane Diagram

役割別レーン図。ユーザーフローや責任分担を時系列で示す。

SwimlaneRoles
047 / 050
CORE PRODUCT PARTNERS COMMUNITY MARKET

Concentric Ecosystem

同心円のエコシステム。中核から外延への広がりを表現。

ConcentricEcosystem
048 / 050
EFFECT People Process Tools Method Material Env

Fishbone (Ishikawa)

特性要因図。原因分析のフレームワーク。問題解決ページに。

FishboneCause
049 / 050
EVIDENCE FRONT BACK AWARENESS CONSIDER PURCHASE SUPPORT

Service Blueprint

サービスブループリント。顧客体験と裏側のプロセスを並列マッピング。

BlueprintJourney
050 / 050 — Finale
USER JOURNEY MAP 01 / DISCOVER 02 / EVALUATE 03 / DECIDE 04 / ONBOARD 05 / LOYAL ACTIONS Search Compare Sign Up Setup Advocate EMOTION +

Customer Journey Map — Full Layout

5段階のユーザージャーニーマップ。アクション・感情曲線を含む統合的なUX設計図。複数のダイアグラム要素を組み合わせた応用例。

JourneyUXComposite