spreadsheet-lecture/lecture.html at main · yaoki/spreadsheet-lecture · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>店舗別にスプレッドシートを分けて共有する方法</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Noto Sans JP', sans-serif;
    background: #fff;
    color: #222;
    line-height: 2;
    font-size: 15px;
    font-weight: 400;
  }

  .page {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 32px 96px;
  }

  /* Title */
  h1 {
    font-family: 'Noto Serif JP', serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 12px;
    color: #111;
  }
  .subtitle {
    font-size: 14px;
    color: #777;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid #ddd;
  }

  /* TOC */
  .toc {
    margin-bottom: 48px;
    padding: 24px 28px;
    background: #f8f8f8;
    border-radius: 4px;
  }
  .toc-title {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 12px;
  }
  .toc ol {
    list-style: none;
    counter-reset: toc;
  }
  .toc li {
    counter-increment: toc;
    font-size: 14px;
    line-height: 2.2;
  }
  .toc li a {
    color: #333;
    text-decoration: none;
  }
  .toc li a:hover { text-decoration: underline; }
  .toc li a::before {
    content: counter(toc) ". ";
    color: #999;
  }
  .toc li.col a { color: #8B6914; }

  /* Sections */
  .section { margin-bottom: 56px; }
  h2 {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #222;
    color: #111;
  }
  h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 32px 0 12px;
    color: #222;
  }
  p { margin-bottom: 16px; }
  strong { font-weight: 700; }

  /* Story */
  .story {
    background: #fafafa;
    border-left: 3px solid #ccc;
    padding: 24px 28px;
    margin: 24px 0 28px;
    border-radius: 0 4px 4px 0;
  }
  .story p {
    font-size: 14.5px;
    line-height: 2.1;
    margin-bottom: 12px;
  }
  .story p:last-child { margin-bottom: 0; }
  .story .n { color: #888; font-style: italic; font-size: 14px; }
  .story .a { font-weight: 700; color: #B85C1A; }
  .story .b { font-weight: 700; color: #2D7A4F; }

  /* Code */
  pre {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 20px 24px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 16px 0 20px;
    font-family: 'Source Code Pro', monospace;
    font-size: 13px;
    line-height: 1.8;
    position: relative;
  }
  pre .label {
    position: absolute;
    top: 6px; right: 10px;
    font-size: 10px;
    color: #666;
    letter-spacing: 0.5px;
  }
  .fn { color: #89b4fa; }
  .st { color: #a6e3a1; }
  .kw { color: #cba6f7; }
  .nm { color: #fab387; }
  .ct { color: #585b70; font-style: italic; }
  code {
    font-family: 'Source Code Pro', monospace;
    font-size: 13px;
    background: #f0f0f0;
    padding: 1px 6px;
    border-radius: 3px;
    color: #c04000;
  }

  /* Steps */
  .steps { margin: 20px 0; counter-reset: step; }
  .step {
    counter-increment: step;
    padding: 0 0 16px 40px;
    position: relative;
    margin-bottom: 4px;
  }
  .step::before {
    content: counter(step);
    position: absolute;
    left: 0; top: 2px;
    width: 26px; height: 26px;
    background: #222;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .step h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .step p {
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
  }

  /* Lock steps for security section */
  .lock-step {
    padding: 0 0 16px 40px;
    position: relative;
    margin-bottom: 4px;
  }
  .lock-step::before {
    content: '🔒';
    position: absolute;
    left: 0; top: 0;
    font-size: 18px;
  }
  .lock-step h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
  .lock-step p { font-size: 14px; color: #555; margin-bottom: 0; }

  /* Table */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 16px 0 24px;
  }
  th {
    background: #f5f5f5;
    font-weight: 700;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 2px solid #ddd;
    font-size: 13px;
  }
  td {
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    line-height: 1.8;
  }

  /* Callout */
  .tip {
    background: #f0f7f4;
    border-left: 3px solid #2D7A4F;
    padding: 14px 20px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    line-height: 1.9;
  }
  .warn {
    background: #fdf5ef;
    border-left: 3px solid #C07020;
    padding: 14px 20px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    line-height: 1.9;
  }

  /* Column */
  .column {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 32px 28px;
    margin: 48px 0;
    background: #fffcf5;
  }
  .column-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #8B6914;
    letter-spacing: 1px;
    border: 1px solid #D4B060;
    padding: 2px 10px;
    border-radius: 3px;
    margin-bottom: 16px;
  }
  .column h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
    border: none;
    color: #333;
  }
  .column h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 24px 0 8px;
    color: #555;
  }
  .column p { font-size: 14px; color: #555; line-height: 2; }
  .column table { font-size: 13px; }
  .column th { font-size: 12px; }

  /* Checklist */
  .checklist { list-style: none; margin: 20px 0; }
  .checklist li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
  }
  .checklist li:last-child { border-bottom: none; }
  .checklist li::before {
    content: '☐';
    position: absolute;
    left: 2px; top: 8px;
    font-size: 15px;
    color: #999;
  }

  /* SVG diagram */
  .diagram-wrap {
    margin: 32px 0;
    overflow-x: auto;
  }

  @media (max-width: 600px) {
    .page { padding: 40px 20px 64px; }
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    pre { padding: 16px; font-size: 12px; }
    .story { padding: 20px; }
    .column { padding: 24px 20px; }
  }
</style>
</head>
<body>
<div class="page">

  <h1>店舗別にスプレッドシートを分けて<br>「見せたくない列」を隠して共有する方法</h1>
  <p class="subtitle">IMPORTRANGE × QUERY で実現する、飲食店オーナーのためのデータ共有テクニック</p>

  <!-- TOC -->
  <nav class="toc">
    <div class="toc-title">目次</div>
    <ol>
      <li><a href="#s1">はじめに — ある飲食店オーナーの悩み</a></li>
      <li><a href="#s2">解決策の全体像</a></li>
      <li><a href="#s3">店舗用スプレッドシートの作成</a></li>
      <li><a href="#s4">IMPORTRANGE + QUERY で必要な列だけ取得する</a></li>
      <li><a href="#s5">共有設定とセキュリティ</a></li>
      <li><a href="#s6">条件付き書式で見た目を整える</a></li>
      <li><a href="#s7">運用のコツとトラブルシューティング</a></li>
      <li class="col"><a href="#c1">コラム — QUERY 関数リファレンス</a></li>
      <li class="col"><a href="#c2">コラム — IMPORTRANGE 関数リファレンス</a></li>
      <li><a href="#s8">まとめ</a></li>
    </ol>
  </nav>

  <!-- 1 -->
  <section class="section" id="s1">
    <h2>1. はじめに — ある飲食店オーナーの悩み</h2>
    <div class="story">
      <p class="n">都内で複数の飲食店を展開する田中さんは、Google Spreadsheet で全店舗の予約状況をひとつのマスターシートにまとめていた。日付、曜日、店舗名、売価、サービス内容——必要な情報はすべて揃っている。</p>
      <p><span class="a">田中：</span>「各店舗の店長に、自分の店の予約だけ見られるようにしたい。でも売価の列は本部の管理情報だから、店長には見せたくない」</p>
      <p><span class="b">同僚：</span>「フィルタで店舗名を絞ればいいんじゃない？」</p>
      <p><span class="a">田中：</span>「それだと全店舗のデータが入ったシートを共有することになるし、売価列を隠すだけだとワンクリックで再表示できてしまう」</p>
      <p><span class="b">同僚：</span>「なるほど。じゃあ店舗ごとにスプレッドシートを分けて、必要な列だけ自動で引っ張ってくればいい。IMPORTRANGE と QUERY を組み合わせれば——」</p>
      <p class="n">これが、今回紹介する方法の出発点だ。</p>
    </div>
    <p>この記事では、以下の2つの要件を同時に満たす方法を解説します。</p>
    <p><strong>①</strong> マスターシートから店舗名でフィルターして各店舗に共有する<br><strong>②</strong> 売価列を見せない（特定の列を除外して共有する）</p>
    <p>Excel の基本的な関数（SUM、VLOOKUP、IF など）を理解している方を対象としています。Google Spreadsheet 固有の関数については、コラムで解説します。</p>
  </section>

  <!-- 2 -->
  <section class="section" id="s2">
    <h2>2. 解決策の全体像</h2>
    <p>マスターとは<strong>別のスプレッドシート</strong>を店舗ごとに作成し、必要なデータだけを関数で自動取得します。店舗スタッフには各店舗用のスプレッドシートを<strong>閲覧のみ</strong>で共有します。</p>

    <div class="diagram-wrap">
      <svg viewBox="0 0 560 220" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:0 auto; max-width:560px; width:100%;">
        <rect x="0" y="70" width="150" height="80" rx="6" fill="#f8f8f8" stroke="#bbb" stroke-width="1.5"/>
        <text x="75" y="104" text-anchor="middle" fill="#333" font-family="'Noto Sans JP', sans-serif" font-size="14" font-weight="700">マスター</text>
        <text x="75" y="126" text-anchor="middle" fill="#999" font-family="'Noto Sans JP', sans-serif" font-size="11">全店舗・全列</text>
        <line x1="150" y1="110" x2="210" y2="110" stroke="#bbb" stroke-width="1.5"/>
        <line x1="210" y1="38" x2="210" y2="182" stroke="#bbb" stroke-width="1.5"/>
        <line x1="210" y1="38" x2="260" y2="38" stroke="#bbb" stroke-width="1.5"/>
        <line x1="210" y1="110" x2="260" y2="110" stroke="#bbb" stroke-width="1.5"/>
        <line x1="210" y1="182" x2="260" y2="182" stroke="#bbb" stroke-width="1.5"/>
        <polygon points="256,34 266,38 256,42" fill="#bbb"/>
        <polygon points="256,106 266,110 256,114" fill="#bbb"/>
        <polygon points="256,178 266,182 256,186" fill="#bbb"/>
        <rect x="268" y="10" width="180" height="56" rx="6" fill="#f0f7f4" stroke="#6BAF7E" stroke-width="1.5"/>
        <text x="358" y="34" text-anchor="middle" fill="#2D6B4F" font-family="'Noto Sans JP', sans-serif" font-size="13" font-weight="700">あいう店用</text>
        <text x="358" y="52" text-anchor="middle" fill="#888" font-family="'Noto Sans JP', sans-serif" font-size="11">売価なし・あいうのみ</text>
        <rect x="268" y="82" width="180" height="56" rx="6" fill="#f0f7f4" stroke="#6BAF7E" stroke-width="1.5"/>
        <text x="358" y="106" text-anchor="middle" fill="#2D6B4F" font-family="'Noto Sans JP', sans-serif" font-size="13" font-weight="700">かきく店用</text>
        <text x="358" y="124" text-anchor="middle" fill="#888" font-family="'Noto Sans JP', sans-serif" font-size="11">売価なし・かきくのみ</text>
        <rect x="268" y="154" width="180" height="56" rx="6" fill="#f0f7f4" stroke="#6BAF7E" stroke-width="1.5"/>
        <text x="358" y="178" text-anchor="middle" fill="#2D6B4F" font-family="'Noto Sans JP', sans-serif" font-size="13" font-weight="700">さしす店用</text>
        <text x="358" y="196" text-anchor="middle" fill="#888" font-family="'Noto Sans JP', sans-serif" font-size="11">売価なし・さしすのみ</text>
        <text x="210" y="8" text-anchor="middle" fill="#999" font-family="'Source Code Pro', monospace" font-size="10">IMPORTRANGE + QUERY</text>
      </svg>
    </div>

    <p>使う関数は2つだけです。</p>
    <p><code>IMPORTRANGE</code> — 別のスプレッドシートからデータを取得する（Google Spreadsheet 固有）</p>
    <p><code>QUERY</code> — 取得したデータから「どの列を取り出すか」「どの行に絞るか」を指定する</p>
    <p>この2つを組み合わせて、1つのセルに数式を入れるだけで完成します。</p>
  </section>

  <!-- 3 -->
  <section class="section" id="s3">
    <h2>3. 店舗用スプレッドシートの作成</h2>
    <p>各店舗ごとに新しいスプレッドシートを作成します。マスターとは完全に別のファイルです。</p>
    <div class="steps">
      <div class="step"><h4>Google ドライブで新規スプレッドシートを作成</h4><p>「新規」→「Google スプレッドシート」→「空白のスプレッドシート」</p></div>
      <div class="step"><h4>ファイル名を命名</h4><p>例：<code>予約状況_あいう店</code></p></div>
      <div class="step"><h4>マスターの URL をコピー</h4><p>マスターを開き、アドレスバーから URL をコピーしておきます。</p></div>
    </div>
    <div class="tip">URL は <code>https://docs.google.com/spreadsheets/d/xxxxxxx/edit</code> の形式です。<code>d/</code> と <code>/edit</code> の間の文字列がスプレッドシート ID です。</div>
  </section>

  <!-- 4 -->
  <section class="section" id="s4">
    <h2>4. IMPORTRANGE + QUERY で必要な列だけ取得する</h2>
    <p>店舗用スプレッドシートの <strong>A1 セル</strong>に、以下の数式を入力します。</p>

    <h3>「あいう」店の場合</h3>
    <pre><span class="label">数式</span>=<span class="fn">QUERY</span>(<span class="fn">IMPORTRANGE</span>(<span class="st">"マスターのURL"</span>, <span class="st">"マスター!A:E"</span>), <span class="st">"SELECT Col1, Col2, Col3, Col5 WHERE Col3 = 'あいう'"</span>, <span class="nm">1</span>)</pre>

    <h3>数式の分解</h3>
    <table>
      <thead><tr><th>パーツ</th><th>役割</th></tr></thead>
      <tbody>
        <tr><td><code>IMPORTRANGE("URL", "マスター!A:E")</code></td><td>マスターの A〜E 列の全データを取得</td></tr>
        <tr><td><code>SELECT Col1, Col2, Col3, Col5</code></td><td>日付・曜日・店舗名・サービスを選択。<strong>Col4（売価）を飛ばしている</strong></td></tr>
        <tr><td><code>WHERE Col3 = 'あいう'</code></td><td>店舗名が「あいう」の行だけに絞る</td></tr>
        <tr><td>末尾の <code>1</code></td><td>ヘッダー行が 1 行あることを指定</td></tr>
      </tbody>
    </table>

    <div class="warn">⚠ Col1, Col2... は IMPORTRANGE が返すデータの左からの順番です。マスターの列名（A, B, C）ではありません。A〜E の 5 列を取得しているので Col1=A, Col2=B … Col5=E です。</div>

    <h3>初回のアクセス許可</h3>
    <p>数式入力後、初回は <code>#REF!</code> エラーが出ます。「アクセスを許可しますか？」ボタンをクリックすれば解消します。</p>
    <div class="tip">この許可操作はオーナー（数式を入力した人）が行います。閲覧者にはボタンは表示されません。</div>

    <h3>他の店舗用に変える</h3>
    <p>WHERE 句の店舗名を変えるだけです。</p>
    <pre><span class="label">かきく店</span>=<span class="fn">QUERY</span>(<span class="fn">IMPORTRANGE</span>(<span class="st">"マスターのURL"</span>, <span class="st">"マスター!A:E"</span>), <span class="st">"SELECT Col1, Col2, Col3, Col5 WHERE Col3 = 'かきく'"</span>, <span class="nm">1</span>)</pre>
  </section>

  <!-- 5 -->
  <section class="section" id="s5">
    <h2>5. 共有設定とセキュリティ</h2>
    <p>数式が動いたら、店舗スタッフに共有します。</p>
    <div class="steps">
      <div class="step"><h4>「共有」ボタンをクリック</h4><p>店舗用スプレッドシートの右上。</p></div>
      <div class="step"><h4>スタッフの Google アカウントを追加</h4><p>Gmail アドレスを入力。</p></div>
      <div class="step"><h4>権限を「閲覧者」に設定</h4><p>プルダウンを必ず「閲覧者」に。デフォルトの「編集者」のままにしない。</p></div>
      <div class="step"><h4>マスターは共有しない</h4><p>スタッフはマスターの存在自体を知りません。</p></div>
    </div>

    <h3>セキュリティ — 3 重のガード</h3>

    <div class="story">
      <p class="n">共有設定を終えた田中さんに、ふと不安がよぎる。</p>
      <p><span class="a">田中：</span>「……ちょっと待って。あいう店の店長が、数式を書き換えて <code>WHERE Col3 = 'かきく'</code> にしたら、かきく店のデータまで見られるんじゃないか？」</p>
      <p><span class="b">同僚：</span>「いい質問。でも大丈夫。閲覧者にはそもそも数式が見えないんだよ」</p>
      <p><span class="a">田中：</span>「見えない？ セルをクリックしても？」</p>
      <p><span class="b">同僚：</span>「うん。閲覧者がセルをクリックしても、数式バーには計算結果——つまり『4/1』とか『寿司A』みたいな値しか表示されない。数式の文字列自体がコピーできないから、書き換えようがない」</p>
      <p><span class="a">田中：</span>「じゃあ、店長が自分で別のスプレッドシートを作って、そこから IMPORTRANGE でマスターに接続しようとしたら？」</p>
      <p><span class="b">同僚：</span>「そもそもマスターの URL を知らないよね。それに、仮に URL を手に入れたとしても、IMPORTRANGE は初回接続のときに田中さん——つまりマスター側の編集者が『アクセスを許可』ボタンを押さないとデータを取得できない。田中さんが押さなければ、それまでだよ」</p>
      <p><span class="a">田中：</span>「なるほど、三重にロックされてるわけか」</p>
    </div>

    <p>整理すると、「閲覧のみ」共有では以下の 3 つの仕組みで保護されています。</p>
    <div class="steps" style="counter-reset: none;">
      <div class="lock-step"><h4>数式が見えない</h4><p>閲覧者がセルをクリックしても値しか表示されません。数式の文字列はコピーできません。</p></div>
      <div class="lock-step"><h4>マスターの URL を知らない</h4><p>マスターは共有していないため URL を知る手段がありません。</p></div>
      <div class="lock-step"><h4>接続にはオーナーの許可が必要</h4><p>万が一 URL を入手しても、IMPORTRANGE の初回接続にはマスター側の編集権限者の許可が必要です。</p></div>
    </div>
  </section>

  <!-- 6 -->
  <section class="section" id="s6">
    <h2>6. 条件付き書式で見た目を整える</h2>

    <p>IMPORTRANGE で取得したデータはただのテキストとして表示されます。マスター側の色分けやドロップダウンは引き継がれません。しかし、店舗用スプレッドシートに<strong>条件付き書式</strong>を設定すれば、ステータスに応じた行の色分けを再現できます。</p>

    <div class="story">
      <p><span class="b">店長A：</span>「データは見えるんですけど、全部白背景だと支払い済みの予約とそうでないのが区別しにくいです」</p>
      <p><span class="a">田中：</span>「条件付き書式を設定すれば、ステータスが"支払い済み"の行を自動で色分けできるよ。閲覧者にもちゃんと色が見えるから安心して」</p>
    </div>

    <h3>設定手順</h3>
    <div class="steps">
      <div class="step">
        <h4>店舗用スプレッドシートを開く</h4>
        <p>オーナー（編集者）として開きます。</p>
      </div>
      <div class="step">
        <h4>色分けしたい範囲を選択</h4>
        <p>データが表示されている範囲を選択します。例えば <code>A2:E100</code> のように、ヘッダーを除いた範囲を広めに取っておくと、データが増えても対応できます。</p>
      </div>
      <div class="step">
        <h4>メニューから条件付き書式を開く</h4>
        <p>「表示形式」→「条件付き書式」を選択。右側にパネルが開きます。</p>
      </div>
      <div class="step">
        <h4>条件を設定する</h4>
        <p>「セルの書式設定の条件」で「カスタム数式」を選びます。</p>
      </div>
    </div>

    <h3>例：「支払い済み」の行を黄色にする</h3>
    <p>ステータス列が D 列にある場合（IMPORTRANGE の結果として D 列にステータスが入る場合）、以下のカスタム数式を入力します。</p>

    <pre><span class="label">カスタム数式</span>=<span class="fn">$D2</span>=<span class="st">"支払い済み"</span></pre>

    <p>書式スタイルで背景色を黄色に設定し、「完了」を押します。</p>

    <div class="tip">先頭に <code>$</code> をつけるのがポイントです。<code>$D2</code> と書くことで「D 列を固定しつつ行番号は可変」になり、すべての行に条件が適用されます。</div>

    <h3>よく使う条件付き書式の例</h3>
    <table>
      <thead><tr><th>目的</th><th>カスタム数式</th><th>書式</th></tr></thead>
      <tbody>
        <tr><td>支払い済みの行を黄色に</td><td><code>=$D2="支払い済み"</code></td><td>背景色：黄色</td></tr>
        <tr><td>問い合わせ中の行をオレンジに</td><td><code>=$D2="問い合わせ"</code></td><td>背景色：オレンジ</td></tr>
        <tr><td>キャンセルの行をグレーに</td><td><code>=$D2="キャンセル"</code></td><td>背景色：グレー、文字色：グレー</td></tr>
        <tr><td>今日以降の予約を太字に</td><td><code>=$A2>=TODAY()</code></td><td>太字</td></tr>
      </tbody>
    </table>

    <div class="warn">⚠ 条件付き書式の列番号は、IMPORTRANGE で取得した後の列順に合わせてください。マスターの列順ではなく、店舗用シートで実際に表示されている列がどこにあるかで判断します。</div>

    <h3>複数の条件を重ねる</h3>
    <p>「条件を追加」ボタンで複数のルールを設定できます。上にあるルールが優先されるので、優先度の高い条件（キャンセルなど）を上に配置しましょう。ドラッグで順番を入れ替えられます。</p>

    <div class="tip">条件付き書式はオーナーが設定すれば、閲覧者にも色分けが反映されます。スタッフ側での操作は不要です。</div>
  </section>

  <!-- 7 -->
  <section class="section" id="s7">
    <h2>7. 運用のコツとトラブルシューティング</h2>

    <h3>マスターを更新したら自動反映される？</h3>
    <p>はい。IMPORTRANGE はリアルタイムに反映します（数秒〜数分のラグあり）。</p>

    <h3>店舗が増えた場合は？</h3>
    <p>新しいスプレッドシートを作り、WHERE 句の店舗名を変えるだけ。マスター側の変更は不要です。</p>

    <h3>#REF! エラー</h3>
    <table>
      <thead><tr><th>原因</th><th>対処法</th></tr></thead>
      <tbody>
        <tr><td>アクセス許可をしていない</td><td>「アクセスを許可」ボタンを押す</td></tr>
        <tr><td>URL が間違っている</td><td>マスターの URL を再コピー</td></tr>
        <tr><td>シート名が違う</td><td><code>"マスター!A:E"</code> のタブ名を確認</td></tr>
        <tr><td>列構成が変わった</td><td>Col 番号と列の対応を確認</td></tr>
      </tbody>
    </table>

    <h3>#VALUE! エラー — QUERY 構文</h3>
    <p>WHERE 句の文字列は<strong>シングルクォート</strong>で囲みます。</p>
    <pre><span class="label">正しい</span><span class="st">"SELECT Col1 WHERE Col3 = <span class="kw">'あいう'</span>"</span>  <span class="ct">← シングルクォート ✓</span></pre>
    <pre><span class="label">間違い</span><span class="st">"SELECT Col1 WHERE Col3 = <span class="kw">"あいう"</span>"</span>  <span class="ct">← ダブルクォートの入れ子 ✗</span></pre>
  </section>

  <!-- Column 1 -->
  <div class="column" id="c1">
    <span class="column-label">COLUMN</span>
    <h3>QUERY 関数リファレンス</h3>
    <p>Google Spreadsheet 固有の関数。SQL に似た構文でフィルタリングや並べ替えができます。</p>

    <h4>基本構文</h4>
    <pre>=<span class="fn">QUERY</span>(<span class="kw">データ範囲</span>, <span class="st">"クエリ文字列"</span>, <span class="nm">ヘッダー行数</span>)</pre>

    <table>
      <thead><tr><th>引数</th><th>説明</th></tr></thead>
      <tbody>
        <tr><td>データ範囲</td><td>セル範囲、または関数の結果</td></tr>
        <tr><td>クエリ文字列</td><td>Google Visualization API Query Language で記述</td></tr>
        <tr><td>ヘッダー行数</td><td>省略可。通常は 1</td></tr>
      </tbody>
    </table>

    <h4>よく使う句</h4>
    <table>
      <thead><tr><th>句</th><th>使い方</th><th>例</th></tr></thead>
      <tbody>
        <tr><td><code>SELECT</code></td><td>列を指定</td><td><code>SELECT A, C, E</code></td></tr>
        <tr><td><code>WHERE</code></td><td>行の絞り込み</td><td><code>WHERE B = '寿司A'</code></td></tr>
        <tr><td><code>ORDER BY</code></td><td>並べ替え</td><td><code>ORDER BY A DESC</code></td></tr>
        <tr><td><code>LIMIT</code></td><td>行数制限</td><td><code>LIMIT 10</code></td></tr>
        <tr><td><code>LABEL</code></td><td>見出し変更</td><td><code>LABEL A '日付'</code></td></tr>
      </tbody>
    </table>

    <h4>列の指定方法</h4>
    <table>
      <thead><tr><th>データ範囲</th><th>列の書き方</th></tr></thead>
      <tbody>
        <tr><td>セル範囲を直接指定</td><td><code>A</code>, <code>B</code>, <code>C</code> …</td></tr>
        <tr><td>関数の結果（IMPORTRANGE 等）</td><td><code>Col1</code>, <code>Col2</code>, <code>Col3</code> …</td></tr>
      </tbody>
    </table>
  </div>

  <!-- Column 2 -->
  <div class="column" id="c2">
    <span class="column-label">COLUMN</span>
    <h3>IMPORTRANGE 関数リファレンス</h3>
    <p>別の Google スプレッドシートからデータを読み込む関数。Excel にはありません。</p>

    <h4>基本構文</h4>
    <pre>=<span class="fn">IMPORTRANGE</span>(<span class="st">"スプレッドシートのURL"</span>, <span class="st">"シート名!範囲"</span>)</pre>

    <table>
      <thead><tr><th>引数</th><th>説明</th></tr></thead>
      <tbody>
        <tr><td>スプレッドシートの URL</td><td>参照先の完全な URL または ID</td></tr>
        <tr><td>シート名!範囲</td><td>例：<code>"マスター!A:E"</code></td></tr>
      </tbody>
    </table>

    <h4>アクセス許可の仕組み</h4>
    <p>初回接続時に <code>#REF!</code> エラーが出ます。「アクセスを許可」をクリックすると接続が維持されます。</p>

    <h4>知っておきたい特性</h4>
    <table>
      <thead><tr><th>特性</th><th>内容</th></tr></thead>
      <tbody>
        <tr><td>リアルタイム性</td><td>参照元の変更は自動反映（ラグあり）</td></tr>
        <tr><td>許可の単位</td><td>一度許可すると全シート・全範囲にアクセス可能</td></tr>
        <tr><td>権限の前提</td><td>入力者が参照先の閲覧権限以上を持つ必要あり</td></tr>
        <tr><td>パフォーマンス</td><td>大量データは遅くなる。必要な範囲だけ取得推奨</td></tr>
      </tbody>
    </table>

    <h4>QUERY との組み合わせ</h4>
    <p>IMPORTRANGE 単体では範囲まるごとですが、QUERY と組み合わせると「売価列を除外」「特定店舗だけ」といった加工が可能です。</p>
  </div>

  <!-- 7 -->
  <section class="section" id="s8">
    <h2>8. まとめ</h2>
    <p>設定漏れがないか確認してください。</p>
    <ul class="checklist">
      <li>店舗ごとに新しいスプレッドシートを作成した</li>
      <li>A1 セルに QUERY(IMPORTRANGE(...)) を入力した</li>
      <li>SELECT 句で売価（Col4）を除外している</li>
      <li>WHERE 句の店舗名が正しい</li>
      <li>IMPORTRANGE のアクセス許可を済ませた</li>
      <li>データが正しく表示されることを確認した</li>
      <li>店舗スタッフには「閲覧者」で共有した</li>
      <li>マスターは店舗スタッフに共有していない</li>
    </ul>
    <div class="story" style="margin-top: 32px;">
      <p class="n">設定を終えた田中さんは、各店長にリンクを送った。</p>
      <p><span class="b">店長A：</span>「自分の店の予約だけ見えますね。毎日チェックしやすいです」</p>
      <p><span class="a">田中：</span>「マスター側で更新すれば自動反映されるから、二重入力もいらない」</p>
      <p class="n">スプレッドシートの共有は「全部見せるか、見せないか」の二択ではない。IMPORTRANGE と QUERY を組み合わせれば、見せたい情報だけを、見せたい相手にだけ届けることができる。</p>
    </div>
  </section>

</div>
</body>
</html>