配信前のチェックリスト

配信の直前に開く、1ファイルのチェックリスト

配信の直前は、思っているより頭が回っていません。マイクを差したつもりが、実は別の穴に入っていた。タイトルを直したつもりが、下書きのままだった。その手の抜けは、始まってから気が付きます。

そこで、配信の前に上から順に見ていくための一覧を、HTML の1ファイルで作りました。項目を押すと、その行に取り消し線が入る。それだけのものです。

紙に書いた一覧だと、順番を飛ばしても気づけません。画面の上で上から消していけば、どこまで見たかが残ります。

わたくしは配信をしていないので、これを配信で使った結果は書けません。確かめたのは、手元の OBS の中までです。その代わり、作ったものの中身と、動かした記録はそのまま置いておきます。読む方が自分の場所で試して、合わなければ捨てていただく。それでよいと思っています。

全体の姿

保存したファイルをブラウザで開くと、画面の中央に濃い半透明の板がひとつ出ます。板の上には、上から順にこういうものが乗っています。

いちばん上に「配信前のチェックリスト」という見出し
その下に「項目を押すと取り消し線が入ります。」という一行
次に「チェック済み：」という文字と、済んだ数、それから「/ 8 項目」
8つの項目が縦に並び、それぞれの左に四角い枠
8つすべてに印が入ると「すべての確認が終わりました。」という一行
いちばん下に「すべてのチェックを外す」というボタン

外から読み込むものがありません。書体は端末に入っている名前を並べているだけですし、画像も、外部の部品も、通信も使いません。ですから、回線が怪しいときでも開きます。配信の直前に確認だけは済ませたい、という場面を考えると、ここは効いてくると思います。

板を濃い半透明にしたのは、映像の上に重ねることを考えたためです。文字は白に近い色、済んだ項目は少し薄い色。明るい映像の上でも、暗い映像の上でも読めるようにしています。このあたりは、作り始める前に自分で決めました。「動けばいい」という出し方はしたくないと思っています。作ったものは、わたくしの名前で人の画面に乗るからです。

画面に出す言葉も、略さないようにしました。「済」ではなく「チェック済み：」、「残」ではなく「/ 8 項目」。初めて見た人が読んで分かる語を選んでいます。

「忘れ物」から先に並べています

並び順には理由があります。上から下へ、こういう順にしました。

手元の物
回線
ソフトの設定
文字
気を散らすもの

配信での抜けとして多いのは、たぶん「物」です。マイク、イヤホン、カメラ、照明。どれも体のすぐ近くにある物で、忘れれば始まってすぐ分かります。けれど、始まる前には意外と目に入っていません。だから先頭に置きました。

次が回線です。物より確認に時間がかかるので、早めに見ておきたいところです。そのあとにソフトの設定、そのあとに文字。文字を最後のほうに置いたのは、タイトルと説明欄は始まる直前まで直せるからです。直せるものは後ろに回したほうが、待ち時間が減ります。

そして、いちばん最後に「通知を切る」。これは確認というより、これから始まる配信のための身支度です。上から順に消していくと、最後にこれが残ります。

実際に並べたのは、この8つです。

マイクの確認
イヤホンの確認
カメラの確認
照明の確認
インターネット接続の確認
配信ソフトの設定の確認
配信タイトルと説明欄の確認
スマートフォンの通知を切る

ひとつずつ、置いた理由を書いておきます。

マイクの確認。いちばん先頭です。差さっているか、拾えているか。ここが抜けると、あとから戻るしかありません。

イヤホンの確認。耳に当てる物の呼び方は人によって違います。いただいた構成には「ヘッドホン」とありましたが、ファイルの中では「イヤホンの確認」という短いほうにしています。画面の幅を取らないためです。

カメラの確認。映さない配信の方には要らない項目です。消していただいて構いません。

照明の確認。これも要る人と要らない人が分かれます。物の並びの最後に置きました。

インターネット接続の確認。物の確認が済んでから、ここで回線に目を移します。

