HomeIT・AIWebマーケティング挑戦記
#AI#Web#ブログ

会計士がWebサイトを0から作ってみました!

noteに限界を感じた私は、自分でゼロからWebサイトを作ることを決めました。Web制作は完全に素人ですが、AIの力を借りながらどんどん進化させていきます!

作成日2026.05.1310 min
著者写真

IT好き会計士(仮)

note

このサイトは、IT好きの会計士(仮)が0から制作し、運営しているブログです。自身の考えや挑戦を記録する実験場として運営していきます。以下のようなものに関心のあるファイナンス人材(会計士/税理士等)と繋がりたいです!お気軽にご連絡ください!なお、公認会計士本登録は済んでおりません。ご留意ください。

早稲田→京大公認会計士協会準会員都内勤務NISA/iDeCo受験失敗GAS/VBATypeScript/Next.jsClaude CodeNotionMLBボードゲーム

ウォールドガーデンとしてのnote

私はこれまで、noteで情報発信を続けてきました。記事を書いて、反応を確かめて、また書く——ところがその繰り返しの中で、少しずつ「あれ?」という違和感が膨らんでいきました。

私は2つの違和感を感じていました。それは、「カスタマイズの限界」と「データ分析の限界」です。

違和感①:カスタマイズの限界

1つ目の違和感は、カスタマイズの限界です。
実は私、他のブログやWebサイトを見て「こういう見せ方、いいな」と思ったことが、何度もありました。でも、noteを使っている以上、どれだけ工夫してもnoteが許す範囲の外には出られません。具体的には以下のような点に違和感がありました。

  • サイドバーが作れない(読者を関連記事へ誘導する導線が設計できない)
  • 著者プロフィールに文字制限がある(「どんな人が書いているのか」を十分に伝えられない)

「もっと伝えたい」という気持ちはあるのに、構造的にそれができない。そういうもどかしさが、じわじわと積み重なっていきました。

ところでみなさんは、「ウォールドガーデン(Walled Garden)」という言葉を知っていますか?

直訳すれば「壁に囲まれた庭」。GAFAMのような巨大プラットフォームに代表される設計思想で、企業が自分たちのルールの中でのみ自由を許し、その外への拡張を意図的に制限している状態を指します。

noteも、そのような側面を持っています。誰でも簡単に記事を投稿でき、自身のブランディングにも使用できる。なんならマネタイズもできる。素晴らしいプラットフォームであることは言うまでもありません。ただし(少なくとも無料の範囲では)、デザイン・機能・データに関しては、noteが定めた仕様の中でしか扱えません。

違和感②:データ分析の限界

2つ目の違和感は、データ分析の限界に関してです。

私はかつて、人材業界の企業にてマーケティングデータの分析に携わった経験があります(とはいえ長期インターンとしての限定的な関与でしたが)。そのような経験もあり、過去のデータから示唆を読み取り、次のアクションに活かしていく——その流れが染み付いていたんですね。それをしないとちょっと気持ち悪いというか。歯磨きせずに寝るような感覚でしょうか。
公認会計士の試験勉強でも、学習データを管理・分析することに割と熱中していました。もしかしたらそのせいで一度落ちてしまったのかもしれません笑。

そのような性分ですので、「データを見て、課題を特定して、改善する」。この流れを、自身の記事やブログにも適用したいと思うのは、私にとってごく自然なことでした。

でも、noteではそれができません。noteで無料に確認できるのは「閲覧数」と「スキの数」だけです。
実際に私のnoteのダッシュボードを見てみてください。

noteのダッシュボード画像

閲覧数が少ないことは一旦おいておくとして、各記事について確認できるのは、閲覧数・コメント数・スキの数——この3つだけです。粒度が非常に粗いのが分かるかと思います。「何となく反応があった/なかった」はわかっても、「なぜそうなったのか」に近づく情報がほとんどありません。

少し、この違和感を覚えたきっかけをお話しさせてください。

つい最近、「自分が想定していた反応がなかなか得られない」——そういう状況がありました。「これは絶対に読んでもらえる」と思って書いた記事が、全然伸びない。スキもつかない。かと思えば逆のことも起きる。「まあ、誰も読まないだろうな」と半ば諦めながら出した記事が、なぜかじわじわ読まれていく。スキも来る。

