noteで表を作る3つの方法｜TeX記法なら文字のまま貼れます

2026-08-12

記事の中に比較表を入れようとして、noteのメニューを探し回った経験、ありませんか。

見出し、画像、引用、コード、埋め込み……いろいろ並んでいるのに、表だけがない。

Roy

私も最初にやったときは「見落としてるだけだろう」と思って、しばらく探しました。でも、ないんですよね。

noteには表を挿入する機能が、そもそも用意されていません。

料金の比較とか、サービスごとの違いとか、表にすればひと目でわかる情報ってけっこうあります。それを全部、箇条書きや文章で説明するのはさすがにつらい。

ということで今回は、noteで表を作る方法を3つ紹介します。

結論から言うと、文字として読める表を作りたいならTeX記法が一番いいです。ただ、他の2つにもそれぞれ向いている場面があるので、順番に見ていきますね。

この記事を書いた人

大手メディアでWEBライターとして執筆中
SEO・収益設計を軸に複数サイトを運営
10年以上アフィリエイトを実践し、分散型で収益化
実務と複数サイト運営の経験をもとに発信

Roy

「エクセルからコピペできる」の話

先に、ひとつだけ整理しておきます。

noteで表について検索すると、「エクセルで作った表をコピーして貼り付ければいい」という情報がよく出てきます。実際に試した方によると、貼り付けると表が画像として表示されるそうです。

Roy

エクセルの画面をそのまま切り取ったような見た目、ということですね。

ただ、これはパソコンにインストールするタイプのエクセルでの話で、無料のオンライン版では同じようにならなかったという報告もあります。

正直に書くと、私はエクセルを持っていないので、これを確認できていません。

そして、たぶん同じ状況の人はけっこう多いと思うんですよね。買い切り版やサブスク版のオフィスが入っているパソコンって、会社の支給品には多くても、個人で持っている人は減っている気がします。

「エクセルでコピペするだけですよ」と言われても、そのエクセルがない。

なので、この記事ではエクセルを持っていない前提で話を進めます。持っている方は、コピペを試してみるのが早いと思います。

ただその場合も、できあがるのは画像です。これから説明する内容と無関係ではないので、そのまま読み進めてもらえたらと。

方法1：スクリーンショットを画像として貼る

いちばん手っ取り早いのがこれです。

エクセルでもスプレッドシートでも、あるいはWordでもいいので、使い慣れたツールで表を作る。それをスクリーンショットで撮って、noteに画像として貼り付ける。以上です。

さっき触れたエクセルからのコピペも、結果としてはこの方法と同じところに着地します。エクセルを持っている人にとっては、スクショを撮る手間が省ける、というだけの違いですね。

メリットは、見た目を完全にコントロールできること。セルを結合したり、色をつけたり、罫線を細かく調整したり、やりたい放題です。デザインにこだわりたい人には向いています。

一方で、デメリットもわりと重い。

まず、文字として読み込まれません。読者が表の中の文字をコピーできないし、検索エンジンも中身を認識できません。

せっかく丁寧に作った比較表が、SEO的にはただの画像として扱われるわけです。音声読み上げを使っている読者にも届きません。

それと、スマホで見たときに小さくなりがちであること。パソコンで作った横長の表を画像で貼ると、スマホでは文字が潰れて読めないことがよくあります。

noteはスマホで読まれる比率が高いので、ここは無視できないポイントかなと。

向いているのは、色分けが必要な複雑な表や、どうしても見た目を作り込みたいケース。逆に、シンプルな比較表を画像にするのはもったいないと思います。

方法2：Gistで作って埋め込む

もうひとつ、よく紹介されているのがGistを使う方法です。

Gist

Discover gists GitHub Gist: instantly share code, notes, and snippets.

Gistというのは、GitHubが提供しているコードの共有サービス。ここにマークダウン形式で表を書いて保存し、そのURLをnoteに貼ると、埋め込みとして表示されます。

きれいに表示されるし、文字も読める。悪くない方法です。

ちなみに、表示させるとこんな感じになります↓↓↓

ただ、初心者にはハードルが高いというのが正直なところ。

GitHubのアカウントを作るところから始まって、マークダウンの表の書き方を覚えて、Gistの公開設定を理解して……となると、「ちょっと表を入れたいだけなんだけどな、、、」という気持ちになりませんか？笑

あと、外部サービスに依存するのも地味に気になるところ。Gist側で何かあれば、記事の中の表が消えることになります。

エンジニアの方や、すでにGitHubを使っている人にはおすすめです。そうでない人には、次に紹介する方法の方が向いていると思います。

方法3：TeX記法（数式機能）で作る

ここからが本命です。

noteには表の機能はないんですが、数式を書くための機能はあります。2021年に追加された機能で、TeX記法という書き方に対応しています。

数式なんて書かないよ、と思うかもしれません。私も最初はそう思いました。

ただ、TeXには表を組むための書き方が含まれていて、それを使うと結果的に表が作れるんです。

