配信前のチェックリスト：忘れ物から並べた、HTML 1ファイルの確認表

配信の前に見る、1ファイルのチェックリスト

配信の直前は、思っているより慌ただしくなります。マイクの電源が入っていなかった。通知が鳴ってしまった。配信タイトルが下書きのままだった。そういう小さな抜けは、始まってから気が付くものです。始まる前に一度だけ目を通せたらいいのに、と思って、確認のための道具を一つ作りました。

HTML のファイルが一つだけです。サーバーも、専用のソフトも、買い足すものも要りません。保存して開けば、それだけで動きます。項目を押すと、文字の上に取り消し線が入ります。上には「チェック済み：0 / 8 項目」という数が出ていて、押すたびに一つずつ増えていきます。

開いたときの姿は、こんな具合です。画面の中ほどに、濃い灰色の板が一枚出ます。板の角は丸く、まわりには、うっすらと影が落ちます。背景は斜めのグラデーションで、少しだけ青みがかった灰色から、ほぼ黒に近い色へ流れていきます。板の上では、文字は白です。

一番上に「配信前のチェックリスト」と大きく出ます。そのすぐ下に、小さめの文字で「項目を押すと取り消し線が入ります。」と置きました。次に、細い区切り線をはさんで「チェック済み：」という文字と、金色の大きな数字、それから「/ 8 項目」が並びます。数字だけを大きくしたのは、残りが一目で分かるようにしたかったからです。

その下に、八つの項目が縦に並びます。一つ一つの左には、角を丸くした四角い枠があります。項目の文字や枠にふれると、その行だけ、うっすらと明るくなります。押すと、枠の中が金色に変わり、白いチェックが入ります。同時に、項目の文字に取り消し線が入り、文字の色が少し薄くなります。

一番下には「すべてのチェックを外す」というボタンを置きました。次の確認のために、まとめて元に戻すためのものです。

これが、この道具の全体です。ここから、なぜこの順番にしたのかを書いていきます。

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

並べる順番は、少し迷いました。あいうえお順でも、思いついた順でもかまわないのですが、それだと見るたびに順番が変わりそうでした。そこで、まず「忘れ物」という言葉から組み立てることにしました。忘れ物というのは、持っていくはずのものが手元にない、という失敗です。配信の前でいえば、挿すはずのものが挿さっていない、つけるはずのものがついていない、という形で表れます。

だから、体につけるもの、手元の環境、ソフトの設定、外へ出る情報、という順にしました。前にあるものほど、体に近いものです。後ろにあるものほど、外の世界に近いものです。下へ下がっていくにつれて、確認する相手が、自分から、機械へ、そして見てくださる方へと移っていきます。順番そのものを、下に書き出します。

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

一番はじめが、マイクの確認です。ここが一番、抜けが多いのだろうと思っています。挿さっているか、どのマイクが選ばれているか、声が入っているか。口に出して確かめるしかありません。

次が、イヤホンの確認です。つけ忘れると、自分の声が部屋に流れて、後から気が付くことになります。耳に入れるものが手元にあるか、という意味でも、忘れ物の筆頭です。

三つ目が、カメラの確認です。映像を出す配信でなければ飛ばしていただいてかまいませんが、出すのであれば、映っているか、明るさは足りているかを、ここで一度見ます。

四つ目が、照明の確認です。カメラの次に置いたのは、この二つが同じ相手を見ているからです。顔や手元に、影が落ちていないか。

五つ目が、インターネット接続の確認です。ここから先は、体から離れた相手になります。回線がつながっているか、切れそうになっていないか。

六つ目が、配信ソフトの設定の確認です。どの画面を出すか、音の大きさはどうか。ここまでの物理的な確認が終わってから、ソフトの中を見ます。順番を逆にすると、ソフトを触っているうちに、マイクの抜けを見落としやすくなるからです。

七つ目が、配信タイトルと説明欄の確認です。ここから先は、外へ出る情報です。手元の機械ではなく、見てくださる方が最初にふれる文字です。下書きのまま出してしまう、という失敗が、この位置で起きます。

八つ目、一番最後が、スマートフォンの通知を切る、です。これを最後にしたのは、他を全部終えてから、一度だけ手を伸ばしたかったからです。途中で切ってもよいのですが、ほかの確認の途中で画面を触ると、そのまま別の用事に入ってしまいがちでした。最後にまとめて、がわたくしには合っていました。

この八つが、いまの一覧です。すべての配信に当てはまるものではありません。入れていない項目もあります。充電のように、人によって要るものが違うものは、あえて外してあります。ここは、あとで触れる増やし方の所で、足していただく形にしています。読む方の配信に合わせて、足したり、減らしたりしてください。

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

下が、そのまま置くコードの全文です。複製して、名前を付けて保存し、拡張子を .html にしていただければ、あとは開くだけで動きます。専用のソフトも、インターネットへの接続も要りません。

<!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>

借りたものの出どころ

先に、はっきりと書いておきます。このコードは、わたくしが書いたものです。外から読み込む書体は使っていません。端末に入っている書体を、名前で指定しただけです。使っている部品も、他の方が配っているコードも、入っていません。

だから、出どころとして挙げられるお名前は、コードについては、今回はありません。ここは、いつもなら、作った方のお名前、公式の場所、それから GitHub や X を並べる所です。今回そこに当てはまるものが無いので、空けておきます。分からないことを、それらしく書くわけにはいかないからです。

一方で、この記事には、わたくし以外のものが一つだけ出てきます。動かすのを確かめるのに使った OBS Studio です。こちらは、はっきり書いておきます。

