フリースタイル大学生https://freestylestudent.comのらりくらりやってますSun, 30 Aug 2026 06:06:38 +0000jahourly1https://freestylestudent.com/wp-content/uploads/2026/08/cropped-Gemini_Generated_Image_hkdo0fhkdo0fhkdo-32x32.pngフリースタイル大学生https://freestylestudent.com3232 文体統計|文章からAIらしさを消し去るには?https://freestylestudent.com/ai-stylometry-quantitative-tuning/https://freestylestudent.com/ai-stylometry-quantitative-tuning/#respondFri, 04 Sep 2026 01:00:00 +0000https://freestylestudent.com/?p=582

「自然な文章で書いて」という曖昧な指示を捨て、1文の長さや文字種比率、禁止ルール等の文体統計(スタイロメトリー)でAI文章の違和感を消し去る技術を解説。]]>

AIに文章を書かせると、どうしても独特の違和感が残る。

文法は完璧。論理も整っている。

なのに、どこか教科書的でよそよそしく、読んだ瞬間に「あ、これAIが書いたな」と直感が働く。

「もっと自然な日本語で書いて」「親しみやすい口調で」とプロンプトで指示を重ねたところで違和感は残る。

自分にとっての「自然」をそのまま理解してくれるほど、AIはまだ賢くないからだ。

この記事では、自分にとっての自然な文章をどうやってAIに書かせるのかについて、文章解析の経験から紹介したい。

以前の指示より格段に自分らしい文章が書けるようになったので(それでも100%自分とは言えるわけでありませんが)、その具体的な方法を共有します。

文章には書き手の個性が出る

文章には書き手の個性が出る。

太宰治が普通に書いた文章と、夏目漱石が普通に書いた文章では、文体もリズムもまるで違う。

この文章の指紋とも言える無意識の癖から、匿名の書き手を特定した有名な事例が存在する。

2013年、ロバート・ガルブレイスという無名の新人作家が書いたミステリー小説『カッコウの呼び声』が発表された。

新人にしてはあまりにも完成度が高いことを不審に思った英サンデー・タイムズ紙の記者が、専門家に文章解析を依頼した。

テキストマイニング用のソフトウェアを使い、頻出する語彙や文字の出現パターンなどを統計的に詳細に調べた。

その結果、『ハリー・ポッター』シリーズの著者であるJ.K.ローリングの執筆癖と完璧に一致したのだ。

こうして、彼女が覆面作家として執筆していた事実が世界中に暴かれることになった。

文章解析で分かる書き手の癖

自分自身、高校生の時に「KHCoder」というソフトを使って文章を解析したことがある。

文章を読み込ませ、一文の長さや文字種の割合、共起表現の分布について統計的に調べまくった。

具体的な数値データ自体はもう忘れてしまったのだが、解析を通して見えてきた傾向は非常に興味深かった。

たとえば、太宰治の『走れメロス』を解析すると、一文の長さが他の太宰作品よりも明らかに短いことがわかる。

この一文の短さがあるからこそ、あの独特なスピード感と緊張感が生まれているのだ。

また、新聞記事、LINEのチャット、ネット掲示板の書き込みなども比較してみると面白い。

いずれも略語が多いという共通点はあるが、よく使われる略語の種類が全く異なる。新聞記事では漢字の略語、LINEでは挨拶の簡略化、ネット掲示板では独特のスラングが中心になる。

おそらくこれらは私たちの直感に沿ったものであり、文の「印象」という曖昧なものは、すべて具体的な数字で指定することができるのだ。

AIに意図した文章を書かせる

まずは目標とする文章を用意する

自分の文章をAIに再現させるなら、まずは自分自身が書いたお手本の文章を用意する必要がある。

この時、ブログ記事に使いたいなら、必ずブログ用に書いた文章を用意しなければならない。

同じ書き手の文章であっても、LINEの会話やレポートなど、場面によって文章の特徴がまるで変わってくるからだ。

お手本の文章を用意したら、次に文章解析を行う。

手っ取り早いのは、AI自身にお手本を読み込ませて特徴を解析させる方法だ(自分としても一番おすすめである)。

本格的にこだわりたい場合は、KHCoderなどのテキストマイニング用ソフトをパソコンにインストールするところから始めるのも手だ。

具体的な指示の出し方

数字で指定すること vs 言葉で指定すること

プロンプトで指示を出す際は、数字で指定するものと言葉で指定するものを明確に分ける。

ただし、中には現在のAIでは指定できないものもあることを理解しておく必要がある。

まず、数字で指定するものとしては以下の通りだ。

  • 一文当たりの平均文字数(例:48字)
  • 一段落当たりの平均文章数(例:1.5文)
  • 一文の文字数の範囲(10字〜60字)
  • 体言止めの割合(例:10%)

次に、言葉で指定するものとしては、常体(だ・である調)の使用、同じ文末表現の連続禁止、その他マークダウンのフォーマットルールなどが挙げられる。

一方で、指定できないものとして単語同士の結びつきである「共起表現の特徴」がある。

共起表現の特徴を文章解析をもとに指定しようとすると、大量の分析用テキストが必要になり、AIに渡すルールが非常に複雑化してしまうため現時点では難しい。

指示の守らせ方

どれだけプロンプトで厳密に指定しても、AIというものは平気でルールを破ってくる。

だからこそ、一回でAIに完璧な文章を出力させるのを諦めることが先決だ。

一発勝負を諦め、AI自身に出力した文章のセルフチェックを行わせるようにする。

指定した数値におさまっているか、同じ文末表現が連続していないかをAIに検証させるのだ。

修正させても一気に思った通りの文章にはならないかもしれないが、それなりに目指したクオリティに近づいていく。

最初からセルフ修正のループを組む前提で考えたほうが、気持ち的にもずっと楽になる。

まとめ

文体には、自然と書き手の無意識の癖が出る。

その無意識の癖は、文章解析を行うことで具体的な数値として浮かび上がってくる。

この数字を使って指定を与えることで、ある程度目指した通りの文章を出力させることができるのだ。

とは言え、一回の出力で完璧な結果を期待することはできないので、そういうものと割り切るしかない。それほど文章の個性というものは、AIには出しづらいものなのだ。

]]>
https://freestylestudent.com/ai-stylometry-quantitative-tuning/feed/0
Bloggerテーマ開発に使ったツール3選|品質担保とコード管理を支えた無料環境https://freestylestudent.com/blogger-theme-development-tools/https://freestylestudent.com/blogger-theme-development-tools/#respondThu, 03 Sep 2026 01:00:00 +0000https://freestylestudent.com/?p=646

Bloggerオリジナルテーマ「Paper & Bookshelf」開発で実際に活用した便利ツール(GitHub/VS Code、PageSpeed Insights、ラッコツールズOGP確認)を厳選紹介。各ツールの役割やメリット、初心者がハマりがちな注意点(アカウント名設計や429エラー対策など)まで詳しく解説します。]]>

先日、読書記録ブログ用のBloggerテーマ「Paper & Bookshelf」をゼロから開発した。

テーマの自作自体は自分にとって人生で初めての挑戦だった。

完成後の姿や見た目は割と簡単に頭に思い描けた。

だが、完成度を高めるうえで気になったのは、「目標の品質をどう設定し、どう確かめるか」という問題だ。

サイト自体の見た目がいくら良くても、コードの管理が雑でエラー時に復元できなかったり、表示速度が遅かったり、SNSでシェアしたときに画像が崩れていては残念な感じになってしまう。

そこで今回は、テーマ開発の作業効率と品質担保を裏で支えてくれた3つの主要ツール(GitHub・VS Code、PageSpeed Insights、ラッコツールズOGP確認)について、実際の使用感や初心者がハマりがちな注意点と合わせてまとめておきたい。

開発と検証を支えるツールの役割

Webサイトやブログテーマの開発と聞くと、ひたすらHTMLやCSS、JavaScriptのコードを書く姿を想像しがちだ。

しかし、実際に作業を進める中で痛感したのは、「コードを作る・守る開発環境」と「出来栄えを測る・確かめる検証ツール」の2つを適切に揃えることの重要性である。

これらを最初に整えておくだけで、手作業によるミスや後戻りのリスクを劇的に減らすことができる。

Bloggerテーマ開発を支える3大ツールの役割分担

GitHubとVS Codeでコードを管理する

バージョン管理と安全な復元

テーマ開発において最も恐ろしいのは、「ちょっとコードを書き換えたら全体が崩れてしまい、元の状態に戻せなくなった」という事態だ。

自分のような初心者が手作業でバックアップを取ろうとすると、大学の期末レポートで「期末レポート」「期末レポート_完成版」「期末レポート_完成版2」とファイルが増えていくのと同じで、フォルダ内が謎のファイルで埋め尽くされて気が狂いそうになる。

そこで導入したのが、世界中のエンジニアが使っているバージョン管理サービスのGitHubだ。

GitHubを使ってコードの変更履歴を記録しておけば、万が一コードを壊してしまっても、いつでも正常に動いていた過去のコミット時点まで一瞬で巻き戻すことができる。

就活も見据えたアカウント名選び

自分は一度気になったことは先に徹底的に調べまくるタイプなのだが、GitHubのアカウントを作成する前にも色々と下調べをしてみた。

そのおかげで、アカウントを作成するときの重要な注意点に事前に気づくことができた。

それは「アカウント名を適当な文字列や恥ずかしいIDにしない」ということだ。

これは就活や仕事で使うGmailのアドレス選びと全く同じである。

学生時代にその場のノリや中二病的なフレーズでアドレスを作ってしまい、後から就職活動の履歴書に書く段になって激しく後悔する、というのはよくある話だ。

GitHubのアカウント名も、将来エンジニア就活やポートフォリオ提出、外部へのコード公開でそのまま人に見られる可能性が高い。

一度決めた名前はリポジトリのURL(github.com/ユーザー名 など)にも反映されるため、本名ベースやWeb上で一貫して使っている活動名など、長く使えるシンプルなIDを設定しておくのが賢明だ。

VS Codeとの連携で快適化

Gitによるバージョン管理を導入するにあたり、エディタにはVisual Studio Code(VS Code)を採用した。

初心者にとって、黒い画面(ターミナル)でGitコマンドをカタカタ打ち続けるのは精神的ハードルが高い。

VS Codeなら標準でGit連携機能が備わっており、変更箇所(差分)の確認からステージング、コミット、プッシュまでを画面上のボタン操作で直感的に完結できる。

エディタとGitが一体化することで、操作のストレスなくコードの編集とバックアップに集中することができた。

PageSpeed Insightsで速度を測定する

Google公式ツールでの表示速度診断

Bloggerというプラットフォームの最大の強みは、サーバー側で余計な処理が走らない圧倒的な表示速度の軽さにある。

今回自作したテーマでも、その軽さを極限まで活かすため、Googleが提供する公式診断ツール「PageSpeed Insights」でパフォーマンスを測定した。

URLを入力するだけで、モバイルとデスクトップそれぞれの読み込み速度やCore Web Vitals(ウェブ指標)を0点から100点のスコアで客観的に採点してくれる。

CSSの読み込み順序やJavaScriptの非同期化など、改善すべきポイントが具体的にリストアップされるため、無駄のない高速なテーマ作りに非常に役立った。

スコアのブレと向き合うコツ

PageSpeed Insightsを活用する上で知っておくべきなのが、「スコアには多少のブレ(揺らぎ)が生じる」という点だ。

自分も実際に測定していた際、一度は99点という素晴らしいスコアが出たのに、その直後に再計測したら97点に下がってしまったことがあった。

これはテーマのコードが変わったわけではなく、測定時のネットワーク環境やサーバーの混雑度、テスト環境の揺らぎによるものだ。

1回ごとの1点や2点のスコア変動に一喜一憂するのではなく、時間帯を変えて3回ほど計測した平均値を見たり、改善項目の傾向を把握するために使うのが賢い付き合い方だと思う。

ラッコツールズでOGP表示を事前確認する

SNSシェア時のカード見栄えを検証

記事をX(旧Twitter)やLINE、Facebookなどでシェアした際に表示されるサムネイル画像やタイトル、説明文の設定をOGP(Open Graph Protocol)と呼ぶ。