遠回りに見えますよね。でも、note内で完結して、文字としてコピーもできて、検索エンジンにも読まれる。今のところ、この3つを同時に満たせるのはこの方法だけです。

まずは貼って動かしてみる

理屈より先に、動くものを見てもらった方が早いと思います。下のコードをコピーして、noteの本文に貼り付けてみてください。

$$
\begin{array}{|l|c|c|} \hline
\textsf{プラン} & \textsf{月額料金} & \textsf{おすすめ度} \\\\ \hline
\textsf{ベーシック} & \textsf{990円} & \textsf{★★★} \\\\ \hline
\textsf{スタンダード} & \textsf{1,490円} & \textsf{★★★★} \\\\ \hline
\textsf{プレミアム} & \textsf{1,980円} & \textsf{★★★★★} \\\\ \hline
\end{array}
$$

貼り付けたら、その部分をクリックしてください。3列4行の表が表示されるはずです。
もし表示されない場合は、後半の「注意すべきポイント」を確認してみてください。noteは環境によって少し挙動が変わります。

コードの中身を分解する

さっきのコード、記号が多くて身構えるかもしれませんが、やっていることは単純です。

$$ で全体を囲むと、noteが「ここは数式ですよ」と認識します。<br> \begin{array} と \end{array} の間が、表の中身。<br> {|l|c|c|} は列の設定で、l が左寄せ、c が中央寄せ、r が右寄せ。| が縦の罫線です。<br> セルの区切りが &、横の罫線が \hline。<br> 日本語は \textsf{} で囲みます。

行の終わりは、本来 \\ と書きます。ただ、さっきのコードでは \\\\ と4本になっていましたよね。これはnoteに貼り付けたときに半分に減ってしまうためで、詳しくは次で説明します。

覚えることは、まあ、それなりにありますね。

注意すべきポイント

このやり方、実際にやってみると細かいところでつまずきます。私も相当ハマったので、共有しておきます。

`$$` は単独の行に置く

これがいちばん多い失敗パターン。$$ は、それだけで1行になっている必要があります。文章と同じ行に混ざっていたり、$$ の直後に文字が続いていたりすると、表として認識されません。

さらに言うと、noteのエディタ上で「段落として独立している」ことも条件です。見た目に空行があるだけでは足りない場合があるので、表示されないときはここを疑ってみてください。

貼り付けると `\\` が消える

これは本当に厄介でした。

コードをコピーしてnoteに貼り付けると、行の区切りに使っている \\ が、なぜか \ 1本になってしまうことがあります。バックスラッシュがエスケープとして解釈されるからなんですが、こうなると行の区切りが壊れて、表になりません。

対策としては、\\ を \\\\ と4本にして貼る。貼り付けの過程で半分に減って、ちょうど \\ になる、という力技です。

iPhoneアプリでは動かないことがある

これはnoteの公式ヘルプにも書いてあります。iOSアプリでは数式記法が正常に動作しない場合があり、編集中のプレビュー機能も使えません。

iPhoneで書いている人は、ブラウザ版のnoteを開いて作業してください。

セルの中で折り返されない

TeXの表は、セルの中の文字が長くても自動で折り返してくれません。長い文章を入れると、そのまま横に伸びて、画面からはみ出します。

1つのセルには短い言葉を入れる。これが読みやすい表を作るコツです。

プレビューはクリックすると出る

貼り付けた直後は、コードのまま表示されて焦るかもしれません。貼り付けた部分をクリックしてカーソルを中に入れると、プレビューが表示されます。

正直、毎回これを書くのは大変

……ここまで説明しておいてなんですが。

記事を書くたびにこのコードを手打ちするの、しんどくないですか？

セルを1つ増やすたびに & の数を数えて、\hline を忘れてないか確認して、日本語を \text{} で囲んで。表を作りたいだけなのに、デバッグ作業になってしまう。

私も2〜3回やったところで「これは無理だ」となりました。

なので、ツールを作りました↓↓↓

かんたん表メーカー

セルに文字を入力するだけで、note用のTeX記法を自動で書き出すツールです。無料で、会員登録もいりません。

さっき説明した面倒なところは、全部ツール側で処理しています。日本語を \text{} で囲む処理も、\\ を4本にする変換も、自動です。TeXの書き方を覚える必要はありません。

使い方は3ステップ。

セルに文字を入力する（エクセルやスプレッドシートからのコピペにも対応しています）
「TeX / note」のタブを選ぶ
コピーして、noteに貼り付ける

仕上がりのプレビューも表示されるので、貼る前に確認できます。

▼ 登録不要・無料で使えます ▼

かんたん表メーカーを開く

ちなみに、アメブロ用のHTMLも同時に生成できます。両方で記事を書いている人は、1回の入力で2つ分作れる形ですね。

結局どれを選べばいい？

3つの方法を並べると、こんな感じです。

方法	手軽さ	文字として読める	向いている場面
画像（スクショ・エクセルのコピペ）	◎	×	色分けや結合が必要な複雑な表
Gist	△	○	GitHubを普段から使っている人
TeX記法	○	○	比較表など、ほとんどのケース