Noteコード使い方完全ガイド！埋め込みや色設定も解説

プログラミングや技術情報を発信する際、noteコード使い方やNoteコードとはどのような機能なのかを正しく理解することは非常に重要です。記事作成においてはNoteコードブロックを活用して見やすく整理するだけでなく、Noteコード色やNoteコード言語の仕様を知ることで読者の利便性が向上します。また、Note機能一覧にはNoteコード埋め込みやNoteコードHTMLといった応用テクニックも含まれており、これらを網羅したNoteコード一覧を把握しておくと便利でしょう。さらに運用面では、NoteでQRコードを出すにはどうすれば良いかやNoteでやってはいけないことは何かといったルール、あるいはNoteの閲覧履歴はバレますかというプライバシーの懸念やNoteでどうやって儲けてるのかという収益化の疑問も尽きません。本記事ではこれらの疑問を一つひとつ解消していきます。

初心者向けNoteコードの使い方ガイド

Noteコードとは？基本の解説

Noteにおける「コード」機能とは、プログラミング言語のソースコードやコマンドラインのテキスト、あるいは設定ファイルの記述などを、通常の文章（プレーンテキスト）とは明確に区別して表示させるための装飾機能を指します。技術的な知見を共有するエンジニアや、Webデザインのノウハウを発信するクリエイターにとって、この機能は記事の品質を左右する非常に重要な要素となります。

もし、あなたがPythonやJavaScriptのプログラムコードを、この機能を使わずにそのまま本文に貼り付けたとしましょう。すると、プログラムにとって命とも言える「インデント（字下げ）」が全て削除され、左詰めで表示されてしまいます。Pythonのようにインデントが構文の一部となっている言語では、コードが動かなくなる致命的な問題を引き起こします。また、変数名や予約語が通常の文章と同じフォント、同じ色で表示されるため、読者は「どこからがコードで、どこからが解説文なのか」を瞬時に判別できず、非常に読みづらい記事になってしまいます。

そこで活用されるのがコードブロックです。この機能を使用することで、プログラムのソースコードを薄いグレーの背景ボックスで囲み、等幅フォント（モノスペースフォント）で表示させることが可能になります。これにより、インデントやスペースがそのまま保持され、ソースコードの構造が視覚的に正しく再現されます。さらに、読者がそのコードを自分の環境で試したいと思った時、コードブロック内であれば範囲選択がしやすく、コピー＆ペーストのミスも減らすことができます。

コード機能を使う3つのメリット

• 可読性の向上：背景色とフォントの違いにより、コードと本文の境界が明確になり、記事全体のリズムが生まれます。
• 正確性の担保：インデントや改行が維持されるため、読者がコピペして実行した際のエラーを防げます。
• 信頼性の獲得：適切にフォーマットされた技術記事は、執筆者のスキルレベルや丁寧さを読者に印象づけます。

また、Noteのコード機能は単なる装飾にとどまらず、技術コミュニティにおける「共通言語」としての役割も果たしています。QiitaやZennといった他の技術共有サービスと同様の表示形式を提供することで、エンジニア読者が違和感なく情報を摂取できる環境を整えているのです。初心者の方こそ、まずは「コードを書く時は必ずコード機能を使う」という習慣を身につけることが、読まれる記事への第一歩となります。

Note機能一覧とコード一覧

Noteには記事作成をサポートするための多彩な機能が備わっています。テキストエディタの画面は「書くこと」に集中できるよう極めてシンプルに設計されていますが、その裏側には表現を豊かにするための多くのツールが隠されています。これらを目的に応じて適切に使い分けることで、単調な文章にならず、読者を惹きつける魅力的なコンテンツを作成することができます。以下に、主要な機能とコードに関連する要素を詳細に整理しました。

機能カテゴリ	機能名	詳細と活用シーン
基本装飾	見出し（H2, H3）	記事の骨組みを作ります。目次機能と連動するため、長文記事では必須です。大見出しと小見出しを使い分けることで情報の階層化が可能です。
	引用	他者の文献や自身の過去記事から文章を引く際に使用します。背景が変わり、引用符が付くことで、著作権的にもマナー的にも適切な引用であることを示します。
技術・専門	コードブロック	本記事の主題機能です。ソースコード、コマンドログ、SQLクエリなどを記述します。シンタックスハイライトによりコードの一部が色分けされます。
	数式（TeX）	数学的な公式や科学的な計算式を美しく表示します。「$$」で囲むことで数式モードになり、複雑な分数や積分記号なども表現可能です。
