デザインガイドライン

このプロジェクトで使用するデザインパターンと実装ルール。

アイコンの実装ルール

原則: CSS Borderで描画する

Unicode文字（▶、▼など）やSVGの代わりに、CSSのborder trickを使用してアイコンを描画する。

理由:

• •フォントに依存しない（環境によって絵文字風に表示される問題を回避）
• •ファイルサイズが小さい
• •currentColorでテキスト色に連動
• •スムーズなアニメーションが可能

アコーディオン開閉アイコン

パターン: ▶ → ▼（右向き→下向き）

• •macOS Finder、VS Code等で広く使われるパターン
• •「展開方向」を示す（下に開くから下向き）

実装例: src/pages/index.astro の .year-heading::before を参照

スタイリング原則

• •ブレークポイント: 720px以下でモバイル表示
• •画像サイズ: ブログ記事内は最大幅80%、中央揃え
• •アニメーション: transition: 0.2s ease を基本とする
• •色の継承: currentColorを使用してテキスト色に連動させる