🎨シンプルで典雅なアートページ
指示
ユーザーが提供したコンテンツに基づいてウェブページを作成します。ウェブページのスタイル要件は以下のとおりです。
### I. ビジュアルスタイルポジショニング - **芸術的な手描きスタイル**: 線画スタイルを採用し、現代的なデジタルデザインと伝統的な手描きの美学を融合させています。 - **配色**: ベースカラーとしてニュートラルカラー（オフホワイト/ライトグレー）を使用し、メインテキストにはダークグレー、視覚的な焦点カラーとしてオレンジレッド（アクセントカラー）を使用しています。 - **ブランドトーン**: 洗練された、芸術的で温かみのあるトーンで、目の肥えたユーザー層をターゲットにしています。 ### II.レイアウト構造の原則 **ヒーローセクション（最初の画面デザイン）** - 左右の列レイアウト（60:40の黄金比） - 左側： - 特大のタイトル（ディスプレイフォント、72～96px）、濃いフォント、強い視覚的インパクト - アクセントカラーで強調表示された主要データ（例：「15都市、4749の場所」） - コアバリュープロポジションを述べる簡潔で力強いサブタイトル - 十分な余白で高級感を演出 - 右側： - カスタマイズされた手描きのイラスト、視覚スペースの50%を占める - 一貫したイラストスタイル：線画＋ローカルカラーのアクセント - ブランドストーリーに深く統合されたイラストコンテンツ - **ナビゲーションバーのデザイン** - ミニマルなトップナビゲーション、固定位置 - ロゴ＋2～3個のメインメニュー項目 - 右側のアイコングループ（検索/お気に入り/メニュー） - 微妙な影のある透明または純白の背景 - **コンテンツカードエリア** - カードグリッドレイアウト（3～4列、レスポンシブ） - 各カードには以下が含まれます： - タイトル (見出し 3、32-40px) - 説明 (2-3 行、16-18px、行の高さ 1.6) - 手描きのイラスト (メインのビジュアル スタイルと一致) - 明るい背景 (#F5F3F0)、角丸 (8-12px) - ホバー状態: わずかに上昇 + 影が濃くなる - ### III. イラスト システム仕様 **イラスト作成ガイドライン** 1. 2. **線処理**: - 1-2px の不規則な手描きの線を使用して、リアルな絵画の質感をシミュレートします - 人工的なタッチで滑らかな線を維持し、過度に機械的にならないようにします。 3. **色の使用:** - 80% のグレーの線 + 20% のブランドカラーの塗りつぶし - オレンジレッドは要素 (人物、窓、主要な建物) を強調するためにのみ使用 - 背景にはグラデーションベージュ (#FDFBF7 → #F5F1EB) を使用 - 5. **シーン構成:** - 都市のシーン: ランドマークとなる建物と日常生活のシーンをブレンド - 俯瞰または等角投影 - 物語性と親密さを高めるために小さな人物を追加 - 7. **詳細密度:** - 豊かな前景の詳細、適度に簡略化された中景、輪郭線付きの背景 - 視覚的な階層を維持し、重要な情報に目を誘導 - 9. ### IV.フォント システム - **表示フォント (タイトル):** セリフ体、重厚で力強い (例: Freight Display、Tiempos) - **本文フォント (本文):** サンセリフ体、非常に読みやすい (例: Inter、Manrope) - **フォント サイズ比率**: モジュラー スケール (1.25 または 1.333) を使用 - - **フォント ウェイト レベル**: ライト (300) / レギュラー (400) / ミディアム (500) / ボールド (700) - ### V. インタラクションの詳細 - - **マイクロ アニメーション**: カードはホバー時に 4〜8px 上に浮き上がり、トランジション時間は 300〜400ms - - **読み込みステータス**: スケルトン スクリーンを使用してブランド トーンを維持 - - **レスポンシブ ブレークポイント**: - - デスクトップ: 1440px+ - - タブレット: 768〜1439px - - モバイル: 375-767px - - ### VI. デザイン出力要件 各デザイン出力には以下を含める必要があります。 1. 2. 明確な視覚的階層 (サイズ/色/余白によって実現) 3. 4. 少なくとも 1 つのカスタムイラスト (コンテンツに深く関連し、Nano Banana Pro を使用して生成) 5. 6. 2～3 色のアクセントカラーハイライト (120px を超えない) 7. 8. 十分な余白 (セクション間隔 ≥ 120px) 9. 10. 明確なユーザーアクションパス 11. --- **デザイン哲学**: ブランドの独自性と温かさを伝えるために、芸術的な視覚言語を使用します。すべてのピクセルは、単に機能を示すのではなく、ストーリーを語る役割を果たします。デザインは、冷たい商業製品ではなく、「これは人生を大切にする人々のためのものです」とユーザーに感じさせる必要があります。
ウェブページ上のイラストはすべてnano banana proで作成されました。
説明
おすすめした人
nene@YouMind
このスキルをおすすめする理由
このスキルはコンテンツをシンプルでエレガントな手描き風Webページに変換し、モダンデザインと伝統美学を融合します。カスタムイラストを生成し、色彩とフォントでアート性とブランド温かみを演出。製品やサービスを視覚的に際立たせます。
コンテンツをアートな手描き風のウェブページに変換します。繊細なラインアートと配色で、あなたの情報に温かみと品格を与えます。
関連スキル
すべて表示
ウェブページFashion Creative Design 風ページ
ファッションエディトリアルなポスター風ウェブデザインシステム：温かいクリーム色のペーパーキャンバス（#fffef7）、300ウェイトの特大タイトル（64–84px）、フルブリード写真、影なし、カードは角が直角、ボタンは1440pxのピル型角丸。 「ファッションデザインスタイル」「マガジンレイアウト」「ポスター風」「アートカタログウェブ」「スタジオポートフォリオ」「ギャラリーページ」などのニーズに対応し、任意のコンテンツをハイファッションのエディトリアル風ページに書き換えることができます。
画像手書き風インフォグラフィック生成器
温かみのある自然な手書き風インフォグラフィックを生成します。アーティストのスケッチのような質感を再現し、複数のレイアウト（比較、カードリスト、データチャート、FAQなど）をサポートします。線には手書き特有の自然な揺らぎと不完全さがあり、ユーザーはメインカラーをカスタマイズするか、推奨配色を使用できます。
画像手帳風イラスト
日常の写真を瞬時に癒し感たっぷりの韓国風手帳イラストに変換します。 余白の芸術とエレガントな手書きの英語タイトルを組み合わせることで、生成された各画像は、高級ライフスタイル誌から切り抜かれたアートページのようです。SNSでの共有、プロフィール画像、美しい電子手帳の作成などに最適です。
🎨シンプルで典雅なアートページ
指示
ユーザーが提供したコンテンツに基づいてウェブページを作成します。ウェブページのスタイル要件は以下のとおりです。
### I. ビジュアルスタイルポジショニング - **芸術的な手描きスタイル**: 線画スタイルを採用し、現代的なデジタルデザインと伝統的な手描きの美学を融合させています。 - **配色**: ベースカラーとしてニュートラルカラー（オフホワイト/ライトグレー）を使用し、メインテキストにはダークグレー、視覚的な焦点カラーとしてオレンジレッド（アクセントカラー）を使用しています。 - **ブランドトーン**: 洗練された、芸術的で温かみのあるトーンで、目の肥えたユーザー層をターゲットにしています。 ### II.レイアウト構造の原則 **ヒーローセクション（最初の画面デザイン）** - 左右の列レイアウト（60:40の黄金比） - 左側： - 特大のタイトル（ディスプレイフォント、72～96px）、濃いフォント、強い視覚的インパクト - アクセントカラーで強調表示された主要データ（例：「15都市、4749の場所」） - コアバリュープロポジションを述べる簡潔で力強いサブタイトル - 十分な余白で高級感を演出 - 右側： - カスタマイズされた手描きのイラスト、視覚スペースの50%を占める - 一貫したイラストスタイル：線画＋ローカルカラーのアクセント - ブランドストーリーに深く統合されたイラストコンテンツ - **ナビゲーションバーのデザイン** - ミニマルなトップナビゲーション、固定位置 - ロゴ＋2～3個のメインメニュー項目 - 右側のアイコングループ（検索/お気に入り/メニュー） - 微妙な影のある透明または純白の背景 - **コンテンツカードエリア** - カードグリッドレイアウト（3～4列、レスポンシブ） - 各カードには以下が含まれます： - タイトル (見出し 3、32-40px) - 説明 (2-3 行、16-18px、行の高さ 1.6) - 手描きのイラスト (メインのビジュアル スタイルと一致) - 明るい背景 (#F5F3F0)、角丸 (8-12px) - ホバー状態: わずかに上昇 + 影が濃くなる - ### III. イラスト システム仕様 **イラスト作成ガイドライン** 1. 2. **線処理**: - 1-2px の不規則な手描きの線を使用して、リアルな絵画の質感をシミュレートします - 人工的なタッチで滑らかな線を維持し、過度に機械的にならないようにします。 3. **色の使用:** - 80% のグレーの線 + 20% のブランドカラーの塗りつぶし - オレンジレッドは要素 (人物、窓、主要な建物) を強調するためにのみ使用 - 背景にはグラデーションベージュ (#FDFBF7 → #F5F1EB) を使用 - 5. **シーン構成:** - 都市のシーン: ランドマークとなる建物と日常生活のシーンをブレンド - 俯瞰または等角投影 - 物語性と親密さを高めるために小さな人物を追加 - 7. **詳細密度:** - 豊かな前景の詳細、適度に簡略化された中景、輪郭線付きの背景 - 視覚的な階層を維持し、重要な情報に目を誘導 - 9. ### IV.フォント システム - **表示フォント (タイトル):** セリフ体、重厚で力強い (例: Freight Display、Tiempos) - **本文フォント (本文):** サンセリフ体、非常に読みやすい (例: Inter、Manrope) - **フォント サイズ比率**: モジュラー スケール (1.25 または 1.333) を使用 - - **フォント ウェイト レベル**: ライト (300) / レギュラー (400) / ミディアム (500) / ボールド (700) - ### V. インタラクションの詳細 - - **マイクロ アニメーション**: カードはホバー時に 4〜8px 上に浮き上がり、トランジション時間は 300〜400ms - - **読み込みステータス**: スケルトン スクリーンを使用してブランド トーンを維持 - - **レスポンシブ ブレークポイント**: - - デスクトップ: 1440px+ - - タブレット: 768〜1439px - - モバイル: 375-767px - - ### VI. デザイン出力要件 各デザイン出力には以下を含める必要があります。 1. 2. 明確な視覚的階層 (サイズ/色/余白によって実現) 3. 4. 少なくとも 1 つのカスタムイラスト (コンテンツに深く関連し、Nano Banana Pro を使用して生成) 5. 6. 2～3 色のアクセントカラーハイライト (120px を超えない) 7. 8. 十分な余白 (セクション間隔 ≥ 120px) 9. 10. 明確なユーザーアクションパス 11. --- **デザイン哲学**: ブランドの独自性と温かさを伝えるために、芸術的な視覚言語を使用します。すべてのピクセルは、単に機能を示すのではなく、ストーリーを語る役割を果たします。デザインは、冷たい商業製品ではなく、「これは人生を大切にする人々のためのものです」とユーザーに感じさせる必要があります。
ウェブページ上のイラストはすべてnano banana proで作成されました。
説明
おすすめした人
nene@YouMind
このスキルをおすすめする理由
このスキルはコンテンツをシンプルでエレガントな手描き風Webページに変換し、モダンデザインと伝統美学を融合します。カスタムイラストを生成し、色彩とフォントでアート性とブランド温かみを演出。製品やサービスを視覚的に際立たせます。
コンテンツをアートな手描き風のウェブページに変換します。繊細なラインアートと配色で、あなたの情報に温かみと品格を与えます。
関連スキル
すべて表示ウェブページFashion Creative Design 風ページ
ファッションエディトリアルなポスター風ウェブデザインシステム：温かいクリーム色のペーパーキャンバス（#fffef7）、300ウェイトの特大タイトル（64–84px）、フルブリード写真、影なし、カードは角が直角、ボタンは1440pxのピル型角丸。 「ファッションデザインスタイル」「マガジンレイアウト」「ポスター風」「アートカタログウェブ」「スタジオポートフォリオ」「ギャラリーページ」などのニーズに対応し、任意のコンテンツをハイファッションのエディトリアル風ページに書き換えることができます。
画像手書き風インフォグラフィック生成器
温かみのある自然な手書き風インフォグラフィックを生成します。アーティストのスケッチのような質感を再現し、複数のレイアウト（比較、カードリスト、データチャート、FAQなど）をサポートします。線には手書き特有の自然な揺らぎと不完全さがあり、ユーザーはメインカラーをカスタマイズするか、推奨配色を使用できます。
画像手帳風イラスト
日常の写真を瞬時に癒し感たっぷりの韓国風手帳イラストに変換します。 余白の芸術とエレガントな手書きの英語タイトルを組み合わせることで、生成された各画像は、高級ライフスタイル誌から切り抜かれたアートページのようです。SNSでの共有、プロフィール画像、美しい電子手帳の作成などに最適です。
次のお気に入りスキルを見つけよう
リサーチ、制作、日々の作業に役立つ厳選AIスキルをさらに探しましょう。