Zenn
🪴

ZENN の記事を高速で反映させるブログサイトを開発 〜設計編〜

に公開
Next.js
Vercel
設計
tech

ZENN の記事を高速で反映させるブログサイトを開発 🧑🏻‍💻（Next.js × TypeScript × Tailwind CSS 使用、Vercel で無料運用） 〜設計編〜

はじめに

仕事やプライベートで Next.js や TypeScript、TailwindCSS などを習得した知見を活かしたいと思いましたので、それらを活用した個人開発の一環として、「HayaTech-Blog」というブログサイトを作りました。ZENN に投稿している記事を取得して、エンジニア向けのブログとして公開しています。

HayaTech-Blog
URL：https://hayatech-blog.vercel.app/

このブログサイトは、ZENN に投稿した Markdown 形式の記事を GitHub リポジトリで管理し、それを GitHub API 経由で取得・表示する仕組みがあります。Vercel を利用することで、無料でデプロイできるだけでなく、高速かつ安定した運用を実現しています。

本稿の設計編では、このブログサイトの設計思想と主要な技術要素について解説します。

外観

モバイルファーストを意識し、シンプルで見やすいデザインを心がけました。以下モックアップは Figma のプラグイン「Mockuuups Studio」で作成しました。

PC 版
PC 版

スマートフォン版
スマートフォン版

システム概要

ブログサイトを開発するにあたり、モダンな Web 開発に必要な要素を組み合わせ、効率的かつ拡張性のあるアーキテクチャを目指しました。

使用技術

カテゴリ 技術スタック バージョン (執筆時点)
フロントエンド Next.js 15.1.3
TypeScript 5.3.0
Tailwind CSS 3.3.3
バックエンド GitHub API -
データベース Supabase (PostgreSQL) -
ホスティング Vercel -
分析 Vercel Analytics -

アーキテクチャ図

アーキテクチャ図
アーキテクチャ図

技術選定の背景

  • Next.js

    • SSR（サーバーサイドレンダリング）と SSG（静的サイト生成）を柔軟に選択でき、パフォーマンスと SEO を両立可能。
    • TypeScript との親和性が高く、型安全な開発がしやすい。

  • TypeScript

    • 静的型付けによりバグを未然に防ぎ、保守性の高いコードを実現。
    • 将来的にスケールアップした際にも信頼性を保ちやすい。

  • Tailwind CSS

    • ユーティリティファーストな設計で、HTML 上で直感的にスタイリングが可能。
    • コンポーネントベースの UI 設計と相性が良く、開発速度の向上が期待できる。

  • GitHub API

    • ZENN 記事を Markdown 形式で GitHub に一元管理できるため、バージョン管理やバックアップが容易。
    • GitHub API を用いることで、Markdown ファイルの取得が効率的に行える。

  • Supabase

    • PostgreSQL ベースで、認証・ストレージ・リアルタイム通信が可能。
    • 「いいね」や「コメント」など、インタラクティブな機能の実装に最適。

  • Vercel

    • Next.js に最適化されたホスティングサービス。
    • 自動デプロイやスケーリング、グローバル CDN により高速な配信が可能。
    • 無料プランでも高機能で、個人開発に最適。

  • Vercel Analytics

    • Core Web Vitals を含む指標を可視化でき、UX 改善に役立つ。
    • 実際のユーザー行動に基づいた分析が可能。

UI 設計

ユーザーにとって直感的で使いやすいインターフェースを目指しました。

モック
モック

デザインのポイント

  1. 絵文字をアイコンに採用: Markdown 形式で設定されている絵文字を活用できないかを考えました。ブログを象徴する絵文字で表現することで、視覚的な楽しさと識別しやすさを両立させました。
  2. カテゴリごとの色分け: 、Tech カテゴリの記事は青色（#1E3A8A:専門性をイメージさせる色）、Idea カテゴリの記事は黄色(#F7D154：創造性をイメージさせる色)といったように、カテゴリごとにテーマカラーを設定しました。これにより、ユーザーは記事一覧を見ただけで、記事のジャンルを瞬時に把握できます。
  3. レスポンシブデザイン: PC、タブレット、スマートフォンなど、様々なデバイスからのアクセスを考慮し、Tailwind CSS のレスポンシブユーティリティを活用して、最適なレイアウトを提供します。特にモバイル版では、コンテンツが縦にスムーズに表示されるように工夫しました。

DB 設計

ブログのインタラクティブ性を高めるための「いいね」と「コメント」機能に関するデータベース設計です。Supabase の PostgreSQL を利用しています。

テーブル定義

comments テーブル

カラム 型 制約 NULL 説明
id int8 PRIMARY KEY × コメントの一意な識別子
created_at timestamptz × コメントの作成日時
name text 50 文字以内 × コメント投稿者の名前
content text 400 文字以内 × コメントの内容
blog_id text × コメントされたブログ記事のスラッグ

likes テーブル

カラム 型 制約 NULL 説明
blog_id text PRIMARY KEY × いいねされたブログ記事のスラッグ
count int4 DEFAULT 0 ○ いいねの数

設計上の考慮点

  • comments テーブルと likes テーブルは、それぞれブログ記事の ID (blog_id) をキーとして関連付けられます。これにより、特定の記事に対するコメントやいいねの数を管理できます。
  • comments テーブルには、投稿者の名前とコメント内容の長さに制約を設けることで、スパムや不適切な投稿をある程度抑制するため設定しました。
  • likes テーブルの count カラムにはデフォルト値として 0 を設定しており、いいねが押されるとインクリメントされ値が更新されます。

まとめ

以上の設計編では、個人で開発したブログサイトの設計思想と主要な技術要素について解説しました。
次回、開発編では具体的なコード実装について紹介していきたいと思います！

GitHubで編集を提案

Discussion