メディア	画像・動画	PC内のファイルをアップロードします。画像にはキャプション（説明文）やAltテキスト（代替テキスト）を設定でき、SEO対策にも有効です。
	埋め込み（Embed）	YouTube、X（旧Twitter）、Instagram、SpotifyなどのURLを貼るだけで、プレイヤーやカード形式でリッチに表示します。
その他	目次設定	最初の見出しの上に自動的に目次を生成します。読者が記事の全体像を把握し、目的の箇所へジャンプするために重要です。

このように、コード機能はNoteの記事作成ツールボックスの中の重要な一つとして位置づけられています。特に技術系の情報を発信するクリエイターにとって、これらの機能を適切に組み合わせることは必須のスキルといえるでしょう。例えば、「見出し」で章立てを行い、「テキスト」で解説を加え、「コードブロック」で実際の動くコードを示し、最後に「埋め込み」でGitHubのリポジトリを共有する、といった一連の流れを作ることができます。

また、Noteのエディタは「ブロックエディタ」に近い挙動をします。Enterキーを押すと新しい段落（ブロック）が作成され、そこにテキストを入れるか、画像を入れるか、コードを入れるかを選択する形式です。この構造を理解しておくと、後から段落を入れ替えたり、要素を削除したりする操作が直感的に行えるようになります。

Noteコードブロックの挿入法

Noteの記事内にコードブロックを挿入する方法は非常にシンプルですが、いくつかのパターンが存在します。これらを知っておくことで、執筆のスピードと快適さが格段に向上します。主に、直感的な操作が可能な「ツールバー」を使用する方法と、キーボード操作だけで完結するエンジニア向けの「Markdownショートカット」を使用する方法の2つがあります。

1. ツールバーを使用する方法（マウス操作派向け）

これは最も標準的で、初心者の方でも迷わずに使える方法です。

1. PC版のエディタで、新しい段落（空の行）をクリックします。
2. カーソルの左側に「＋」マークが表示されるので、これをクリックします。
3. 展開されたメニューアイコンの中から、「Code（＜/＞のようなアイコン）」を探して選択します。
4. 画面上にグレーの長方形の入力エリアが表示されます。
5. そのエリア内にカーソルを置き、コードを直接記述するか、別のエディタからコピーしたコードを貼り付けます。

この方法の利点は、アイコンを見て機能を選べるため、ショートカットキーを覚えていなくても確実に操作できる点です。

2. Markdownショートカットを使用する方法（キーボード操作派向け）

プログラマやエンジニアの方には、こちらの方法を強く推奨します。執筆のリズムを崩さずにコードブロックを挿入できます。

1. 新しい行で、半角入力モードにします。
2. キーボードで「`」（バッククォート）を3回連続で入力します。
   ※日本語キーボードの場合、Shiftキーを押しながら「@」キーを押すことで入力できる場合が多いです。
3. 「“`」と入力された状態でEnterキーを押します。
4. 瞬時にその行がコードブロックに変換されます。

スマホアプリでの操作について

スマートフォンのNoteアプリ（iOS/Android）でもコードブロックの挿入は可能です。キーボードの上に表示されるツールバーの「＋」をタップし、メニューから「コード」を選択することで記述できます。移動中や外出先で思いついたコードスニペットをメモする際にも役立ちます。

注意点：コードブロックからの脱出

コードブロック内でEnterキーを押すと、単に改行されるだけでブロックから抜け出せません。コードブロックの入力を終えて次の通常の文章に戻りたい場合は、Shiftキーを押しながらEnterキーを押すか、カーソルキー（↓）またはマウス操作でブロックの外をクリックする必要があります。ここが初心者の方が最初につまずきやすいポイントですので、覚えておきましょう。

Noteコード言語や色の設定

コードブロックを使用する際、多くのエンジニアが気にするのが「シンタックスハイライト（Syntax Highlighting）」です。これは、コード内の予約語（if, for, whileなど）、変数、文字列、コメントなどを色分けして表示し、可読性を高める機能のことです。Noteにおけるこの機能の仕様について、詳しく解説します。

自動言語検出システム

Noteのコードブロックには、ユーザーが手動で「言語：Python」「言語：JavaScript」のようにプルダウンメニューから選択する機能はありません。その代わり、システムがコードの内容を自動的に解析し、言語を推測して色付けを行う仕組みが採用されています。

例えば、「import numpy as np」や「def function():」といった記述があればPythonだと認識され、「const value = 10;」や「console.log()」があればJavaScriptだと認識されます。この自動検出機能は非常に便利ですが、あくまで「推測」であるため、完璧ではありません。

編集画面と公開画面の差異

