- プロンプト実行例
どんなアプリのデザイン仕様書を作成したいですか？
アプリ名
画面
デザイン仕様書：
ページレイアウトと構造
- ログインページ：
- ロゴとタイトルが中央に配置される
- ユーザー名とパスワードの入力フォームが垂直方向に並ぶ
- ログインボタンがフォームの下に配置される
- ダッシュボードページ：
- ナビゲーションバーがページ上部に固定配置される
- サイドバーが左側にあり、メニュー項目が垂直に表示される
- メインコンテンツがサイドバーの右側に表示される
- チャートがメインコンテンツ内に埋め込まれる
UI要素と配置
- ログインページ：
- ロゴ
- タイトル
- ユーザー名入力フォーム
- パスワード入力フォーム
- ログインボタン
- ダッシュボードページ：
- ナビゲーションバー：
- ロゴ
- ログアウトボタン
- サイドバー：
- ダッシュボード
- タスク管理
- レポート
- メインコンテンツ：
- チャート
- ナビゲーションバー：
スタイリングとカラースキーム
- ログインページ：
- 背景色: #f5f5f5
- ボタンカラー: #007bff
- ダッシュボードページ：
- ナビゲーションバー背景色: #333
- ナビゲーションアイテムカラー: #fff
- サイドバー背景色: #f8f9fa
- メインコンテンツ背景色: #fff
- チャートカラー: カラーパレットを使用
インタラクションとアニメーション
- ログインボタンをクリックすると、ログイン処理が開始される
- チャートにマウスオーバーすると、詳細情報がポップアップで表示される
- ナビゲーションアイテムをクリックすると、対応するコンテンツがメインエリアに表示される
追加技術仕様
- CSS Flexboxを使用してレイアウトを調整する
- チャートにはchart.jsライブラリを使用して作成する
<design_specification> こちらの設計に沿って、HTMLとCSSを使用してログインページとダッシュボードページのデザインを実装します。Flexboxを使ったレイアウト調整とchart.jsライブラリを使用したチャート作成を行います。スタイリングは指定されたカラースキームに従い、インタラクションやアニメーションを実装します。 </design_specification>
コメント 0
他のプロンプトもチェック
GPTs
キャラクター作成
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 あなたの顔写真を送付するだけで顔面偏差値を数字で出力してくれます。各項目別に点数付けしてくれて、顔の強みや特徴まで分析してくれるツール。客観的評価を知りたい方はぜひ使ってみてください。621.32K4.68KGPTs
物語・脚本・プロット
お誕生日(年月日)とお名前（ひらがな）、そして現在のお悩みや気になることなどを教えてください。 数秘術は、古代から使われているもので、数字には特別な力や意味があると信じられています。 自分のライフパスナンバーや運命数を知ることで、新しい気づきや自己理解が深まるかもしれません。10117420画像生成
キャラクター作成
推奨モデル - DALL•E 3あなたの運命の人の顔を描き出し、その未来の一瞬を垣間見ることができます。もしかしたら、あなたの運命を変える第一歩になるかもしれません。 未来のパートナーの顔、見てみたくないですか？ このプロンプトでは、「相手の性別」と「自分の誕生日」、「好きな数字」を入力するだけで、運命の人の顔が生成されます。恋愛の喜びや期待感を胸に、未来の相手との出会いを感じてみてください。 生成された顔写真は、30歳の時点の姿を基にしていますので、今とは少し違うかもしれません。しかし、その顔には、あなたと繋がる見えない糸が宿っているはずです。 どう使うかはあなた次第！ - SNSの投稿ネタとして、友達やフォロワーとの会話に新たな風を。 - プロフィールアイコンとして、他にはないユニークな顔写真を設定。 - 恋愛のヒントとして、未来のパートナーを思い描くツールとして活用。 - ロマンチックな会話のきっかけにして、現在のパートナーや友人との話題に。 - 創作活動のインスピレーションとして、物語やイラストのキャラクター設定に。 - 自己成長のためのツールとして、未来の自分へのメッセージや目標設定に。 これはただのプロンプトではありません。あなたの未来を映し出す鏡です。 このツールが描く顔は、運命の糸であなたと繋がる存在かもしれません。今すぐ、未来の恋に向けた第一歩を踏み出してみませんか？0027558
