🎉

個人が「メディア帝国」を持つ時代 - Next.jsで作る情報発信プラットフォーム

に公開
Next.js
SEO
TypeScript
Zenn
Qiita
tech

なぜこれを作ったのか

Qiita、ZENN、note、X、GitHub...

気づいたら、自分のコンテンツがあちこちに散らばってた。

「あの記事どこに書いたっけ？」
「過去の記事、誰も見てないよな...」
「結局、自分が何者か伝わってないやん」

この課題、エンジニアなら誰でも持ってると思う。

コンセプト: 分散を統合する

解決策は単純。

全部を1つのサイトに集める。

でも、手動コピペは面倒すぎる。
だから、自動で集約するシステムを作った。

Before:
Qiita → 技術記事
ZENN → 深掘り記事  
note → エッセイ
X → つぶやき
GitHub → コード

誰も全体像が見えない

After:
全てが1つのサイトに自動統合
→ 「AI Art Studio」というブランドになる

技術設計

アーキテクチャ

技術スタック

const techStack = {
  framework: 'Next.js 14 App Router',
  language: 'TypeScript',
  deployment: 'Vercel',
  analytics: 'Google Analytics 4',
  styling: 'Glassmorphism + Three.js',
  integration: ['RSS Parser', 'Custom API'],
}

データフロー

RSS自動統合の実装

// lib/rss-parser.ts
import Parser from 'rss-parser'

const parser = new Parser()

export async function fetchArticles() {
  const feeds = [
    { platform: 'Qiita', url: 'https://qiita.com/{user}/feed' },
    { platform: 'ZENN', url: 'https://zenn.dev/{user}/feed' },
    { platform: 'note', url: 'https://note.com/{user}/rss' },
  ]
  
  const articles = await Promise.all(
    feeds.map(async (feed) => {
      const parsed = await parser.parseURL(feed.url)
      return parsed.items.map(item => ({
        title: item.title,
        url: item.link,
        publishedAt: item.pubDate,
        platform: feed.platform,
      }))
    })
  )
  
  return articles.flat()
}

ISR（Incremental Static Regeneration）

// app/api/articles/route.ts
export async function GET() {
  const articles = await fetchArticles()
  
  return Response.json(
    { articles },
    {
      headers: {
        'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=7200'
      }
    }
  )
}

// 1時間ごとに自動更新
export const revalidate = 3600

SEO戦略

「個人サイト」だからこそ、SEOが重要。

企業サイトと違って、信頼性で勝負できないから。

実装したSEO施策

  1. 完全なメタデータ
export const metadata: Metadata = {
  title: 'AI Art Studio - プロが教えるAI画像生成の極意',
  description: 'AI画像生成のプロ集団が運営...',
  keywords: ['AI画像生成', 'Midjourney', 'Stable Diffusion'],
  openGraph: { /* SNS共有最適化 */ },
  robots: { index: true, follow: true },
}
  1. 構造化データ（将来実装予定）
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "AI Art Studio",
  "url": "https://portfolio-crystal-dreamscape.vercel.app",
  "sameAs": [
    "https://github.com/rancorder",
    "https://qiita.com/...",
    "https://zenn.dev/..."
  ]
}
  1. 内部リンク最適化
  • 記事同士の関連付け
  • タグベースのナビゲーション
  • カテゴリ分類

結果

Lighthouse Score:
- SEO: 100
- Accessibility: 100
- Performance: 72（改善中）

なぜNext.jsか

選定理由:

  1. ISRが強力

    • 静的サイトの速さ + 動的更新
    • ビルド不要で自動更新

  2. SEOが簡単

    • メタデータAPI
    • サーバーサイドレンダリング
    • sitemap.xml自動生成

  3. Vercelとの相性

    • GitHubプッシュで自動デプロイ
    • Edge Network（爆速）
    • 無料枠が太い

  4. 将来性

    • React Server Components
    • App Router
    • コミュニティが活発

副次的効果

作ってみて気づいた、予想外のメリット:

1. コンテンツの「複利効果」

従来:
1記事 → 1プラットフォーム → 数日で埋もれる

このシステム:
1記事 → 複数プラットフォーム
      → ポートフォリオに自動集約
      → Google検索で再発見
      → また読まれる
      → 無限ループ

記事が「資産」になった。

2. ブランドの確立

バラバラだった活動が、
「AI Art Studio」という一つのブランドに統合された。

採用面接で:
「このサイトを見てください」
→ 全てがわかる

3. モチベーション維持

記事を書くたびに、自動でポートフォリオが充実していく。

「書けば書くほど、サイトが育つ」

この感覚、継続のモチベーションになる。

課題と今後

現在の課題

  1. Performance 72点

    • 画像最適化が甘い
    • Three.js（背景エフェクト）が重い
    • フォント読み込みが遅い

  2. 記事の自動分類

    • 今は手動でタグ付け
    • AI（Claude API）で自動分類したい

  3. 検索機能

    • サイト内検索がない
    • 記事が増えると探せない

今後の展開

  1. 他プラットフォーム統合

    • X（Twitter）
    • YouTube
    • Speaker Deck
    • GitHub Gist

  2. AI機能追加

    • 記事の自動要約
    • 関連記事レコメンド
    • 意味検索（Claude API）

  3. コミュニティ機能

    • コメント
    • いいね
    • ユーザー投稿ギャラリー

  4. 収益化

    • アフィリエイト
    • 有料記事
    • オンライン講座

他の人も作れるか？

作れる。

必要なスキル:

  • Next.js基礎（公式チュートリアルレベル）
  • TypeScript基礎
  • Git/GitHub
  • Vercelアカウント

工数:

  • コア機能: 1-2日
  • デザイン: 1-2日
  • SEO最適化: 半日
  • エラー対応: ???（運次第）

参考にしてほしい:

まとめ

個人が「メディア帝国」を持つ時代が来た。

必要なのは:

  • 技術力（Next.js）
  • 発想力（統合という視点）
  • 実行力（作り始める勇気）

企業と個人の情報発信力の差は、どんどん縮まってる。

Next.jsがあれば、
個人でも月間10万PVのメディアを作れる時代。

作らない理由がない。

広島から、世界へ。

それでは！

参考リンク

Discussion