| name | tech-blog-frontend-optimizer |
| description | テックブログのフロントエンド改善を総合的に支援するスキル。PV数・滞在時間の向上、ユーザー満足度の改善、SEO最適化を目的に、パフォーマンス、アクセシビリティ、UI/UX、Core Web Vitalsの改善提案を実施。「フロントエンドを改善して」「パフォーマンスを最適化」「UXを向上させたい」などのリクエストで利用。 |
Tech Blog Frontend Optimizer
概要
このスキルは、テックブログ（https://maasaablog.com/）のフロントエンド改善を総合的に支援する。PV数・滞在時間の向上、ユーザー満足度の改善、SEO最適化を目的に、以下の領域で具体的な改善提案と実装支援を行う:
- パフォーマンス最適化: Core Web Vitals、ページ読み込み速度、リソース最適化
- アクセシビリティ: WCAG 2.1準拠、スクリーンリーダー対応、キーボードナビゲーション
- UI/UX改善: ユーザー体験の向上、読みやすさ、エンゲージメント強化
- SEO技術最適化: 構造化データ、メタタグ、クローラビリティ
技術スタック
ブログの現在の技術構成:
- フレームワーク: Astro（静的サイトジェネレータ）
- 最適化ツール: Partytown 0.10.2（スクリプト実行の最適化）
- アナリティクス: Google Analytics（G-V5DNQ95RRH）
- レンダリング: Web Componentsベースの「astro-island」、段階的ハイドレーション
使用するタイミング
以下のようなリクエストがあった場合、このスキルを使用する:
- 「フロントエンドを改善して」
- 「ページ速度を上げたい」
- 「UXを向上させたい」
- 「Core Web Vitalsのスコアを改善」
- 「アクセシビリティ対応をしたい」
- 「離脱率を下げたい」
- 「滞在時間を増やしたい」
クイックスタート
基本的な改善フロー
- 現状分析: ブログの現在の状態を診断
- 優先度付け: ROIの高い改善項目を特定
- 改善提案: 具体的な実装方法を提示
- 検証計画: 効果測定の方法を提案
簡単な例
ユーザーから「ページ速度を上げたい」とリクエストされた場合:
- Lighthouseスコアの取得方法を提示
- 現在のボトルネックを分析（画像サイズ、JavaScriptなど）
- Astroの特性を活かした最適化方法を提案
- Before/After測定方法を案内
主な機能
1. パフォーマンス最適化
ページ読み込み速度とCore Web Vitalsの改善を実施する。
Core Web Vitals の改善
対象指標:
- LCP（Largest Contentful Paint）: 2.5秒以内が目標
- FID（First Input Delay）: 100ms以内が目標
- CLS（Cumulative Layout Shift）: 0.1以下が目標
改善項目:
#### LCP改善（最大コンテンツの描画）
1. **画像最適化**
- WebP/AVIF形式への変換
- 適切なサイズ設定（srcset活用）
- 遅延読み込み（loading="lazy"）
- LCP要素は優先読み込み（fetchpriority="high"）
2. **リソースの最適化**
- フォントの事前読み込み（preload）
- 重要CSSのインライン化
- サードパーティスクリプトの遅延実行（Partytownの活用）
#### FID改善（初回入力遅延）
1. **JavaScriptの最適化**
- コード分割（dynamic import）
- 不要なJavaScriptの削除
- Astroの部分ハイドレーション活用（client:load, client:visible）
2. **メインスレッドの負荷軽減**
- 長いタスクの分割
- Web Workerの活用（Partytownで実装済み）
#### CLS改善（レイアウトシフト）
1. **画像・動画のサイズ指定**
- width/height属性の明示
- aspect-ratioの使用
2. **動的コンテンツの対応**
- 広告・埋め込みのスペース確保
- フォントの最適化（font-display: swap）
詳細: references/performance-optimization.md を参照
リソース最適化
画像の最適化:
---
// Astroの画像最適化コンポーネント
import { Image } from 'astro:assets';
import myImage from '../assets/image.png';
---
<Image
src={myImage}
alt="説明文"
width={800}
height={600}
format="webp"
quality={80}
loading="lazy"
decoding="async"
/>
フォントの最適化:
<!-- 重要フォントの事前読み込み -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<!-- フォント表示の最適化 -->
<style>
@font-face {
font-family: 'MainFont';
src: url('/fonts/main.woff2') format('woff2');
font-display: swap; /* FOIT回避 */
}
</style>
サードパーティスクリプトの最適化:
---
// Partytownを活用したGoogle Analytics
---
<script type="text/partytown">
// Google Analytics等のスクリプト
// Web Workerで実行され、メインスレッドをブロックしない
</script>
詳細: references/resource-optimization.md を参照
2. アクセシビリティ改善
WCAG 2.1レベルAA準拠を目指した改善を実施する。
セマンティックHTML
改善前:
<div class="article-card" onclick="location.href='/blog/post1'">
<div class="image">
<img src="thumbnail.png">
</div>
<div class="title">記事タイトル</div>
<div class="date">2024-01-01</div>
</div>
改善後:
<article class="article-card">
<a href="/blog/post1" aria-label="記事タイトル - 2024年1月1日公開">
<img src="thumbnail.webp" alt="記事のサムネイル画像" width="400" height="300" loading="lazy">
<h2>記事タイトル</h2>
<time datetime="2024-01-01">2024年1月1日</time>
</a>
</article>
キーボードナビゲーション
フォーカス管理:
/* フォーカス時の視覚的フィードバック */
a:focus-visible,
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* スキップリンクの実装 */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
HTML:
<a href="#main-content" class="skip-link">メインコンテンツへスキップ</a>
<main id="main-content" tabindex="-1">
<!-- メインコンテンツ -->
</main>
ARIA属性の適切な使用
<!-- ページネーション -->
<nav aria-label="ページネーション">
<ul>
<li><a href="/page/1" aria-label="1ページ目">1</a></li>
<li><a href="/page/2" aria-current="page" aria-label="現在のページ、2ページ目">2</a></li>
<li><a href="/page/3" aria-label="3ページ目">3</a></li>
</ul>
</nav>
<!-- カテゴリフィルター -->
<section aria-label="カテゴリフィルター">
<h2>カテゴリ</h2>
<ul role="list">
<li><a href="/category/claude">Claude</a></li>
<li><a href="/category/ai">生成AI</a></li>
</ul>
</section>
詳細: references/accessibility.md を参照
3. UI/UX改善
ユーザーエンゲージメントと満足度を向上させる改善を実施する。
読みやすさの向上
タイポグラフィの最適化:
/* 本文の読みやすさ改善 */
article {
/* 行の長さ: 45-75文字が理想 */
max-width: 70ch;
margin: 0 auto;
/* 行間: 1.5-1.8が読みやすい */
line-height: 1.6;
/* フォントサイズ: 最低16px */
font-size: 16px;
/* コントラスト比: 4.5:1以上（WCAG AA） */
color: #333;
background: #fff;
}
/* 見出しの階層を明確に */
h2 {
font-size: 2em;
margin-top: 1.5em;
margin-bottom: 0.5em;
font-weight: 700;
}
h3 {
font-size: 1.5em;
margin-top: 1.2em;
margin-bottom: 0.4em;
font-weight: 600;
}
ユーザーエンゲージメント強化
1. プログレスインジケーター（読書進捗バー）:
---
// components/ReadingProgress.astro
---
<div id="reading-progress" role="progressbar" aria-label="記事の読書進捗" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<script>
const progressBar = document.getElementById('reading-progress');
window.addEventListener('scroll', () => {
const winScroll = document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
progressBar.style.width = scrolled + '%';
progressBar.setAttribute('aria-valuenow', Math.round(scrolled));
});
</script>
<style>
#reading-progress {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: linear-gradient(to right, #0066cc, #00ccff);
z-index: 1000;
transition: width 0.2s ease;
}
</style>
2. 目次の自動生成（既存機能の強化）:
---
// components/TableOfContents.astro
// H2要素から自動生成（既存機能）を強化
---
<nav class="toc" aria-label="目次">
<h2>目次</h2>
<ul id="toc-list">
<!-- JavaScript で動的生成 -->
</ul>
</nav>
<script>
// 現在の見出しをハイライト（スクロール連動）
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
const tocLink = document.querySelector(`#toc-list a[href="#${id}"]`);
if (entry.isIntersecting) {
tocLink?.classList.add('active');
} else {
tocLink?.classList.remove('active');
}
});
}, {
rootMargin: '-80px 0px -80% 0px'
});
// 全てのH2要素を監視
document.querySelectorAll('h2[id]').forEach(heading => {
observer.observe(heading);
});
</script>
3. 関連記事のレコメンデーション:
---
// components/RelatedArticles.astro
interface Props {
currentCategory: string;
currentTags: string[];
excludeSlug: string;
}
const { currentCategory, currentTags, excludeSlug } = Astro.props;
// カテゴリとタグの類似性で関連記事を取得
const relatedPosts = await getRelatedPosts(currentCategory, currentTags, excludeSlug);
---
<section aria-label="関連記事">
<h2>関連記事</h2>
<ul class="related-articles">
{relatedPosts.map(post => (
<li>
<article>
<a href={`/blog/${post.slug}`}>
<img src={post.thumbnail} alt="" width="200" height="150" loading="lazy">
<h3>{post.title}</h3>
<p>{post.excerpt}</p>
</a>
</article>
</li>
))}
</ul>
</section>
4. ダークモードの実装:
---
// components/ThemeToggle.astro
---
<button
id="theme-toggle"
aria-label="ダークモード切替"
aria-pressed="false"
>
<span class="light-icon">☀️</span>
<span class="dark-icon">🌙</span>
</button>
<script>
const theme = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
})();
if (theme === 'light') {
document.documentElement.classList.remove('dark');
} else {
document.documentElement.classList.add('dark');
}
window.localStorage.setItem('theme', theme);
const handleToggleClick = () => {
const element = document.documentElement;
element.classList.toggle('dark');
const isDark = element.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
// ARIA属性更新
document.getElementById('theme-toggle')?.setAttribute('aria-pressed', isDark);
};
document.getElementById('theme-toggle')?.addEventListener('click', handleToggleClick);
</script>
<style>
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
:root.dark {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
</style>
詳細: references/ux-improvements.md を参照
モバイル最適化
レスポンシブデザイン:
/* モバイルファースト */
.article-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 1rem;
}
/* タブレット */
@media (min-width: 768px) {
.article-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
padding: 2rem;
}
}
/* デスクトップ */
@media (min-width: 1024px) {
.article-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
}
タッチ対応:
/* タップターゲットサイズ: 最低44x44px */
.card-link {
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* タッチ時のフィードバック */
@media (hover: none) {
.card-link:active {
background-color: rgba(0, 0, 0, 0.1);
}
}
4. SEO技術最適化
検索エンジンのクローラビリティとインデックス品質を向上させる。
構造化データの実装
記事ページ（Article Schema）:
---
// layouts/BlogPost.astro
const { frontmatter } = Astro.props;
const structuredData = {
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": frontmatter.title,
"description": frontmatter.description,
"image": frontmatter.image,
"datePublished": frontmatter.pubDate,
"dateModified": frontmatter.updatedDate || frontmatter.pubDate,
"author": {
"@type": "Person",
"name": "Masayan",
"url": "https://maasaablog.com/about"
},
"publisher": {
"@type": "Organization",
"name": "Masayan Tech Blog",
"logo": {
"@type": "ImageObject",
"url": "https://maasaablog.com/logo.png"
}
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": `https://maasaablog.com/blog/${frontmatter.slug}`
}
};
---
<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
パンくずリスト（BreadcrumbList Schema）:
---
const breadcrumbData = {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "ホーム",
"item": "https://maasaablog.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "ブログ",
"item": "https://maasaablog.com/blog"
},
{
"@type": "ListItem",
"position": 3,
"name": frontmatter.title,
"item": `https://maasaablog.com/blog/${frontmatter.slug}`
}
]
};
---
<script type="application/ld+json" set:html={JSON.stringify(breadcrumbData)} />
詳細: references/seo-technical.md を参照
メタタグの最適化
---
// components/SEOHead.astro
interface Props {
title: string;
description: string;
image?: string;
publishDate?: Date;
updateDate?: Date;
}
const { title, description, image, publishDate, updateDate } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const socialImage = image || '/default-og-image.png';
---
<!-- 基本メタタグ -->
<title>{title} | Masayan Tech Blog</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(socialImage, Astro.site)} />
<meta property="og:site_name" content="Masayan Tech Blog" />
{publishDate && <meta property="article:published_time" content={publishDate.toISOString()} />}
{updateDate && <meta property="article:modified_time" content={updateDate.toISOString()} />}
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content={canonicalURL} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(socialImage, Astro.site)} />
サイトマップとRSSの最適化
サイトマップ（既存のRSS.xmlを強化）:
<!-- public/sitemap.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://maasaablog.com/</loc>
<lastmod>2025-10-25</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<!-- 各記事ページ -->
<url>
<loc>https://maasaablog.com/blog/post-slug</loc>
<lastmod>2025-10-20</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
5. 分析と測定
改善効果を測定し、継続的な最適化を実施する。
測定指標（KPI）
1. パフォーマンス指標:
| 指標 | 現状 | 目標 | 測定方法 |
|------|------|------|---------|
| Lighthouse Performance | ? | 90+ | Chrome DevTools |
| LCP | ? | <2.5s | PageSpeed Insights |
| FID | ? | <100ms | PageSpeed Insights |
| CLS | ? | <0.1 | PageSpeed Insights |
| ページ読み込み時間 | ? | <3s | Google Analytics |
2. ユーザーエンゲージメント指標:
| 指標 | 現状 | 目標 | 測定方法 |
|------|------|------|---------|
| 平均セッション時間 | ? | +30% | Google Analytics |
| 直帰率 | ? | <50% | Google Analytics |
| ページ/セッション | ? | 2.5+ | Google Analytics |
| スクロール深度 | ? | 75%+ | Google Analytics（イベント） |
3. SEO指標:
| 指標 | 現状 | 目標 | 測定方法 |
|------|------|------|---------|
| オーガニック流入 | ? | +50% | Google Search Console |
| 平均掲載順位 | ? | Top 10 | Google Search Console |
| クリック率（CTR） | ? | 5%+ | Google Search Console |
| インデックス数 | 400記事 | 全記事 | Google Search Console |
Google Analyticsイベント設定
<!-- 重要なユーザーアクションを追跡 -->
<script type="text/partytown">
// スクロール深度
window.addEventListener('scroll', () => {
const scrollPercent = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
if (scrollPercent > 25 && !window.scrolled25) {
gtag('event', 'scroll', { 'depth': '25%' });
window.scrolled25 = true;
}
if (scrollPercent > 50 && !window.scrolled50) {
gtag('event', 'scroll', { 'depth': '50%' });
window.scrolled50 = true;
}
if (scrollPercent > 75 && !window.scrolled75) {
gtag('event', 'scroll', { 'depth': '75%' });
window.scrolled75 = true;
}
});
// 外部リンククリック
document.querySelectorAll('a[href^="http"]').forEach(link => {
link.addEventListener('click', (e) => {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': e.target.href
});
});
});
// 記事読了時間
const startTime = Date.now();
window.addEventListener('beforeunload', () => {
const timeSpent = Math.round((Date.now() - startTime) / 1000);
gtag('event', 'timing_complete', {
'name': 'read_time',
'value': timeSpent
});
});
</script>
詳細: references/analytics.md を参照
改善実施手順
ステップ1: 現状診断
## 診断チェックリスト
### パフォーマンス
- [ ] Lighthouse スコアを取得（Performance, Accessibility, Best Practices, SEO）
- [ ] PageSpeed Insights でCore Web Vitals確認
- [ ] WebPageTest で詳細分析
- [ ] Chrome DevTools でネットワーク分析
### アクセシビリティ
- [ ] WAVE でアクセシビリティチェック
- [ ] axe DevTools で詳細診断
- [ ] スクリーンリーダー（NVDA/JAWS）でテスト
- [ ] キーボードのみでナビゲーション確認
### UX
- [ ] Google Analytics でユーザー行動分析
- [ ] ヒートマップツール（Hotjar等）でクリック/スクロール分析
- [ ] モバイルデバイスで実機テスト
- [ ] 異なるブラウザでテスト
### SEO
- [ ] Google Search Console でインデックス状況確認
- [ ] 構造化データテストツールで検証
- [ ] モバイルフレンドリーテスト
- [ ] 被リンク・内部リンク構造確認
ステップ2: 優先順位付け
改善項目をROI（投資対効果）でランク付け:
高優先度（即実施）:
- Core Web Vitals の改善（LCP, FID, CLS）
- 画像の最適化（WebP変換、サイズ最適化）
- 構造化データの実装
- アクセシビリティの基本対応（alt属性、セマンティックHTML）
中優先度（1-2週間以内）:
- ダークモード実装
- 関連記事レコメンデーション
- 読書進捗バー
- メタタグの最適化
低優先度（長期的改善）:
- A/Bテスト実施
- パーソナライゼーション
- PWA化
- オフライン対応
ステップ3: 実装
優先度の高い項目から順次実装:
Performance Quick Wins（即効性のある改善）:
- 画像をWebP化
- 遅延読み込み実装
- フォントの最適化
Accessibility Baseline（基本対応）:
- alt属性追加
- セマンティックHTML修正
- キーボードナビゲーション確保
UX Enhancements（体験向上）:
- 読書進捗バー追加
- 目次のスクロール連動
- 関連記事表示
SEO Technical（技術SEO）:
- 構造化データ実装
- メタタグ最適化
- サイトマップ改善
ステップ4: 測定と改善
## 効果測定サイクル（2週間ごと）
1. **データ収集**
- Google Analytics: セッション時間、直帰率、PV
- Search Console: 流入数、CTR、順位
- PageSpeed Insights: Core Web Vitals
2. **分析**
- 目標値との比較
- 改善効果の定量評価
- 新たなボトルネック特定
3. **次のアクション決定**
- さらなる最適化項目の特定
- 新機能の検討
- A/Bテストの計画
4. **レポート作成**
- ステークホルダーへの報告
- ナレッジの蓄積
ベストプラクティス
1. Astroの特性を最大限活用
Astroは「ゼロJavaScriptがデフォルト」の思想:
---
// 静的コンテンツはJavaScriptなしでレンダリング
---
<article>
<h1>{title}</h1>
<p>{content}</p>
</article>
<!-- インタラクティブ要素のみJavaScript -->
<ThemeToggle client:load />
<CommentSection client:visible />
部分ハイドレーションの戦略:
client:load: 即座に必要（例: テ���マ切替）client:visible: 画面に表示されたら（例: コメント欄）client:idle: アイドル時（例: 分析スクリプト）client:media: 特定画面サイズ（例: モバイルメニュー）
2. プログレッシブエンハンスメント
基本機能はJavaScriptなしでも動作させる:
<!-- JavaScript無効でも動作 -->
<form action="/search" method="GET">
<input type="text" name="q" placeholder="検索...">
<button type="submit">検索</button>
</form>
<!-- JavaScriptで体験向上 -->
<script>
// フェッチAPIで非同期検索
// ただし、JavaScript無効でもフォーム送信は動作
</script>
3. パフォーマンス予算の設定
## パフォーマンス予算
| リソース | 上限 |
|---------|-----|
| HTML | 50KB |
| CSS | 50KB |
| JavaScript（First-party） | 100KB |
| JavaScript（Third-party） | 50KB |
| 画像（ページあたり） | 500KB |
| フォント | 100KB |
| 合計ページサイズ | 1MB |
4. コンテンツ戦略との連携
フロントエンド改善はコンテンツ戦略と連動:
- 滞在時間向上: 関連記事、目次、読書進捗バー
- PV向上: 内部リンク、カテゴリナビ、検索機能
- エンゲージメント: コメント欄、SNSシェアボタン、ニュースレター登録
トラブルシューティング
問題1: Lighthouse スコアが上がらない
原因と対策:
1. **サードパーティスクリプトの影響**
- 対策: Partytown でWeb Worker化（実装済み）
- 検証: Lighthouse の「Third-party」セクション確認
2. **画像サイズが大きい**
- 対策: Astro の Image コンポーネントで自動最適化
- 検証: Network タブで実際のサイズ確認
3. **未使用CSS/JavaScript**
- 対策: PurgeCSS、Tree Shaking
- 検証: Coverage タブで確認
4. **サーバーレスポンス時間**
- 対策: CDN利用、静的ホスティング最適化
- 検証: TTFB（Time To First Byte）測定
問題2: アクセシビリティエラーが多い
よくあるエラーと修正:
1. **画像にalt属性がない**
```html
<!-- 修正前 -->
<img src="image.png">
<!-- 修正後 -->
<img src="image.png" alt="説明文">
コントラスト比不足
/* 修正前: コントラスト比 2.5:1 */ color: #999; background: #fff; /* 修正後: コントラスト比 4.7:1（WCAG AA準拠） */ color: #666; background: #fff;見出しレベルがスキップ
<!-- 修正前: H2の次にH4 --> <h2>見出し2</h2> <h4>見出し4</h4> <!-- 修正後: 階層を正しく --> <h2>見出し2</h2> <h3>見出し3</h3>
### 問題3: モバイルでのパフォーマンスが悪い
**対策:**
```markdown
1. **画像の遅延読み込み**
- ファーストビュー以外はlazy load
- ファーストビューはfetchpriority="high"
2. **フォントの最適化**
- WOFF2形式を使用
- font-display: swap
- 可変フォント（Variable Fonts）検討
3. **JavaScriptの削減**
- Astroの部分ハイドレーション活用
- 不要なライブラリの削除
リファレンスファイル
references/performance-optimization.md
パフォーマンス最適化の詳細ガイド:
- Core Web Vitals の各指標の改善方法
- リソース最適化のベストプラクティス
- Astro特有の最適化テクニック
- パフォーマンス測定ツールの使い方
references/accessibility.md
アクセシビリティ対応ガイド:
- WCAG 2.1 チェックリスト
- セマンティックHTMLのパターン集
- ARIA属性の正しい使い方
- スクリーンリーダー対応
references/ux-improvements.md
UX改善のアイデア集:
- エンゲージメント強化施策
- モバイルUXのベストプラクティス
- ダークモード実装ガイド
- マイクロインタラクション
references/seo-technical.md
技術SEOガイド:
- 構造化データの実装例
- メタタグ最適化
- サイトマップ・RSS
- クローラビリティ改善
references/analytics.md
分析・測定ガイド:
- KPIの設定方法
- Google Analytics イベント設定
- A/Bテストの実施方法
- レポート作成テンプレート
まとめ
このスキルは、テックブログのフロントエンドを総合的に改善し、PV数・滞在時間の向上、ユーザー満足度の改善、SEO最適化を実現する。
改善の優先順位:
- パフォーマンス: Core Web Vitals、画像最適化、リソース削減
- アクセシビリティ: セマンティックHTML、ARIA、キーボードナビゲーション
- UX: 読書進捗、関連記事、ダークモード
- SEO: 構造化データ、メタタグ、内部リンク
測定と改善: 定期的に効果を測定し、データに基づいて継続的に最適化を実施する。
Astroの活用: ゼロJavaScriptがデフォルトの思想を活かし、必要な部分のみインタラクティブにすることで、高速で使いやすいブログを実現する。