## Build responsive from the beginning, mobile-first design.

# ten-sura-game.com - Project Documentation

## 1. Website Overview

**Website Name:** ten-sura-game.com  
**Type:** Japanese Game Strategy Guide Media  
**Brand:** ten-sura-game（転スラゲーム攻略）

**Purpose:**  
ten-sura-game.comは、スマートフォンゲーム「転生したらスライムだった件」を中心とした攻略情報・キャラクター評価・リセマラ情報を発信するゲーム攻略メディアです。初心者向けの進め方から最新イベントの攻略、最強キャラランキング、育成方法まで、プレイヤーに役立つ情報を分かりやすく解説します。無課金・微課金ユーザーでも楽しめるよう、効率的なプレイ方法やガチャの考え方も紹介しています。本サイトでは、リセマラで引くべきキャラクター、ガチャの引き時判断、キャラクター評価と使い方、イベント攻略の効率的な進め方、育成の優先順位など、プレイヤーが迷いやすいポイントを明確に解説します。「このキャラは強い？」「リセマラ終了の基準は？」「無課金でも進められる？」といった疑問に答える実践的な攻略情報を提供し、プレイヤーが無駄な時間やリソースを使わずに効率よくゲームを楽しめることを目指しています。

**Core Values:**
- Clear character evaluations and tier rankings
- Beginner-friendly reroll and progression guides
- Efficient gameplay strategies for F2P/low-spenders
- Fast, mobile-optimized reading experience

---

## 2. Target Audience

**Primary Demographic:**
- Age: 14-35 years old
- Location: Japan (all regions)
- Device: Smartphone (iPhone / Android) - primary focus (critical for mobile game users)
- Game Experience: Light to intermediate players (including complete beginners)

**User Profile:**
ten-sura-game.comの主なターゲットは、「転生したらスライムだった件」をはじめとしたアニメ系スマートフォン向けガチャRPGをプレイしている、またはこれから始めようとしている日本国内のモバイルゲームユーザーです。年齢層は主に14〜35歳で、学生や社会人のライト〜中級プレイヤーが中心となります。ユーザーの多くは無課金または微課金でプレイしており、ゲームを効率よく進めるためにプレイ前やガチャを引く前にGoogle検索を行う傾向があります。

**User Characteristics:**
- Play anime-based mobile gacha RPGs
- Mostly free-to-play or light spenders
- Search before playing or pulling gacha
- Want clear answers: "Is this character good?" "Should I reroll?" "How to progress efficiently?"
- Prefer quick, scannable text guides over long videos
- Need beginner-friendly explanations
- Want to avoid wasting in-game resources

**Search Behavior (Decision-Making Search):**
- "リセマラ当たりランキング" (Reroll tier list)
- "最強キャラランキング" (Strongest character ranking)
- "〇〇(キャラ名) 評価" (Character evaluation)
- "初心者 進め方" (Beginner progression guide)
- "ガチャ 引くべき" (Should I pull this gacha)
- "イベント 効率" (Event efficiency guide)
- "育成 優先" (Training priority)

**Traffic Sources:**
- Google organic search (primary - decision-making queries)
- Social media (Twitter/X, game communities)
- Direct traffic
- Game community referrals

---

## 3. Design System - Dark Anime Strategy Portal

### Design Goal
When a visitor opens the site, within 3 seconds they should feel: "This is a professional game strategy website."
The design should feel like a game guide portal (similar to Japanese game 攻略 sites), not a personal blog.

**Focus on:**
- Fast readability
- Strong contrast
- High click-through rate (CTR)
- Mobile-first experience (very important — most Japanese game users are on smartphones)

### 3.1 Color Palette (Black & Red Theme)

**Primary Colors:**
- Main Background: `#0F0F12` (Deep Black)
- Secondary Background: `#1A1A1F` (Dark Gray)
- Card Background: `#202026` (Soft Dark)
- Primary Accent: `#E60023` (Crimson Red)
- Hover Red: `#FF2A3D` (Bright Red)

**Text Colors:**
- Main Text: `#FFFFFF` (White)
- Secondary Text: `#B8B8C0` (Light Gray)

**UI Elements:**
- Border Color: `#2A2A33` (Soft Gray)

**Important Rule:**
Use red only for clickable elements (buttons, links, badges, rankings). This improves user behavior and click rate.

**Buttons:**
- Primary Button: Background `#E60023`, white text, bold, 8px border radius
- Hover: Background `#FF2A3D`
- Secondary Button: Background `#202026`, 1px solid `#2A2A33` border, text `#FFFFFF`

**Cards:**
- Background: `#202026`
- Border radius: 12px
- Border: 1px solid `#2A2A33`
- Hover: subtle red glow + red border (`#E60023`)

