「自分だけのノート」を、インターネット上に持てたら
日記、読書メモ、レシピ、旅行の記録、仕事の覚え書き——
こういったものをひとつの場所にまとめて、いつでもどこでもスマホやパソコンから見返せたらどれほど便利でしょうか。
しかも、自分の名前のついたきれいなページで、広告もなく、余計な機能もなく、シンプルに「書いた内容だけ」が表示される。
それが、Docsです。
前回の記事では「こんな使い方ができる」という活用例をご紹介しました。今回は、もう一歩踏み込んで「実際にどうやって始めるのか」を、プログラムができる方・できない方、両方に向けて丁寧に解説します。
まず知っておきたい「Docsの仕組み」
難しい話は抜きにして、Docsのしくみを一言で言うと：
テキストファイルを1つ置くと、きれいなページになって表示される
それだけです。
.md（マークダウン）という形式のテキストファイルを決まったフォルダに置くと、自動的にサイドバー付きのきれいなドキュメントページになります。ファイルを増やせばページが増え、フォルダに入れれば「本」になります。
この仕組みがわかると、「プログラムができる人」と「できない人」の違いは、そのファイルをどうやって作るか・どこに置くか、ただそれだけです。
ルート1：プログラムができる方へ
すでにNext.jsやGitの知識がある方は、このDocsシステムをそのまま手元で動かせます。
セットアップの流れ
Step 1 — リポジトリをクローンする
git clone https://github.com/[username]/[repo-name].git
cd [repo-name]
npm install
Step 2 — 開発サーバーを起動する
npm run dev
ブラウザで http://localhost:3000/docs を開けば、Docsが動いています。
Step 3 — ファイルを作るだけ
プロジェクトルートの docs/ フォルダの中に .md ファイルを作ります。
docs/
├── my-diary.md ← これを作るだけでページが増える
├── recipes.md
└── my-book/ ← フォルダを作ると「本」になる
├── _index.md ← 本の表紙
├── chapter1.md
└── chapter2.md
Step 4 — ファイルの先頭に設定を書く
---
title: "わたしの日記 2026"
category: "日記"
order: 1
description: "日々の思考と記録"
---
## 3月15日
今日は晴れだった。桜がそろそろ咲きそう。
--- で囲まれた部分（フロントマター）がページの設定です。title でページタイトル、category でサイドバーのグループ、order で表示順を制御できます。
Step 5 — Vercelにデプロイ
GitHubにプッシュするだけで、Vercelが自動でビルド・デプロイします。
git add .
git commit -m "日記ページを追加"
git push
数分後には本番URLでページが公開されています。それだけです。
プログラマー向けのさらなる楽しみ方
コードが書ける方には、Docsは「素材」でもあります。
- MDXでReactコンポーネントを埋め込む — 動くグラフ、インタラクティブなデモ、カスタムUIを文章の中に入れられます
- カテゴリとブックを自由に設計する — 技術メモ・個人日記・仕事マニュアルを完全に分離したナビ構成にできます
- 独自ドメインで運用する —
docs.yourname.comのような専用サブドメインにも対応できます
「自分だけの知識ベースを作りたい」「チームの手順書をかっこよく整理したい」という方は、このシステムをベースにして自由にカスタマイズできます。
ルート2：プログラムができない方へ（ノーコードで始める）
「GitもNode.jsも聞いたことない」という方でも大丈夫です。
GitHubのウェブサイトだけで、コードを一行も書かずにDocsを更新できます。
GitHubのアカウントを作る（無料）
まず github.com でアカウントを作成します。メールアドレスがあれば無料で作れます。
ノーコードでDocsに記事を追加する手順
Step 1 — GitHubでリポジトリを開く
ブラウザで GitHubのリポジトリページ（github.com/[ユーザー名]/[リポジトリ名]）を開きます。
Step 2 — docs フォルダを開く
ファイル一覧の中から docs というフォルダをクリックします。
📁 docs ← ここをクリック
📁 src
📁 public
📄 README.md
Step 3 — 新しいファイルを作る
右上の 「Add file」→「Create new file」 をクリックします。
ファイル名の入力欄が出てきます。ここに名前を入力します。
ファイル名: my-first-doc.md
ポイント: ファイル名は半角英数字とハイフンだけ使うとトラブルが少ないです（例: diary-2026.md、recipe-curry.md）。
Step 4 — 内容を書く
下の大きなテキストエリアに内容を書きます。
---
title: "はじめての記録"
category: "日記"
order: 1
---
## 2026年3月15日
今日からDocsを使い始めました。
書くことがとても楽しいです。
## 明日やること
- 朝のウォーキング
- 読書を30分
難しく考えなくてOKです。## を使えば見出し、- を使えば箇条書きになります。
Step 5 — 保存（コミット）する
ページの一番下までスクロールすると「Commit new file」というボタンがあります。
- 上の入力欄には変更のメモを書きます（例：「日記を追加」）
- 「Commit new file」ボタンをクリック
これで完了です。
数分後、Vercelが自動的に新しいページをビルドして公開します。/docs を開くと、サイドバーに追加したページが表示されています。
既存のページを編集するには
docs フォルダの中の編集したいファイルをクリック → 右上の鉛筆アイコン（Edit）をクリック → 内容を書き換えて → 「Commit changes」。以上です。
ノーコードでできることのまとめ
| 操作 | 方法 |
|---|---|
| 新しいページを追加 | docs/ に新規ファイルを作成 |
| ページを編集 | ファイルを開いて鉛筆アイコン |
| ページを削除 | ファイルを開いてゴミ箱アイコン |
| カテゴリ分け | フロントマターの category を変更 |
| 本を作る | docs/ にフォルダを作って複数ファイルを入れる |
GitHubのウェブ画面だけで、すべての操作が完結します。
パスワードで守られた「自分だけの宝物」を作る
Docsには、もう一つ特別な使い方があります。
パスワード保護されたプライベートDocsです。
公開したくない内容——プライベートな日記、家族だけに共有したいレシピ集、仕事の機密メモ——をパスワードで守り、特定の人だけが見られる空間を作ることができます。
なぜ「宝物」と呼ぶのか
インターネット上に置かれた情報は、設定次第で誰でもアクセスできてしまいます。でも、パスワード保護された自分専用のDocsは違います。
- 自分だけが入れる — 合言葉を知っている人だけの空間
- どこからでもアクセスできる — スマホでも、旅先のカフェでも
- 美しく整理されている — 雑然としたメモアプリとは違う、読みやすいレイアウト
- 検索できる — 何年分書いても、キーワード一発で見つかる
これは、デジタルの「鍵のかかった宝箱」です。
パスワード保護の仕組み
技術的な詳細が気になる方向けに説明すると、このサイトはClerkという認証システムを使っています。管理画面がすでにClerkで保護されているのと同じ仕組みを、Docsの特定のカテゴリ・特定の本に適用することで、「ここから先はパスワードが必要です」という空間を作れます。
/docs/ ← 誰でも見られる
/docs/public-note ← 誰でも見られる
/docs/private/ ← ここはパスワードが必要
/docs/private/diary ← ログインした自分だけが見られる
パスワード保護されたDocsでできること
プライベート日記 毎日の出来事、感情、悩み。誰にも見せたくない本音を書く場所。検索もできるので、「去年の今頃どんな気持ちだったっけ」と振り返れます。
家族共有ノート パスワードを家族だけで共有する。冠婚葬祭の段取り、緊急連絡先、遺言に近い大切な情報。「もしものとき」に家族が見つけられる場所に置いておけます。
仕事の機密メモ クライアント情報、価格交渉の経緯、契約内容のメモ。外部には絶対見せられない情報も、パスワード保護されたDocsなら安全に保管できます。
自分へのラブレター 未来の自分へのメッセージ、達成したいこと、忘れたくない言葉。誰にも見せないけど、大切にしたいもの。
作る側の話——このシステムを「楽しく作っている」理由
ここで少し、作り手の視点からお話しします。
Docsを開発するうえで、一番気をつけたのは「使う人が余計なことを考えなくていいようにする」ことでした。
マークダウンのファイルを1つ置けばページができる。カテゴリを書けばサイドバーに並ぶ。フォルダを作れば本になる。目次は自動で生成される。前後のナビゲーションも自動。検索も自動。
書くことだけに集中できる、という設計思想がベースにあります。
技術的に面白いのは、このシステムがサーバーレスで動いているという点です。データベースは使っていません。ファイルシステムが「データベース」の役割を果たしています。つまり、テキストファイルがそのままデータであり、バックアップであり、ポータブルな資産でもあります。
ファイルをGoogleドライブやDropboxにコピーすればバックアップ完了。どんなテキストエディタでも開ける。特定のサービスに縛られない。これは10年後も読める形式です。
エンジニアとして「良いものを作りたい」という気持ちで開発していますが、それ以上に「使った人が何かを書きたくなるもの」を作りたいという気持ちがあります。きれいなページを見ると、もっと書きたくなる。書くと思考が整理される。整理された思考から良いアイデアが生まれる。Docsはそのサイクルの入口でありたいと思っています。
利用する側の話——「書くことが楽しくなる」デザイン
Docsを使い始めた方から「思ったより書くのが楽しい」という声をよく聞きます。
その理由を考えると、「書いたものがきれいに表示される」という満足感が大きいようです。
メモアプリに書いたテキストは、どこか「下書き感」があります。でもDocsに書いた内容は、最初から整ったレイアウトで表示されます。見出しは太くなり、コードはハイライトされ、表は罫線で整理される。書いた瞬間から「読まれるもの」の形になる。
この感覚が、「もっと書きたい」という気持ちを引き出します。
さらに、ページが増えるたびにサイドバーが充実していく様子を見ると、自分の知識や記録が「資産」として積み上がっているという実感が生まれます。これは日々書き続けるモチベーションになります。
どちらの道も、最初の一歩は同じ
プログラマーでも、ノーコードユーザーでも、パスワード保護された空間を作りたい方でも——最初の一歩は全員同じです。
何かを書くこと。
難しいことを考えなくていいです。今日の気分を3行、最近読んだ記事の感想を一言、今週やりたいことを箇条書き。それだけで始められます。
書き続けると、気づいたときには自分だけの知識の宝庫ができています。
まとめ：あなたにとっての「Docs」を見つけてください
| プログラマー向け | ノーコード向け | |
|---|---|---|
| セットアップ | リポジトリをクローン・デプロイ | GitHubのWeb画面だけでOK |
| ファイルの作り方 | ローカルエディタ + git push | GitHub上で直接作成・編集 |
| カスタマイズ | コードレベルで自由に変更可 | フロントマターの設定のみ |
| パスワード保護 | Clerk認証を組み込む | 相談ベースで対応 |
Docsは、技術的なバックグラウンドに関係なく、「書くことを楽しむ人」すべてのために作られています。
あなたの宝物を、ここに置いてみませんか。
ご質問・ご依頼はお気軽に Contact からどうぞ。 プログラムができない方の環境構築サポートや、パスワード保護付きのプライベートDocs設置のご相談もお受けしています。