- プロンプト実行例
どんなアプリのデザイン仕様書を作成したいですか？
アプリ名
画面
デザイン仕様書：
ページレイアウトと構造
- ログインページ：
- ロゴとタイトルが中央に配置される
- ユーザー名とパスワードの入力フォームが垂直方向に並ぶ
- ログインボタンがフォームの下に配置される
- ダッシュボードページ：
- ナビゲーションバーがページ上部に固定配置される
- サイドバーが左側にあり、メニュー項目が垂直に表示される
- メインコンテンツがサイドバーの右側に表示される
- チャートがメインコンテンツ内に埋め込まれる
UI要素と配置
- ログインページ：
- ロゴ
- タイトル
- ユーザー名入力フォーム
- パスワード入力フォーム
- ログインボタン
- ダッシュボードページ：
- ナビゲーションバー：
- ロゴ
- ログアウトボタン
- サイドバー：
- ダッシュボード
- タスク管理
- レポート
- メインコンテンツ：
- チャート
- ナビゲーションバー：
スタイリングとカラースキーム
- ログインページ：
- 背景色: #f5f5f5
- ボタンカラー: #007bff
- ダッシュボードページ：
- ナビゲーションバー背景色: #333
- ナビゲーションアイテムカラー: #fff
- サイドバー背景色: #f8f9fa
- メインコンテンツ背景色: #fff
- チャートカラー: カラーパレットを使用
インタラクションとアニメーション
- ログインボタンをクリックすると、ログイン処理が開始される
- チャートにマウスオーバーすると、詳細情報がポップアップで表示される
- ナビゲーションアイテムをクリックすると、対応するコンテンツがメインエリアに表示される
追加技術仕様
- CSS Flexboxを使用してレイアウトを調整する
- チャートにはchart.jsライブラリを使用して作成する
<design_specification> こちらの設計に沿って、HTMLとCSSを使用してログインページとダッシュボードページのデザインを実装します。Flexboxを使ったレイアウト調整とchart.jsライブラリを使用したチャート作成を行います。スタイリングは指定されたカラースキームに従い、インタラクションやアニメーションを実装します。 </design_specification>
コメント 0
他のプロンプトもチェック
メール作成
ビジネス文章の作成をサポートするプロンプトです。 メールの原文を簡便に考えていただき、それを投げるだけでビジネス文章が作成されます。11037493GPTs
マーケティング一般
Xで発信をしている人必見。あなたのXアカウントを超詳細に分析するツールです。よく見られやすい時間帯などのデータだけでなく、改善案まで提案してくれます。 #X #twitter #sns #インスタ61195673物語・脚本・プロット
推奨モデル - GPT 4oリアルで魅力的な日本人女性のポートレートを生成するために最適化されたプロンプトです。AIらしい完璧さを排除し、自然で親しみやすい女性像を細部にわたり描写。感情や心理的な魅力を織り交ぜたシーンを通じて、観る者に強い印象と共感を与えます。#Dalle3 ■描くシーン例 ・都会のカフェテラスでの静かなひととき ・春の公園でベンチに座っているシーン ・曇りの日、小さな書店で本を選んでいる場面 ・夜景の見えるバルコニーでくつろいでいる瞬間 ・季節の花々に囲まれた庭園での散策 ・冬のカフェで窓際に座り、温かい飲み物を楽しむ様子 ・浜辺で波音を聞きながら読書している姿 ・地元の市場で野菜を選んでいるシーン ・秋の紅葉の中、木の下で考え事をしているところ ・自宅のリビングでソファに座り、ペットと一緒に過ごす時間 ・雑貨店で可愛い小物に見入っているシーン ・雨の日、傘をさして通りを歩く瞬間 ・森の中の小道をゆっくりと歩く姿 ・夜の街でライトアップを楽しむ様子 ・孤独を楽しむためのカフェの片隅に座っている場所 ・美術館の一角で静かに絵を観賞しているシーン ・曇り空の下、バルコニーでのティータイム ・早朝の砂浜でヨガをしている瞬間 ・川沿いのカフェでランチをしている風景 ・自然豊かな山の中でハイキングをしているところ211097