### 3.2 Typography

**Font:**
- Headings: Noto Sans JP Bold
- Body text: Noto Sans JP Regular

**Font Sizes:**
- Title: 26-30px
- H2: 22px
- Body: 16-18px
- Mobile body: 16px minimum

**Heading Styles:**
- H2: dark box background (`#1A1A1F`) + red left border (4px solid `#E60023`) - like a "game quest title"
- H3: red underline (2px solid `#E60023`)
- H4: gray underline (1px solid `#2A2A33`)

**Reading Experience:**
- Line height: 1.8
- Clear visual hierarchy
- Easy scanning for key information
- Professional game guide feel

---

## 4. Header & Navigation

**Header Style:**
- Background: `#0F0F12` (Deep Black)
- Bottom border: thin red line (1px solid `#E60023`)
- Sticky header on scroll
- Clean, minimal design

**Logo:**
- Location: `/public/logo.png`
- Use `<img>` element
- Clicking logo returns to homepage (/)
- Logo should work well on dark background

**Navigation Categories (Japanese labels):**
- 攻略情報 (Strategy Guides) → `/category/攻略情報`
- キャラクター評価 (Character Reviews) → `/category/キャラクター評価`
- リセマラ・ガチャ情報 (Reroll & Gacha Info) → `/category/リセマラ・ガチャ情報`
- イベント・アップデート (Events & Updates) → `/category/イベント・アップデート`
- 初心者・育成ガイド (Beginner & Training Guides) → `/category/初心者・育成ガイド`

**Navigation Styling:**
- Text color: `#FFFFFF`
- Hover: `#E60023` (red)
- Active category: `#E60023` (red)
- Font: Noto Sans JP Medium

**Right Side:**
- Search icon (white, turns red on hover)

**Responsive Behavior:**
- Mobile: Hamburger menu (white icon)
- Desktop: Full horizontal menu
- Smooth transitions

---

## 5. Website Pages

### 5.1 Home Page

The homepage acts as a professional game strategy guide portal with dark anime aesthetic.

**Required Sections:**
- Hero section with latest featured guide
- Latest guides grid
- Popular Articles Ranking (Top 5) - VERY IMPORTANT for page views
- 攻略情報 (Strategy Guides) section
- キャラクター評価 (Character Reviews) section
- リセマラ・ガチャ情報 (Reroll & Gacha Info) section
- イベント・アップデート (Events & Updates) section
- 初心者・育成ガイド (Beginner & Training Guides) section

**Hero Section Design:**
- Title: "Latest Guides" (最新攻略情報)
- One large featured article with:
  - Big thumbnail (16:9 ratio)
  - Red category badge
  - Large title (white text)
  - 2-line short description (light gray text)
- Background: `#1A1A1F`
- Card background: `#202026`

**Popular Articles Ranking Section (Very Important):**
- Title: "Popular Articles Ranking" (人気記事ランキング)
- Show Top 5 posts
- Use large numbered badges: ① ② ③ ④ ⑤
- Numbers inside red circles (`#E60023`)
- Each item shows: thumbnail, title, category badge
- This significantly increases page views and engagement

**Layout:**
- Dark background (`#0F0F12`)
- Article cards with `#202026` background
- 12px rounded corners
- Red category badges for all articles
- Section titles with red left accent bar
- Article cards show red border glow on hover
- Article titles change to `#E60023` on hover
- Professional game guide aesthetic

### 5.2 Category Page

Each category page displays filtered guides with pagination.

**Article Card Components:**
- Featured image (16:9 ratio)
- Category badge (red `#E60023` background, white text)
- Article title (white text)
- Excerpt (2-3 lines, light gray text)
- Publish date (light gray)
- Difficulty indicator (optional: 初心者向け, 中級者向け, 上級者向け) - red badge

**Layout:**
- Grid layout (responsive)
- 3 columns on desktop
- 2 columns on tablet
- 1 column on mobile
- Dark cards (`#202026`) on dark background (`#0F0F12`)
- 12px rounded corners
- Red border glow on hover

### 5.3 Single Article Page

The most important SEO page for strategy guides.

**Required Elements:**
- Title (H1) - large, readable, white text
- Category badge (red)
- Publish date / Last updated date (light gray)
- Featured image (high quality, game screenshot)
- Table of contents (for long guides) - dark box with red accents
- Article content (well-formatted with clear sections)
- Character rating boxes (with red star ratings)
- Tips callout boxes (dark background with red left border)
- Warning callout boxes (dark background with orange/red icon)
- Related guides section (dark cards)
- Breadcrumb navigation (white text, red separators)
- Social share buttons (optional)