執筆中に戸惑うことが多いのが、この「色の反映タイミング」です。記事を書いている最中のエディタ画面では、コードは単なる黒文字（またはダークグレー文字）のままで、色が付かない場合があります。しかし、焦る必要はありません。

Noteの仕様では、「記事を公開」するか、あるいは「下書き保存」をしてプレビュー画面で確認した時点で、初めてシンタックスハイライトが適用されます。エディタ上で色がついていなくても、裏側では正しくコードとして処理されていますので、安心して執筆を続けてください。

著者：私も最初は「あれ？色がついてない！バグかな？」と何度も書き直した経験があります。でも、プレビューボタンを押してみたら綺麗に色分けされていて安心しました。まずはプレビューで確認するのが一番の近道ですよ。

認識精度を上げるコツ

自動検出の精度を高めるためには、その言語特有のキーワードを含めることが重要です。極端に短いコード（1行だけなど）の場合、システムが言語を特定できず、ハイライトが無効になることがあります。可能な限り、関数定義や変数の宣言など、文脈がわかる程度の長さを記述することをお勧めします。

Noteが対応している言語は公式にすべて明示されているわけではありませんが、一般的に以下の主要言語は問題なくハイライトされることが確認されています。

• HTML / CSS / JavaScript / TypeScript
• Python / Ruby / PHP / Perl
• Java / C / C++ / C# / Swift / Kotlin
• Go / Rust / SQL / Shell Script (Bash)

マイナーな言語の場合、ハイライトが効かないこともありますが、その場合でも等幅フォントと背景色は適用されるため、可読性という最低限の機能は保たれます。

応用的なNoteコードの使い方とQ&A

NoteコードのHTMLについて

Web制作やブログ運営の経験がある方であれば、「記事内に直接HTMLタグを記述して、ボタンを配置したり、文字色を自由に変えたりしたい」と考えるのは自然なことです。しかし、Noteの標準的な記事投稿機能においては、セキュリティやプラットフォーム全体のデザイン統一の観点から、ユーザーが記述した生のHTMLタグはコードとして実行・レンダリングされません。

具体的に言うと、本文中に `赤文字` と記述したとしても、その部分は赤文字にはならず、そのまま `赤文字` という文字列として表示されます。これは「エスケープ処理」と呼ばれるセキュリティ対策によるもので、悪意のあるスクリプト（XSS攻撃など）が埋め込まれるのを防ぐための重要な仕様です。

NoteでHTMLを扱える例外ケース

基本的にはHTMLの使用は不可ですが、いくつかの例外や代替手段が存在します。

• note pro（法人向けプラン）： 企業が契約する「note pro」などの上位プランでは、特定の条件下でHTML埋め込みやスクリプトの利用が一部許可されている機能があります。これにより、自社の会員登録フォームや独自の解析タグなどを設置することが可能になります。
• 埋め込み機能の活用： HTMLそのものを書くことはできませんが、YouTube動画やGoogleマップ、Spotifyのプレイヤーなどを表示させたい場合は、それぞれのURLを貼るだけで自動的に埋め込み（Embed）として機能します。これは内部的に安全なiframe等を生成しているためです。

無理やりHTMLを書こうとしない

裏技的にHTMLを実行させようとする行為は、セキュリティリスクを高めるだけでなく、利用規約違反としてアカウント停止の対象になる可能性があります。Noteのデザインフィロソフィーである「シンプルさ」を尊重し、標準機能の範囲内で表現を工夫することが求められます。

Noteコード埋め込みの手順

標準のコードブロック機能は便利ですが、数百行に及ぶ長いソースコードや、複数のファイルをまたぐプロジェクト構成、あるいは実際にブラウザ上で動くデモを見せたい場合には力不足を感じることがあります。そのような場合に最適なのが、外部の開発者向けサービスの「埋め込み機能」を利用する方法です。

Noteは、「GitHub Gist」や「CodePen」といった主要なコード共有サービスと連携しており、これらのURLを貼り付けるだけで、記事内にリッチなコードビューアを展開することができます。

GitHub Gistを埋め込む手順

GitHub Gistは、コードの断片（スニペット）を簡単に共有できるサービスです。

1. GitHub Gistにアクセスし、コードを記述して「Create public gist」で保存します。
2. 作成されたGistページのURL（ブラウザのアドレスバーにあるURL）をコピーします。
3. Noteの記事編集画面に戻り、埋め込みたい段落にURLを貼り付けます。
4. Enterキーを押すと、自動的にGistの内容が展開され、行番号付きのきれいなコードが表示されます。

CodePenを埋め込む手順

CodePenは、HTML/CSS/JSのコードとその実行結果を並べて表示できるサービスです。

