AIプロンプトで弁当箱グリッドのWebページをデザインする

AIを活用したApple風Bento Gridウェブページの設計

このプロンプトテンプレートは、AIを活用してモダンでミニマリストかつ高級感のある製品・サービス発表ページをデザインするための包括的なガイドです。Appleの象徴的なデザイン哲学にインスパイアされ、視覚的に魅力的なBento Gridレイアウトを用いて、コンパクトなシングルスクリーン体験を創出することに重点を置いています。このアプローチにより、すべての重要な情報が簡潔に、そして魅力的に提示され、新製品やサービスの紹介に最適です。

AIプロンプトの主要なデザイン原則：

1. Bento Gridレイアウト:

AIに様々なサイズのカードから構成されるグリッドを作成するよう指示してください。各カードには特定の情報カテゴリを含め、全体的にタイトでありながら窮屈でないレイアウトを確保します。これにより、可読性を損なうことなく情報密度を最大化します。

2. カードデザインの仕様:

• 角丸: すべてのカードは、柔らかくモダンな雰囲気のために、目立つ角丸（例：ボーダーラディウス20px）を特徴とする必要があります。
• 背景: ミニマリズムを維持するために、清潔感のある白または薄いグレーの背景を使用します。
• 影: カードにわずかな奥行きを与えるために、控えめな影の効果を適用します。
• ホバー効果: インタラクティブ性を高めるために、ホバー時にやさしい「浮き上がる」効果を実装します。

3. 配色:

ミニマルな配色を選び、主に白/薄いグレーの背景を活用します。アクセントカラーとしてグラデーションカラーを取り入れ、例えば、主要な要素を際立たせるために、薄い紫（#C084FC）から深い紫（#7E22CE）への滑らかな移行を使用します。

4. タイポグラフィと階層:

• 大きく太い数字/タイトル: グラデーションカラーを使用して、重要なデータポイントやメインタイトルを強調し、即座に注意を引きます。
• 中サイズのタイトル: カードのタイトルについては、内容カテゴリを明確かつ簡潔に示すようにします。
• 小さいテキスト: サポートとなる説明文には灰色を使用し、メインコンテンツを圧倒することなく補完するようにします。

5. グリッド内のコンテンツ構成:

グリッドの行に沿ってコンテンツを論理的に構成します。

• 最上段: 主要な発表、製品特徴、性能指標、または主要なセールスポイント用。
• 中央部: 製品仕様、技術詳細、コア機能に特化。
• 最下段: 使用ガイドラインと明確な結論または行動喚起を含めます。

6. 視覚要素:

視覚的な魅力と情報伝達を強化します。

• シンプルなアイコン: 様々な機能を明確に表現します。
• プログレスバー/チャート: 比較データを効果的に表示します。
• 視覚的リズム: グリッドとカードレイアウトを活用して、魅力的な視覚的フローを作成します。
• タグ: 分類情報をカプセル型タグで表示します。

7. レスポンシブデザイン:

生成されたページは、様々な画面サイズにシームレスに適応し、モバイルデバイスでも優れた可読性と視覚的な整合性を維持することが非常に重要です。

Apple風の参考点：

• 全体的なデザインは、Appleの公式製品仕様ページを模倣してください。
• 十分なホワイトスペースとクリーンな視覚要素を強調します。
• 冗長なテキストを最小限に抑え、数字と主要な特性を優先します。
• 重要なデータを強調するためにグラデーションカラーを活用します。
• 明確な視覚的区切りのために、カード間に適切な間隔を保ちます。

この詳細なプロンプトは、AIモデルが洗練された使いやすいウェブインターフェースを生成するのを支援し、美的魅力と機能的明瞭さを融合させることで、インパクトのある製品発表に最適です。