🎨シンプルで典雅なアートページ
🎨シンプルで典雅なアートページ
コンテンツ紹介
説明
コンテンツをアートな手描き風のウェブページに変換します。繊細なラインアートと配色で、あなたの情報に温かみと品格を与えます。
おすすめした人
nene@YouMind
このスキルをおすすめする理由
このスキルはコンテンツをシンプルでエレガントな手描き風Webページに変換し、モダンデザインと伝統美学を融合します。カスタムイラストを生成し、色彩とフォントでアート性とブランド温かみを演出。製品やサービスを視覚的に際立たせます。
指示
ユーザーが提供したコンテンツに基づいてウェブページを作成します。ウェブページのスタイル要件は以下のとおりです。
### 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で作成されました。
関連スキル
すべて表示
ウェブページFashion Creative Design 風ページ
ファッションエディトリアルなポスター風ウェブデザインシステム：温かいクリーム色のペーパーキャンバス（#fffef7）、300ウェイトの特大タイトル（64–84px）、フルブリード写真、影なし、カードは角が直角、ボタンは1440pxのピル型角丸。 「ファッションデザインスタイル」「マガジンレイアウト」「ポスター風」「アートカタログウェブ」「スタジオポートフォリオ」「ギャラリーページ」などのニーズに対応し、任意のコンテンツをハイファッションのエディトリアル風ページに書き換えることができます。
画像セミフラット写実イラスト生成
ビジュアル表現で、こんな悩みを抱えたことはありませんか？ ブランドには「上質感」が必要なのに、フラットなイラストだけでは薄く見え、温かみや質感に欠けてしまう？ 製品の細部を写実的に伝えたいけれど、画面が複雑になりすぎて、肝心の内容が埋もれてしまう？ 抽象的な概念や感情の物語、複雑なアイデアを描いても、どこか物足りない。直接的すぎるか、難解すぎる？ 素材サイトを探し回っても、現代的で洗練されていながら、伝えたい核心を正確に捉える画像が見つからない？ 私たちが求めているのは、「ちょうどいい」ビジュアル表現です。デザイン性がありながらリアルさも失わず、簡潔で力強く、それでいて繊細で見飽きない表現。 今なら、文章を入力するだけで、セミフラットな写実イラストを生成できます。ブランドやコンテンツ、概念に、他にはない視覚的な魅力を与えましょう。 これは何ですか？ 文章の内容を、現代的なセミフラット写実スタイルのイラストに変換するインテリジェントな生成ツールです。フラットイラストの簡潔な輪郭と、写実的なスタイルが持つ柔らかな光影や立体感を巧みに融合し、「シンプルすぎる」と「複雑すぎる」の間に、洗練された最適なバランスを見つけます。 使い方は？ 3ステップで簡単 文章を入力 — ブランドストーリー、感情を語る一文、製品説明、抽象的な哲学の概念まで、内容の核心を正確に捉えます。 （任意）構図の好みや色の方向性を調整 — 画面のトーンを指定することも、自由な表現に任せることもできます。 生成 — 構図にこだわり、洗練された色彩と繊細な質感を備えたイラストがすぐに完成します。 描画の知識は必要ありません。あなたは「何を伝えるか」を用意するだけで、「どう描くか」はお任せできます。 独自のビジュアル表現とは？ 輪郭はあるが、平面的ではない — フラットイラストのすっきりとした現代的な輪郭線を保ちながら、柔らかな影と繊細な立体感で、物体を立体的に見せます。薄っぺらい印象とは無縁です。 リアルだが、写実的すぎない — 写真のような細部の多さは避け、光影と素材感が生む温かみだけを残します。信頼感がありながら、想像の余地もある画面に仕上がります。 クリーンだが、空白ではない — 一貫して純白の背景を採用し、視線を主体に集中させます。画面を清潔で抑制の効いたものに保ち、伝えたい核心からぶれません。 一つひとつの作品が、「デザイン性」と「物語を伝える力」の間に、絶妙な調和を生み出します。 どんな場面で使えますか？ ブランドストーリーのビジュアル化 — ブランドのトーンに合わせた現代的なイラストで、抑制が効き、質感のあるビジュアルシンボルを届けます。 読み応えのあるコンテンツの挿絵 — 記事やレポート、特集を退屈にせず、画面と文章を響き合わせます。 製品説明／コンセプトの提示 — 複雑な機能や抽象的な理念を、直感的で洗練されたビジュアル表現に変換します。 装飾画／カバーデザイン — 清潔感があり上質な画面で、書籍やアルバム、空間装飾にも自然に調和します。 お渡しするのは、単なる一枚の画像ではありません 文字による干渉のない、クリーンなイラスト画像に加え、ビジュアルスタイルの解説もお届けします。文章に呼応する構図、光影、配色を選んだ理由を簡潔に説明するため、画面の背後にあるデザインの考え方を理解しやすく、チーム内でアイデアを説明する際にも役立ちます。
画像風景写真を和風ミニマル水彩画に
風景や街並みの写真を、和風ギャラリー調の手描き水彩アートイラストに自動変換。広い紙の余白と、繊細な手書きレイアウトを備えています。 ✨ 主な特徴 ギャラリー級の余白美：主役を小さく中央に配置し、周囲に幅広い生成り色のコットンパルプ紙の質感を残します。現代的なステーショナリーやアートプリントのような上質感を演出します。 本格的な手描き水彩の質感：水彩のにじみ、半透明の色の重なり、ラフな手描きの輪郭を自然に再現。硬い輪郭線やデジタル感を抑えます。 スマートなシーン抽出：元画像の主要なランドマーク、建物の輪郭、印象的な光と影を保ちながら、複雑な背景や不要なものを自然に簡略化します。 詩的な手書きレイアウト：画面下部に、濃いグレーまたは濃いブルーの手書き風フォントで詩的な短文と年を自動配置。静かで控えめな日常の雰囲気をつくります。 📸 活用シーン 旅の思い出を再構成：旅先の通り、小さな店、山並み、海の景色をレトロなポストカードに仕上げます。 個人向けクリエイティブ制作：スマートフォンの壁紙、ステーショナリーポスター、実物のポストカード、アートプリントに。 SNS用ビジュアル：小紅書や朋友圈などのプラットフォームに、控えめで洗練された、統一感のある文芸的なビジュアルカバーを提供します。 🚀 使い方 構図のはっきりした風景、建物、街並みの写真を1枚アップロードするだけで、同じスタイルのミニマルな水彩アートプリントを自動生成できます。
情報
- バージョン
- v1
- 最終更新
- 実行クレジット
- 使用量に応じて消費
- モデル
- 自動選択
