Timmy
8e31d73376
- Extract duplicated per-page CSS into one shared style.css - Add CSS-only hamburger menu for ≤720px (was overflowing) - Add meta description / Open Graph / favicon to all pages - Unify footers, fix dead links, distinct <title>s - :focus-visible outlines, aria-hidden on decorative text, contrast bumps - Make works.html category filter actually filter (data-cat) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
266 lines
13 KiB
HTML
266 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="theme-color" content="#e53935">
|
||
<meta name="description" content="Studio Sample 服務與報價 — 品牌識別、網頁設計開發、印刷編輯三大核心服務，附 Starter / Studio / Full Brand 三級報價與常見問題。">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:locale" content="zh_TW">
|
||
<meta property="og:site_name" content="Studio Sample">
|
||
<meta property="og:title" content="Services — Studio Sample">
|
||
<meta property="og:description" content="品牌識別、網頁設計開發、印刷編輯。三種核心服務，透明報價，不留黑盒子。">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='8' fill='%23e53935'/><text x='32' y='45' font-family='Arial,sans-serif' font-size='42' font-weight='bold' fill='white' text-anchor='middle'>S</text></svg>">
|
||
<link rel="stylesheet" href="style.css">
|
||
<title>Services — Studio Sample</title>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ─── NAV ─────────────────────────────────────────────── -->
|
||
<nav>
|
||
<a class="nav-logo" href="index.html">Studio Sample</a>
|
||
<input type="checkbox" id="nav-toggle" class="nav-toggle">
|
||
<label class="nav-burger" for="nav-toggle" aria-label="開啟選單">☰</label>
|
||
<ul class="nav-links">
|
||
<li><a href="services.html" class="active">Services</a></li>
|
||
<li><a href="works.html">Works</a></li>
|
||
<li><a href="timeline.html">Timeline</a></li>
|
||
<li><a href="index.html#about">About</a></li>
|
||
<li><a href="index.html#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- ─── PAGE HEADER ───────────────────────────────────────── -->
|
||
<header class="page-header">
|
||
<p class="page-header-eyebrow">What We Offer</p>
|
||
<h1 class="page-header-title">Design that<br>earns its keep.</h1>
|
||
<p class="page-header-lead">
|
||
我們提供三種核心服務：品牌識別、網頁設計開發、印刷編輯。每一種都交付完整、可用的成果。<br>
|
||
Three disciplines. One standard: finished work that actually works.
|
||
</p>
|
||
</header>
|
||
|
||
<!-- ─── SERVICES ──────────────────────────────────────────── -->
|
||
<section id="services">
|
||
<p class="section-label">Core Services</p>
|
||
<h2 class="section-title">What we do,<br>and how.</h2>
|
||
<p class="section-lead">以下是我們目前承接的三類專案，以及每類的交付內容說明。</p>
|
||
|
||
<!-- Branding -->
|
||
<div class="service-block">
|
||
<div>
|
||
<p class="service-index">01 / Branding</p>
|
||
<h3 class="service-name">Brand Identity</h3>
|
||
</div>
|
||
<div class="service-detail">
|
||
<h4>適合對象</h4>
|
||
<p>新創公司、品牌再造、個人品牌。需要從零打造或徹底重塑視覺識別系統的客戶。</p>
|
||
|
||
<h4>交付內容</h4>
|
||
<ul class="deliverables">
|
||
<li>Logo 系統（主標、副標、最小應用版本）</li>
|
||
<li>色彩規範（主色、輔色、中性色）</li>
|
||
<li>字型規範（標題字、內文字、使用方式）</li>
|
||
<li>品牌指引手冊（PDF，可印刷格式）</li>
|
||
<li>基礎應用範例（名片、信頭、社群封面）</li>
|
||
<li>所有原始檔（AI / SVG / PDF）</li>
|
||
</ul>
|
||
|
||
<p class="service-note">
|
||
品牌識別專案通常需要 4–8 週。我們會在概念階段提出 2–3 個方向，與你確認後進入精製。
|
||
不接「只改 Logo 顏色」的案子——那不叫品牌設計。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Web -->
|
||
<div class="service-block">
|
||
<div>
|
||
<p class="service-index">02 / Web</p>
|
||
<h3 class="service-name">Web Design<br>& Build</h3>
|
||
</div>
|
||
<div class="service-detail">
|
||
<h4>適合對象</h4>
|
||
<p>
|
||
需要高品質、快速、易維護靜態網站的客戶。作品集、企業形象、活動宣傳頁、登陸頁。
|
||
不承接需要後端或 CMS 的動態網站。
|
||
</p>
|
||
|
||
<h4>交付內容</h4>
|
||
<ul class="deliverables">
|
||
<li>線框圖與視覺稿（Figma）</li>
|
||
<li>響應式 HTML/CSS 實作（無框架依賴）</li>
|
||
<li>SEO 基礎設定（meta、OG tags、語意化標籤）</li>
|
||
<li>效能優化（Lighthouse 分數 95+）</li>
|
||
<li>部署協助（GitHub Pages / Netlify / Vercel）</li>
|
||
<li>30 天上線後支援</li>
|
||
</ul>
|
||
|
||
<p class="service-note">
|
||
我們故意不用框架。這讓交出來的程式碼你或你的工程師都讀得懂、改得動。
|
||
你不會在六個月後因為套件版本問題無法更新網站。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Print -->
|
||
<div class="service-block">
|
||
<div>
|
||
<p class="service-index">03 / Print</p>
|
||
<h3 class="service-name">Print &<br>Editorial</h3>
|
||
</div>
|
||
<div class="service-detail">
|
||
<h4>適合對象</h4>
|
||
<p>
|
||
需要高品質印刷品的客戶：年報、產品型錄、書籍、雜誌、說明書、包裝、名片與其他印刷品。
|
||
</p>
|
||
|
||
<h4>交付內容</h4>
|
||
<ul class="deliverables">
|
||
<li>版型設計（網格系統、字型層級）</li>
|
||
<li>印前檔案（PDF/X-1a 或依印刷廠規格）</li>
|
||
<li>色彩校正（CMYK 轉換、Pantone 對應）</li>
|
||
<li>封面設計（如適用）</li>
|
||
<li>印刷廠溝通協助</li>
|
||
</ul>
|
||
|
||
<p class="service-note">
|
||
如有大量圖片需要修圖或色彩管理，請在詢價時告知。
|
||
我們與東京、大阪數家印刷廠有長期合作關係，可協助推薦適合的印刷廠與規格。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── PRICING ────────────────────────────────────────────── -->
|
||
<section id="pricing">
|
||
<p class="section-label">Investment</p>
|
||
<h2 class="section-title">Simple pricing.<br>No surprises.</h2>
|
||
<p class="section-lead">
|
||
以下為起始報價參考。實際費用依專案範圍而定，詳細金額在需求確認後提供正式估價。
|
||
</p>
|
||
<div class="pricing-grid">
|
||
<div class="pricing-card">
|
||
<p class="pricing-tier">Starter</p>
|
||
<p class="pricing-price">¥150K</p>
|
||
<p class="pricing-unit">起 / 專案</p>
|
||
<p class="pricing-desc">
|
||
單一服務的基礎版本。適合範圍明確、時程緊湊的小型專案。
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>單一服務（品牌 / 網頁 / 印刷，擇一）</li>
|
||
<li>2 輪修改回合</li>
|
||
<li>完整原始檔交付</li>
|
||
<li>2 週交付（視範圍）</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pricing-card highlighted">
|
||
<p class="pricing-tier">Studio</p>
|
||
<p class="pricing-price">¥380K</p>
|
||
<p class="pricing-unit">起 / 專案</p>
|
||
<p class="pricing-desc">
|
||
最受歡迎的方案。品牌識別加上對應的線下或線上應用，完整落地。
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>品牌識別 + 一項應用（網頁或印刷）</li>
|
||
<li>3 輪修改回合</li>
|
||
<li>完整原始檔 + 品牌指引</li>
|
||
<li>專案週期 6–10 週</li>
|
||
<li>上線後 30 天支援</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pricing-card">
|
||
<p class="pricing-tier">Full Brand</p>
|
||
<p class="pricing-price">Custom</p>
|
||
<p class="pricing-unit">依需求報價</p>
|
||
<p class="pricing-desc">
|
||
全方位品牌建立，涵蓋識別系統、網站與印刷品，適合品牌重塑或完整新創。
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>品牌識別 + 網頁 + 印刷品</li>
|
||
<li>無限修改（合理範圍內）</li>
|
||
<li>優先排程</li>
|
||
<li>長期維護方案可選</li>
|
||
<li>專屬聯絡窗口</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── FAQ ───────────────────────────────────────────────── -->
|
||
<section id="faq">
|
||
<p class="section-label">FAQ</p>
|
||
<h2 class="section-title">常見問題</h2>
|
||
<p class="section-lead">還有其他疑問，歡迎直接聯繫我們。</p>
|
||
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<p class="faq-q">你們接受海外客戶嗎？</p>
|
||
<p class="faq-a">
|
||
接受。我們是 Remote-first 工作室，目前服務的客戶遍及日本、台灣、歐洲。
|
||
溝通以英文、日文或中文（繁體）進行均可。付款支援電匯與 Stripe。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">交付時間大概多久？</p>
|
||
<p class="faq-a">
|
||
Starter 方案約 2–3 週，Studio 方案約 6–10 週，Full Brand 依範圍另議。
|
||
以上為一般情況，若有截止日期需求請在詢價時告知，我們會據實評估是否可行。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">修改次數如何計算？</p>
|
||
<p class="faq-a">
|
||
每輪修改意指：你看過稿件後彙整所有意見，我們一次性回應修改。
|
||
每輪不限條數，但請確保同一輪的意見一起提出，而非分批零散傳送。
|
||
超出回合數的修改依時間計費（¥12,000 / 小時）。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">付款方式與時程？</p>
|
||
<p class="faq-a">
|
||
標準付款方式：開工前支付 50%，交付完稿後支付剩餘 50%。
|
||
大型專案（¥500K 以上）可協商分三期付款。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">原始檔版權歸誰？</p>
|
||
<p class="faq-a">
|
||
款項全額結清後，所有交付物的著作財產權移轉給客戶。
|
||
我們保留在作品集中展示的權利，如有保密需求請提前告知，我們可簽署 NDA。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">你們現在有空檔嗎？</p>
|
||
<p class="faq-a">
|
||
我們每次只承接少量專案，以確保每個案子都得到足夠的注意力。
|
||
目前的排期狀況請透過聯絡表單詢問，我們會如實告知最早可開始的時間。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── CTA STRIP ──────────────────────────────────────────── -->
|
||
<div class="cta-strip red">
|
||
<div class="cta-strip-text">
|
||
<h2>準備好開始了嗎？</h2>
|
||
<p>填寫聯絡表單，告訴我們你的專案。通常兩個工作天內回覆。</p>
|
||
</div>
|
||
<a class="btn btn-white" href="index.html#contact">Contact Us</a>
|
||
</div>
|
||
|
||
<!-- ─── FOOTER ────────────────────────────────────────────── -->
|
||
<footer>
|
||
<div class="footer-logo">Studio Sample</div>
|
||
<ul class="footer-nav">
|
||
<li><a href="services.html">Services</a></li>
|
||
<li><a href="works.html">Works</a></li>
|
||
<li><a href="timeline.html">Timeline</a></li>
|
||
<li><a href="index.html#contact">Contact</a></li>
|
||
</ul>
|
||
<div class="footer-copy">© 2026 Studio Sample. All rights reserved.</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|