**Content Styling:**
- Background: `#0F0F12`
- Content area: `#1A1A1F` or `#202026`
- Line spacing: 1.8
- Clear heading hierarchy (H2 with red left border, H3 with red underline)
- Readable font size (16-18px)
- White text for readability
- Proper image captions (light gray)
- Highlighted tips with red accents
- Character stat tables (dark background, red headers)
- Numbered lists for step-by-step guides

---

## 6. Responsive Design

**Mobile-First Approach (CRITICAL):**
- Mobile: 320-768px (PRIMARY FOCUS - most users are on smartphones)
- Tablet: 768-1024px
- Desktop: 1024px+

**Requirements:**
- No horizontal scrolling
- Touch-friendly tap targets (min 44px)
- Images scale properly
- Readable text without zooming (minimum 16px)
- Fast loading on mobile networks
- Dark theme optimized for mobile viewing
- Red buttons and links easily tappable
- Category badges clearly visible on small screens

---

## 7. URL Structure

Use Japanese URLs for better SEO and user experience.

**Correct Examples:**
- `/category/攻略情報`
- `/category/キャラクター評価`
- `/category/リセマラ・ガチャ情報`
- `/category/イベント・アップデート`
- `/category/初心者・育成ガイド`
- `/post/転スラ-リセマラ当たりランキング最新版`
- `/post/リムル-評価と使い方`
- `/post/初心者向け序盤の効率的な進め方`
- `/post/最強キャラランキング-2024年最新版`
- `/author/山田太郎`

**Incorrect Examples:**
- `/post/123`
- `/category/strategy-guide`
- `/category/character-review`

---

## 8. SEO Strategy

**Focus Areas:**
- High topical authority in mobile gacha RPG strategy niches
- Decision-making query optimization (「リセマラ」「最強」「評価」「ガチャ」)
- Programmatic SEO for character reviews and tier lists
- Rich structured data (Schema.org)

**Required Schema Types:**
- Article schema
- HowTo schema (for progression guides)
- Breadcrumb schema
- Organization schema
- Person schema (authors)
- FAQ schema (for beginner guides)
- VideoGame schema
- Review schema (for character evaluations)

**Meta Requirements:**
- Unique title tags (50-60 characters, include character/feature name)
- Compelling meta descriptions (150-160 characters, decision-focused)
- Open Graph tags for social sharing
- Twitter Card tags
- Canonical URLs

**Target Keywords:**
- 転スラ + リセマラ
- 転スラ + 最強キャラ
- Character names + 評価
- 転スラ + ガチャ + 引くべき
- 転スラ + 初心者 + 進め方
- 転スラ + 育成 + 優先
- Event names + 攻略
- 転スラ + 無課金

---

## 9. Performance Requirements

**Target Metrics:**
- Page load: Under 2.5 seconds
- First Contentful Paint: Under 1.5s
- Largest Contentful Paint: Under 2.5s
- Cumulative Layout Shift: Under 0.1

**Optimization Techniques:**
- Lazy loading images
- Next.js Image optimization
- Code splitting
- Mobile-first performance
- Minimal JavaScript
- Efficient CSS

---

## 10. Content Strategy

**Article Types:**
- Reroll tier lists and guides (リセマラランキング)
- Character evaluations and reviews (キャラクター評価)
- Strongest character rankings (最強キャラランキング)
- Gacha analysis and pull recommendations (ガチャ情報)
- Beginner progression guides (初心者向け進め方)
- Training priority guides (育成優先度)
- Event strategy guides (イベント攻略)
- Team composition recommendations (編成例)
- Skill explanations (スキル解説)
- F2P/low-spender strategies (無課金・微課金攻略)
- Resource management guides (素材効率)
- Update and patch notes analysis (アップデート情報)

**Content Structure:**
- Clear answer upfront (which character to get, whether to pull, etc.)
- Character ratings with visual indicators (stars, S/A/B/C tiers)
- Pros and cons lists
- Recommended usage scenarios
- Alternative options for F2P players
- Step-by-step progression guides
- Visual tier lists and rankings

**Tone of Voice:**
- Clear and direct
- Decision-focused (help users make choices quickly)
- Beginner-friendly with simple explanations
- Encouraging for F2P players
- Honest character evaluations
- Practical and efficiency-oriented

---

## 11. Technical Architecture

**Framework:** Next.js (App Router)  
**Database:** PostgreSQL with Drizzle ORM  
**Styling:** Tailwind CSS  
**Deployment:** Vercel (recommended)

**Key Features:**
- Server-side rendering (SSR)
- Static generation where possible
- API routes for dynamic content
- Image optimization
- Automatic sitemap generation
- RSS feed support

