skill-webdesign

Web Designer Skill

デザインの細部にこだわりながら、レスポンシブで保守しやすいウェブサイトを作成するための専門的なガイダンスです。

基本原則

デザインの一貫性

• まずプロジェクトのスタイルガイドを読み込みます。references/styleguide.md またはプロジェクトのデザイントークンを確認してください
• 生の値（#1E3A5F）ではなく、意味のある色名（--color-navy）を使用します
• タイポグラフィの階層を維持します。ページごとにディスプレイサイズは1つにし、見出しの段階を一貫させます
• 余白には任意の値ではなく、デザイントークン（section-gap、card-padding）を使用します

モバイルファーストのレスポンシブデザイン

• モバイル向けレイアウトから始め、大きな画面向けに段階的に拡張します
• ブレークポイント：sm:640px、md:768px、lg:1024px、xl:1280px
• タッチターゲット：インタラクティブ要素は最小44x44pxにします
• テスト：幅320pxで横スクロールせずにコンテンツを読めることを確認します

アクセシビリティの必須要件

• 色のコントラスト比：本文テキストは4.5:1、大きなテキストは3:1
• フォーカス状態：すべてのインタラクティブ要素で視認できるようにします
• セマンティックHTML：適切な見出し階層、ランドマーク、フォームラベルを使用します
• 画像：意味のある代替テキストを設定するか、装飾用の場合はaria-hiddenを設定します

技術スタック：Astro + Tailwind + Cloudflare

プロジェクト構成

src/
├── components/
│   └── ui/           # Reusable UI components
├── layouts/          # Page layouts (BaseLayout.astro)
├── pages/            # Routes - each .astro = a page
├── content/          # Markdown/MDX for content collections
├── styles/           # Global CSS, Tailwind config
└── assets/           # Images, fonts (processed by Astro)
public/               # Static assets (copied as-is)

コンポーネントのパターン

Astroコンポーネント - 静的またはインタラクションが少ないUIに使用します：

---
interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}
const { variant = 'primary', size = 'md' } = Astro.props;
---
<button class:list={['btn', `btn-${variant}`, `btn-${size}`]}>
  <slot />
</button>

コンテンツコレクション - ブログ記事、レポート、事例紹介に使用します：

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const posts = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.date(),
    featured: z.boolean().default(false),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { posts };

自動化パターン

ハードコードしない - データ駆動型のアプローチを使用します：

---
// ❌ Hardcoded featured posts
const featured = [{ title: "Post 1" }, { title: "Post 2" }];

// ✅ Query from content collection
import { getCollection } from 'astro:content';
const featured = await getCollection('posts', ({ data }) => data.featured);
---

動的な日付：

---
// ❌ Hardcoded year
const year = "2024";

// ✅ Dynamic
const year = new Date().getFullYear();
---
<footer>© {year} Company Name</footer>

環境ベースの設定：

// astro.config.mjs
export default defineConfig({
  site: import.meta.env.PROD 
    ? 'https://example.com' 
    : 'http://localhost:4321',
});

ランディングページの構成

必須セクション

1. ヒーロー - 明確な価値提案と、主要なCTAを1つ
2. ソーシャルプルーフ - ロゴ、推薦の声、指標
3. 機能／メリット - アイコン付きの主なポイントを3～4つ
4. 仕組み - シンプルな3ステップのプロセス
5. CTAセクション - フッターの前にアクションを促します
6. フッター - ナビゲーション、法的リンク、著作権表示

SEOチェックリスト

• 固有の<title>（50～60文字）と<meta name="description">（150～160文字）
• ソーシャル共有用のOpen Graphタグ
• canonical URLの設定
• 組織／製品向けの構造化データ（JSON-LD）
• Sitemap.xmlの生成
• robots.txtの設定

パフォーマンス目標

• Lighthouse Performance：>90
• First Contentful Paint：<1.5s
• Cumulative Layout Shift：<0.1
• ファーストビュー以降の画像にはloading="lazy"を使用します
• WebPとフォールバックを指定した<picture>を優先します

ワークフロー

1. 開始前：プロジェクトにデザインシステムがある場合は、references/styleguide.mdを読み込みます
2. コンポーネントの作成：新しいコンポーネントを作成する前に、既存のUIコンポーネントを確認します
3. スタイリング：既存のデザイントークンを使用します。必要に応じて、スタイルガイドへの追加を提案します
4. コンテンツ：繰り返し使用するコンテンツタイプには、コンテンツコレクションを使用します
5. テスト：モバイルレイアウト、アクセシビリティ、パフォーマンスを確認します

参考資料

• references/styleguide.md - Fund Investigatorのデザインシステム（色、タイポグラフィ、コンポーネント）
• references/astro-patterns.md - Astroでよく使われるパターンと注意点