📚

技術ページを実装した話：Next.jsで技術スタックを公開する意義

に公開
JavaScript
Next.js
React Native
個人開発
Express
tech

売上月一万円を目指す 議事録#2

はじめに

「ふどろす」という食材管理アプリを開発している中で、技術的な情報を公開するページを作成しました。この記事では、なぜ技術ページを作ったのか、どのように実装したのか、そしてSEOや採用活動への影響についてまとめます。

なぜ技術ページを作ったのか

1. 透明性の確保

ユーザーや開発者コミュニティに対して、どのような技術スタックでサービスを構築しているかを明示することで、信頼性を高めたいと考えました。特に、スタートアップや個人開発のサービスでは、技術的な裏付けがあることで「ちゃんと作られている」という印象を与えられます。

2. 採用・協業への布石

将来的にエンジニアを採用する際や、技術的な協業を検討する際に、技術スタックを公開しておくことで、マッチングの精度が上がります。また、オープンソースコミュニティとの接点も生まれやすくなります。

3. SEO対策

「Next.js 技術選定」「React Native 開発」などのキーワードで検索される可能性があり、技術的な記事として検索エンジンにインデックスされることで、間接的な集客につながる可能性があります。

実装内容

技術スタック

  • LP: Next.js 14 (App Router) + TypeScript + Tailwind CSS
  • Mobile: React Native 0.81 + Expo SDK 54 + TypeScript
  • Admin: React 18 + Vite 7 + TypeScript + Tailwind CSS
  • Backend: Express + TypeScript + Sequelize + PostgreSQL

ページ構成

技術ページ（/tech）は以下のセクションで構成されています：

  1. ヒーローセクション

    • キャッチコピー：「技術は、ビジネスを加速させるための手段である。」
    • アーキテクチャの概要図

  2. 技術スタック・オーバービュー

    • 4つのカード（LP、Mobile、Admin、Backend）で各技術スタックを説明
    • 各カードには技術タグと説明文を配置

  3. なぜこのスタックか？

    • 技術選定の意思決定ロジックを3つのカードで説明
    • Next.js 14のApp Router、Expo SDK 54、TypeScriptの統一採用について

  4. 数値で見る成果

    • Lighthouseスコア（All 100）
    • 開発速度（工数削減60%）
    • 稼働率・エラー率（99.9%）

  5. 開発ツールとワークフロー

    • Infrastructure（Docker、PostgreSQL、Node.js）
    • Tooling（ESLint、TypeScript、Sequelize CLI、npm workspaces）

実装のポイント

1. SEO最適化

export const metadata: Metadata = {
    title: '技術スタック | hudorosu.com - Next.js/React Native/Expressによるフルスタック開発',
    description: 'Next.js 14, Express, React Native + Expo, React + Viteを用いた最新のフルスタック開発技術を公開。TypeScriptによる型安全性、SEO最適化、パフォーマンス向上、メンテナンス性を重視したアーキテクチャの解説。',
    keywords: ['Next.js', 'React Native', 'Expo', 'Express', 'TypeScript', 'Vite', 'Sequelize', 'PostgreSQL', 'フルスタック開発', 'SEO最適化', 'パフォーマンス', 'アーキテクチャ', '技術選定', 'ふどろす'],
    // ...
}

2. 構造化データ（Schema.org）

const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'TechArticle',
    headline: '技術スタック | Next.js/React Native/Expressによるフルスタック開発',
    // ...
}

TechArticleスキーマを使用することで、検索エンジンに対して技術記事であることを明示しています。

3. アニメーション

AnimatedSectionコンポーネントを使用して、スクロール時にフェードイン・スライドインのアニメーションを実装。視覚的な魅力を高めています。

4. レスポンシブデザイン

PC版とモバイル版の両方に対応し、モバイルでは1カラム、PCではグリッドレイアウトで表示されます。

サイトマップへの追加

技術ページをサイトマップ（/sitemap.xml）に追加しました：

{
    url: `${BASE_URL}/tech`,
    lastModified: now,
    changeFrequency: 'monthly',
    priority: 0.7,
}

これにより、検索エンジンが技術ページをクロールしやすくなります。

効果と今後の展望

現時点での効果

  • 透明性の向上: 技術スタックを公開することで、ユーザーや開発者コミュニティからの信頼が高まる
  • SEO対策: 技術キーワードでの検索流入の可能性
  • 採用活動: 将来的なエンジニア採用時のマッチング精度向上

今後の改善案

  1. 技術ブログの連携

    • 技術ページから技術ブログへのリンクを追加
    • 各技術スタックの詳細な解説記事への導線

  2. パフォーマンス指標の自動更新

    • Lighthouseスコアを定期的に計測し、自動更新
    • 実際のメトリクス（エラー率、レスポンスタイムなど）を表示

  3. コードサンプルの追加

    • 実際のコードスニペットを表示
    • GitHubへのリンクや、技術的な実装の詳細を公開

  4. 技術選定の詳細な解説

    • なぜこの技術を選んだのか、より詳細な意思決定プロセスを公開
    • 代替案との比較や、採用しなかった技術の理由

まとめ

技術ページを実装することで、以下のメリットが得られました：

  • ✅ 透明性の確保
  • ✅ SEO対策
  • ✅ 採用・協業への布石
  • ✅ 開発者コミュニティとの接点

技術スタックを公開することは、単なる自己満足ではなく、ビジネス価値を生み出す戦略的な選択だと感じています。特に、スタートアップや個人開発のサービスでは、技術的な裏付けがあることで、ユーザーや投資家からの信頼を獲得しやすくなります。

参考リンク

技術スタック

  • Next.js 14 (App Router)
  • React Native 0.81 + Expo SDK 54
  • Express + TypeScript
  • PostgreSQL + Sequelize

アカウント

https://x.com/4Vf8ShKipF48095
https://github.com/gangdaolongmi10-cmyk/hudorosu

開発中アプリ

https://www.hudorosu.com/

Discussion