|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
|
|
|
"translation_date": "2025-10-24T15:11:33+00:00",
|
|
|
"source_file": "7-bank-project/2-forms/assignment.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# モダンCSSで銀行アプリをスタイリング
|
|
|
|
|
|
## プロジェクト概要
|
|
|
|
|
|
機能的な銀行アプリを、モダンなCSS技術を活用して視覚的に魅力的でプロフェッショナルなウェブアプリに変身させましょう。ユーザー体験を向上させる統一されたデザインシステムを作成し、アクセシビリティとレスポンシブデザインの原則を維持します。
|
|
|
|
|
|
この課題では、現代的なウェブデザインパターンを適用し、一貫した視覚的アイデンティティを実装し、ユーザーが魅力的で直感的に操作できるインターフェースを作成することが求められます。
|
|
|
|
|
|
## 手順
|
|
|
|
|
|
### ステップ1: スタイルシートのセットアップ
|
|
|
|
|
|
**CSSの基盤を作成する:**
|
|
|
|
|
|
1. **新しいファイル** `styles.css` をプロジェクトのルートに作成します。
|
|
|
2. **スタイルシートをリンク** `index.html` ファイルに追加します:
|
|
|
```html
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
```
|
|
|
|
|
|
3. **CSSリセットとモダンなデフォルト**から始めます:
|
|
|
```css
|
|
|
/* Modern CSS reset and base styles */
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
line-height: 1.6;
|
|
|
color: #333;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
|
|
|
### ステップ2: デザインシステムの要件
|
|
|
|
|
|
**以下の基本的なデザイン要素を実装してください:**
|
|
|
|
|
|
#### カラーパレット
|
|
|
- **プライマリカラー**: ボタンやハイライトに使用するプロフェッショナルな色を選択
|
|
|
- **セカンダリカラー**: アクセントやセカンダリアクションに適した補色
|
|
|
- **ニュートラルカラー**: テキスト、ボーダー、背景に使用するグレー
|
|
|
- **成功/エラーカラー**: 成功状態には緑、エラーには赤を使用
|
|
|
|
|
|
#### タイポグラフィ
|
|
|
- **見出しの階層**: H1、H2、H3要素間の明確な区別
|
|
|
- **本文テキスト**: 読みやすいフォントサイズ（最低16px）と適切な行間
|
|
|
- **フォームラベル**: 明確でアクセシブルなテキストスタイリング
|
|
|
|
|
|
#### レイアウトとスペーシング
|
|
|
- **一貫したスペーシング**: スペーシングスケール（8px、16px、24px、32px）を使用
|
|
|
- **グリッドシステム**: フォームやコンテンツセクションの整理されたレイアウト
|
|
|
- **レスポンシブデザイン**: モバイルファーストアプローチとブレークポイント
|
|
|
|
|
|
### ステップ3: コンポーネントのスタイリング
|
|
|
|
|
|
**以下の特定のコンポーネントをスタイリングしてください:**
|
|
|
|
|
|
#### フォーム
|
|
|
- **入力フィールド**: プロフェッショナルなボーダー、フォーカス状態、バリデーションスタイリング
|
|
|
- **ボタン**: ホバーエフェクト、無効状態、ローディングインジケーター
|
|
|
- **ラベル**: 明確な位置付けと必須フィールドのインジケーター
|
|
|
- **エラーメッセージ**: 視覚的に目立つエラースタイリングと役立つメッセージ
|
|
|
|
|
|
#### ナビゲーション
|
|
|
- **ヘッダー**: 清潔でブランド化されたナビゲーションエリア
|
|
|
- **リンク**: 明確なホバー状態とアクティブインジケーター
|
|
|
- **ロゴ/タイトル**: 独自のブランド要素
|
|
|
|
|
|
#### コンテンツエリア
|
|
|
- **セクション**: 異なるエリア間の明確な視覚的分離
|
|
|
- **カード**: カードベースのレイアウトを使用する場合、シャドウやボーダーを含む
|
|
|
- **背景**: 適切なホワイトスペースと控えめな背景の使用
|
|
|
|
|
|
### ステップ4: 拡張機能（オプション）
|
|
|
|
|
|
**以下の高度な機能を実装することを検討してください:**
|
|
|
- **ダークモード**: ライトテーマとダークテーマの切り替え
|
|
|
- **アニメーション**: 控えめなトランジションやマイクロインタラクション
|
|
|
- **ローディング状態**: フォーム送信中の視覚的フィードバック
|
|
|
- **レスポンシブ画像**: 異なる画面サイズに最適化された画像
|
|
|
|
|
|
## デザインのインスピレーション
|
|
|
|
|
|
**モダンな銀行アプリの特徴:**
|
|
|
- **清潔でミニマルなデザイン**と十分なホワイトスペース
|
|
|
- **プロフェッショナルなカラースキーム**（ブルー、グリーン、または洗練されたニュートラルカラー）
|
|
|
- **明確な視覚的階層**と目立つコールトゥアクションボタン
|
|
|
- **WCAGガイドラインに準拠したアクセシブルなコントラスト比**
|
|
|
- **すべてのデバイスで機能するモバイルレスポンシブレイアウト**
|
|
|
|
|
|
## 技術要件
|
|
|
|
|
|
### CSSの構成
|
|
|
```css
|
|
|
/* 1. CSS Custom Properties (Variables) */
|
|
|
:root {
|
|
|
--primary-color: #007bff;
|
|
|
--secondary-color: #6c757d;
|
|
|
/* Add more variables */
|
|
|
}
|
|
|
|
|
|
/* 2. Base Styles */
|
|
|
/* Reset, typography, general elements */
|
|
|
|
|
|
/* 3. Layout */
|
|
|
/* Grid, flexbox, positioning */
|
|
|
|
|
|
/* 4. Components */
|
|
|
/* Forms, buttons, cards */
|
|
|
|
|
|
/* 5. Utilities */
|
|
|
/* Helper classes, responsive utilities */
|
|
|
|
|
|
/* 6. Media Queries */
|
|
|
/* Responsive breakpoints */
|
|
|
```
|
|
|
|
|
|
|
|
|
### アクセシビリティ要件
|
|
|
- **色のコントラスト**: 通常のテキストで少なくとも4.5:1の比率を確保
|
|
|
- **フォーカスインジケーター**: キーボードナビゲーションのための視覚的なフォーカス状態
|
|
|
- **フォームラベル**: 入力と適切に関連付けられていること
|
|
|
- **レスポンシブデザイン**: 320pxから1920px幅の画面で使用可能
|
|
|
|
|
|
## 評価基準
|
|
|
|
|
|
| 基準 | 優秀 (A) | 良好 (B) | 発展途上 (C) | 改善が必要 (F) |
|
|
|
|------|----------|----------|--------------|----------------|
|
|
|
| **デザインシステム** | 一貫した色、タイポグラフィ、スペーシングを備えた包括的なデザインシステムを実装 | 一貫したスタイリングで明確なデザインパターンと良好な視覚的階層を使用 | 基本的なスタイリングが適用されているが、一部に一貫性の問題やデザイン要素の欠如 | 最小限のスタイリングで、一貫性がないか矛盾したデザイン選択 |
|
|
|
| **ユーザー体験** | 直感的でプロフェッショナルなインターフェースを作成し、優れた使いやすさと視覚的魅力を提供 | 明確なナビゲーションと読みやすいコンテンツで良好なユーザー体験を提供 | 基本的な使いやすさがあるが、改善の余地がある | 使いにくく、ナビゲートや読み取りが困難 |
|
|
|
| **技術的実装** | モダンなCSS技術を使用し、コード構造が整理され、ベストプラクティスに従う | CSSを効果的に実装し、良好な構成と適切な技術を使用 | CSSは正しく機能するが、構成やモダンなアプローチが不足している可能性がある | 技術的な問題やブラウザ互換性の問題がある不十分なCSS実装 |
|
|
|
| **レスポンシブデザイン** | すべてのデバイスサイズで美しく機能する完全なレスポンシブデザイン | 一部の画面サイズで軽微な問題があるが、良好なレスポンシブ動作 | 基本的なレスポンシブ実装で、一部のレイアウトに問題がある | レスポンシブでない、またはモバイルデバイスで重大な問題がある |
|
|
|
| **アクセシビリティ** | WCAGガイドラインを満たし、優れたキーボードナビゲーションとスクリーンリーダーサポートを提供 | 適切なコントラストとフォーカスインジケーターを備えた良好なアクセシビリティプラクティス | 基本的なアクセシビリティを考慮しているが、一部の要素が欠けている | アクセシビリティが不十分で、障害のあるユーザーにとって使いにくい |
|
|
|
|
|
|
## 提出ガイドライン
|
|
|
|
|
|
**提出物に含めるもの:**
|
|
|
- **styles.css**: 完成したスタイルシート
|
|
|
- **更新されたHTML**: 行ったHTMLの変更
|
|
|
- **スクリーンショット**: デスクトップとモバイルでのデザインを示す画像
|
|
|
- **README**: デザイン選択とカラーパレットの簡単な説明
|
|
|
|
|
|
**ボーナスポイント:**
|
|
|
- **CSSカスタムプロパティ**を使用したメンテナブルなテーマ設定
|
|
|
- **高度なCSS機能**（Grid、Flexbox、CSSアニメーションなど）
|
|
|
- **パフォーマンスの考慮**（最適化されたCSSと最小限のファイルサイズ）
|
|
|
- **クロスブラウザテスト**で異なるブラウザ間の互換性を確保
|
|
|
|
|
|
> 💡 **プロのヒント**: まずモバイルデザインから始め、次に大きな画面向けに拡張してください。このモバイルファーストアプローチは、すべてのデバイスでアプリが適切に動作し、モダンなウェブ開発のベストプラクティスに従うことを保証します。
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責事項**:
|
|
|
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤った解釈について、当方は責任を負いかねます。 |
