【無料公開中】表作りなら私に任せて！最新ツール「表子」で、あなたのnoteをプロっぽく彩っちゃお✨
こんにちは、ニャンコー不落です🐈⬛
少し時間が空いてしまいましたが、ようやくMermaidでnote用の表コードを生成するツール「表子」が完成しましたので、思い切って無料で公開したいと思います！
「表子」
👉 https://latticelite.com/tool/hyoko/
以前開発した、KaTeXで表コードを自動生成する「表介（表助あらため）」では、テキストの色やセルの背景色などは変更できませんでしたが、Mermaid記法を使った「表子」なら、それが可能となります。
フォントの指定、罫線の細かな設定、セルの結合、縦書きの他、画像やリンクも貼れますので、ぜひ使ってみてください。
さて、ここからは「表子」さんに説明をお願いしていきたいと思います。
それでは「表子」さん、よろしくお願いします！
⭐表子とは
はじめまして！
私の名は、 枡田 表子（ますだ ひょうこ）。
22歳、表を愛するアパレルデザイナーだよ。
精一杯レクチャーするから、最後まで付き合ってね！✨
「表子」は私が監修したツールなんだけど、開発は表介くんにお願いして作ってもらったんだ。
KaTeXの表もクラシックで素敵だけど、デザインの自由度がちょっと物足りなくて。「もっと可愛くしたいのに！」って思ってた時に出会ったのが、このMermaid！
「表子」を使えば、noteの表が驚くほどオシャレに、サクッと仕上がっちゃうの。
セルに値を入れて、お好みのスタイルに仕立てたら、
コピーボタンを押して、noteに貼りつけるだけで完成だよ！
簡単でしょ！？
表介くんのツールと違って、テキストの色や背景色を自由に変えられるし、セルの結合や縦書きにも対応してるから、ディテールにこだわりたい派の人には、絶対ぴったりだよ。
リンクや画像も貼れるけど、リンクはちょっとワガママで、新しいタブでは開けないみたい。
今いるタブでページ移動しちゃうから、もし使うならサイト内の記事に貼るのがオススメかな。
「表子」で設定できる項目はこんな感じ。
これからもっとバリエーションを増やしていくつもりだから、楽しみにしててね！
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#CCdA{*{box-sizing:border-box;}.hyoko{width:610px;col{width:147.5px;}tr{height:36px;}}table{border-collapse:separate;border-spacing:4px;table-layout:fixed;width:610px;}td{background-color:#FFD9B3;color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;text-align:left;vertical-align:middle;padding:4px 8px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:1px solid #bfbfbf;}.hlink{width:610px;text-align:right;margin:2px 0;padding:0 4px;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='CCdA'><div class='hyoko'><table class='bl'><colgroup><col><col><col><col></colgroup><tr><td>背景色</td><td>テキストの色</td><td>フォントの種類</td><td>フォントサイズ</td></tr><tr><td>文字形式</td><td>罫線</td><td>セル内の文字配置</td><td>セルの結合</td></tr><tr><td>縦書き設定</td><td>セルサイズ</td><td>セル内の余白</td><td>行間</td></tr><tr><td>文字の間隔</td><td>リンク</td><td>画像</td><td>横スクロール</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#VY9fS8JgFMZzrr0ZgWHZn4tuJt6FbNpFettNBNFn2GqmZE10BNGCfF80g6RAMzQIighLnFBE_9ynOc1tn6JYSygOh_PwPPA753zN7bO7Uo5NsNEIH-HYeVbIZtkEm9qTt2T2gKZHg2gkL2WFnKBIU16aRiiUTG7Exdi0l_IiFOIW-RgvIOTj8yEx6dQkQr9qBS2IsqLI22ouvZlSVE7l1Li6lpV2wlFOSaXzzhDEjBSOcmnHW3a2RmaZpYnDoXGaylDUKkLribycSW8gNPwzPQMxNOLxUp6_7bPISb_RtY4fA0BKgDuA34CUoaBZx49BIOeA74E8uZbZ0uzrq_8ufgZ8C_h9rF8_MjoXhn5j9E4ZU2-bL80ZwB9A2kapCAXNze1ixdQ1vxs4yOcz46zsN1_v-pevUKhYrY6hNQf5AB74C_rUG2ZDZ6zrE7te9btYKGh2vWo3az4gD85luMuYtQ-DnAb6rQfnJ9wF0gHSA9L-Bg" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```次からは、実際の画面を見ながら、詳しくエスコートしていくね！
「表子」を今すぐ使ってみたいなら、こちらから入ってね！
👉 https://latticelite.com/tool/hyoko/
⭐「表子」の使い方
🔹画面の構成
表子の画面構成は、5つのパーツでコーディネートされているの。
① データを入れるエリア
② プレビューを確認するエリア
③ コードをコピーするエリア
④ セルの設定をするエリア
⑤ 表子の呟きを楽しむエリア
🔹① データを入れるエリア
まず画面の上側で、表の「素材」となるデータを入れてね。
この部分は「表介」と同じ仕様だから、次のショートカットキーが使えるよ。
コピー Ctrl+C
ペースト Ctrl+V
カット Ctrl+X
元に戻す Ctrl+Z
やり直す Ctrl+Y
改行 Alt+Enter
上と左にある「＋」ボタンで、列や行をプラス、
右と下にある「Ｘ」ボタンで、行や列をカットできるよ。
数式もサポートしてるから、計算が必要なシーンで活用してみてね。
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#d1oq{*{box-sizing:border-box;}.hyoko{width:610px;col{width:160px;}tr{height:36px;}}table{border-collapse:separate;border-spacing:4px;table-layout:fixed;width:496px;}td{background-color:#FFD9B3;color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;text-align:left;vertical-align:middle;padding:4px 8px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:1px solid #bfbfbf;}.hlink{width:496px;text-align:right;margin:2px 0;padding:0 4px;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='d1oq'><div class='hyoko'><table class='bl'><colgroup><col><col><col></colgroup><tr><td>+ - / * （四則演算）</td><td>& （文字結合）</td><td>SUM（合計）</td></tr><tr><td>AVERAGE（平均）</td><td>MAX（最大値）</td><td>MIN（最小値）</td></tr><tr><td>COUNT（個数）</td><td>ABS（絶対値）</td><td>MOD（商の余り）</td></tr><tr><td>POWER（指数関数）</td><td>IF（条件式）</td><td>AND（論理積）</td></tr><tr><td>OR（論理和）</td><td>NOT（否定）</td><td></td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#-y9brVSWWqRkpWSkZ6hnoKSjlFhQoGSllFGZn52vVMvKzCXKzlGcWpBYlFiSKsbMwsLOrpyWlmKZZCzOzMTMzq5sYGFobJjIzs5pWKyclAaCIuzsUJYXu0lSfklJfm5NUWZ6RkmNQY1BjWWNf0FqnqqRQUlGZjGISkzKSVU1MsgEiXmAbNWTZGFYIMDOwMjky86ebFWcn5OZws7OCqYZGBn5pbQVdBX0FbQU3u_peDp79tPO9md7pjxfN_39nk4RNZDgs2ntT9dOf751wtMJHe_3dPIHh_qClE7oeLECxBd2DHMNcnR3BYnt3Px0bvv7PZ1Cvo4RIJ1zGp4uWf60YQlYyNMPKrShHyIk6Owf6hcC0tfQ_WzqBpAiR6fg93s6nm_d9nT9PogiUV9_F5CSqW2PG9c92TvzcVPX-z2d4gH-4a5BIPN62p9N3fBy2iKIAYKebiDBuQuf7N72dE8_2Eg_kP4Xq6c9n9D2fGUvSJF_EFzk6aQekJ_8_MHumLDs6bpZ7_d0MgAA" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```🔹② プレビューを確認するエリア
データを入れると、リアルタイムで画面中央のプレビューに反映されるよ。
100%完璧とはいかないけど、noteに貼った時の仕上がりとほぼ同じ感覚でチェックできるから便利だよ！
書式を変えた時もすぐに反映されるけど、最終的にはnoteのプレビューや投稿後の画面でしっかりチェックしてみてね！
🔹③ コードをコピーするエリア
「コピー」ボタンを押すと、あなたが仕立てた表のMermaidコードがコピーされるから、後はnoteの編集画面で貼り付けるだけ。
noteの編集画面で、白地の部分にそのまま貼りつけると、先頭と末尾のコード（```mermaid）が消えちゃうことがあるみたい。
先に編集メニューから「コードブロック」を出しておいて、その中でペーストするのが確実だよ。
🔹④ セルの設定をするエリア
ここは、セルの表情を決める「セル設定」タブと、表全体のフォルムを整える「全体設定」のタブに分かれているよ。
あとで詳しく説明するけど、横スクロールを出したい時には、「全体設定」タブでチェックを入れてね。
お気に入りの設定を保存したい時は「ファイル保存」でダウンロード、呼び出したい時は「読み込み」からファイルをアップすればOK。
あと、さっきのコードエリアで「設定内容」をコピーして、この画面のテキスト欄にペーストしても呼び出せるよ。便利でしょ？
🔹⑤ 表子の呟きを楽しむエリア
画面の左エリアは、私の日常やアップデート情報を発信していく予定。
トレンドを逃さないように、しっかりチェックしておいてね！
上には、「表介」へのアクセスパネルも用意してるから、数式が必要な時は、彼を呼んであげてね。
「表子」を今すぐ使ってみたいなら、こちらから入ってね！
👉 https://latticelite.com/tool/hyoko/
⭐設定項目
🔹カラー
「セルの背景色」や「テキストの色」を変えたい時は、「カラー」項目の「カラーパネル」をクリックしてみて。
そうすると専用のパレットが出てくるから、あなたのセンスで表を素敵に彩っちゃお！
🔹フォント
「フォントの種類」や「サイズ」も変えられるけど、デバイスによっては見え方が違うことがあるかも。
このあたりはまだ研究中！
詳しいことが分かったら、すぐシェアするね。
🔹文字形式
太文字にしたい時は「Ｂ」、
イタリックにしたい時は「Ｉ」、
下線をつけたい時は「Ｕ」、
取消線は「abc」。
直感的にポチポチ選んでみて。
🔹罫線
ワンクリックで引けるパネルは4種類。
もっとこだわりたい時は、「詳細設定」のリンクからカスタマイズしてね。
上下左右、内側の線のON・OFFを自由に切り替えられるよ。
線の種類や色を指定できるけど、線の「太さ」や「丸み」のオーダーは、これからのアップデートを待っててね！
🔹配置・結合
文字のポジションを変えたい時は、左の矢印パネル、
セルをドッキングさせたい時は、右の「結合」パネルで操作してね。
結合した後は、パネルが「解除」に変わるよ。
🔹レイアウト
テキストは普通「横書き」だけど、パネル操作で「縦書き」にもできるよ。
自動で行の高さが広がるから、ビジュアルの変化を楽しんでね！
🔹セルサイズ
列全体を選ぶと「横サイズ」、
行全体を選ぶと「縦サイズ」を変えられるよ。
PC版noteの横幅は620px。
表が大きすぎると自動で縮小されちゃうから、そんな時は「全体設定」タブの「横スクロール」をONにしてみて。
🔹余白
セル内の余白（padding）は、デザインの「抜け感」を決める大切なポイント。
少し広めに設定すると、今っぽく、読みやすくなるからオススメだよ！
🔹文字間
「行間」や「文字の間隔」も微調整できるよ。
行間は「Alt+Enter」の改行で、バランスを整えたい時に使ってみて。
「余白を制する者はデザインを制す」って言うし、ここをこだわるとプロっぽい仕上がりになるよ！
🔹リンク
URLを入れるとテキストがリンクに早変わり。
ただMermaidの仕様で制限があって、新しいタブで開けないところが、とっても惜しいポイント…。
今のタブでページが切り替わっちゃうから、サイト内の回遊とかに使うのがいいかもね。
🔹画像
画像をレイアウトしたい時は、セルを空にして画像のURLを入れてね。
画像はサーバーに置いておく必要があるけど、noteの下書きにアップした画像のURLを使うのが、手軽でオススメだよ。
🔹ノード
ちょっと専門的な話だけど、Mermaidでは「ノード」っていう枠で表を包んであげる必要があるの。
初期値は白だから目立たないけど、「全体設定」から背景や枠線を変えて、表の外側までトータル的にデザインできるよ。
実はノードの外にはもう一つ枠があって、そこは白地で固定なの。
サンプルでいくと、オレンジ部分が10px、その外も10pxだから、PCで見た時の最大サイズは600pxくらいって覚えておいてね。
🔹横幅・横スクロール
横幅はnoteのベストフィットする620pxにしてあるから、基本はそのままでOKだよ。
表が窮屈そうなら、横スクロールをONにしてあげてね。
🔹ボーダー
セルの間隔を変える項目だよ。
「間隔あり」にすると、セパレートされたオシャレな雰囲気の表になるの！
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#pNh7{*{box-sizing:border-box;}.hyoko{width:610px;col{width:147.5px;}tr{height:36px;}}table{border-collapse:separate;border-spacing:4px;table-layout:fixed;width:610px;}td{background-color:#FFF2E6;color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;text-align:center;vertical-align:middle;padding:4px 8px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:2px solid #ff9933;}.hlink{width:610px;text-align:right;margin:2px 0;padding:0 4px;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='pNh7'><div class='hyoko'><table class='bl'><colgroup><col><col><col><col></colgroup><tr><td>A1</td><td>B1</td><td>C1</td><td>D1</td></tr><tr><td>A2</td><td>B2</td><td>C2</td><td>D2</td></tr><tr><td>A3</td><td>B3</td><td>C3</td><td>D3</td></tr><tr><td>A4</td><td>B4</td><td>C4</td><td>D4</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#LY3NSsQwGEWnXzN-ipsRf4ZZuEmZnZT8IU5dtelCBPEZ0jGxxWpLEwQxgm-uFIa7uOeezf27_qafdqIFFTnPGb2hZhxpQduv4W2gP4ScXuKxt6OZTLBXKSGImXNO2Nt1Cilixu645AbxhPuscXOWmOwvEA_rEVUzhDC8x6l7bUNkkcVdfB7tx1aw0HZ-LtP0ditYN7uH-TnfHOnz38WKQJ_AE57tC-Ezt5P3_gCISz_03csiSVZQcqg4aA41h1JAJUALqAWUEioJWkItoVRQKdAKavUP" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```「ノード」の背景と組み合わせれば、ボーダー（枠線）っぽく見せることもできるんだ。
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#ZzAl{*{box-sizing:border-box;}.hyoko{width:610px;padding:10px 20px;background-color:#804000;col{width:137.5px;}tr{height:36px;}}table{border-collapse:separate;border-spacing:4px;table-layout:fixed;width:570px;}td{background-color:#FFF2E6;color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;text-align:center;vertical-align:middle;padding:4px 8px;line-height:1.5;font-weight:bold;white-space:pre-wrap;word-break:break-all;border:none;}.a1,.b1,.c1,.d1{background-color:#FF8000;color:#FFFFFF;}.hlink{width:570px;text-align:right;margin:2px 0 2px 20px;padding:0 4px;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='ZzAl'><div class='hyoko'><table class='bl'><colgroup><col><col><col><col></colgroup><tr><td class='a1'>A1</td><td class='b1'>B1</td><td class='c1'>C1</td><td class='d1'>D1</td></tr><tr><td>A2</td><td>B2</td><td>C2</td><td>D2</td></tr><tr><td>A3</td><td>B3</td><td>C3</td><td>D3</td></tr><tr><td>A4</td><td>B4</td><td>C4</td><td>D4</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#jY5LS8NAFIWbO1OvlS66qIqCmwndlXhnEiTGVR4LEcTfkNQZE4xJSIIgRvCfK0MVt3IWh_NYfF8X7-JV9yISypMeia3Iu05Eonxrn1vxwfnq3DnGw0F3eZ-P-oRxjugaY5S-OmXAEF0KpS9zD5euMSERbe2MuJCDWxirOTq7NeJPkohuSAER3WFQtOPYvkx99VSOE000XU8PnW42isayGqzlRa03iirb3Voo75KtiR2dHaSLz9mKQ834PeIuam6GqNnDWQqGfM8xH9q6evzPB_4-v9WMOQwctoRYQiIhlZBJiBUkClIFmYLYh8SH1IfMhziAJIA0gCz4Bg" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```いろいろ試して、あなただけの「表スタイル」を見つけてね！
👉 https://latticelite.com/tool/hyoko/
💫2026.08.08 「表子 2.1」リリース！
noteのアップデートに合わせて、表子も「Mermaid 11」に対応したよ♪
note記事の冒頭に貼りつけても問題なくなったし、リンクも新しいタブで開けるようになってるからチェックしてみてね！
表を重ねて飾れる「レイヤー機能」を中心に、「フォント・画像の調整機能」や「表子リンクの設置機能」などが追加になってるよ。
スマホとかブラウザの表示設定で、表がギューって狭くなっちゃう問題も見つかって、今回しっかり見直したの。
noteに貼りつけた表がある人は、「表子 2.1.0」で作り直すのがオススメ！
ひと手間かかるけど、きれいに見せるためにお願いね☆
💫2026.05.31 「表子 2.0」リリース！
リリースしたばかりの「表子」だけど、もっと使いやすくブラッシュアップしたから紹介するね！
今回の一番のこだわりは、URLでサクッと共有できるようになったことかな。
他にもシルエットにこだわって角丸を調整できるようにしたり、せっかく作った表データが消えないようブラウザに記憶したり、色々アップデートしたから要チェックだよ。
⭐注意事項
表子さん、ありがとうございました。
後はニャンコー不落が代わって、補足していきたいと思います。
🔹先頭にMermaidコードを貼るとエラーになります（この問題は解消しています）
note記事の冒頭にMermaidコードを貼りつけると、構文に問題がなくてもエラーになることがあります。
これは、Mermaidのライブラリが完全に読み込まれていない状態で、本文にMermaid記法が出現した場合に発生するものだと思われます。
少し厄介なことに、プレビューでは問題なくても、記事を投稿した後に見るとエラーになることがあるのですが、少しスクロールした位置に貼りつけてください。
🔹スマホでのチェックもお願いします
私のスマホではChromeとSafariで確認していますが、Androidやタブレットなど数多くのデバイスがあるため、今はまだ、すべてをチェックできていません。
表コードをnoteに貼りつけた際は、PCだけではなく、スマホでも問題なく表示されているか、ご確認をお願いします。
特に文字が極端に小さくなることがありますので、スマホで見にくい場合は列を絞るか、横スクロールを活用してみてください。
また「表子」自体、レスポンシブに作られていますが、ほぼPC専用のツールとなっていますので、ご了承ください。
⭐免責事項・権利について
お約束となり恐縮ですが、念のため載せておきたいと思います。
本ツールは細心の注意を払って開発しておりますが、計算結果の正確性や動作を完全に保証するものではありません。
本ツールを利用したことにより生じた損害等について、制作者は一切の責任を負いかねますので、あらかじめご了承をお願いします。
また本ツールに関するプログラム、デザイン、テキスト、その他一切の知的財産権および著作権は、制作者（ニャンコー不落）に帰属します。
本ツールを用いて生成されたコードおよび表データについては、個人・商用問わず、どなたでも自由にご利用いただけますが、私的利用の範囲を超えた無断での複製、改変、再配布等は禁止とさせて頂きます。
⭐おわりに
当初は、以前に開発した、KaTeXで表を作るツール「表介」をバージョンアップする予定で、MermaidもKaTeX（数式）も利用できるツールを考えていました。
ところが、Mermaid記法の中では、KaTeXコードが数式に変換されないことが分かり（当然と言えば当然ですが）、やむなくツールを2つに分けることにしました。
そのおかげで「表子」が誕生し、一気に「表介」と「表子」のキャラクターデザインや、その後の構想まで練れたので、結果はオーライです！
ただ目標としては4日も遅れてしまったので、第2目標である「サイトの立ち上げ」を、なんとしても5月中に仕上げられるよう、急ぎたいと思います。
最後まで読んで頂き、ありがとうございました🐈
何かのお役に立てれば嬉しいです🌈
「表子」へのアクセスはこちらから
👉 https://latticelite.com/tool/hyoko/