名前：OBS Studio
作者：OBS Project
公式サイト：obsproject.com
GitHub：github.com/obsproject/obs-studio
X：@OBSProject

この道具は、配信や録画のために配られている、無料のソフトです。わたくしは、その中の「ブラウザソース」という機能だけを借りて、今回の確認をしました。借りたのは機能だけで、作った方にお願いをしたり、許可をいただいたりしたわけではありません。使わせていただいている、という形です。

読む方が見分けやすいように書いておくと、HTML と CSS と小さな JavaScript はわたくしが書いたもの、動かす土台は OBS Studio、それ以外は何も使っていません。

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

作っただけで終わらせず、実際に映るところまで確かめました。わたくしは配信をしていないので、確かめられたのはここまでです。それでも、読み込んで、押して、取り消し線が入るまでは見ています。

手順は、次のとおりです。

OBS に「ブラウザソース」を一つ足します。
ローカルのファイルを指定します。場所の欄に、保存した HTML ファイルを指します。
幅と高さを決めます。板の大きさに合わせて、少し余裕を持たせておきます。
カスタム CSS の欄は、今回は空のままにしました。板の見た目は、HTML の中の CSS で足りているためです。
決定して、画面に映します。

設定している最中の画面を一枚、撮りました。読み込むファイルの場所の欄、幅と高さの欄、それからカスタム CSS の欄が写っています。

読み込んだあと、実際に映った画面が、こちらです。

映った状態で、項目をいくつか押してみました。押した行は、枠の中が金色に変わり、文字の上に取り消し線が入りました。上の「チェック済み：」の数も、押すたびに一つずつ増えました。取り消し線が入るところまでは、思っていたとおりに動きました。

数えたところ、要素は 59 個でした。閉じ忘れのタグは無く、途中で表示が崩れることもありませんでした。

正直に書いておきます。確かめたのは、自分の手元の OBS のブラウザソースに読み込んだところまでです。実際の配信の中で、どのくらいの大きさに見えるか、動く映像の横で読みやすいか、そういうことは確かめていません。わたくしは配信をしていないので、そこは分かりません。使えなかった、という話ではありませんが、配信で使ってみたらどうだったか、という話もできません。読む方の環境で、一度映して見ていただくのが確かだと思います。

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

置き方の案を、三つほど書いておきます。どれがよい、と決めるものではなく、それぞれ別の場面に向いている、という程度のものです。

一つ目は、配信の前の数分に、普通のブラウザで開いておく置き方です。配信ソフトには出さず、手元の別の画面で見ます。配信の画面には何も足したくない、という方にはこれが一番静かです。押した数が上に出ますので、残りがいくつかも分かります。

二つ目は、待機画面の横に、小さく出す置き方です。待機画面は、始まるまでの間、ずっと映っています。その横にこの板を小さく置いておけば、始まるまでの間に、見ながら確認ができます。小さくすると文字が読みにくくなりますので、幅と高さは、読める大きさで決めてください。

三つ目は、確認用の画面として、別に置く置き方です。配信には出さず、自分だけが見る画面を一つ作って、そこに置きます。配信中に、ふと「あれを確認したか」と気になったときに、切り替えずに済みます。

どの置き方でも、このファイルはインターネットにつながっていなくても動きます。回線が細い日でも、板は変わらず出ます。そこは、作る時に考えていた所です。

こう広げられます

最後に、手を入れる場所を、順に指しておきます。上から順に、直しやすい所から並べます。

一つ目は、項目の文字を変える所です。八つの行それぞれに、<span class="item-text"> という囲みがあり、その中に文字が入っています。「マイクの確認」なら、その文字を消して、自分の言葉に書き換えます。囲みの外は触らないでください。取り消し線の仕掛けは、その囲みに付いています。

二つ目は、項目を増やす所です。<li> から </li> までが、一行分です。このまとまりを一つ複製して、下に足します。足したら、中の id="item-9" と for="item-9" の番号を、他の行と重ならない番号にそろえてください。二つの番号が同じでないと、押しても枠が反応しません。ここは、増やすときに一番間違えやすい所です。

三つ目は、色です。コードの上の方に :root という囲みがあり、その中に色がまとめて置いてあります。金色にあたるのが --accent です。枠や数字の色は、ここを一か所変えれば、全部そろって変わります。板の色は --panel、文字の色は --text です。背景の流れは、body の中の background の一行で決まっています。

四つ目は、文字の大きさです。見出しは .card-title の font-size、項目の文字は .checklist label の font-size、上の小さな説明は .card-lead の font-size です。数字だけを大きくしたいときは、.counter-number の font-size を触ります。

五つ目は、行間です。line-height という数値が、それぞれの所にあります。項目の行間は、.checklist label の中の line-height: 1.6 です。この数を大きくすると、行と行の間が広がって、読みやすくなります。ただし、八つの行が長くなりますので、板の高さも合わせて確かめてください。

増やしたときは、上の「チェック済み：0 / 8 項目」の合計も、自動で変わります。そこは数え直さなくてかまいません。ファイルの中の数は、開いたときに読み直されます。

最後に

この一覧は、わたくしの配信の前に作ったものではなく、わたくしが配信をしていない中で、忘れ物を減らすために組み立てたものです。だから、実際の配信でどこまで役に立つかは、正直には分かりません。それでも、確認する順番を一つ決めておくと、直前の慌ただしさが、少しだけ静かになると思っています。

読む方の手元で、一つでも抜けが減ればうれしいです。足りない項目があれば、ぜひ足して、自分の一覧にしてください。