そうなると「え、なんで?」ってなります笑。当然原因が気になりますよね。でも、それを調べる方法がない。どこで読者が離脱したのか、どの部分に反応があったのか——何もわからない。結果、また手探りで次のテーマを決めて、手探りで書いて、手探りで出す。そして、その大半が泣かず飛ばずになる。その繰り返しでした。そのような経験があって、noteに対して違和感を感じるようになりました。

一方、wordpressでサイトを構築したり、自分のサイトを構築したりすれば、次のようなツールが使えます。

ツール何がわかるか
GA4(Google Analytics 4)読者がどこから来て、何を見て、どこで帰ったか
Google Search Consoleどんな検索ワードで読者がたどり着いたか
Microsoft Clarityページのどの部分が読まれたか、クリックされたか(ヒートマップ形式)

私自身これらのツールを使い込んだ経験はまだないので詳しい説明は省きますが、要は「自分のサイトを持てば、読者さんの行動をより詳細に分析でき、読者さんが求めているものを提供できる可能性が高まる」ということです。

今のサイトで分析ができないなら、分析できるサイトを作ればいいじゃない

そのようなnoteへの違和感を経て、私はひとつの結論にたどり着きました。

勉強も兼ねて、自分でゼロから作ってしまえばいい。分析ツールも、リッチな画像埋め込みも、なんなら広告だって差し挟める。デザインとかも全部いちから作ってみたい。全部、自分でコントロールできる場所を持てばいい。

こうして、自作サイトの構築と運用に踏み切りました。

現時点でのWebサイトを公開!

それではさっそく、今回私が作成したWebサイトについてご紹介します。といっても、そのサイトこそ正にこのブログサイトですが。

デザインは完全オリジナルではなく「よくあるブログの良いところを真似た」スタイルです。構造はシンプルな3層になっています。

  • ホームページ:著者プロフィールと記事カテゴリーの一覧
    • カテゴリーページ:テーマ別に分類(さらに「シリーズ」単位に細分化)
      • 個別記事ページ:シリーズを経由して各記事へ遷移

⚠️ Caution!!

現時点の記事は、ほぼ全てがAIが生成した架空のものです。レイアウトや表示の確認に必要な記事数を確保するために作成したものです。内容は私の考えとは異なるものを含んでいる可能性があります。予めご了承ください。なお、順次本物の記事に置き換えていく予定です。

使用した技術・ツールについて

この章では、具体的に私が使用した技術、ツールについて簡単にご紹介します。

使った技術

Webサイトは、TypeScript・React・Next.jsで作りました。聞き慣れない名前が並んでいますが、難しく考える必要はありません。ざっくりプログラミング言語のようなものとして捉えてもらって全く問題ありません。強いて例えるなら、このような感じでしょうか。

  • TypeScript:いわば「食材」。これ単体でもWebサイトは作れます。
  • React / Next.js:いわば「レシピ」。食材の使い方を体系化した手順書で、これを使うことでより早く、おいしく作れます

(厳密には技術的に正確な説明ではありません。わかりやすさを優先しています。悪しからず。)

使ったツール

プログラミング言語ではありませんが、Webサイトを実際に公開するまでに使用したツールもご紹介します。

用途ツール
コードを書く場所(IDE※)Antigravity
コードの保管場所GitHub
デプロイ(公開※)Cloudflare
コード生成・壁打ち相手Claude Code
画像生成Nano Banana 2・ChatGPT Images 2.0

IDE:コードを書くための専用エディタ(WordやGoogleドキュメントのプログラミング版だと思ってください。ドキュメントを作るならWordやGoogleドキュメントを使用しますよね。コードを書くならIDEを利用する、といった塩梅です。)
デプロイ:作ったサイトをインターネット上に公開すること

これをみて、「用語が多くて、何が何やら」と思った方も多いのではないでしょうか。正直に言うと、私も激しく同意です。

実は私も、Webサイト制作に関しては素人同然です。専門知識はAIに教えてもらいながらなんとなく理解しました。コードもほぼAIが書いてくれていますので、言語を完全に理解しているわけでもありません。

