ユーザーが提供したコンテンツに基づいてウェブページを作成します。ウェブページのスタイル要件は以下のとおりです。

### 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で作成されました。