個人ブログのスタイル戦略について当ブログで考えていること
まず前提としてTailwindを使っています。
- 機能とスタイルは分離する
- Tailwindはユーティリティクラスでスタイルを直接HTMLに書くが、あくまで機能とスタイルは分離する
- 例えばブログ記事一覧ページの記事カードは
<article>タグで囲み、Tailwindクラスで見た目を整えるが、記事カードの構造自体はコンポーネントとして分離する
- 再利用可能なコンポーネントを作る
- ボタン、カード、モーダルなどのUI要素は再利用可能なコンポーネントとして定義し、Tailwindクラスを適用する
- レスポンシブデザインを考慮する
- Tailwindのレスポンシブユーティリティを活用して、モバイルからデスクトップまで快適に閲覧できるようにする
- ダークモード対応
- Tailwindのダークモード機能を利用して、ユーザーの好みに応じたテーマ切り替えを実装する
- アクセシビリティを考慮する
- 色のコントラスト、フォーカススタイル、ARIA属性など、アクセシビリティに配慮したスタイルを適用する
- 一貫性のあるデザインシステムを構築する
- カラーパレット、タイポグラフィ、スペーシングなどのデザイン要素を統一し、ブログ全体で一貫性のある見た目を保つ