どんなに魅力的な記事やテーマを作っても、SNS上でシェアされたときに画像が上下に不自然に切り取られていたり、タイトルが途中で見切れていては読者に読んでもらえない。

そこで重宝したのが、ラッコツールズが提供している「OGP確認」ツールだ。

URLを入力するだけで、各SNSでどのようにカードが表示されるかを一目で事前プレビューできる。

自分の場合、トップページのURLをシェアした際に、意図せず最新記事のアイキャッチ画像が表示される設定になっていることにこのツールで気が付いた。

そこですぐにテーマのコードを修正し、トップページ共有時専用のOGP画像を個別に指定できるようにカスタマイズした。

公開前にこうしたメタタグの記述ミスや画像のズレを即座に発見して修正できたのは大きな収穫だった。

429エラーが出た場合の対処法

ラッコツールズでOGP確認を行う際、注意しておきたいトラブルがある。

デザインやメタタグを修正して短時間に何度も連続で確認リクエストを送っていると、GoogleやBlogger側からアクセス制限を受け、「HTTP 429 Too Many Requests」というエラーで拒否されることがある。

初めてこのエラーが出たときは「テーマのコードを壊してしまったのではないか」と焦ったのだが、結論から言うと数分程度時間を空けてから再度やり直せば何事もなくエラーは出なくなった。

単に短時間の連続アクセスを一時的に弾いているだけなので、エラーが出ても慌てず、少し休憩を挟んでから再確認すれば問題ない。

開発環境を整えてブログ作りを楽しむ

今回紹介した3つのツール(GitHub・VS Code、PageSpeed Insights、ラッコツールズOGP確認)は、どれも無料で誰でもすぐに使い始めることができる。

テーマ開発やブログカスタマイズは、ツールの力に頼れる部分を徹底的に頼ることで、無駄な手戻りやトラブル対応の疲労を大幅に減らすことができる。

面倒な管理や検証をツールに任せてしまえば、デザインの工夫や記事の執筆といった本当に楽しい本質的な作業に集中できるはずだ。

これからBloggerのテーマ開発やカスタマイズに挑戦してみたい方は、ぜひこれらのツールを活用してみてはいかがだろうか。

関連記事:自作テーマの開発過程やデザイン設計については「Bloggerのオリジナルテーマを作ってみた」、テーマのダウンロードや導入手順については「Bloggerテーマ「Paper & Bookshelf」を配布します」をご参照ください。

]]>
https://freestylestudent.com/blogger-theme-development-tools/feed/0
Bloggerテーマ「Paper & Bookshelf」を配布しますhttps://freestylestudent.com/blogger-theme-paper-bookshelf/https://freestylestudent.com/blogger-theme-paper-bookshelf/#respondWed, 02 Sep 2026 01:00:00 +0000https://freestylestudent.com/?p=612

Blogger専用の読書・書評ブログテーマ「Paper & Bookshelf」を無料配布!ラベルを付けるだけで動く本棚グリッド、読書進捗バー、AI検索・SEO構造化データ対応、レスポンシブ設計など充実の機能を搭載。導入からカスタマイズ手順まで徹底解説します。]]>

アンティークな書斎の本棚と、温かみのあるセピア色の紙地をモチーフにしたBlogger専用の読書ブログテーマ「Paper & Bookshelf(ペーパー・アンド・ブックシェルフ)」を無料公開・配布いたします。

書評、読書記録、文芸コラムなどに特化した機能を多数搭載しており、ラベルを付けるだけでトップページが「動く本棚」に変わる多次元タグ機能や、読書進捗バー、自動目次生成、各種装飾スニペットなどを備えています。

実際に使用している実例サイト(デモ)

本テーマを実際に適用し、運用されているブログはこちらです。デザインの質感や動的な絞り込みの挙動をご確認いただけます。

実例・デモブログ: フリースタイル読書録

トップページの本棚グリッド、記事ページの読書進捗バーや自動追従目次、クラシカルな装飾など、実際の使用感をぜひご覧ください。

「Paper & Bookshelf」の主な特徴

本テーマには、読書ブログ・書評サイトの運営を快適かつ魅力的にするための以下の機能が備わっています。

  • 温かみのあるアンティーク本棚&ペーパーライクなデザイン
  • ラベル付けだけで自動整理される「多次元タグ本棚(グリッド)」
  • スマホ・タブレット・PCに完全対応(100% レスポンシブ&軽量設計)
  • AI検索(GEO)& Google検索に対応したJSON-LD構造化データ自動出力
  • 読書進捗バー & 見出しから自動生成されるスムーズ目次(TOC)
  • 固定ヘッダー & スクロール追従「トップに戻る」ボタン
  • 書評特化の装飾パーツ(書籍スペック表、メリット・デメリット枠、ネタバレ注意枠など)
  • Bloggerの管理画面から簡単にカスタマイズ可能な設計

ラベルを付けるだけで本棚が自動分類

[ジャンル]小説、[著者]夏目漱石、[評価]★5、[地域]日本 といったラベルを付けて投稿するだけで、トップページに栞(しおり)付きのカードとして美しく並びます。著者別(50音順)・ジャンル別・地域別のタブで動的な絞り込みが可能です。

軽量・高速&完全レスポンシブ

Tailwind CSSをベースにした超軽量なアセット設計により、スマートフォンでも崩れず快適に動作します。左上のハンバーガーボタンからは、クラシカルなスライドドロワーメニューがスムーズに展開されます。

Googleが提供しているサイトパフォーマンスを測る「PageSpeed Insights」のスコアは、デスクトップ・携帯電話ともに90点以上をマークしています。

AI検索(GEO)& 最新SEO構造化データに標準対応

Google等のAI検索・要約エンジンに記事構造を正確に伝えるため、記事個別ページには「BlogPosting」スキーマのJSON-LD構造化データが自動的に埋め込まれます。

書評記事に特化した装飾・ギミック

読書の邪魔をしない固定ヘッダーやスクロール進捗バー、自動生成される目次に加え、書籍スペック表やネタバレ注意枠など、書評執筆に役立つ専用パーツを用意しています。

テーマのダウンロード

以下のリンクより、テーマファイル(ZIPファイル)をダウンロードしてご利用ください。

Download

ZIPファイルの内容

  • テーマファイル「theme-paper-shelf.xml」
  • 説明書「README.txt」
  • 投稿テンプレート「blog-post-template.txt」

テーマのインストール手順と初期設定

インストール手順(簡単3ステップ)

テーマの適用は、Bloggerの管理画面から数分で完了します。

既存テーマのバックアップ(任意)
  • Blogger管理画面の左メニューから 「テーマ」 をクリックします。
  • 「カスタマイズ」ボタン右側の矢印(▼)をクリックし、「バックアップ」 を選んで現在のテーマ(XMLファイル)をPCに保存します。
テーマXMLコードのコピー
  • ダウンロードしたZIPファイルを解凍し、 theme-paper-shelf.xml をテキストエディタ(メモ帳など)で開きます。
  • ファイル内のコードをすべて選択してコピー(Ctrl + A ➔ Ctrl + C)します。
HTMLの編集と適用
  • Bloggerの「テーマ」画面で、矢印(▼)から 「HTMLの編集」 をクリックします。
  • 表示されたエディタ内のコードをすべて削除(Ctrl + A ➔ Delete)し、コピーした新規XMLコードを貼り付けます。
  • 右上の 「保存」アイコン(フロッピーディスクのマーク) をクリックして保存します。

※「元に戻す」からHTMLファイルを直接アップロードすることもできます。

インストール完了!

これでテーマのインストールが完了です。

Blogger管理画面での推奨初期設定

テーマの性能をフルに発揮するため、導入後にBlogger管理画面で以下の設定を行ってください。

モバイル表示の設定(必須)
  • Bloggerの「テーマ」画面で、矢印(▼)から「モバイルテーマを選択」を開きます。
  • 「モバイル デバイスで、[デスクトップ] と [モバイル] のどちらのテーマを表示しますか?」で [モバイル] が選択されていることを確認してください。
検索向け説明(メタタグ)の有効化
  • Bloggerの「設定」 ➔ 「メタタグ」 セクションを探します。
  • 「検索向け説明の有効化」 を オン にし、ブログ全体の紹介文(150文字程度)を入力して保存します。 (※記事執筆画面の右側にも「検索向け説明」が表示されるようになり、SEOおよびAI検索構造化データに反映されます)
メインページの投稿数
  • 「設定」 ➔ 「投稿」 を開きます。
  • 「メインページの最大投稿数」 を 8〜24件 に設定して保存します(12件か24件にすると表示が崩れにくくなります)。
  • この設定をすることで、本棚のように記事が並ぶ見た目になります。
投稿テンプレートの設定
  • 「設定」 ➔ 「投稿」を開きます。
  • 「投稿テンプレート」にZIPファイルに同封されたblog-post-templateをメモ帳などで開き、すべて選択してコピー(Ctrl + A ➔ Ctrl + C)します。
  • 「投稿」から新しい投稿を作成した時に、よく使うHTMLコードが反映された状態で作成されます。
初期設定完了!

レイアウト&ウィジェットの簡単カスタマイズ

テーマに設定されている「メインの背景色」「記事カードの背景色」「メイン(本文)の文字色」「サブ(補足情報)の文字色」「アクセントカラー」「リンクテキストカラー」「表示済みリンクの色」はコードを編集せずに、カスタマイズから変更することができます。

テーマカラーの変更を行うことで、簡単にブログに個性を出すことができます。

  • 「テーマ」 ➔ 「カスタマイズ」 ➔ 「詳細設定」 を開きます。
  • ドロップダウンから変更したい項目を選択し、色の変更を行います。
  • 画面右下の「保存」から変更内容を保存します。

本テーマは、Blogger標準ガジェットの「プロフィール」には対応していません。著者プロフィールを表示したい場合は、必ず「画像」または「テキスト」ガジェットをご使用ください。

サイドバーに表示する著者プロフィールは、コード編集をせずに作成することが可能です。

  • 「レイアウト」 ➔ 「sidebar-details」 セクションの 「ガジェットを追加」 をクリックします。
  • リストの中から 「画像」(画像を使用しない場合は「テキスト」) ガジェットを選択します。
  • 以下のように入力して保存します:
    • タイトル:「著者」「プロフィール」「ABOUT ME」など。サイドメニューに表示される際のタイトルになります。
    • 説明:自己紹介の説明文を入力します。
    • URL:画像をクリックした際に、開きたいURLがあればここに指定します。
  • 保存後、サイドメニューにプロフィールカード風に成形された「画像」ウィジェットが表示されます。

ヘッダー・フッター・サイドメニューの機能とカスタマイズ方法

テーマのヘッダーには、以下の機能が標準で搭載されています。

  • (デスクトップ限定)ハンバーガーメニューアイコン:クリックするとサイドメニューが表示されます。
  • (デスクトップ限定)検索窓:ブログの検索が可能です。
  • (デスクトップ限定)ヘッダーの固定:スクロールしてもヘッダーが画面上部に固定され表示され続けます。
  • ブログタイトルの表示:クリックするとトップページに遷移します。
  • ブログ説明の表示:ブログの説明を追加している場合、タイトルの下に記載されます。
  • 進捗バー:ページの読書状態が分かります。
  • 「紹介」「このブログについて」:固定ページへのリンクが貼られています。詳細は「ヘッダー・フッターの設定」で説明します。

テーマのフッター(周辺)には、以下の機能が標準で搭載されています。

  • 「トップに戻る」ボタン:スクロール量に合わせて、ページトップへ戻るボタンが表示されます。
  • 「プライバシーポリシー」「お問い合わせ」:固定ページへのリンクが貼られています。詳細は「ヘッダー・フッターの設定」で説明します。
  • クレジット表記の自動更新:年表示「@2026」は自動更新されます。

ヘッダーの編集(header-title)と、ヘッダーメニューの編集(header-nav-section)は別のガジェットです。

ヘッダー・フッターの「紹介」「このブログについて」「プライバシーポリシー」「お問い合わせ」はページへのURLがデフォルトで設定されています。そのため、新しく該当のページを公開する場合、すでにあるページを登録する場合は設定を大なう必要があります。

