どんなアプリのデザイン仕様書を作成したいですか？

デザイン仕様書：

ページレイアウトと構造

• ログインページ：
  • ロゴとタイトルが中央に配置される
  • ユーザー名とパスワードの入力フォームが垂直方向に並ぶ
  • ログインボタンがフォームの下に配置される
• ダッシュボードページ：
  • ナビゲーションバーがページ上部に固定配置される
  • サイドバーが左側にあり、メニュー項目が垂直に表示される
  • メインコンテンツがサイドバーの右側に表示される
  • チャートがメインコンテンツ内に埋め込まれる

UI要素と配置

• ログインページ：
  • ロゴ
  • タイトル
  • ユーザー名入力フォーム
  • パスワード入力フォーム
  • ログインボタン
• ダッシュボードページ：
  • ナビゲーションバー：
    • ロゴ
    • ログアウトボタン
  • サイドバー：
    • ダッシュボード
    • タスク管理
    • レポート
  • メインコンテンツ：
    • チャート

スタイリングとカラースキーム

• ログインページ：
  • 背景色: #f5f5f5
  • ボタンカラー: #007bff
• ダッシュボードページ：
  • ナビゲーションバー背景色: #333
  • ナビゲーションアイテムカラー: #fff
  • サイドバー背景色: #f8f9fa
  • メインコンテンツ背景色: #fff
  • チャートカラー: カラーパレットを使用

インタラクションとアニメーション

• ログインボタンをクリックすると、ログイン処理が開始される
• チャートにマウスオーバーすると、詳細情報がポップアップで表示される
• ナビゲーションアイテムをクリックすると、対応するコンテンツがメインエリアに表示される

追加技術仕様

• CSS Flexboxを使用してレイアウトを調整する
• チャートにはchart.jsライブラリを使用して作成する

<design_specification> こちらの設計に沿って、HTMLとCSSを使用してログインページとダッシュボードページのデザインを実装します。Flexboxを使ったレイアウト調整とchart.jsライブラリを使用したチャート作成を行います。スタイリングは指定されたカラースキームに従い、インタラクションやアニメーションを実装します。 </design_specification>