1. CodePenでPen（作品）を作成し、保存します。
2. 画面下部の「Embed」ボタンではなく、通常のURL（例：[https://codepen.io/user/pen/xyz123](https://codepen.io/user/pen/xyz123)）をコピーします。
3. Noteの記事編集画面に貼り付けてEnterキーを押します。
4. 記事内で実際のプレビュー画面とコードを切り替えて閲覧できるプレイヤーが表示されます。

これらの外部サービスを利用することで、Noteの記事内だけでは完結しない高度な技術解説が可能になります。特にCodePenは、動きのあるWebデザインを紹介する際に非常に強力なツールとなります。

（出典：Noteヘルプセンター「テキスト記事に埋め込みできるサービス一覧」）

NoteでQRコードを出すには？

Noteを運用していると、オンラインだけでなく、オフラインの場でも自分の記事やプロフィールを紹介したい場面が出てきます。例えば、名刺に載せたり、イベントで配るチラシに掲載したり、飲食店のポップで紹介したりする場合です。そのような時に便利なのが、Note標準のQRコード生成機能です。

この機能を使えば、わざわざ外部のQRコード作成サイトを使わなくても、Noteのアプリやブラウザから直接、デザインされたQRコードを取得することができます。

QRコードの出し方（ステップバイステップ）

PCブラウザとスマートフォンアプリ、どちらからでも生成可能です。

手順	PCブラウザの場合	スマホアプリの場合
1	自分のアイコンをクリックし、「クリエイターページを表示」を選択	「アカウント」タブから自分のアイコンをタップ
2	プロフィール画面右側にある「…（三点リーダー）」をクリック	画面右上の「…（三点リーダー）」をタップ
3	メニューから「QRコード」を選択	メニューから「QRコード」を選択
4	表示されたQRコードを右クリックなどで画像保存	「画像を保存」をタップ、またはスクリーンショット

生成されるQRコードは、中央にNoteのロゴが入ったシンプルなデザインです。これを活用することで、以下のようなメリットがあります。

• 入力の手間を省略： URLを手打ちする必要がなく、スマホのカメラで読み取るだけで確実にページにアクセスしてもらえます。
• プロモーション効果： 名刺交換の際、「Noteで発信しています」と言いながらQRコードを見せることで、その場でフォローしてもらえる確率が高まります。
• 信頼性の向上： 正規の機能で生成されたQRコードはデザインも整っており、安心してスキャンしてもらえます。

Noteでやってはいけないことは？

Noteは自由な創作の場ですが、コミュニティの健全性を保つためにいくつかの厳格なルールが存在します。「知らなかった」では済まされない重要な禁止事項について、Webライターの視点から特に注意すべきポイントを解説します。

1. 著作権侵害および無断転載

他人の文章、画像、イラスト、写真などを無断で使用することは禁止されています。ネットで拾った画像をなんとなく見出し画像に使ったり、好きな歌詞を全文掲載したりする行為は著作権侵害に当たるリスクが高いです。引用する場合は、必ず出典を明記し、引用の要件（主従関係など）を満たす必要があります。

2. 誹謗中傷や差別的な表現

特定の個人や団体を攻撃したり、名誉を毀損したりする内容の記事は削除対象となります。また、人種、信条、性別、社会的身分などによる差別を助長する表現も厳しく禁止されています。Noteは「だれもが創作をはじめ、続けられるようにする」ことをミッションとしているため、攻撃的なコンテンツには厳しい対応が取られます。

3. 制限されたアフィリエイト行為

ここが収益化を目指す方にとって最も重要なポイントです。Noteでは、Amazonアソシエイト以外の商用アフィリエイトリンクの掲載が制限される傾向にあります。

公式のガイドラインでは「Amazonアソシエイト」については明示的に利用可能とされていますが、それ以外のASP（A8.netやバリューコマースなど）のリンクについては、スパムフィルターによって投稿がブロックされたり、検索除外されたりする事例が報告されています。「アフィリエイトリンクのみを目的とした記事」や「過度な宣伝」は、スパム行為とみなされ、アカウント停止の原因となり得ます。

（出典：Note公式ヘルプ「noteアフィリエイト（β）ご利用ガイドライン」）noteアフィリエイト（β）ご利用ガイドラインおよびFAQ – noteヘルプセンター

4. 医療や健康に関する断定的な表現（薬機法関連）

「これを飲めば必ず治る」「癌が消える」といった、科学的根拠のない医療情報の流布は禁止されています。また、サプリメントや化粧品の紹介においても、薬機法（旧薬事法）や景品表示法に抵触する表現はNGです。読者の健康や財産を守るため、正確で誠実な情報発信が求められます。

アカウント停止（BAN）のリスク

これらの規約に違反した場合、事前の警告なく記事が非公開になったり、最悪の場合はアカウント自体が永久凍結されたりすることがあります。一度凍結されると復活は非常に困難ですので、利用規約は必ず一読しておきましょう。

Noteの閲覧履歴はバレますか？

読者としてNoteを利用する際、「自分がこっそり読んでいる記事が、投稿者（クリエイター）にバレてしまうのではないか？」と不安に思う方は少なくありません。特に、職場の人や知人、あるいは競合他社の記事を読む際などには気になる点でしょう。

結論：「足跡機能」はありません

安心していただきたいのは、Noteにはmixiのような「足跡機能」は存在しないという点です。単に記事をクリックして閲覧しただけでは、あなたのユーザー名や個人情報が投稿者に通知されることは一切ありません。

投稿者の管理画面（ダッシュボード）では、「ビュー数（PV）」という形で「何回読まれたか」という数字だけが確認できます。しかし、そこには「誰が読んだか」という情報は含まれていません。「20:00に1アクセスありました」という事実はわかりますが、「それがあなたである」とは特定できないのです。

相手にバレる（通知がいく）行動一覧

閲覧だけではバレませんが、特定のアクションを起こすと相手に通知が届き、ユーザー名が表示されます。以下の行動をとる際は、「相手に自分が読んだことが伝わる」と認識しておきましょう。

アクション	通知の内容	バレる度合い
スキ（ハートマーク）を押す	「〇〇さんがスキしました」と通知	確実
アカウントをフォローする	「〇〇さんがフォローしました」と通知	確実
記事を購入する	購入通知とともにユーザー名が伝わる	確実
コメントを書く	コメント欄に名前が残る	確実
マガジンに追加する	「〇〇さんが記事をマガジンに追加しました」と通知	確実

つまり、「読み逃げ」をしている限りは完全に匿名性が保たれます。逆に、投稿者に「読みましたよ」「応援しています」と伝えたい場合は、積極的にスキを押すことでコミュニケーションが生まれるきっかけになります。

Noteでどうやって儲けてる？

Noteは単なるブログサービスではなく、「コンテンツを販売できるプラットフォーム」としての側面を強く持っています。多くのクリエイターが趣味の範囲を超えて、副業や本業として収益を上げています。「Noteで稼ぐ」ための仕組みは、大きく分けて以下の4つの柱で構成されています。

1. 有料記事販売（都度課金）

最も基本的でポピュラーな方法です。自分の書いた記事に価格（100円〜）を設定し、購入した人だけが全文を読めるようにします。記事の一部を無料で公開して読者の興味を引き、続きを有料にする「試し読み」形式が一般的です。ノウハウ、小説、エッセイ、専門的な分析記事などがよく販売されています。

2. 有料マガジン（まとめ売り）

複数の記事をパッケージ化して販売する方法です。例えば、「Python入門講座」というマガジンを作り、その中に10本の有料記事を入れることで、バラバラに買うよりもお得な価格で提供できます。読者にとっては「まとめ買い」のメリットがあり、クリエイターにとっては単価を上げやすいメリットがあります。

3. 定期購読マガジン（サブスクリプション）

月額制のマガジンを発行し、購読者に毎月継続的に記事を届けるモデルです。メルマガのようなイメージで、安定した収益（ストック収入）が見込めるため、多くのプロ作家やジャーナリストが利用しています。ただし、定期的に質の高い記事を更新し続けるプレッシャーもあります。

4. メンバーシップ（コミュニティ）

記事単位ではなく、「人」や「コミュニティ」にファンをつける機能です。月額会費を支払ったメンバーに対して、限定記事の公開だけでなく、掲示板での交流、イベントへの参加権、動画配信など、多彩な特典を提供できます。オンラインサロンに近い運営が可能です。

5. クリエイターサポート（投げ銭）

記事の対価としてではなく、クリエイターの活動そのものを応援するために、読者が任意でお金を支払う機能です。無料記事であっても、内容に感動した読者から100円や500円のサポートが届くことがあります。

手数料について

これらの収益機能を利用する場合、売上から手数料が引かれます。決済手数料（クレジットカードやキャリア決済の手数料）に加え、プラットフォーム利用料が引かれた残額がクリエイターの口座に振り込まれます。一般的には売上の約15%〜25%程度が引かれる計算になることが多いですが、決済手段によって変動するため、詳細は公式ヘルプで確認してください。

まとめ：Noteコードの使い方