🎨シンプルで典雅なアートページ
指示
ユーザーが提供したコンテンツに基づいてウェブページを作成します。ウェブページのスタイル要件は以下のとおりです。
### 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ページに変換し、モダンデザインと伝統美学を融合します。カスタムイラストを生成し、色彩とフォントでアート性とブランド温かみを演出。製品やサービスを視覚的に際立たせます。
コンテンツをアートな手描き風のウェブページに変換します。繊細なラインアートと配色で、あなたの情報に温かみと品格を与えます。
関連スキル
すべて表示
ウェブページExplorable Explainer ページビルダー
レポートは説明する。ページは読者が自分で発見できるようにする。 YouMindは既にウェブページを構築できます。Explorable Explainerは構築する内容を決定します。研究、データセット、トピックを、ニュースルームのグラフィックや探索可能な説明の伝統に沿った単一のインタラクティブページに変換します：スクロール駆動のナレーション、実際のチャート、動かせるコントロール、確認できるソース。 コードを書く前に計画します。最初にビルドプランを承認します：ページが答えるひとつの質問、読者が「あっ」と感じる瞬間（リビール）、5〜8セクションのスクロール背骨、それぞれが動かすことで読者が学ぶことに裏付けられた2〜4のインタラクション、そしてすべての数字とその出所を列挙したデータ契約。 次に、ビルドステップなしの単一の自己完結型HTMLファイルを構築します。セマンティックマークアップ。すべての数字は先頭の単一の編集可能なDATA定数に置かれます。スマートフォンで壊れないスクロールリビール。すべてのコントロールは、現在の値を説明するライブテキストを備えた、実際のキーボード操作可能なフォーム要素です。 アクセシビリティは後付けではなく最初から組み込まれています：4.5:1のコントラスト、表示されるフォーカスリング、至る所に代替テキスト、色だけで意味を伝えない、モーション低減を尊重、360pxからのレスポンシブ対応。 引き渡す前に、5項目の自己レビューを実行し、結果を正直に報告します：リビールが実際に機能するか、JavaScriptをオフにしてもページが読めるか、タブ順序が妥当か、すべての数字が追跡可能か、読者が止めたいと思うアニメーションがあるか。 破らない2つのルール：チャートを良く見せるためにデータを捏造しないこと、そして数字がドラフトと矛盾している場合にそれを伝えること。 研究者、アナリスト、ジャーナリスト、教育者、インディー創業者、コンサルタントなど、自分の仕事を流し読みされるのではなく、探索されることを望む人々のために。
ウェブページ柔光デイタイム・浮遊スタイルのWebページ
柔光デイタイムスタイルのウェブデザインシステム：淡いスカイブルーのキャンバス（#ebf5ff）、字重を500に固定した超大ディスプレイテキスト（レスポンシブで最大148px）、32pxの角丸カード＋9999pxのピル、ほぼ黒の#181d27のソリッドCTA、パステルカラーのブロックと浮遊する3Dクレイ風イラスト。深みはキャンバスからカードへの色の段階的なシフトのみで表現し、コンテンツカードにはシャドウなし。「柔光デイタイムスタイル」「3Dイラストのランディングページ」「淡いブルーのキャンバス」「角丸カードスタイル」「SaaS公式サイト」「Linear/Framerスタイル」などのニーズに対応し、アクセシビリティとレスポンシブ対応の制約が組み込まれています。
ウェブページFashion Creative Design 風ページ
ファッションエディトリアルなポスター風ウェブデザインシステム：温かいクリーム色のペーパーキャンバス（#fffef7）、300ウェイトの特大タイトル（64–84px）、フルブリード写真、影なし、カードは角が直角、ボタンは1440pxのピル型角丸。 「ファッションデザインスタイル」「マガジンレイアウト」「ポスター風」「アートカタログウェブ」「スタジオポートフォリオ」「ギャラリーページ」などのニーズに対応し、任意のコンテンツをハイファッションのエディトリアル風ページに書き換えることができます。
🎨シンプルで典雅なアートページ
指示
ユーザーが提供したコンテンツに基づいてウェブページを作成します。ウェブページのスタイル要件は以下のとおりです。
### 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ページに変換し、モダンデザインと伝統美学を融合します。カスタムイラストを生成し、色彩とフォントでアート性とブランド温かみを演出。製品やサービスを視覚的に際立たせます。
コンテンツをアートな手描き風のウェブページに変換します。繊細なラインアートと配色で、あなたの情報に温かみと品格を与えます。
関連スキル
すべて表示ウェブページExplorable Explainer ページビルダー
レポートは説明する。ページは読者が自分で発見できるようにする。 YouMindは既にウェブページを構築できます。Explorable Explainerは構築する内容を決定します。研究、データセット、トピックを、ニュースルームのグラフィックや探索可能な説明の伝統に沿った単一のインタラクティブページに変換します：スクロール駆動のナレーション、実際のチャート、動かせるコントロール、確認できるソース。 コードを書く前に計画します。最初にビルドプランを承認します：ページが答えるひとつの質問、読者が「あっ」と感じる瞬間（リビール）、5〜8セクションのスクロール背骨、それぞれが動かすことで読者が学ぶことに裏付けられた2〜4のインタラクション、そしてすべての数字とその出所を列挙したデータ契約。 次に、ビルドステップなしの単一の自己完結型HTMLファイルを構築します。セマンティックマークアップ。すべての数字は先頭の単一の編集可能なDATA定数に置かれます。スマートフォンで壊れないスクロールリビール。すべてのコントロールは、現在の値を説明するライブテキストを備えた、実際のキーボード操作可能なフォーム要素です。 アクセシビリティは後付けではなく最初から組み込まれています：4.5:1のコントラスト、表示されるフォーカスリング、至る所に代替テキスト、色だけで意味を伝えない、モーション低減を尊重、360pxからのレスポンシブ対応。 引き渡す前に、5項目の自己レビューを実行し、結果を正直に報告します：リビールが実際に機能するか、JavaScriptをオフにしてもページが読めるか、タブ順序が妥当か、すべての数字が追跡可能か、読者が止めたいと思うアニメーションがあるか。 破らない2つのルール：チャートを良く見せるためにデータを捏造しないこと、そして数字がドラフトと矛盾している場合にそれを伝えること。 研究者、アナリスト、ジャーナリスト、教育者、インディー創業者、コンサルタントなど、自分の仕事を流し読みされるのではなく、探索されることを望む人々のために。
ウェブページ柔光デイタイム・浮遊スタイルのWebページ
柔光デイタイムスタイルのウェブデザインシステム：淡いスカイブルーのキャンバス（#ebf5ff）、字重を500に固定した超大ディスプレイテキスト（レスポンシブで最大148px）、32pxの角丸カード＋9999pxのピル、ほぼ黒の#181d27のソリッドCTA、パステルカラーのブロックと浮遊する3Dクレイ風イラスト。深みはキャンバスからカードへの色の段階的なシフトのみで表現し、コンテンツカードにはシャドウなし。「柔光デイタイムスタイル」「3Dイラストのランディングページ」「淡いブルーのキャンバス」「角丸カードスタイル」「SaaS公式サイト」「Linear/Framerスタイル」などのニーズに対応し、アクセシビリティとレスポンシブ対応の制約が組み込まれています。
ウェブページFashion Creative Design 風ページ
ファッションエディトリアルなポスター風ウェブデザインシステム：温かいクリーム色のペーパーキャンバス（#fffef7）、300ウェイトの特大タイトル（64–84px）、フルブリード写真、影なし、カードは角が直角、ボタンは1440pxのピル型角丸。 「ファッションデザインスタイル」「マガジンレイアウト」「ポスター風」「アートカタログウェブ」「スタジオポートフォリオ」「ギャラリーページ」などのニーズに対応し、任意のコンテンツをハイファッションのエディトリアル風ページに書き換えることができます。
次のお気に入りスキルを見つけよう
リサーチ、制作、日々の作業に役立つ厳選AIスキルをさらに探しましょう。