- プロンプト実行例
どんなアプリのデザイン仕様書を作成したいですか？
アプリ名
画面
デザイン仕様書：
ページレイアウトと構造
- ログインページ：
- ロゴとタイトルが中央に配置される
- ユーザー名とパスワードの入力フォームが垂直方向に並ぶ
- ログインボタンがフォームの下に配置される
- ダッシュボードページ：
- ナビゲーションバーがページ上部に固定配置される
- サイドバーが左側にあり、メニュー項目が垂直に表示される
- メインコンテンツがサイドバーの右側に表示される
- チャートがメインコンテンツ内に埋め込まれる
UI要素と配置
- ログインページ：
- ロゴ
- タイトル
- ユーザー名入力フォーム
- パスワード入力フォーム
- ログインボタン
- ダッシュボードページ：
- ナビゲーションバー：
- ロゴ
- ログアウトボタン
- サイドバー：
- ダッシュボード
- タスク管理
- レポート
- メインコンテンツ：
- チャート
- ナビゲーションバー：
スタイリングとカラースキーム
- ログインページ：
- 背景色: #f5f5f5
- ボタンカラー: #007bff
- ダッシュボードページ：
- ナビゲーションバー背景色: #333
- ナビゲーションアイテムカラー: #fff
- サイドバー背景色: #f8f9fa
- メインコンテンツ背景色: #fff
- チャートカラー: カラーパレットを使用
インタラクションとアニメーション
- ログインボタンをクリックすると、ログイン処理が開始される
- チャートにマウスオーバーすると、詳細情報がポップアップで表示される
- ナビゲーションアイテムをクリックすると、対応するコンテンツがメインエリアに表示される
追加技術仕様
- CSS Flexboxを使用してレイアウトを調整する
- チャートにはchart.jsライブラリを使用して作成する
<design_specification> こちらの設計に沿って、HTMLとCSSを使用してログインページとダッシュボードページのデザインを実装します。Flexboxを使ったレイアウト調整とchart.jsライブラリを使用したチャート作成を行います。スタイリングは指定されたカラースキームに従い、インタラクションやアニメーションを実装します。 </design_specification>
コメント 0
他のプロンプトもチェック
チャットボット
推奨モデル - GPT 4o一つの質問に答えるだけで、瞬時にあなたの知能レベルがわかる。学校の偏差値とかテレビ番組のちんけな謎解きクイズとかそんなものはIQとは無関係。最新の心理学研究と脳科学に基づいた、信頼性の高いIQ測定アルゴリズムを採用したこのプロンプトでこそ、あなたの化けの皮が剥がれる。 自尊心を傷つけられたくなければ、使用を控えるように。102677情報収集
推奨モデル - GPT 4oPREP法で論理的に文章を構成します！yaml形式も用いることもあります！018119画像生成
SNS投稿
推奨モデル - DALL•E 3幻想的な異世界への扉が開かれる瞬間を捉えた、神秘的な背景素材です。空間を超えたビジュアルが、見る者を別世界へと引き込み、日常の中に非日常のスパイスを加えます。 #### 特徴： - **汎用性抜群** SNSアイコン、YouTube動画の背景、プレゼン資料、デジタルアートなど、あらゆるシーンで活用できます。どんなコンテンツにも神秘的な雰囲気をプラスできるため、使い方は無限大です。 - **高解像度で美麗な仕上がり** 高解像度で作成されているため、細部までクリアで美しい仕上がりを実現。印刷物にもデジタルコンテンツにも最適です。 - **編集しやすい設計** 背景がシンプルかつクリーンなので、文字や画像を重ねても視認性が高く、カスタマイズも簡単。独自のデザインやアイディアを自由に加えて、あなただけのオリジナル作品を作り上げることができます。 #### こんな方におすすめ： - プロジェクトに**インパクト**を持たせたいデザイナーやクリエイター - **視覚的に印象的なアイコン**やバナーを作りたいSNSユーザー - プレゼン資料に**独自性**や**魅力**を持たせたいビジネスパーソン この背景素材を使えば、神秘的で幻想的な異空間が、あなたのクリエイティブな世界を彩ります。あなたのアイデアを新たな次元へと引き上げる、特別な素材をぜひお試しください！2019178