ヘッダーのタイトル(ブログ名)とその下に表示される説明(ブログの説明)はBlogger管理画面の「レイアウト」から「ヘッダー」を選択して編集することができます。

このテーマでは、ヘッダーのタイトル・説明はテキストのみ入れることができます。ロゴなどは設定しても適応されないため、ご注意ください。

公開済みのページを登録する、新規公開のページをメニューに登録する場合は、Blogger管理画面の「レイアウト」から「ヘッダーメニュー」「フッターメニュー」を選択して編集するのがシンプルで分かりやすいです。

メニューの追加も「レイアウト」から行うことができます。

  • 「レイアウト」➔ 「ヘッダーメニュー/フッターメニュー」 ➔ 「リンクリスト」を選択してください。
  • 編集するメニューを選択し「このアイテムを編集する」からサイトでの表記・URLを編集することができます。
  • 「URL」にページのURLを入れ、保存してください。

BloggerではページのURLを指定することができないため、ページのURLを意図したものにするには、少々工夫が必要になります。

  • 「ページ」 ➔ 「新しいページ」を選択します。
  • 追加されたページの「タイトル」を以下のように設定し、公開してください。この時、ページに書く内容が決まっていれば、ページ内に書き込んでください。
    • 「紹介」:about
    • 「このブログについて」:about-blog
    • 「プライバシーポリシー」:privacy-policy
    • 「お問い合わせ」:contact
  • 保存後、「about」 ➔ 「自己紹介」のように任意のタイトルに変更してください(一度公開されたページは、タイトルや本文を更新してもURLが変更されません)。

その他のヘッダー・フッターのカスタマイズは、テーマのHTMLファイルから行う必要があります。

ヘッダーの三本線のアイコン(ハンバーガーメニューアイコン)をクリックするとサイドメニューが表示されます。サイドメニューには検索窓があります。

また、サイドメニューへのガジェットの追加も可能です。

  • 「レイアウト」 ➔ 「drawer-widgets」 セクションを探します。
  • 「ガジェットを追加」 をクリックし、「テキスト」や「ラベル一覧」、「ページリスト」などを配置します。
    • ラベル一覧のガジェットを追加する場合、個別でラベル一覧を用意すると見た目がきれいになります。
    • その場合、「ジャンル」「著者」「評価」「地域」「読後感」というタイトルで追加し、該当のラベルのみ選択してください。

記事のラベル付けルール

Bloggerテーマ「Paper & Bookshelf」はラベルの設定方法にルールがあります。この通りに設定しないと、「詳細検索」や「著者別に探す」といった機能が使用できなくなります。

記事投稿画面の「ラベル」に以下のルールでタグを設定すると、トップページの本棚タブや検索絞り込みと自動連動します。

  • ジャンル別: [ジャンル]小説、[ジャンル]ミステリー など
  • 著者別: [著者]夏目漱石、[著者]東野圭吾 など
  • 評価: [評価]★5、[評価]★4 など(※[評価]★5 を付けた記事は、おすすめ枠に大きくピックアップされます)
  • 地域: [地域]日本、[地域]イギリス など
  • 読後感: [読後感]泣ける、[読後感]ワクワク など

ブログの表側では[ジャンル]などの角括弧部分は自動的にカットされ、綺麗な文字列のみが表示されます。

記述例

記述例: [ジャンル]小説, [著者]夏目漱石, [評価]★5, [地域]日本, [読後感]考えさせられる

記事執筆用 HTML装飾スニペット集

本テーマでは、見出し(h2/h3/h4)・箇条書きリスト・引用は、通常の作成エディタで書くだけで自動的にテーマ専用の装飾が適用されます。

それ以外の特殊な装飾パーツ(書籍スペック表、メリット・デメリット枠、ネタバレ注意枠、タイムラインなど)を使用したい場合は、記事エディタを 「HTMLビュー」 に切り替えて、以下のコードを貼り付けてご利用ください。

また、よく使う装飾がある場合、投稿テンプレートの設定から、該当のコードを貼り付けておくと簡単に再利用できるようになります。

※通常の引用ブロックでもデザインは適用されますが、より強調したセピア調の枠線引用にしたい場合は以下をご利用ください。

HTML
<blockquote class="bg-[#fcf8f2] border-l-4 border-accent rounded-r p-5 my-6 shadow-sm italic text-ink-main font-serif relative"> 「人間は、自分が思った通りの人間になる。」 <cite class="block text-right text-xs font-sans text-[#8b5a2b] mt-3 not-italic">― 本書 第2章より引用</cite>
</blockquote>
HTML
<!-- マーカー風ハイライト -->
読者を引き込むのは、この<span class="marker">運命的な出会いを描いたシーン</span>です。
<!-- キーワード強調 -->
本書で提唱される概念である <code>能動的読書(Active Reading)</code> は必読です。

キーワード強調は、コード表示用のコードをそのまま使っているため、マーカーの方が自然に表示されます。

HTML
<!-- メモ・補足情報ボックス -->
<div class="bg-[#f8f4eb] border border-[#e6dec9] rounded-md p-4 my-6 text-sm text-ink-main space-y-2"> <p class="font-bold flex items-center gap-1.5 text-[#8b5a2b]"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 補足情報・トリビア </p> <p>著者は本作を執筆するにあたり、実際に半年間の海外取材を行っていたと言われています。</p>
</div>
<!-- ネタバレ注意ボックス -->
<div class="bg-[#fcf4f2] border border-[#f0deda] rounded-md p-4 my-6 text-sm text-ink-main space-y-2"> <p class="font-bold flex items-center gap-1.5 text-accent"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg> !ネタバレ注意! </p> <p>これより下は、物語の結末および核心部分の考察が含まれています。未読の方はご注意ください。</p>
</div>
HTML
<table class="book-spec-table"> <thead> <tr> <th colspan="2">書籍情報スペック</th> </tr> </thead> <tbody> <tr> <td class="spec-label">書名</td> <td>吾輩は猫である</td> </tr> <tr> <td class="spec-label">著者</td> <td>夏目 漱石</td> </tr> <tr> <td class="spec-label">出版社</td> <td>日本文学出版</td> </tr> <tr> <td class="spec-label">発売日</td> <td>1905/10/06</td> </tr> <tr> <td class="spec-label">評価・おすすめ度</td> <td style="color: #9E4738; font-weight: bold;">★★★★★ (星5)</td> </tr> </tbody>
</table>
HTML
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6"> <!-- おすすめポイント(メリット) --> <div class="bg-[#f4f7f4] border border-[#dbe4db] rounded-md p-4 space-y-2"> <p class="font-bold text-emerald-800 flex items-center gap-1.5 text-sm"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> ここがおすすめ(魅力) </p> <ul class="list-disc list-inside text-xs text-ink-main space-y-1 pl-1"> <li>登場人物の心理描写が緻密で深く感情移入できる</li> <li>伏線の回収が見事で、後半一気に読み進められる</li> <li>現代社会の人間関係にも通じる普遍的なテーマ性</li> </ul> </div> <!-- 人を選ぶ点(デメリット) --> <div class="bg-[#faf6f6] border border-[#f5e6e6] rounded-md p-4 space-y-2"> <p class="font-bold text-[#b45454] flex items-center gap-1.5 text-sm"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 購入前に知っておきたい点 </p> <ul class="list-disc list-inside text-xs text-ink-main space-y-1 pl-1"> <li>序盤の展開がスローテンポでやや退屈に感じる</li> <li>古典的な言い回しが多く、慣れるまで読みにくい</li> <li>ハッピーエンドではないため、読後の好みが分かれる</li> </ul> </div>
</div>
HTML
<div class="book-timeline"> <!-- タイムライン項目 1 --> <div class="book-timeline-item"> <h4>第1期:事件の始まりと出会い</h4> <p>主人公が古い書物の奥から見つけた一枚のメモ書き。すべてはここから始まり、謎の人物との出会いに繋がる。</p> </div> <!-- タイムライン項目 2 --> <div class="book-timeline-item"> <h4>第2期:対立と深まる謎</h4> <p>登場人物たちの価値観の衝突。いくつかの嘘が暴かれ、物語は急展開を見せる。</p> </div> <!-- タイムライン項目 3 --> <div class="book-timeline-item"> <h4>第3期:真実の解明と結末</h4> <p>クライマックスから伏線回収へ。謎が全て解き明かされた後、主人公が下した決断とは。</p> </div>
</div>

カラー・フォントのカスタマイズ(上級者向け)

src/theme.xml の12行目付近にある以下のフォントリンクをお好みのGoogle Fontに変更します。src/css/main.css で適用されているフォントファミリーを変更するか、CSSの最上部で変更を上書きしてください。

HTML
<link href='https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&amp;display=swap' rel='stylesheet'/>

テーマXMLの先頭部分にある <b:skin> 内の変数を編集することで、ブログ全体の配色を一括変更できます。

HTML
 <b:skin><![CDATA[ /* <Variable name="paper.bg" description="Main Background Color" type="color" default="#FAF6EE" value="#FAF6EE"/> <Variable name="paper.card" description="Card Background Color" type="color" default="#FFFFFF" value="#FFFFFF"/> <Variable name="ink.main" description="Main Text Color" type="color" default="#2D2926" value="#2D2926"/> <Variable name="ink.sub" description="Sub Text Color" type="color" default="#736B63" value="#736B63"/> <Variable name="accent.color" description="Accent Color (Ribbon)" type="color" default="#9E4738" value="#9E4738"/> */
  • 珈琲モカ風の配色にしたい場合: paper.bg の値を #FAF6EE ➔ #F4ECE1 に変更
  • アクセントカラー(栞)を深緑にしたい場合: accent.color の値を #9E4738 ➔ #2E5A44 に変更

OGP(Open Graph Protocol)は、X(旧Twitter)、LINE、FacebookなどのSNSやチャットツールでWebページのURLがシェアされた際に、タイトル・サムネイル画像・説明文をリッチなカード形式で表示させるための仕組み(HTMLメタタグの規格)です。

トップページの共有時にデフォルトで表示されるのは、図書館の画像になっています。変更するには、テーマのHTMLから該当のURLを表示させたい画像のURLに変更してください(OGPに指定する画像は、インターネット上にアップロードされている必要があります)。

画像がコンテンツの中に含まれている個別の投稿はSNSシェア時には投稿内の画像(最初に置かれた画像)が使われます。ここで設定するのは、トップページと画像が含まれていない投稿のOGP画像です。

  • Blogger管理画面の 「テーマ」 をクリックします。
  • 「カスタマイズ」ボタンの右側にある 矢印(▼)ボタン ➔「HTMLの編集」 をクリックして、テーマのソースコード入力画面を開きます。
  • コードが表示されている画面内のどこでも良いので一度クリックし、キーボードの Ctrl + F キー(Macの場合は Cmd + F)を同時に押します。
  • 画面右上に表示される検索窓に、トップページ用シェア画像URLをコピーして貼り付け、エンターキーを押します。
  • 以下のような記述がある場所に一瞬でジャンプします。
HTML
 <!-- ① トップページ(インデックスページ)の場合は最新記事の画像を無視し、ブログの共通画像を優先 --> <b:if cond='data:view.isMultipleItems'> <!-- ================================================================== 【トップページ用シェア画像URL】 ※ブログのロゴや、トップページ共有時に表示したいご自身の画像URL(https://...)に書き換えてください。 ================================================================== --> <meta content='https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&amp;fit=crop&amp;w=1200&amp;h=630&amp;q=80' property='og:image'/> <meta content='https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&amp;fit=crop&amp;w=1200&amp;h=630&amp;q=80' name='twitter:image'/> <b:else/> <!-- ② 個別記事・固定ページの場合は記事内の画像を優先表示 --> <!-- (中略...記事画像抽出処理) --> <b:else/> <!-- ================================================================== 【画像なし記事用デフォルト画像URL】 ※お好きなデフォルトアイキャッチの画像URL(https://...)に書き換えてカスタマイズ可能です。 ================================================================== --> <meta content='https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&amp;fit=crop&amp;w=1200&amp;h=630&amp;q=80' property='og:image'/> <meta content='https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&amp;fit=crop&amp;w=1200&amp;h=630&amp;q=80' name='twitter:image'/> </b:if> </b:if>
  • content=’…’ の中に書かれている https://images.unsplash.com/… の部分(2箇所あります)を、先ほどステップ1でコピーしたご自身の画像URLに上書きします。 (※シングルクォーテーション ‘ を消してしまわないようにURLだけを置き換えてください)
  • 画面右上(または右下)にある 保存(フロッピーディスクのアイコン) ボタンをクリックして完了です!

利用規約・ライセンス

  • 商用利用: 個人・法人問わず、アフィリエイトや商用利用を含めて完全無料でご利用いただけます。
  • 改変・カスタマイズ: デザインやコードの改変は自由に行っていただけます。
  • 著作権表記について: フッターに記載されている著作権表記(クレジットリンク)は、削除・改変していただいて構いません。ご自身のサイトデザインに合わせて自由にご調整ください。

よくある質問(FAQ)

「テーマを保存できませんでした(XMLエラー)」と表示されます
コード貼り付け時に閉じタグが欠落したか、特殊文字(& 等)のエスケープが抜けている可能性があります。スニペットを貼り付ける際は必ず「HTMLビュー」で操作してください。
モバイルで表示した際にレイアウトが崩れます
Blogger管理画面の「テーマ」➔「モバイルテーマを選択」にて、[モバイル] が選択されているかご確認ください。
本棚カードに画像が表示されません
記事の先頭にある画像を自動取得してアイキャッチにします。記事内に画像が一枚もない場合はデフォルトの洋書画像が表示されますので、記事内に書影等を挿入してください。
ラベル設定がうまくできません
ラベル設定は「[ジャンル]小説」のように[ジャンル], [著者], [評価], [地域], [読後感]と記号([])を用いて表記する必要があります。分類の仕方を変更する場合は、テーマHTMLを変更する必要があります。
日付表示がずれてしまいます
テーマの日付表示は、Bloggerのタイムゾーンが反映されます。タイムゾーンが「(GMT+09:00) 日本標準時 – 東京」となっているかご確認ください。
目次は自動生成されますか?
はい。記事本文に <h2> や <h3> の見出しを記述して投稿するだけで、PCではサイドバー上部に追従固定、スマホでは本文直前にアコーディオン形式で自動展開されます。
商用利用・改変は可能ですか?
個人・法人問わず、商用利用可能です。改変・カスタマイズも自由に行っていただけます。

テーマの関するお問い合わせ

FAQでも解決できないトラブルや、テーマに関して気になる点などがございましたら、フォームからその内容を送ってください。

[contact-form-7]

お問い合わせのメッセージはWordPressログイン時に確認しています。

また、内容によっては確認にお時間をいただく場合があります。ご了承ください。

関連記事

]]>
https://freestylestudent.com/blogger-theme-paper-bookshelf/feed/0
NotionとWordPressをAIで繋いだら、ブログ執筆のコピペ作業が完全に消滅した話https://freestylestudent.com/notion-wordpress-mcp-automation/https://freestylestudent.com/notion-wordpress-mcp-automation/#respondTue, 01 Sep 2026 01:00:00 +0000https://freestylestudent.com/?p=520

NotionとWordPressをAI(Antigravity)でMCP連携!記事構成・下書きの同期からSANGOブロック装飾、下書き保存までを完全自動化し、ブログ執筆のコピペ往復作業をゼロにした実践的な仕組みと構築手順を解説します。]]>

ブログ運営を続けていると、記事を書くこと以外にも膨大な作業が存在することに気づかされる。

アイキャッチの作成や見出しの装飾、カテゴリーの設定など、細々とした雑多な作業にじわじわと時間を奪われていく(地味だが確実に集中力を削られる)。

これまでもAIを活用して執筆の効率化を進めてきたが、どうしても手作業として残ってしまう工程があった。

文章を書くスピードを上げるだけでは限界を感じたため、今回はWordPressのMCP連携を導入してみることにした。

画面間のコピペ作業が完全に消滅し、執筆環境が劇的に快適になった舞台裏とその仕組みを紹介したい。

コピペ往復地獄

これまでもブログ運営の手間を減らすため、AIを活用した下書き作成や構成の自動化など、様々な工夫を重ねてきた。

先行研究の調査や執筆の自動化を進めることで、記事作成にかかる負担はかなり減らせていたはずだった(卒論準備を要領よくサボる。Antigravityに先行研究集めを丸投げしてみた などの取り組みもその一つだ)。

しかし、記事を書き上げた後に待ち受ける「画面間の移動」だけは、どうしても自動化できずに残っていた。

下書き→WordPressのコピペ

自分の場合、ブログ記事の構成案や下書きはすべてNotion上で作成している。

書き終えた文章をWordPressの投稿画面へ移す際、NotionからコピーしてWordPressのエディターに貼り付ける作業が発生する。

「ただコピペするだけ」と言われればそれまでだし、我ながら怠惰だとは思う。

だが、見出しを整えたり装飾をやり直したりしながら何度も画面を往復するのは、面倒なものはどうしても面倒なのだ。

公開記事→Notionへのコピペ

さらに厄介だったのが、NotionとWordPressの間で記事内容のズレが生まれてしまう問題だ。

Notionで完璧に仕上げたつもりでも、WordPressのプレビュー画面を見ていると、ついつい投稿直前に細かな言い回しを手直ししてしまう。

その結果、WordPress上に公開された記事と、手元のNotionに残っている下書きの内容が一致しなくなってしまうのだ。

両者の内容を揃えるには、WordPressから修正後の文章をもう一度Notionにコピペして上書きしなければならず、管理の手間は増える一方だった。

タグとカテゴリーがごちゃごちゃ

コピペ問題と並んで頭を悩ませていたのが、記事に設定するタグとカテゴリーの散らかり具合だった。

ブログを開設した当初、深い考えなしにその場の思いつきで設定してしまったツケが、記事数が増えるにつれて回ってきたのだ。

何が問題か

一番の問題は、カテゴリーとタグの役割分担が完全に崩壊し、カオスな状態になっていたことだ。

例えば「AI」と「AI活用」のように、ほとんど同じ意味を持つラベルがカテゴリーとタグの両方に混在し、複数のカテゴリーを重複して選択することも多かった。

さらに深刻だったのが、「雑記」カテゴリーへの依存だ。

ブログ運営の試行錯誤も、AIを使ってやってみたいアイデアも、分類に迷った記事をすべて雑記に放り込んでしまっていた。

気づけば全体の3割近い投稿が雑記に埋もれてしまい、読者にとっても自分にとっても、どこに何があるのか分からない状態に陥っていた。

ブログ執筆の比較:従来の手作業 vs MCP連携

WordPressとNotionをAPIでつなぐ

こうしたコピペの往復や管理の破綻を根本から解決するため、WordPressのAPIを活用することにした。

WordPressには、外部のツールやプログラムから記事を操作できる「REST API」が標準で備わっている。

特別な有料プラグインを導入したり、追加のコストを支払ったりすることなく利用できる点も、金欠な学生にとっては非常にありがたい。

Antigravityで必要な環境を用意

とはいえ、自分自身はAPIを叩くコードをスラスラ書けるわけではない。

そこで今回は、日頃から開発や作業の相棒として使っているAIエージェント「Antigravity」に環境構築を丸投げすることにした。

人間側でやったことといえば、WordPressの管理画面で必要なパスワードを1つ発行してきたことくらいだ。

パスワードの発行手順も非常にシンプルで、WordPressの管理画面から「ユーザー」>「プロフィール」>「アプリケーションパスワード」を開き、「新しいアプリケーションパスワード名」に「Antigravity」と入力して追加ボタンを押すだけで完了する。

通常であれば、このパスワードを使ってWordPressのAPIを呼び出すスクリプトを自分で書かなければならないらしい。

しかし自分の目的は、あくまで「Notionの下書き」を「SANGOの装飾ブロック」に変換し、そのまま「WordPressの下書き」として自動保存してもらうことだ。

そのためのMCPサーバーの作成や設定ファイルの準備など、面倒な作業はすべてAntigravity自身が勝手に整えてくれた。

カテゴリーやタグも自動で取得

この自作MCPサーバーでは、記事の投稿や更新だけでなく、WordPress上のカテゴリーやタグの一覧も自動で取得できる。

これにより、AIが記事の内容に応じた適切なカテゴリーやタグを既存のリストから自動で選択してくれるようになり、表記揺れやタグの重複乱立を防ぐことができる。

WordPress標準の「REST API」と「アプリケーションパスワード」を組み合わせているため、セキュリティ面でも安心して運用できる。

固定ページを1分で作ってみた実例

この仕組みの実力を試すため、ブログの固定ページ「このブログについて」の作成をAIと連携して進めてみた。

Notion上のラフなメモからWordPressへの下書き作成まで、人間がキーボードで打ち直す作業は一切発生しなかった。

Notionのメモから装飾コードを生成

まずはNotion上に、固定ページに入れたい経歴やブログのコンセプトを箇条書きで並べた。

気になるところに「ここは丁寧な表現にする」「タイムラインは見出しを体言止めにする」とコメントを残す。

AIがその指示をすべて読み取り、SANGOの専用ブロック(タイムライン、ボックス、見出し装飾)を含むHTMLコードを組み立てた。

コピペなしで下書き保存が完了

以前であれば、生成されたコードをコピーしてWordPressのエディターに貼り付けていた。

しかし今回は、AIがそのままWordPressのAPIを経由して直接「固定ページの下書き」を作成してくれた。

作業完了後にWordPressの管理画面を開くと、すでに美しいSANGO装飾が施された固定ページが登録されていた。

Notionに思いついたメモを残してAIに連携を指示するだけで、裏側で下書きまで揃う感覚は非常に新鮮だった。

コピペが消えて快適になった執筆環境

WordPressへの直接連携が可能になったことで、日々の執筆環境は一段と整った。

単に作業時間が減っただけでなく、ブログ全体の整理体制を見直す良い機会にもなった。

現在の執筆タイムライン

現在の執筆の流れは、以下のステップで進めている。

Notionに構成案を用意する

Gemini Sparkでリサーチした構成案や、思いついたメモをNotionのデータベースに配置する。

校正コメントで指示を出す

スマホやPCから、修正したい箇所にピンポイントでコメントを残す。

AIによる自動清書とNotion反映

Antigravityがコメントを拾って文章を清書し、Notionページ本体を最新状態に更新する。

SANGOブロック化とWordPress下書き保存

SANGOの専用ブロックHTMLに変換され、WordPressへ自動で下書き保存される。

プレビューで最終確認

WordPressのプレビュー画面でレイアウトを確認し、問題がなければ公開する。

自動執筆の5ステップ

カテゴリーとタグの重複を整理

今回のMCP連携を機に、以前から気になっていたカテゴリーとタグの設計も見直した。

これまではカテゴリーに「AI活用」がある一方で、タグにも「AI」や「AIエージェント」といった似たようなラベルが存在し、分類が重複してしまっていた。

カテゴリーは大枠のテーマ(ブログ運営、技術、AI活用など)に絞り、タグは具体的なツール名やトピックを表すように役割を明確化した。

NotionのデータベースとWordPress側の分類ルールを綺麗に揃えたことで、記事の整理が格段にしやすくなった。

カテゴリーとタグの分類整理

Notionデータベースのプロパティ設計

NotionとWordPressを安定して連携させるため、Notionの「DB_ブログ記事」には以下のプロパティを持たせている。

  • タイトル: 記事のタイトル
  • スラッグ: 記事のURLパーマリンク(英数字)
  • ステータス: 記事案、下書き、予約投稿、投稿済み
  • 同期状態: 要WP反映、最新(同期済)、WP側で直接修正あり
  • 文字数: 本文の文字数(AIが自動入力する目安値)
  • カテゴリー・タグ: WordPressと完全一致させたマルチセレクト
  • WordPress投稿ID: 連携時に発行される固有ID
  • メタディスクリプション: 検索結果に表示される概要文

同期状態をわかりやすく管理することで、WordPress側で少し手直しした場合でも、NotionとWordPressの内容をいつでも同じ状態に保てるようになった。

仕組み化で生み出す自分のための時間

日々の自由に使える時間は限られている。人生の夏休みも折り返し地点を超えてしまった。

やりたいことでセルフデスマーチを始めてしまったので、とにかく効率化しないと破綻してしまう。

とはいえ、効率化や自動化そのものを目的にしてしまうと、ブログ本来の楽しさを見失ってしまう。

自分にとっての仕組み化は、単なる手抜きではなく、自分が本当にじっくり考えたい思索や読書、勉強に集中するための工夫だ。

Notion、SANGO、そしてAIエージェントを適切に繋ぐことで、ブログ執筆の地味なストレスを大幅に減らすことができた。

もしブログの装飾や下書き作成に負担を感じているなら、自分に合った連携環境を少しずつ整えてみてはいかがだろうか。

]]>
https://freestylestudent.com/notion-wordpress-mcp-automation/feed/0
Bloggerのオリジナルテーマを作ってみたhttps://freestylestudent.com/blogger-original-template/https://freestylestudent.com/blogger-original-template/#respondMon, 31 Aug 2026 01:00:00 +0000https://freestylestudent.com/?p=604

Bloggerで読書記録に特化したオリジナルテーマを開発!アンティークな本棚風デザイン、動的タグ分類、読書進捗バーの実装まで、AIエージェント(Antigravity)を活用してゼロからテーマを完成させた制作過程と工夫を詳しく解説します。]]>

Googleのサービスの一つである、Bloggerのオリジナルテーマを自作してみた。

最初は、今運営しているこのブログのためにWordPressのテーマを作ってみたいと考えていたのだが、仕組みが複雑すぎて諦めた。

自分は最低限のHTMLやCSSの読み書きならできるのだが、それ以上のことは難しい。

いずれは自分の手でオリジナルのテーマを作ってみたいと思っていたが、だからといってゼロからテーマを開発するのはさすがにハードルが高すぎる。

Bloggerロゴ

色々調べてみた結果、WordPressよりも構造がシンプルなBloggerテーマなら作れるかもしれないと考えた。

今回は、Antigravityを使って、テーマづくりに挑戦してみた。

本棚テーマ作成の概要

作成したテーマのデモページ

今回作成したのは、読書ブログにぴったりな紙と本棚をモチーフにしたテーマだ。温かみのあるデザインを目指し、本を紹介するのに適したレイアウトを追求した。

作成に用意したものは、AIエージェントのAntigravityと確認用のPCやスマホだけだ。特別な開発環境を用意する必要もなく、ブラウザとAIだけで作業が進むのは本当にありがたい。

大まかな作業手順は以下の5つのステップに分けて進めた。

作成したいテーマの方向性を決めて「Bloggerテーマ.md」に書き込む
AIエージェントのAntigravityと相談して具体的な開発計画を練る
AntigravityにテーマのHTMLコードと表示確認用のデモページを作成してもらう
作成されたデモページを確認しながら、必要な機能の追加やUIの調整を行う
実際のBlogger環境にテーマを適用し、本番環境で問題なく動作するか確認する

オリジナルテーマの制作過程

コンセプトと必要な機能の決定

コンセプト解説図

まずは、どのようなブログにしたいのか、方向性とコンセプトを明確にした。

以前から作りたいと考えていた、本が好きな人のための読書紹介ブログを構築することに決めた。

全体のコンセプトは、紙とペンをイメージした温かみのあるシンプルなデザイン。機能面では、スマホ対応や本を探すための検索窓、長文でも迷わない目次機能が欲しい。

Zen Maru Gothic

フォントには、紙と本の温度感に合いそうな「Zen Maru Gothic」というフォントを採用することにした。

他にも、記事一覧は本棚のように縦長のカードを並べたデザインにして、見出しはマーカーペンで引いたような風合いにしたい、といった要望をコンセプト案として固めていった。

開発指示書のマークダウン作成

指示書構成イメージ図

作りたいテーマのイメージが固まったら、AIエージェントへ渡す指示書を作成した。情報が正しく伝わるよう、「Bloggerテーマ.md」というマークダウンファイルに内容をまとめた。

AIに正しく意図を伝えるためには、箇条書きなどを活用して構造化するのが効果的と言われている。

この段階で、指定していなかった見出しの具体的な装飾イメージなども詳細に追加した。

AIエージェントとの計画立案

準備した指示書をもとに、Antigravityの対話型インタビュー機能である「/grill-me」を起動した。

Bloggerのテーマを作成したい旨を伝え、AIとキャッチボールをしながら計画を整理する。

議論を重ねた結果、制作の道のりは以下の4つの工程にまとまった。

  • Blogger独自のタグ仕様や変数の仕組みを調査する
  • 確認用のデモページと、Bloggerテーマ用のHTMLファイルを並行して作成する
  • デモ画面での微調整が完了した後に、実際のBloggerへファイルをアップロードする
  • 本番環境での動作確認をして完成

次に何をやるかもAntigravityに説明してもらうことで、テーマ作成で次に何をやればいいのか自分とAntigravityで食い違いが起きないようにした。

デザインと基本機能の追加

基本機能の問題と解決策

「Bloggerテーマ.md」に沿って、Antigravityが最初のテーマファイルとデモページを作成した。

ここからは、デモページを目で確認しながら、機能やデザインの微調整を繰り返していく。

実際にデモページへ長文タイトルを流し込んでみたところ、見出しのマーカー装飾が途中で不自然に途切れ、盛大にレイアウトが崩れているのを発見した。

そこで、長文にも対応できるよう、折り返しがある場合の装飾も定義してもらうことにした。

さらに、箇条書きのリストも装飾が付けられていなかった。この原因は自分のうっかりミスで、装飾の指定を「Bloggerテーマ.md」に書いていなかったためだ。

リストにも装飾をすることにし、Antigravityにブログの雰囲気に合った装飾を定義してもらった。

追加した「おすすめ記事」のブロック

デモページを見ていると欲しい機能が出てきたので、それを追加することにした。

具体的には、サイトの構造がすぐに分かるパンくずリストやヘッダーの検索窓、おすすめ記事・関連記事のブロックを順次追加した。

追加した機能もデモページで機能しているか確認し、きちんと動くか動作確認をした。

自分の伝え方がうまくないからかもしれないが、一度では指摘した不具合が直らないこともあり、何度かAntigravityとやり取りして機能の追加を行った。

UIの調整とデバイス最適化

UI調整の問題と解決策

デモページでは、デザインと機能の調整だけでなくUIの調整も行った。コンセプトを伝える「Bloggerテーマ.md」だけでは、期待する挙動を説明できなかったようで、調整を重ねることになった。

記事カード一覧の操作性、アニメーション、デスクトップとモバイルのデザインの調整など、自分が思い描いていた通りの挙動になるように、変更点をまとめてAntigravityに変更してもらった。

スマホでの見栄えを考慮し、記事一覧のカラム数を1カラムから2カラムへ急遽変更するなどの調整を経て、無事にすべての修正を完了した。

本番環境での不具合修正と検証

本番不具合と解決策

デモページでの確認を終え、いよいよ作成したテーマを本番のBlogger環境へアップロードした。

デモページでは問題なく動いていたのだが、実際の環境に適用すると、いくつかの箇所で表示の崩れが発生してしまったので再び調整することになった。

例えば、ヘッダーの色が透過されてしまったり、ラベルの表示が二重になってしまったり、サイドメニューが表示されなかったり。

調べてみると、デモでは動いていた機能がBloggerでは動かないのは、Blogger独自のHTMLタグ仕様とCSSの読み込み順序に原因があるそう。

Antigravityに不具合・エラーの状況をそのまま伝えて、原因を特定して修正コードを作成してもらった。

テーマの最終調整

修正されたHTMLを再びBloggerにアップロードし、エラーが修正されているか確認した後、テーマの最終調整をすることにした。

テストは動作確認用にテーマが対応している装飾すべてをHTMLでAntigravityに出力してもらい、期待通りに表示されているか目で確認する形で行った。

この段階では最終調整だったので、ほとんど修正点はなかったが、ブロックの余白の追加といった細かい調整はまだあった。

デスクトップだけでなく、スマートフォンでも最終確認を行い、表示の崩れがないかを確認して、無事にすべての調整を完了した。

初めてのテーマ作成を終えて

手探りの作業だったが、最終的にはなんとか納得のいくBloggerテーマを完成させることができた。

試行錯誤も含めた全体の制作時間は、およそ3時間程度。

特にデモページを使った微調整に一番時間がかかったが、そのぶん思っていた通りのクオリティに仕上げることができた。

初めてのテーマ開発ながらも作りたいと考えていたテーマを作ることができたのは、AIエージェントのサポートのおかげだ。

今回の挑戦を通じて、自分好みのデザインをコードに落とし込む楽しさを実感した。

またBloggerのテーマを作ってみたいし、いずれはWordPressのテーマも自作にも挑戦してみたい。

今回完成した本棚テーマは、自分自身でしばらく運用して不具合が出ないことを確認したうえで、このブログで無料配布する予定だ。

使い方やカスタマイズ方法については配布ページで詳しく説明するつもりです。

]]>
https://freestylestudent.com/blogger-original-template/feed/0
NotionとAntigravityをMCP連携して、AIにデータを直接読み書きさせる完全ガイドhttps://freestylestudent.com/notion-antigravity-mcp/https://freestylestudent.com/notion-antigravity-mcp/#respondSun, 30 Aug 2026 01:00:00 +0000https://freestylestudent.com/?p=519

NotionとAntigravityをMCP連携し、AIにページの検索やデータベースの更新を直接読み書きさせる実践ガイド。設定手順、6つの活用例、注意点まで徹底解説。]]>

以前の自分は、AIを使うたびにNotionを開いて文章をコピーし、AIチャット画面に貼り付け、返ってきた結果を手作業でNotionに貼り直すという作業を繰り返していた。

正直に言って、そんな退屈で不毛なコピペ作業は絶対にやりたくない。

ページ数が数枚なら我慢できても、数十ページや数百行に及ぶデータベースを相手にする場合、手作業でやっていたら確実に気が狂ってしまう。

そんな悩みを根本から解決してくれたのが、AIエージェント「Antigravity」とNotionの「MCP(Model Context Protocol)」連携だ。

この仕組みを導入すると、AIが自分のNotionワークスペースに直接アクセスし、ページの検索、本文の読み取り、データベースの自動更新までを自律的にこなしてくれるようになる。

これまでNotionに膨大な情報やログを書き溜めてきたからこそ、AIを組み合わせたときの恩恵は計り知れない。

今回は、完全初心者が迷わずにAntigravityとNotionをMCP連携できるよう、具体的な設定手順から日々のリアルな活用例、使って分かった注意点までを詳しく解説する。

そもそもMCP連携とは何か

MCP(Model Context Protocol)とは、AIモデルと外部のツールやデータベースを繋ぐためのオープンな接続規格のことだ。

Anthropic社が提唱して以来、世界中のAI開発者コミュニティで爆速的に普及しており、現在ではAIツール連携における世界標準(いわばIT機器におけるType-C端子のような存在)になりつつある。

従来のAIはチャット欄に手動でテキストを流し込む必要があったが、MCPを使えばAI自身が直接NotionのAPIを呼び出してデータを読み書きできる。

これにより、人間が画面を行き来してコピペを繰り返す手間が完全にゼロになる。

手動コピペ vs MCP連携の比較

Notionでインテグレーションを作成する手順

AntigravityからNotionを操作できるようにするには、まずNotion側で「インテグレーション(APIキー)」を発行し、操作したいページへのアクセス権を付与する必要がある。

インテグレーションとは何か

インテグレーションとは、外部アプリに対して「Notionの特定の部屋に入って作業することを許可する専用の合鍵(Bot)」のような仕組みだ。

自分のアカウントのログインパスワードをAIに渡すのではなく、権限を制限した専用のAPIキーを発行して連携させるため、セキュリティ面でも極めて安全に運用できる。

Notionインテグレーションの仕組み

インテグレーションを作成してAPIキーを取得する

まずはNotionの開発者ポータル(My integrations)へアクセスし、新しいインテグレーションを作成する。

開発者ポータルを開く

開発者ポータルを開き、「新しいインテグレーションを作成する」をクリックする。

ワークスペースを選択して名前を入力

関連付けるワークスペースを選択し、インテグレーションの名前(例:Antigravity-Notion)を入力する。

権限にチェックを入れる

「コンテンツを読み取る」「コンテンツを更新する」「コンテンツを挿入する」の権限にチェックを入れる。

内部インテグレーションシークレットを控える

作成を完了し、画面に表示される「内部インテグレーションシークレット(APIキー)」をコピーして手元に控えておく。

このシークレットキーは外部に漏れるとNotionのデータを勝手に操作されてしまうため、他人に教えたり公開リポジトリにアップロードしたりしないよう厳重に管理してほしい。

操作したいページやデータベースへコネクトを許可する

Notionのセキュリティ設計上、APIキーを発行しただけではAIはどのページにもアクセスできない。

AIに操作させたいデータベースや親ページを開き、個別に「入室許可」を与える作業が必要になる。

設定メニューを開く

操作させたいNotionページまたはデータベースの右上にある「…(設定)」メニューを開く。

コネクトをクリック

メニュー最下部にある「コネクト(接続)」をクリックする。

インテグレーションを追加

先ほど作成したインテグレーション(Antigravity-Notion)を選択して追加する。

これで、指定したページとその配下にある子ページ・データベースだけがAIから安全に読み書き可能になる。

コネクトを設定していないプライベートな個人ページにはAIから一切アクセスできないため、安心して連携を活用できる。

Antigravity側の設定と動作テスト

Notion側の準備が整ったら、AntigravityのMCP設定にAPIキーを登録して動作を確認する。

MCP設定ファイルにキーを登録する

Antigravityの設定ファイル(または設定画面)を開き、notion-mcp-server の設定ブロックを追加する。

環境変数(NOTION_TOKEN または NOTION_API_KEY)として、先ほど取得した内部インテグレーションシークレットを指定して保存する。

保存後、Antigravityを再読み込みし、ツール一覧にNotion関連のツール(API-post-search、API-retrieve-page-markdown 等)が正常に認識されているか確認しよう。

自然言語で接続テストを実行する

設定が完了したら、Antigravityのチャット画面で簡単な指示を出してテストしてみる。

「Notionから『〇〇』というページを検索して、見出し一覧を教えて」

このように指示し、AIがNotionから正しいページを検索して内容を返答してくれれば連携は無事に完了だ。

生活とブログ運営が変わる6つの実践活用例

連携が完了すると、具体的にどのような作業をAIに任せられるようになるのか。

自分が日々の大学生活やブログ運営で実際に恩恵を感じた6つの活用例を紹介する。

500冊読書記録のフォーマット一括統一

自分はNotionで500冊以上の読書記録をデータベースで管理しているが、長年記録を続けていると途中で記録フォーマットが変わってしまう問題があった。

1冊ずつ手作業で直すのは確実に気が狂う作業だが、MCP経由でAIに指示を出したところ、全データを読み取って最新のフォーマットへと一括統一してくれた。

APIの通信を挟むため処理自体には数時間ほどかかるが、自分はPCを放置しておくだけで完了するため非常に快適だ。

やりたいことリスト100からの大規模記事生成

Notionで管理していた「大学生活のやりたいことリスト100」の進捗メモをもとに、ブログの特大記事を生成する際にも威力を発揮した。

プロパティのチェック状況だけでなく、ページ内に殴り書きしていたメモまでAIが多面的に読み取り、約25,000文字に及ぶ記事本文とHTML装飾を一気に仕上げてくれた。

大学生活のやりたいこと100個。専用ページをブログに作った話

書きためた過去の日記データの横断分析

数ヶ月にわたってNotionに書きためていた日記データも、AIに直接読み込ませることで週ごとの傾向や思考の変化を綺麗に整理できた。

【脱・書きっぱなし】Notion日記で「振り返り」を始めたら、ようやく日記活用の第一歩を踏み出せた話

ブログ記事執筆とWordPressブロックの自動生成

Notionデータベース上の記事構成案や下書きを取得し、付与された校正コメントを取り入れながら本文を執筆するフローも完全に自動化した。

さらに、WordPressのSANGOテーマに完全準拠したGutenbergブロックHTMLコード形式で出力させることで、執筆から下書き投稿までの所要時間を劇的に圧縮できている。

大学講義ノートのテンプレート自動整理

大学の講義ノート作成でも連携を活用している。

所定のまとめフォーマットをAIに一度理解させておけば、講義中のメモを放り込むだけで見やすいノートを自動で組み立ててくれる。

公認会計士試験の学習進捗トラッキング

現在目指している公認会計士試験の学習計画データベースでも連携を活用している。

学習の進捗状況をAIと共有することで、どの科目が順調でどこに遅れが出ているかを客観的に把握できる。

Notion初心者が最初に読むべき導入ガイド:インストールから最初の1ページ作成まで

実際に使い込んで分かったデメリットと限界

MCP連携は非常に強力だが、決して万能の魔法ではない。

実際に毎日使い込む中で見えてきたリアルなデメリットや限界についても正直に共有しておきたい。

指示から完了までに時間がかかる

AIエージェントに指示を出してから最終的な結果が得られるまでに、数分から数時間の待ち時間が発生することがある。

これは主に以下の3つの要因が重なるためだ。

  • 推論とツール呼び出しのループ: AIは「検索 ➔ 取得 ➔ 内容の精査 ➔ 更新」というステップを1回ずつ順番に思考しながら実行する。
  • Notion APIのレートリミット: Notionのサーバー負荷を防ぐため、API通信には秒間平均3回前後の制限がある。
  • 大量データの送受信オーバーヘッド: ページ数が多いほど、ネットワーク通信とLLMのコンテキスト処理に物理的な時間を要する。

そのため、MCPは「待ち時間中に人間が別の作業をしたり、PCを放置して寝たりできるタスク」に使うのが基本戦略となる。

MCP処理で待ち時間が発生する3つの要因

大量データ処理によるトークン消費

Notionの大きなページや数百行のデータベースを一括で読み込ませると、一度のやり取りで膨大なトークンを消費してしまう。

AIの利用枠上限にすぐ達してしまわないよう、一度に渡すデータを小分けにしたり、必要なプロパティだけを絞り込んで取得させる工夫が欠かせない。

プロンプト・オーバーヘッドとマズローのハンマー

何でもAIにやらせようとすると、かえって効率を落としてしまう現象がある。

「金槌を持つ人には、すべての問題が釘に見える」というマズローの法則があるが、MCPの便利さを知ると、あらゆる作業をAIにやらせたくなる(実際、自分も調子に乗ってハンマーを振り回し、無駄に時間を溶かした経験がある)。

しかし、指示プロンプトを丁寧に書き、AIの思考とAPIの通信を待つ時間(プロンプト・オーバーヘッド)を考えると、簡単な作業なら手動でやった方が圧倒的に早い。

例えば「1箇所の誤字を直す」「ページの末尾に1行メモを足す」といった単純な作業なら、AIを立ち上げるより自分でNotionを開いて直した方が5秒で終わる。

  • MCPが向いている作業: 数十〜数百ページの一括更新、長文ログの横断分析、複雑な構造化
  • 人力(手動)が早い作業: 単発の誤字脱字修正、数行のメモ書き、直感的なレイアウト調整

「手動で5秒で終わる作業に、わざわざAIという大掛かりな重機を持ち出さない」という見極めこそが、最大の活用テクニックだ。

MCP(AI自動化)向き vs 手動(人力)が早い作業

まとめ:蓄積したデータこそがAIの最高の武器になる

NotionとAntigravityのMCP連携は、単なる作業の時短ツールにとどまらず、自分の知識ベースをAIと一体化させる強力な土台となる。

そして、この連携が真の威力を発揮するのは、これまでNotionに真面目に日々のメモや記録を書き溜めてきた人だ。

過去の自分が残した膨大なログがあるからこそ、AIはそれを縦横無尽に読み解き、強力な知恵として返してくれる。

まずは実験用のメモページを1つコネクトして、AIが自分のNotionを自律的に操作する感動を味わってみてはいかがだろうか。

]]>
https://freestylestudent.com/notion-antigravity-mcp/feed/0
Notion Web Clipper活用術|気になるWeb記事を1秒でストックするhttps://freestylestudent.com/notion-web-clipper/https://freestylestudent.com/notion-web-clipper/#respondSat, 29 Aug 2026 01:00:00 +0000https://freestylestudent.com/?p=433

前回の記事では、Notionの基本機能である「データベース」の作り方を解説した。 今回はその実践的な活用例として、Web上の気になる記事を1クリックで保存できる公式ツール「Notion Web Clipper」を紹介する ... ]]>

前回の記事では、Notionの基本機能である「データベース」の作り方を解説した。

今回はその実践的な活用例として、Web上の気になる記事を1クリックで保存できる公式ツール「Notion Web Clipper」を紹介する。

ネットサーフィンや調べ物をしている最中に、「あとでじっくり読みたい」と思う良質な記事に出会うことは多いはずだ。

だが、ブラウザのブックマークに放り込んでも存在を忘れ、タブを開きっぱなしにしてPCのメモリを圧迫してしまう(大学生あるあるだと思う)。

以前の自分はまさにこの状態で、せっかく見つけた有益な情報を行方不明にしていた。

公式のWebクリッパーを使えば、そうした情報収集のストレスをすっきり解消できる。

記事をデータベースに集約する利点

本文ごと手元に残せる強み

ブラウザのブックマーク機能と違い、Notionに記事を保存する最大のメリットは「記事の本文ごと手元に残せる」点にある。

単なるURLリンクの保存ではなく、Webページの内容をNotionブロックとして取り込んでくれる。

元のWebページが削除されたり非公開になったりしても、Notion内にテキストが残っていればいつでも読み返せる。

保存した記事の上に自分のメモや考察を書き加えることも可能だ。

注意点

取り込めるのはテキストや標準的な画像が中心であり、Webサイト独自の複雑な装飾やレイアウトまでは完全に再現されない点には注意したい。

公式ツールならではの安心感

Notion Web ClipperはNotion公式が提供している機能のため、余計な初期設定がなく最もシンプルで安心して利用できる。

より高度なプロパティ連携を行いたい場合はサードパーティ製の拡張機能もあるが、まずは公式のものから触ってみるのが手軽でおすすめだ。

PCブラウザから拡張機能で保存する

Chrome拡張の導入と初期設定

PCでWeb記事をストックするには、ブラウザ拡張機能の「Notion Web Clipper」を利用する。

Chromeウェブストアを開き、「Notion Web Clipper」を検索して「Chromeに追加」をクリックする。

拡張機能を追加する際、ブラウザから「アクセスしたすべてのウェブサイト上のデータの読み取りと変更」といった権限の確認が表示される。

これはWebページ上のテキストや画像を読み取ってNotionに転送するために必要な標準の権限だ。

初回のみNotionアカウントへのログインと連携許可を済ませ、ツールバーにピン留めしておくと使いやすい。

Notion Web Clipper Chromeウェブストア拡張機能追加画面

保存先を選んで1秒でストック

保存したいWebページを開いた状態で、ツールバーのNotionアイコンをクリックする。

ポップアップ画面が表示されるので、保存先のデータベースを選択し、「ページを保存」を押す。

これだけで、記事のタイトル・URL・アイキャッチ画像・本文が自動的にNotionへ転送される。

Notion Web Clipper 保存ポップアップ画面

動画や非対応ページへの注意点

Notion Web Clipperはテキスト主体のブログやニュース記事の保存には非常に強い。

一方で、YouTube動画などのリッチメディアや一部の特殊な構造のページでは、本文が上手く取り込めないことがある。

YouTube動画をまとめたい場合は、クリッパーを使わずにNotionのページへ直接URLを貼り付け、「動画を埋め込む」ブロックとして配置する方が見やすくて適している。

拡張機能のセキュリティ管理

今回紹介しているNotion Web ClipperはNotion公式が提供しているツールなので安心して利用できる。

ただし、ブラウザ拡張機能全般の話として、出所の怪しいツールによる不正アクセスや情報漏洩といったリスクも存在する。

便利だからといって、開発元が不明な拡張機能をむやみに追加するのは避けた方が賢明だ。

保存用データベースのシンプルな設計

専用の置き場所を用意する

Webクリッパーで保存した記事を受け止めるために、「Webクリップ専用のデータベース」を1つ作っておく。

保存時に「どのページに入れようか」と迷うのを防ぐため、とりあえず放り込む専用の置き場所を用意しておくのがコツだ。

チェックボックスで進捗を管理

新規ページを作成し、データベースを設置する。

記事を保存すると、WebページのURLはNotion側で自動的にプロパティに登録される。

そのため、自分で細かく項目を作り込む必要は全くない(面倒なら初期状態のままで十分だ)。

唯一追加しておくと便利なのが「チェックボックス」プロパティである。

保存した直後は未チェックにしておき、読み終わったらチェックを入れるだけで、シンプルな「あとで読むリスト」として機能する。

気になった記事は遠慮なく放り込む

整理を頑張りすぎない活用法

Webクリッパーを使い始めると、「未読の記事がどんどん溜まってしまうのではないか」と不安になるかもしれない。

だが、Notionはデータベースなので後からキーワードで全文検索ができる。

自分の場合も、技術系の記事や気になったニュースを見つけたら、読む読まないにかかわらずとりあえず保存している。

無理に整理したり分類したりする必要はなく、自分専用の知識の倉庫として気楽に記事をストックしておけばいいと思う。

]]>
https://freestylestudent.com/notion-web-clipper/feed/0
Notionデータベース超入門|テーブルとボードビューで作るタスク管理https://freestylestudent.com/notion-database-task-management/https://freestylestudent.com/notion-database-task-management/#respondFri, 28 Aug 2026 01:00:00 +0000https://freestylestudent.com/?p=470

前回の記事では、Notionの導入から最初の1ページを作成する基本操作について解説した。 アプリの導入直後は、真っ白なページに日々の殴り書きメモを残すだけでも十分に使いやすさを実感できるはずだ。 だが、Notionを使い ... ]]>

前回の記事では、Notionの導入から最初の1ページを作成する基本操作について解説した。

アプリの導入直後は、真っ白なページに日々の殴り書きメモを残すだけでも十分に使いやすさを実感できるはずだ。

だが、Notionを使い続けてメモの量が増えてくると、多くの人が同じ壁に直面する。

ページの中に子ページを作りすぎて階層が深くなり、どこに何の情報を置いたのか分からなくなる現象だ(Notion初心者あるあるだと思う)。

以前の自分もまさにこの状態で、メモを探すためだけに無駄なクリックを繰り返していた。

そんな散らかりがちな情報を一気に整理してくれるのが、Notion最大の強みである「データベース」機能だ。

今回は、初心者でも最も扱いやすい「タスク管理」を題材に、データベースの基本構造と便利なビューの使い分けを解説する。

ページが増えて散らかる問題の解決策

Notionのデータベースは、一見するとExcelやGoogleスプレッドシートのような単なる表に見える。

だが、実際に触ってみると表計算ソフトとは根本的に仕組みが異なっていることがよくわかる。

単なる表計算との決定的な違い

Excelはマス目(セル)の中に文字や計算式を埋め込んでいくツールだ。

一方で、Notionのデータベースは「ページの集合体」として作られている。

表に並んでいる1行1行のデータすべてが、クリックすると開く独立した1枚のノート(ページ)になっている。

これが一般的な表計算ソフトとは決定的に違う、Notionならではの最大の特徴だ。

1行がまるごと1枚のノートになる

例えば「経済学の期末レポート」というタスクを1行追加したとする。

表の上では「未着手」という状態や「締切日」といった最低限の項目だけを表示しておく。

そしてその行を開けば、レポートの構成案や参考にした論文のリンク、執筆用のメモを自由に書き込める。

タスクの進捗管理と中身のメモ書きが1箇所で完結するため、別のノートアプリを開く手間が完全にゼロになる。

これは学生のレポート課題に限った話ではない。

社会人の業務タスクであれば打ち合わせの議事録を紐づけられるし、資格勉強であれば解き直す過去問の論点をメモしておける。

自分が運営しているこのブログの記事管理も、ネタ出しから下書き、公開日の管理まで、すべてNotionのデータベースを土台にして動かしている。

インラインデータベースの作成手順

Notionのデータベースには、通常のメモと同じページ内に表を埋め込む「インライン」と、ページ全体を表にする「フルページ」の2種類がある。

最初はメモや解説テキストと一緒に並べて配置できる「インラインデータベース」から始めるのが手軽でおすすめだ。

空白ページに表を呼び出す

まずは新規ページを作成し、タイトルを「タスク管理」と入力する。

本文の行頭で「/database」と打ち込み、メニューから「データベース:インライン」を選択する。

これだけで、ページ内に3行ほどのシンプルなテーブル(表)の枠組みが瞬時に呼び出される。

ただし、この時点ではあくまで入れ物ができた状態であり、データが自動生成されたわけではない(最初は空のテンプレート行だ)。

ここから自分の手でタスクを書き込んでいくことで、1行1行が独立したノートとして機能し始める。

Notion インラインデータベースの呼び出し画面

必要な項目をプロパティで追加する

データベースの列(項目)のことを、Notionでは「プロパティ」と呼ぶ。

初期状態の表に、タスク管理に欠かせない2つのプロパティを追加してみよう。

表の右上にある「+」ボタンを押し、「ステータス」を選択する。

これで「未着手」「進行中」「完了」といった進捗状況を管理できるようになる。

続いてもう一度「+」ボタンを押し、「日付」を選んで名前を「締切日」に変更する。

これで「タスク名」「ステータス」「締切日」が揃った、基本のタスク管理表が完成する。

Notion プロパティ設定とテーブル画面

ボードビューへの切り替えと活用

Notionデータベースのもう一つの大きな強みが、同じデータを好みの「ビュー(表示形式)」に一瞬で切り替えられる点だ。

ビューとは、保存されている中身のデータはそのままに、見た目だけをテーブル(表)やボード(かんばん形式)、カレンダーなどに切り替える機能を指す。

見た目を一瞬でボードに変える

データベースの左上にある「+ ビューを追加」をクリックする。

表示形式の一覧から、公式の正式名称である「ボード」を選択して完了を押す。

すると、先ほど設定した「ステータス」ごとに縦列が分かれ、付箋を並べたようなカード形式に早変わりする。

タスクが進んだらカードをドラッグして右隣の列へ動かすだけで、直感的に進捗を更新できる。

キーボードで文字を打ち直す必要がなく、スマホからでも指先ひとつで操作できるのがとても心地よい。

Notion ボードビューへの切り替えとタスクカード移動

フィルターで今やるべきことだけに絞る

タスクが増えてくると、終わったタスクが画面に残って邪魔に感じることがある。

そんなときは「フィルター」機能を使って画面をすっきり整理する。

ボード右上の「フィルター」をクリックし、「ステータス」から「完了以外」を指定する。

これだけで終わったタスクが自動的に非表示になり、今やるべき作業だけに集中できる作業場が整う。

もちろんデータ自体が消えたわけではないので、フィルターを解除すればいつでも過去の完了タスクを振り返ることができる。

Notion フィルター設定による未完了タスクの絞り込み

まずは3つの項目から小さく始めよう

「データベース」と聞くと小難しく感じてしまうかもしれないが、最初から完璧な仕組みを作る必要はまったくない。

まずは「タスク名」「ステータス」「締切日」の3項目だけで、今日のToDoを数個動かしてみるのがおすすめだ。

小さく動かしながら、必要に応じて項目を足していけば自分にぴったりの管理表に育っていく。

次回は、このデータベースの仕組みをさらに応用し、Web上の気になる記事を1クリックで手元にストックできる「Notion Web Clipper」の活用術を紹介する予定だ。

こちらも同じデータベースの仕組みが土台になっているので、まずは今回のタスク管理表でデータベースの感覚を掴んでみてほしい。

]]>
https://freestylestudent.com/notion-database-task-management/feed/0
Notion初心者が最初に読むべき導入ガイド|インストールから最初の1ページ作成までhttps://freestylestudent.com/notion-guide-beginner/https://freestylestudent.com/notion-guide-beginner/#respondThu, 27 Aug 2026 01:00:00 +0000https://freestylestudent.com/?p=430

Notionをこれから始める方向けに、アカウント作成・インストールから最初の1ページの作成、基本ブロックの使い方までを丁寧に解説した導入ガイドです。]]>

Notionを始めようと思っても、多機能すぎて何から手を付ければいいかわからない人は多いと思う。

自分も使い始めた当時は「すごいアプリらしいけれど、一体何を書けばいいのだろう」と戸惑っていた。

結論から言うと、最初は難しく考えず、たった1枚の「何でも書くメモ帳」として気楽に使い始めればいい。

まずはデスクトップアプリを導入して、最初の1ページを動かしてみるところから始めてみよう。

NotionをPCアプリで導入すべき理由

Notionはブラウザ上でも問題なく動くが、自分は断然デスクトップアプリの利用をおすすめしている。

ブラウザのタブの中に埋もれてしまわず、ショートカット一発で呼び出せる専用の作業場になるからだ。

散らばる情報を一元化できる心地よさ

大学の課題、公認会計士試験の学習メモ、読んだ本の記録、日々のToDo。

以前の自分はこれらを別々のアプリやノートに書いていたため、どこに何があるか分からなくなり、紙のプリントを失くすこともしょっちゅうだった。

探すだけで無駄な時間を使ってしまう状態をなんとかしたくて、Notionを使い始めた。

最初からすべてを一気に移行したわけではなく、日々の小さなメモから少しずつ移行を進めていった。

気づけばすべての情報が1箇所にまとまり、探す手間がゼロになっていた(あくまで個人の感覚だが)。

Notionの初期設定を行う3つの手順

ここからは、実際にNotionを使い始めるための具体的な導入手順を解説する。

個人利用であれば無料プランで十分すぎるほど使えるので、安心して試してみてほしい。

作業自体は3分ほどで完了する。

STEP1 アカウントを無料で作成する

まずは Notion 公式サイト にアクセスする。

画面中央にある「Notionを無料で入手」ボタンをクリックする。

Googleアカウントを持っていれば、そのまま連携ログインするのが一番手軽でおすすめだ。

用途の選択画面が表示されたら、「個人で利用」を選択して次に進む。

Notion アカウント作成

STEP2 デスクトップアプリを導入する

アカウントが作成できたら、続いてデスクトップアプリをダウンロードする。

デスクトップ版Notionのダウンロードページ を開く。

WindowsまたはMacの環境に合わせてインストーラーを取得し、画面の指示通りにインストールを実行する。

インストール完了後にアプリを起動し、先ほど作成したアカウントでログインすれば準備完了だ。

スマートフォンでも確認したい場合は、モバイル版Notion もあわせて入れておくと便利だと思う。

Notion デスクトップアプリ

STEP3 言語設定を日本語に変更する

初期状態が英語になっている場合は、日本語表記に切り替えておく。

左サイドバーのメニュー上部にある「Settings & Members」をクリックする。

「Language & region」の項目を開き、言語設定を「日本語」に変更する。

これでメニューや各種設定が日本語化され、格段に操作しやすくなる。

Notion 日本語設定

最初の1ページを作って基本操作を覚える

アプリの準備が整ったら、早速自分専用の新しいページを1枚作ってみよう。

左サイドバーにある「ページを追加」をクリックすると、真っ白な新規ページが立ち上がる。

タイトルに「今日のメモ」などと入力し、以下の基本操作を試してみてほしい。

スラッシュ入力と記法を使いこなす

Notionでは、文章やリストなどの要素をすべて「ブロック」という単位で管理する。

行頭で半角スラッシュ( / )を入力すると、呼び出せるブロックの一覧メニューが表示される。

  • /h2 と入力してEnter:大見出しが作成できる
  • /todo と入力してEnter:チェックボックス付きのTo-Doリストができる
  • /bullet と入力してEnter:箇条書きリストが作れる

また、Notionは一般的なマークダウン記法にも完全対応している。

行頭に # と半角スペースを打てば見出しになり、- とスペースを打てば箇条書きリストになる。

普段からマークダウンを書き慣れている人なら、キーボードから手を離さずに爆速で文章を組み立てられる。

Notion スラッシュ入力

マーメイド記法で図解やフローを描く

Notionのコードブロックを使えば、テキストだけで綺麗な図やフローチャートを描ける「マーメイド記法(Mermaid)」も利用できる。

/code と入力してコードブロックを呼び出し、言語設定で「Mermaid」を選択する。

例えば、以下のようなテキストを打ち込むだけで、自動的にお洒落なフローチャート図に変換される。

graph TD A[メモを書く] --> B{重要かどうか} B -->|Yes| C[ToDoリストに移動] B -->|No| D[アーカイブ]

作図ツールをわざわざ開いて画像を用意しなくても、ページ内で手軽に思考の整理や図解ができるのがとても便利だ。

Notion Mermaid図解

ドラッグ操作でブロックを並び替える

作成したブロックは、左端に表示される「6つの点(グリップアイコン)」を掴むことで自由に移動できる。

ブロックを掴んだまま別のブロックの右端まで持っていくと、青い縦線が表示されて2列(2カラム)に分割できる。

Notion ドラッグ操作

左側に「今日のやること」、右側に「思いついたメモ」といったレイアウトも直感的に作れる。

レイアウトが崩れても簡単に戻せるので、怖がらずに色々動かしてみてほしい。

まずは1枚のメモ帳として気楽に使おう

Notionを使い始めると、ネット上の綺麗なテンプレートを見て「自分も最初から完璧なシステムを作らなければ」と気負ってしまいがちだ。

しかし、最初から複雑なデータベースを作ろうとすると十中八九挫折する。

まずは日々の殴り書きメモや、簡単なTo-Doリストとして気楽に触ってみるのが長く続けるコツだと思う。

少し操作に慣れてきて、大学の講義ノートや資料の整理にも活用したくなったら、ぜひ以下の記事も参考にしてほしい。

自分が実際に運用している講義ノートのまとめ方や、フォルダ階層の設計について詳しく解説している。

大学講義をNotionにまとめたいと思った人が読む記事

焦らず少しずつ、自分に合った使い方を育てていけばいいと思う。

]]>
https://freestylestudent.com/notion-guide-beginner/feed/0
Antigravity 2.0の始め方|AIエージェントで大学生活と知的生産を自動化する導入ガイドhttps://freestylestudent.com/how-to-start-antigravity/https://freestylestudent.com/how-to-start-antigravity/#respondWed, 26 Aug 2026 13:00:00 +0000https://freestylestudent.com/?p=499

Googleの自律型AIエージェント「Antigravity 2.0」を大学生・一般ユーザーが迷わず使いこなすための導入ガイド。初期設定から画面操作、大学生活の作業自動化までを徹底解説。]]>

ChatGPTに向かって毎日同じように指示を打ち込み、返ってきたテキストをコピーして貼り直す。

正直に言って、そんな退屈なコピペ作業を繰り返す毎日に、自分は強い虚無感を抱いていた。

手作業でファイルを切り替えたり、エラーが出るたびにログをチャット欄に貼り直す作業は、控えめに言っても気が狂いそうになる。

そんな手作業の限界を根本から打ち破ってくれたのが、Googleが開発したAIエージェント「Antigravity(アンチグラビティ)」だ。

Antigravityは、単に質問に答えてくれるチャット相手ではない。

自分のPC上でファイルを直接読み書きし、エラーが起きれば自ら原因を突き止めて修正する「自律型の相棒」である。

今回は、一般の大学生やPC作業を効率化したい人に向けて、デスクトップ専用アプリ「Antigravity 2.0」の使い方と活用法を徹底解説する。

Antigravityの種類と自分に合った選び方

Antigravityには、使う人の用途やスキルに合わせて複数の形態(動作環境)が用意されている。

まずはこの違いを整理しておこう。

動作形態の違いを一言で整理

  • Antigravity 2.0(デスクトップ専用アプリ)
    • チャット画面から自然言語で指示を出し、ファイル操作や情報収集、定期タスクを一括して実行できる。
    • プログラミング知識が不要で、一般ユーザーや大学生に最もおすすめ。
  • Antigravity IDE(VS Codeベース開発環境)
    • エディタ上でコードの自動補完や行単位の修正を行える、日常的に開発を行うエンジニア向け。
  • Antigravity CLI(ターミナル環境)
    • 黒い画面(CUI)上で agy コマンドを打ち込み、素早く作業したい上級者向け。
  • Antigravity SDK(開発者向けライブラリ)
    • PythonやNode.jsなどのプログラムからエージェントを自律制御したい人向け。

初心者・大学生には「Antigravity 2.0」一択

Antigravityの主な種類と選び方

プログラミングを本業としない一般の大学生や初心者が導入する場合、選ぶべきは「Antigravity 2.0(デスクトップアプリ)」一択だ。

難しい開発環境を構築する必要がなく、普段使っているLINEやチャットツールと同じ感覚で、PC上のファイル操作や調査作業を丸投げできるからだ。

本記事では、この「Antigravity 2.0」を使った始め方と活用法に完全特化して解説を進める。

Antigravity 2.0の導入と初期セットアップ

Antigravity 2.0のセットアップは非常にシンプルで、数分で完了する。

迷わず進められるよう、3つのステップで手順をまとめた。

アプリのインストール

まずは公式サイトから「Antigravity 2.0」のインストーラーをダウンロードする。ダウンロードしたファイルを実行し、画面の案内に沿ってインストールを完了させよう。

Googleアカウント連携とモデル選択

アプリを起動してGoogleアカウントでログインを済ませる。日常の調べ物やメモ整理には動作が軽快な「Gemini Flash」、長文レポートの構成や複雑な思考を任せる際は推論力の高い「Gemini Pro」を選ぶのが合理的だ。

安全ガードレールと実行権限の設定

Settings(設定)を開き、コマンド前に確認を挟む「request-review」を選択し、作業用フォルダ外へのアクセスを制限しておくことで、誤操作やファイル破壊を確実に防げる。

Antigravity 2.0の画面構成と基本操作

Antigravity 2.0は一見すると通常のチャットAIに似ているが、PC上のファイルを直接操作するための専用機能が多数組み込まれている。

基本的な画面構成と操作の流れを整理した。

Antigravity 2.0 の操作フロー

左サイドバーで作業環境を管理する

  • New Conversation: 新しい作業セッション(会話)を開始する。
  • Projects: 作業対象となるフォルダ(プロジェクト)を切り替える。
  • Scheduled Tasks: 定期実行タスク(毎朝のニュース収集など)を設定・確認する。
  • Settings: モデル選択や実行権限などの各種設定を行う。

2. チャット欄で指示を出す(@メンションとスラッシュコマンド)

メインのチャット画面でやりたいことを入力するだけで、AIが自律的に作業を始めてくれる。

さらに以下の2つの機能を組み合わせると、指示の精度が格段に上がる。

  • @メンション: 入力欄に「@」を打ち込むと、参照させたいファイルや過去の会話ログ、MCPツールをピンポイントで指定できる(例: 「@講義メモ を要約して」)。
  • スラッシュコマンド: 入力欄に「/」を打ち込むと利用可能なコマンド一覧がポップアップ表示され、Tabキーで素早く選択できる。

主なスラッシュコマンドには、目標達成まで粘り強く作業をやり遂げさせる「/goal」や、計画前にAIが逆質問をして要望を擦り合わせてくれる「/grill-me」、ブラウザ調査を行う「/browser」、登録したスキルを直接呼び出す「/スキル名」などがある。

3. プランニングモード(Planning Mode)で安全に作業を進める

複雑な作業を依頼した際、Antigravity 2.0はいきなり勝手にファイルを書き換えたりしない(設定で承認モードにしている場合)。

まずは作業手順をまとめた「実装計画」を作成し、人間に提示してくれる。

人間はその計画を確認し、問題がなければ承認ボタンを押すだけで作業がスタートする。もし修正点があれば、チャットで「〇〇は省いて」と返せば計画を練り直してくれる。

作業を自動化・効率化する4つのカスタマイズ機能

Antigravity 2.0が真の威力を発揮するのは、自分の作業スタイルに合わせて環境をカスタマイズした瞬間だ。

知っておくべき4つの仕組みを、性質ごとに分けて解説する。

Antigravity を強化する4つの拡張機能

行動ルールを固定する(GEMINI.md)

作業フォルダの直下に「GEMINI.md」というメモファイルを置いておくだけで、AIの思考や行動ルールを常に強制できる。

ここには「レポートの文章はだ・である調で書く」「水平線は絶対に使わない」「重要ファイルは編集前に確認する」といった全体的な方針や禁止事項を簡潔にまとめておく。

ただし注意点として、GEMINI.mdは毎回の会話ターンでAIの記憶に常に読み込まれる。長大なマニュアルを詰め込みすぎると記憶容量を圧迫し思考精度の低下を招くため、全タスク共通の必須ルールだけに絞って簡潔に記述するのが鉄則だ。

専門手順を追加する(Skills)

複雑な定型業務の手順は、「skills/スキル名/SKILL.md」というフォルダを作って専門手順書として保存しておく。

フォルダ内に手順をまとめておくだけで自動認識され、チャットで「/スキル名」と打つか自然言語で依頼した時だけオンデマンドで読み込まれる。使わない時はAIの記憶を圧迫しないため、複雑なワークフローは何個でも追加可能だ。

外部ツールを直結する(MCP連携)

NotionやWordPress、GitHubなどの外部サービスとAIを直接つなぐオープン規格だ。

Notion上の講義ノートをAIに直接読み込ませたり、作成したブログ記事をWordPressに下書きとして自動保存させたりできる。面倒なコピペ作業が完全にゼロになる。

調査を並列化する(Subagents)

時間のかかる重たいリサーチなどを、裏で別のAIエージェントに任せられる機能だ。

Antigravityには標準で調査用サブエージェント(research)が備わっており、メイン画面をブロックすることなくバックグラウンドで文献集めを進めてくれる。

大学生活でのリアルな活用例

自分自身が日々の大学生活において、Antigravity 2.0に助けられている具体例を3つ紹介する。

先行研究集め・文献整理を丸投げ

論文やレポートの準備で最も時間がかかるのが、関連する先行研究の収集だ。

Antigravity 2.0にテーマを伝えると、Web上の論文や文献を横断的にリサーチし、要約と論点を整理したリストを作成してくれる。

欲しいWebツールを数分で作る

「こんなWebツールがあったら便利だな」と思いついたアイデアを、数分で動く形にしてくれる。

必要な画面やプログラムをAIが自律的に作成し、ブラウザ上で実際に動かして確認できるところまで仕上げてくれる。

ブログ執筆のワークフロー自動化

まさにこの記事の作成でも使っている仕組みだ。

Notionに書き留めたアイデアをもとに本文を執筆し、オリジナルの図解画像を生成してWordPressに下書き保存するまでをAIが代行してくれる。

安全に使いこなすための注意点とコツ

AIエージェントにPC操作を任せるにあたり、初心者が知っておくべき実践的な防衛策を整理した。

  • 作業用フォルダの限定: デスクトップやPC全体ではなく、プロジェクト専用のフォルダを指定して開く。
  • 計画段階での軌道修正(/grill-meの活用): 実装計画を確認し、曖昧な点は事前に逆質問で擦り合わせる。
  • 重要ファイルの事前バックアップ: 大切なオリジナルファイルは別名で保存しておく。
  • 会話の定期リセット: タスクごとに「New Conversation」を立ち上げ、AIの注意散漫と精度低下を防ぐ。

おわりに:AIを「質問相手」から「頼もしい相棒」へ

ChatGPTが登場したとき、私たちは「AIにどんな質問を投げるか」を考えた。

しかしAntigravity 2.0の登場によって、AIは質問に答えるだけの存在から、PC上で実際に手を動かしてくれる「頼もしい相棒」へと進化した。

面倒なコピペや単純作業をAIに任せることで、人間は本当に時間を使うべき勉強や読書、自由な創作に没頭できる。

まずは身近な調べ物やメモ整理から、Antigravity 2.0に作業を任せてみてはいかがだろうか。

]]>
https://freestylestudent.com/how-to-start-antigravity/feed/0