それでも、サイトを公開することができました。制作コストも3600円くらいです。今の時代にはAIという強力な武器があります。「作りたい」という意志さえあれば、誰でも達成できます。本当に良い時代になったものです。

少々脱線するのですが、私は大学時代にWebサイト制作に挑戦したことがありました。実はそのとき、「自分には難しい」と途中で諦めてしまいました。コードを書くだけじゃなく、UIUXのデザインや画像制作まで含めると、考えなければならないことがあまりに多くて、、、そのハードルの高さに圧倒されてしまったんです。

それから数年が経って、AIというツールを手に入れた今、ようやくそこに戻ってくることができた。個人レベルのサイトなら、AIと一緒であれば作れる——とても感慨深いです。
すみません、完全に脱線しました。本題に戻りましょう。

今後の方針

ここまで、自作Webサイトを試すことにした背景、実際に作ったもの、そして使用した技術・ツールをご紹介してきました。ここからは、今後に向けてのお話をしていきます。

今後の方針を一言で言えば、「noteとこのブログの併用」です。

このWebサイトは、まだ実験・模索の段階にあります。noteを使用のか、自作のサイトを使用するのかを決めかねているのが正直なところなので、しばらくは同じ内容を両方のプラットフォームで発信していくスタイルを続けようと思っています。その後は、運用コストや読者さんの反応次第で、どちらかに軸足を移していく可能性もあります。

また、このブログ自体の更新や機能追加についても、記事でどんどん紹介していけたらと思っています。このサイトが育っていく過程を、いわば「実況中継」として一緒に楽しんでもらえたら嬉しいです。

今後の課題

また、このサイトには、現時点でいくつかの課題があります。将来的にはこれらは解決すべきであり、インプットと並行しながらどんどんアップデートしていきたいと思います。

課題①:セキュリティ
はっきり言って、私のセキュリティ知識はまだまだ浅いです。インターンをしていたときには業務領域外でしたし、しっかり学んできませんでした。セキュリティは当然リスクが大きい領域ですので、「怖くて実装できていない」機能もたくさんあります(自作のフォームやデータベース接続など)。
しっかりとインプットをし、友達のエンジニアの力も借りながら、安全に機能を拡張していきたいです。

課題②:UI・UXの洗練
PCとスマホそれぞれのレイアウトも、まだまだ発展途上です。デザインの一部は上流部分からAIに任せている箇所もありますし、他サイトを見よう見まねで機能をつぎはぎ的に追加してきたのが正直なところです。ダークモードへの対応などもまだできていません。
その結果、全体として一貫性のあるUIUXが実現できていないという自覚があります。ここも、少しずつ体系的に学びながら改善していきたいと思っています。純粋にUIUXって人間の心理とかを勉強できそうで面白いと思いますし。

課題③:Webマーケティングの実践
SEOやユーザー行動の分析、SNS活用による流入設計も、ゆくゆくは学んでいきたいです。会計士としてのメインチャネルにするつもりは今のところありませんが、純粋に興味があるので挑戦してみたいです(将来的には本業とうまくつなげていけたら面白いと思っていますが、、、)
このブログのドメインを「beyond-cpa」にしているのも、そんな思いを込めてのことです。

おわりに

noteの「壁」にぶつかって、じゃあ自分で作ってしまえと動いてみた。これがこのサイトの始まりです。

とはいえ、このサイトは完成したとは言いがたい状態です。文字の崩れやレイアウトの乱れがどこかに残っているかもしれません。「なんだこのサイト、汚いな」と思った方がいれば、それはまったくその通りなので、気兼ねなく笑っていただければと思います笑。

もし、レイアウトの崩れや表示上のおかしな点に気づかれた方がいれば、ぜひお知らせいただけると大変ありがたいです。読者の方からのフィードバックが、このサイトを育てる一番の原動力になります。

noteという「壁の中の庭」から飛び出して、自分の土地を耕し始めたばかりの話——お読みいただき、ありがとうございました。今後もこちらのサイトの更新情報を載せていきたいと思っていますので、どうぞお楽しみに!

Link copied!