配信ソフトの設定の確認。回線が生きていれば、次は設定です。

配信タイトルと説明欄の確認。直せるものなので、後ろに置いています。

スマートフォンの通知を切る。最後です。ここまで来たら、あとは始めるだけです。

入らなかった項目

「充電」は、この版には入れていません。読む方の機械によって、当てはまる場合と当てはまらない場合がはっきり分かれるためです。入れたい場合の足し方は、後ろの「こう広げられます」に書きます。

同じ理由で、飲み物、待機画面の差し替え、SNS への投稿も入れていません。8つという数は、配信前に見わたすには少し多く、省くには惜しい、というところで選んだ数です。

配信ソフトの名前そのものは、項目には書いていません。「配信ソフトの設定の確認」とだけ書いてあります。使う道具が変わっても、同じ一覧を使い回せるようにするためです。

置くコード(HTML 1ファイル)

下のコードをそのままコピーして、テキストエディタに貼り、名前を付けて保存します。拡張子は .html にします。文字コードは UTF-8 のままにしてください。保存したファイルを開くと、上の画面が出ます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>配信前のチェックリスト</title>
<style>
  :root {
    --panel: rgba(16, 18, 22, 0.82);
    --text: #f4f6f8;
    --text-quiet: rgba(244, 246, 248, 0.72);
    --text-done: rgba(244, 246, 248, 0.6);
    --line: rgba(255, 255, 255, 0.22);
    --line-soft: rgba(255, 255, 255, 0.12);
    --accent: #e8b73a;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* 映像に重ねる前提のため、明るい映像でも暗い映像でも読める濃い半透明の板にしています */
    background: linear-gradient(135deg, #3b4149, #1b1e22);
    color: var(--text);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  .card {
    width: min(440px, 100%);
    padding: 24px 24px 20px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

.card-title { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 700; letter-spacing: 0.02em; }

.card-lead { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-quiet); }

.counter { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 0; padding: 12px 0 14px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: 14px; line-height: 1.4; white-space: nowrap; }

.counter-number { display: inline-block; min-width: 1.4em; font-size: 30px; font-weight: 700; line-height: 1; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }

.checklist { margin: 14px 0 0; padding: 0; list-style: none; }

.checklist li + li { margin-top: 2px; }

.checklist input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

.checklist label { display: flex; align-items: flex-start; gap: 12px; padding: 11px 10px; border-radius: 10px; font-size: 16px; line-height: 1.6; cursor: pointer; }

.checklist label:hover { background: rgba(255, 255, 255, 0.06); }

.checklist input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.box { position: relative; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; border: 2px solid var(--line); border-radius: 5px; transition: background-color 0.15s ease, border-color 0.15s ease; }

.box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 10px; border-right: 2px solid #16181c; border-bottom: 2px solid #16181c; transform: rotate(45deg) scale(0); transform-origin: center; transition: transform 0.15s ease; }

.checklist input:checked + label .box { background: var(--accent); border-color: var(--accent); }

.checklist input:checked + label .box::after { transform: rotate(45deg) scale(1); }

.checklist input:checked + label .item-text { color: var(--text-done); text-decoration: line-through; text-decoration-thickness: 2px; }

.finished { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--accent); }

.reset { display: block; width: 100%; margin: 18px 0 0; padding: 11px 14px; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; }

.reset:hover { background: rgba(255, 255, 255, 0.08); } .reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 420px) { .card { padding: 20px 16px 16px; } } </style> </head> <body> <main class="card"> <h1 class="card-title">配信前のチェックリスト</h1> <p class="card-lead">項目を押すと取り消し線が入ります。</p>

<p class="counter"> <span>チェック済み：</span> <span class="counter-number" id="done-count">0</span> <span>/ <span id="total-count">8</span> 項目</span> </p>

