Last active
June 20, 2026 10:37
-
-
Save haranicle/127e36691ab3534ff998d6dfb73d2d0f to your computer and use it in GitHub Desktop.
This file has been truncated, but you can view the full file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>ワンコ コ フライヤー（1面プレビュー）</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"> | |
| <style> | |
| @page { size: 105mm 148.5mm portrait; margin: 0; } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html, body { | |
| width: 105mm; | |
| height: 148.5mm; | |
| } | |
| @media print { | |
| html, body, * { | |
| -webkit-print-color-adjust: exact !important; | |
| print-color-adjust: exact !important; | |
| } | |
| } | |
| body { | |
| font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic Pro', sans-serif; | |
| background: white; | |
| overflow: hidden; | |
| } | |
| .flyer { | |
| width: 105mm; | |
| height: 148.5mm; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* ── ヘッダー: 1行でコンパクト */ | |
| .flyer-header { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| padding: 2.5mm 4mm; | |
| gap: 2.5mm; | |
| border-bottom: 0.8px solid #CCCCCC; | |
| flex-shrink: 0; | |
| } | |
| .logo { | |
| width: 10mm; | |
| height: 10mm; | |
| flex-shrink: 0; | |
| } | |
| .header-text { | |
| flex: 1; | |
| } | |
| .app-name { | |
| font-size: 4.5mm; | |
| font-weight: 900; | |
| color: #1A1A1A; | |
| letter-spacing: 0.08em; | |
| line-height: 1.2; | |
| } | |
| .tagline { | |
| font-size: 2.1mm; | |
| font-weight: 700; | |
| color: #555555; | |
| line-height: 1.4; | |
| } | |
| /* ── メインコンテンツ: 左スクショ + 右QR */ | |
| .flyer-main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: row; | |
| padding: 2.5mm 3.5mm; | |
| gap: 3mm; | |
| overflow: hidden; | |
| } | |
| .main-screenshot { | |
| flex-shrink: 0; | |
| width: 44mm; | |
| align-self: stretch; | |
| border-radius: 3mm; | |
| overflow: hidden; | |
| border: 0.8px solid #CCCCCC; | |
| } | |
| .main-screenshot img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .main-right { | |
| flex: none; | |
| width: 42mm; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2mm; | |
| } | |
| /* ── QRカード */ | |
| .qr-card { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1.5mm; | |
| padding: 2.5mm 2.5mm; | |
| border-radius: 3.5mm; | |
| background: white; | |
| border: 1.5px solid #1A1A1A; | |
| } | |
| .qr-platform { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5mm; | |
| } | |
| .qr-platform-emoji { | |
| font-size: 3.5mm; | |
| color: #1A1A1A; | |
| } | |
| .qr-platform-label { | |
| font-size: 3.5mm; | |
| font-weight: 900; | |
| color: #1A1A1A; | |
| letter-spacing: 0.05em; | |
| } | |
| .qr-scan-cta { | |
| font-size: 1.7mm; | |
| font-weight: 700; | |
| color: #555555; | |
| letter-spacing: 0.06em; | |
| } | |
| .qr-canvas-wrap { | |
| background: white; | |
| border-radius: 2mm; | |
| padding: 1.5mm; | |
| border: 0.8px solid #CCCCCC; | |
| } | |
| .qr-canvas-wrap canvas { | |
| display: block; | |
| width: 15mm !important; | |
| height: 15mm !important; | |
| } | |
| .store-badge { | |
| display: block; | |
| height: 6.5mm; | |
| width: auto; | |
| } | |
| .qr-store-label { | |
| font-size: 1.8mm; | |
| font-weight: 700; | |
| color: #1A1A1A; | |
| text-align: center; | |
| line-height: 1.35; | |
| } | |
| .qr-note { | |
| font-size: 1.5mm; | |
| font-weight: 400; | |
| color: #555555; | |
| text-align: center; | |
| border: 0.8px solid #BBBBBB; | |
| padding: 0.8mm 1.5mm; | |
| border-radius: 1.5mm; | |
| line-height: 1.4; | |
| } | |
| /* ── フッター: 特徴3点 + キャッチ */ | |
| .flyer-footer { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1mm; | |
| padding: 2mm 4mm; | |
| border-top: 0.8px solid #CCCCCC; | |
| flex-shrink: 0; | |
| } | |
| .footer-features { | |
| display: flex; | |
| justify-content: space-around; | |
| width: 100%; | |
| } | |
| .feature-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.8mm; | |
| } | |
| .feature-icon-wrap { | |
| width: 6mm; | |
| height: 6mm; | |
| background: white; | |
| border: 1.5px solid #333333; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2.8mm; | |
| color: #333333; | |
| } | |
| .feature-title { | |
| font-size: 1.7mm; | |
| font-weight: 900; | |
| color: #1A1A1A; | |
| text-align: center; | |
| line-height: 1.3; | |
| } | |
| .footer-tagline { | |
| font-size: 1.7mm; | |
| font-weight: 700; | |
| color: #555555; | |
| letter-spacing: 0.08em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="flyer" data-document-role="page"> | |
| <!-- ヘッダー --> | |
| <div class="flyer-header"> | |
| <svg class="logo" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> | |
| <path d="M481.511,156C481.511,156 232.09,228.343 303,410C378.259,602.799 494.711,787.466 531,782C567.289,776.534 674.843,716.777 685,662C695.157,607.223 694,610.229 694,610.229C694,610.229 729.769,296.083 602.446,228C475.124,159.917 481.511,156 481.511,156Z" fill="rgb(42,130,223)"/> | |
| <g transform="matrix(1.707193,0,0,1.705455,-361.965158,-361.189232)"> | |
| <path d="M404.058,421.928C403.897,453.95 411.761,473.551 425.302,502.095C447.185,548.228 474.777,591.456 505.394,632.252C509.548,637.788 514.199,643.207 519.939,647.146C533.524,655.972 551.579,654.563 563.424,643.414C570.122,637.074 575.288,629.267 580.669,621.968C593.188,604.838 605.345,587.447 617.132,569.805C632.635,589.068 634.657,612.198 647.589,631.61C659.861,650.033 686.459,651.309 705.647,644.761C720.401,639.726 736.773,630.84 749.285,647.674C753.58,653.415 754.706,662.948 752.913,670.099C747.387,692.146 728.087,710.716 709.972,723.238C679.549,744.125 630.857,751.106 598.968,729.928C580.443,717.625 571.699,704.886 547.126,700.128C528.799,696.579 511.422,702.447 496.619,713.647C489.74,718.851 484.568,724.443 476.978,729.565C462.314,739.462 448.701,740.954 431.487,737.669C412.325,734.012 399.632,723.408 389.151,707.114C369.998,677.197 371.599,634.628 387.867,603.346C400.669,578.729 425.822,545.365 407.668,516.317C393.044,492.917 365.057,499.066 342.204,495.103C320.232,491.294 296.415,476.415 284.212,457.316C274.541,442.273 267.398,423.613 271.144,405.57C276.83,378.37 298.115,376.563 320.79,377.043C343.423,377.522 367.14,363.994 377.955,344.368C382.703,335.752 386.004,327.48 391.747,319.335C408.551,295.504 437.713,276.654 467.874,282.208C480.115,284.462 488.65,292.513 494.072,303.365C453.661,318.501 423.673,345.356 410.336,387.254C406.37,399.713 405.138,408.953 404.058,421.928Z" fill="rgb(240,165,0)"/> | |
| </g> | |
| <g transform="matrix(1.707193,0,0,1.705455,-361.965158,-361.189232)"> | |
| <path d="M662.912,363.57C677.315,385.787 682.217,423.435 675.826,448.912C667.081,483.773 649.013,517.407 630.642,548.128C626.676,554.76 621.505,563.528 617.18,569.595C596.911,544.437 570.44,534.929 539.497,529.657C527.372,527.591 519.095,527.229 506.921,523.617C469.415,512.489 447.264,478.924 451.834,440.016C454.389,418.265 462.745,409.629 471.532,391.974L477.956,378.773C482.209,369.913 485.234,362.304 488.778,353.229C495.806,335.226 501.072,322.198 494.332,303.04C519.464,294.439 550.647,291.555 576.286,297.936C617.06,308.084 641.475,329.231 662.912,363.57Z" fill="rgb(255,107,107)"/> | |
| </g> | |
| <g transform="matrix(1.707193,0,0,1.705455,-361.965158,-361.189232)"> | |
| <path d="M485.177,417.902C488.041,409.736 490.454,404.293 495.937,397.463C520.99,366.248 572.82,371.014 590.415,407.757C597.064,421.314 597.945,436.985 592.856,451.201C587.741,465.546 579.68,473.874 566.937,481.511C553.993,487.691 542.781,490.335 528.333,487.45C513.688,484.583 500.854,475.846 492.819,463.271C483.553,449.058 481.66,434.326 485.177,417.902Z" fill="white" fill-rule="nonzero"/> | |
| </g> | |
| </svg> | |
| <div class="header-text"> | |
| <div class="app-name">ワンコ コ</div> | |
| <div class="tagline">散歩中のフレンドが地図でひと目でわかるアプリ</div> | |
| </div> | |
| </div> | |
| <!-- メインコンテンツ --> | |
| <div class="flyer-main"> | |
| <div class="main-screenshot"> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment