- プロンプト実行例
![デザイン仕様書を作成プロンプト](https://oshiete.ai/images/thumbnail_options/gradation/gradation15.jpg?w=96&h=96)
どんなアプリのデザイン仕様書を作成したいですか?
![](/public/default_user_icon.gif)
アプリ名
画面
![デザイン仕様書を作成プロンプト](https://oshiete.ai/images/thumbnail_options/gradation/gradation15.jpg?w=96&h=96)
デザイン仕様書:
ページレイアウトと構造
- ログインページ:
- ロゴとタイトルが中央に配置される
- ユーザー名とパスワードの入力フォームが垂直方向に並ぶ
- ログインボタンがフォームの下に配置される
- ダッシュボードページ:
- ナビゲーションバーがページ上部に固定配置される
- サイドバーが左側にあり、メニュー項目が垂直に表示される
- メインコンテンツがサイドバーの右側に表示される
- チャートがメインコンテンツ内に埋め込まれる
UI要素と配置
- ログインページ:
- ロゴ
- タイトル
- ユーザー名入力フォーム
- パスワード入力フォーム
- ログインボタン
- ダッシュボードページ:
- ナビゲーションバー:
- ロゴ
- ログアウトボタン
- サイドバー:
- ダッシュボード
- タスク管理
- レポート
- メインコンテンツ:
- チャート
- ナビゲーションバー:
スタイリングとカラースキーム
- ログインページ:
- 背景色: #f5f5f5
- ボタンカラー: #007bff
- ダッシュボードページ:
- ナビゲーションバー背景色: #333
- ナビゲーションアイテムカラー: #fff
- サイドバー背景色: #f8f9fa
- メインコンテンツ背景色: #fff
- チャートカラー: カラーパレットを使用
インタラクションとアニメーション
- ログインボタンをクリックすると、ログイン処理が開始される
- チャートにマウスオーバーすると、詳細情報がポップアップで表示される
- ナビゲーションアイテムをクリックすると、対応するコンテンツがメインエリアに表示される
追加技術仕様
- CSS Flexboxを使用してレイアウトを調整する
- チャートにはchart.jsライブラリを使用して作成する
<design_specification> こちらの設計に沿って、HTMLとCSSを使用してログインページとダッシュボードページのデザインを実装します。Flexboxを使ったレイアウト調整とchart.jsライブラリを使用したチャート作成を行います。スタイリングは指定されたカラースキームに従い、インタラクションやアニメーションを実装します。 </design_specification>
コメント 0
他のプロンプトもチェック
画像生成
キャラクター作成
推奨モデル - DALL•E 3▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 AIを使ってSNSのアイコンに最適なシンプルでちょうどいいおしゃれな一筆書きアートが出力できるツールです。 あなたの顔を一筆書きでAIがイラスト化します。 線が細くおしゃれな印象を与えるので、センスのいいLINEトプ画を作成したい人におすすめ。 #LINE #instagram #TikTok #sns #twitter6259184資料作成
このプロンプトは、新人インサイドセールススタッフが新規顧客に電話で 効果的にアプローチし、アポイントメントを確実に取得するための トークスクリプト及び戦略を提供します。 自社のビジョンとサービスの特徴を明確に伝え、顧客のニーズを引き出しながら、 異論に対しても自信を持って対応できるような実践的な内容を心掛けています。30796