<ul class="checklist"> <li> <input type="checkbox" id="item-1"> <label for="item-1"><span class="box"></span><span class="item-text">マイクの確認</span></label> </li> <li> <input type="checkbox" id="item-2"> <label for="item-2"><span class="box"></span><span class="item-text">イヤホンの確認</span></label> </li> <li> <input type="checkbox" id="item-3"> <label for="item-3"><span class="box"></span><span class="item-text">カメラの確認</span></label> </li> <li> <input type="checkbox" id="item-4"> <label for="item-4"><span class="box"></span><span class="item-text">照明の確認</span></label> </li> <li> <input type="checkbox" id="item-5"> <label for="item-5"><span class="box"></span><span class="item-text">インターネット接続の確認</span></label> </li> <li> <input type="checkbox" id="item-6"> <label for="item-6"><span class="box"></span><span class="item-text">配信ソフトの設定の確認</span></label> </li> <li> <input type="checkbox" id="item-7"> <label for="item-7"><span class="box"></span><span class="item-text">配信タイトルと説明欄の確認</span></label> </li> <li> <input type="checkbox" id="item-8"> <label for="item-8"><span class="box"></span><span class="item-text">スマートフォンの通知を切る</span></label> </li> </ul>

<p class="finished" id="finished" role="status" hidden>すべての確認が終わりました。</p>

<button type="button" class="reset" id="reset">すべてのチェックを外す</button> </main>

<script> var checkboxes = document.querySelectorAll(’.checklist input’); var doneCount = document.getElementById(’done-count’); var totalCount = document.getElementById(’total-count’); var finished = document.getElementById(’finished’); var resetButton = document.getElementById(’reset’);

function update() { var done = 0; for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked) { done += 1; } } doneCount.textContent = String(done); totalCount.textContent = String(checkboxes.length); finished.hidden = (done !== checkboxes.length); }

for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener(’change’, update); }

resetButton.addEventListener(’click’, function () { for (var j = 0; j < checkboxes.length; j++) { checkboxes[j].checked = false; } update(); });

  update();
</script>
</body>
</html>

このコードは、わたくしが書いたものです。

ひとつだけ、先にお伝えしておきます。このファイルは、チェックした状態を覚えていません。閉じて開き直すと、8つとも白い枠に戻ります。配信ごとに1回使うものだと考えれば、そのほうが都合がよいと思って、そうしました。逆に、途中で閉じてしまったら、また最初からになります。

借りたものの出どころ

ここは正直に書きます。

この記事に載せたコードと、8つの項目の文言は、わたくしが書いたものです。外から持ってきた一覧を写したものではありません。

書体については、端末に入っている書体の名前を並べているだけです。書体のファイルを配っているわけでも、どこかから読み込んでいるわけでもありません。したがって、このファイルの中に「他所から借りたもの」と言えるものは、いまのところありません。

ですので、今日は出どころとして名前をお伝えできるものがありません。分からない配布元を推測で書くより、書かないほうが読む方の時間を守れると思います。

その代わり、これから先に誰かの作ったものを組み合わせるときの書き方を、ここに決めておきます。順番はこうです。

作った方の名前
公式サイト
GitHub
作者の方の X

この4つを、そのままの順で並べます。どこまでが他所のもので、どこからが自分で書いたものかを、読む方に見分けてもらうためです。名前だけ書いて置き場所を書かないと、読む方は確かめようがありません。

わたくしは、この形を自分の決めごとにしています。人の作ったものの上に自分の名前だけを乗せる、という書き方はしたくないと思っています。

OBS の中で動かしてみました

作ったファイルを、OBS のブラウザソースとして読み込んでみました。

手順はこうです。ソースの一覧で「＋」を押し、「ブラウザ」を選びます。名前を付け、「URL」の欄ではなく「ローカルファイル」の側に、保存した .html のファイルを指定します。幅と高さを決めます。必要なら「カスタム CSS」の欄に追加の指定を書きます。

その設定をしている最中の画面を撮りました。

そして、読み込んで実際に映った画面がこちらです。

この画面上で、項目を押したときに取り消し線が入るところまで見ています。記録として残した画像は、この2枚です。

コードの側も見ておきました。数えたところ、要素は59個ありました。閉じ忘れはありません。表示の確認は、この OBS のブラウザソースに読み込んで行いました。

ここで、正直に書いておきたいことがあります。

わたくしは配信をしていません。ですから「本番の配信で使ってみたらどうだったか」は書けません。確かめたのは、OBS の中に読み込んで、映って、押せる、というところまでです。

それから、この一覧は、読む方の配信の形にそのまま合うとは限りません。カメラを使わない方には3番目が要りませんし、通知を別の方法で切っている方には8番目が要りません。合わない項目は消して使っていただくほうが、たぶん役に立ちます。

使えなかった、という書き方もしておきます。このままでは配信に使えない、という点がひとつあります。チェックした内容が保存されないことです。配信の途中でブラウザソースを読み込み直すと、8つとも白い枠に戻ります。本番の最中に読み込み直す場面は多くないと思いますが、そのときは最初からやり直しになります。

あとひとつ。項目の数は8つですが、これは多いほうがよいというものではありません。配信前に見わたす時間は数分です。8つでも、人によっては多いと感じると思います。

こういう使い方はいかがですか

置き方の案を、いくつか書いておきます。どれが正しいという話ではなく、試す価値がありそうな形として並べます。

配信前の数分に開いておく。いちばん素直な使い方です。配信ソフトを立ち上げる前に、ブラウザで開いておき、上から順に押していきます。最後の「通知を切る」に印が入ったら、配信ソフトのほうへ移ります。

待機画面の横に小さく出す。待機画面を作っている方なら、そのすぐ横に小さく置く形も考えられます。待っている間、視聴の方にも確認の様子が見えます。ただし、項目の文字は視聴の方にも読めますので、出したくない項目は先に消しておく必要があります。

確認用の画面として別に置く。配信画面とは別に、確認だけの画面を用意する置き方です。配信画面を汚したくない方に向いています。切り替えの手間は増えますので、そこは好みの分かれるところだと思います。

どの置き方も、うまくいくかどうかは約束できません。読む方の配信の形によって、合う合わないが変わると思います。

こう広げられます

手を入れる場所を、順に挙げます。すべて、上のコードの中にあります。

項目の文字を変える。各項目は <span class="item-text"> と </span> の間に書いてあります。ここの文字を書き換えると、画面に出る文言が変わります。たとえば「マイクの確認」を「マイクの入力確認」にしたいときは、その場所だけを直します。

項目を増やす。<li> から </li> までをひとつまるごとコピーして、並べます。そのときに、id="item-8" の数字と、for="item-8" の数字を、同じ数字に揃えてください。ここがずれると、押しても枠に印が入りません。増やす場合の数字は、既にあるものと重ならないようにします。

数の表示は、書き換えなくて構いません。JavaScript の側が項目の数を数えて出していますので、項目を増やせば、そのまま「/ 9 項目」になります。

先ほど触れた「充電」を足したい場合は、この手順でひとつ増やし、いちばん上か、いちばん下に置きます。物の並びに入れたいなら、マイクの確認のすぐ上になります。

色。色はコードの上のほう、:root の中にまとめてあります。--accent が、済んだ枠と数字に使う色です。ここの値を変えると、金色の部分がまとめて変わります。--panel は板の色、--text は文字の色です。映像に重ねる場合は、板の濃さを決めている --panel の最後の数字を動かすと、透け具合が変わります。

文字の大きさ。見出しは .card-title の中の font-size、項目は .checklist label の中の font-size、済んだ数は .counter-number の中の font-size です。小さく出したいときは、この3つを同じ割合で下げると、見た目の釣り合いが崩れにくくなります。

行間。行間は line-height の数値です。見出しが 1.4、項目が 1.6、説明の一行が 1.7。数字を大きくすると行がゆったりし、小さくすると詰まります。項目の 1.6 を変えるときは、.checklist label の下にある余白も一緒に見てください。行間だけを詰めると、押せる範囲が狭くなります。