commit 87dbd1517fdf9f23c47d474f4c9d8c7f9824c3ae Author: Timmy Date: Fri Mar 20 00:53:53 2026 +0800 Initial commit Co-Authored-By: Claude Sonnet 4.6 diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..f93c6ea --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,35 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Project Overview + +Static portfolio website for **Studio Sample**, a Tokyo-based design and front-end studio. Three HTML files with embedded CSS and minimal vanilla JavaScript — intentionally zero frameworks, zero build tooling. + +## Architecture + +- **Pure static HTML/CSS/JS** — no package manager, no bundler, no preprocessor +- All styles are embedded in each HTML file's ` + + + + + + + +
+
SAMPLE
+

Welcome to Studio Sample

+

Make it
simple.
Make it real.

+

+ 這是一個通用的靜態網站範例。乾淨的版面、流體排版、無框架依賴。
+ A clean static site template. No frameworks. Just HTML & CSS. +

+
+ View Works + Get in Touch +
+
+ + +
+

What We Do

+

Simple things,
done well.

+

+ 我們相信好的設計來自克制。這裡列出我們最核心的三個能力。 +

+
+
+

01

+

Visual Design

+

+ 從品牌識別到頁面排版，我們確保每個像素都有其存在的理由。
+ From brand identity to layout — every pixel earns its place. +

+
+
+

02

+

Front-End Build

+

+ 語意化 HTML、零依賴 CSS、可讀性優先的程式碼。速度是預設值，不是選項。
+ Semantic HTML, dependency-free CSS. Speed is the default. +

+
+
+

03

+

Content Strategy

+

+ 好的文案讓訪客留下來。我們幫你把「想說的話」變成「會被讀完的話」。
+ Good copy keeps visitors reading. We help you say it right. +

+
+
+

04

+

Performance

+

+ 無打包工具、無運行時依賴。開啟即用，Lighthouse 分數不是對手。
+ No bundler, no runtime dependencies. Lighthouse-ready out of the box. +

+
+
+
+ + +
+

Selected Works

+

Recent Projects

+

以下是近期完成的幾個代表作品。

+
+
+
BRAND
+
+

Branding / Identity

+

Redline Co. Brand Refresh

+

整體品牌重塑，包含 Logo、色票與排版指引。

+
+
+
+
WEB
+
+

Web Design / Build

+

Arch Studio Portfolio Site

+

建築事務所的單頁作品集，純 HTML/CSS 交付。

+
+
+
+
PRINT
+
+

Print / Editorial

+

Annual Report 2024

+

60 頁年度報告書，從版型設計到印前輸出一條龍。

+
+
+
+
+ + +
+

How We Work

+

Four steps.
One direction.

+

+ 清晰的流程讓合作更輕鬆。從第一次對話到最後交付，這是我們的工作方式。 +

+
+
+
01
+

Discovery

+

先了解你的目標、受眾與限制條件，再動筆。
We listen before we design.

+
+
+
02
+

Concept

+

提出 2–3 個方向，討論並收斂到最適合你的那一個。
Direction before execution.

+
+
+
03
+

Build

+

進入實作，每個里程碑都會與你確認進度。
Iterative, not waterfall.

+
+
+
04
+

Deliver

+

交付完整的原始檔與使用說明，不留黑盒子。
Everything you need. Nothing you don't.

+
+
+
+ + +
+

About Us

+

Small team.
Big focus.

+

+ 我們是一個小而精的創作工作室。少接案、做好每一件事。 +

+
+
+

+ Studio Sample 成立於 2020 年，專注於視覺設計與前端開發的交界地帶。 + 我們不追求規模，我們追求品質。每個專案都由核心成員親自執行，不外包，不走流水線。 +

+

+ Founded in 2020, we work at the intersection of visual design and front-end + development. We keep our team small so every project gets real attention — + not a junior's first draft. +

+ + Let's Talk + +
+
+
+
48+
+
Projects
+
+
+
5yr
+
Experience
+
+
+
100%
+
In-house
+
+
+
0
+
Frameworks
+
+
+
+
+ + +
+

Latest News

+

What's new.

+

工作室近況、設計思考與不定期更新。

+
+
+

2026 — Mar

+

新作品上線：Redline Co. 品牌全面更新

+

歷時三個月的品牌再造計畫正式完成。新的 Logo 系統、色彩規範與排版指引已全數交付客戶。

+ View Project → +
+
+

2026 — Feb

+

為什麼我們不用任何前端框架

+

框架解決了很多問題，但也帶來同樣多的問題。這篇文章說明我們如何在沒有框架的情況下交付高品質作品。

+ Read More → +
+
+

2025 — Dec

+

2025 回顧：48 個專案，3 個人

+

這一年我們做了哪些事？學到了什麼？又有什麼想在 2026 年做得更好？年度總結在此。

+ Read More → +
+
+
+ + +
+

Contact

+

Start a conversation.

+

有想法嗎？填個表單，我們通常在兩個工作天內回覆。

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+

Email

+

hello@studiosample.example

+

一般詢問請用 email 聯繫。

+
+
+

Location

+

Tokyo, Japan

+

遠端合作全球通用。Remote-first.

+
+
+

Hours

+

Mon – Fri, 10:00 – 18:00 JST

+

週末不接急件，謝謝理解。

+
+
+

Response Time

+

Within 2 business days

+

通常更快。Usually faster.

+
+
+
+
+ + + + + + diff --git a/services.html b/services.html new file mode 100644 index 0000000..9a4ebbf --- /dev/null +++ b/services.html @@ -0,0 +1,662 @@ + + + + + + Services — Studio Sample + + + + + + + + +
+

What We Offer

+

Design that
earns its keep.

+

+ 我們提供三種核心服務：品牌識別、網頁設計開發、印刷編輯。每一種都交付完整、可用的成果。
+ Three disciplines. One standard: finished work that actually works. +

+
+ + +
+

Core Services

+

What we do,
and how.

+

以下是我們目前承接的三類專案，以及每類的交付內容說明。

+ + +
+
+

01 / Branding

+

Brand Identity

+
+
+

適合對象

+

新創公司、品牌再造、個人品牌。需要從零打造或徹底重塑視覺識別系統的客戶。

+ +

交付內容

+
    +
  • Logo 系統（主標、副標、最小應用版本）
    • +
  • 色彩規範（主色、輔色、中性色）
    • +
  • 字型規範（標題字、內文字、使用方式）
    • +
  • 品牌指引手冊（PDF，可印刷格式）
    • +
  • 基礎應用範例（名片、信頭、社群封面）
    • +
  • 所有原始檔（AI / SVG / PDF）
    • +
+ +

+ 品牌識別專案通常需要 4–8 週。我們會在概念階段提出 2–3 個方向，與你確認後進入精製。 + 不接「只改 Logo 顏色」的案子——那不叫品牌設計。 +

+
+
+ + +
+
+

02 / Web

+

Web Design
& Build

+
+
+

適合對象

+

+ 需要高品質、快速、易維護靜態網站的客戶。作品集、企業形象、活動宣傳頁、登陸頁。 + 不承接需要後端或 CMS 的動態網站。 +

+ +

交付內容

+
    +
  • 線框圖與視覺稿（Figma）
    • +
  • 響應式 HTML/CSS 實作（無框架依賴）
    • +
  • SEO 基礎設定（meta、OG tags、語意化標籤）
    • +
  • 效能優化（Lighthouse 分數 95+）
    • +
  • 部署協助（GitHub Pages / Netlify / Vercel）
    • +
  • 30 天上線後支援
    • +
+ +

+ 我們故意不用框架。這讓交出來的程式碼你或你的工程師都讀得懂、改得動。 + 你不會在六個月後因為套件版本問題無法更新網站。 +

+
+
+ + +
+
+

03 / Print

+

Print &
Editorial

+
+
+

適合對象

+

+ 需要高品質印刷品的客戶：年報、產品型錄、書籍、雜誌、說明書、包裝、名片與其他印刷品。 +

+ +

交付內容

+
    +
  • 版型設計（網格系統、字型層級）
    • +
  • 印前檔案（PDF/X-1a 或依印刷廠規格）
    • +
  • 色彩校正（CMYK 轉換、Pantone 對應）
    • +
  • 封面設計（如適用）
    • +
  • 印刷廠溝通協助
    • +
+ +

+ 如有大量圖片需要修圖或色彩管理，請在詢價時告知。 + 我們與東京、大阪數家印刷廠有長期合作關係，可協助推薦適合的印刷廠與規格。 +

+
+
+
+ + +
+

Investment

+

Simple pricing.
No surprises.

+

+ 以下為起始報價參考。實際費用依專案範圍而定，詳細金額在需求確認後提供正式估價。 +

+
+
+

Starter

+

¥150K

+

起 / 專案

+

+ 單一服務的基礎版本。適合範圍明確、時程緊湊的小型專案。 +

+
    +
  • 單一服務（品牌 / 網頁 / 印刷，擇一）
    • +
  • 2 輪修改回合
    • +
  • 完整原始檔交付
    • +
  • 2 週交付（視範圍）
    • +
+
+
+

Studio

+

¥380K

+

起 / 專案

+

+ 最受歡迎的方案。品牌識別加上對應的線下或線上應用，完整落地。 +

+
    +
  • 品牌識別 + 一項應用（網頁或印刷）
    • +
  • 3 輪修改回合
    • +
  • 完整原始檔 + 品牌指引
    • +
  • 專案週期 6–10 週
    • +
  • 上線後 30 天支援
    • +
+
+
+

Full Brand

+

Custom

+

依需求報價

+

+ 全方位品牌建立，涵蓋識別系統、網站與印刷品，適合品牌重塑或完整新創。 +

+
    +
  • 品牌識別 + 網頁 + 印刷品
    • +
  • 無限修改（合理範圍內）
    • +
  • 優先排程
    • +
  • 長期維護方案可選
    • +
  • 專屬聯絡窗口
    • +
+
+
+
+ + +
+

FAQ

+

常見問題

+

還有其他疑問，歡迎直接聯繫我們。

+ +
+
+

你們接受海外客戶嗎？

+

+ 接受。我們是 Remote-first 工作室，目前服務的客戶遍及日本、台灣、歐洲。 + 溝通以英文、日文或中文（繁體）進行均可。付款支援電匯與 Stripe。 +

+
+
+

交付時間大概多久？

+

+ Starter 方案約 2–3 週，Studio 方案約 6–10 週，Full Brand 依範圍另議。 + 以上為一般情況，若有截止日期需求請在詢價時告知，我們會據實評估是否可行。 +

+
+
+

修改次數如何計算？

+

+ 每輪修改意指：你看過稿件後彙整所有意見，我們一次性回應修改。 + 每輪不限條數，但請確保同一輪的意見一起提出，而非分批零散傳送。 + 超出回合數的修改依時間計費（¥12,000 / 小時）。 +

+
+
+

付款方式與時程？

+

+ 標準付款方式：開工前支付 50%，交付完稿後支付剩餘 50%。 + 大型專案（¥500K 以上）可協商分三期付款。 +

+
+
+

原始檔版權歸誰？

+

+ 款項全額結清後，所有交付物的著作財產權移轉給客戶。 + 我們保留在作品集中展示的權利，如有保密需求請提前告知，我們可簽署 NDA。 +

+
+
+

你們現在有空檔嗎？

+

+ 我們每次只承接少量專案，以確保每個案子都得到足夠的注意力。 + 目前的排期狀況請透過聯絡表單詢問，我們會如實告知最早可開始的時間。 +

+
+
+
+ + +
+
+

準備好開始了嗎？

+

填寫聯絡表單，告訴我們你的專案。通常兩個工作天內回覆。

+
+ Contact Us +
+ + + + + + diff --git a/works.html b/works.html new file mode 100644 index 0000000..39aedbc --- /dev/null +++ b/works.html @@ -0,0 +1,551 @@ + + + + + + Works — Studio Sample + + + + + + + + +
+

Selected Works

+

Every project,
fully committed.

+

+ 這裡收錄了我們近年完成的代表作品。每一個都是從頭到尾由我們親手完成。
+ A curated selection of recent work — brand, web, and print. +

+
+ + +
+ + + + + +
+ + +
+
+ + +
+
ARCH
+
+
+

Web Design / Build

+

2025

+
+

Arch Studio — Portfolio Site

+

+ 東京一家建築事務所的單頁作品集網站。以暗色調呈現建築攝影，強調作品的質感與空間感。 + 純 HTML/CSS 交付，無任何 JavaScript 依賴，載入時間低於 0.5 秒。 +

+
+ Web Design + HTML/CSS + Typography + Performance +
+
+
+ + +
+
BRAND
+
+
+

Branding / Identity

+

2026

+
+

Redline Co. Brand Refresh

+

+ 整體品牌重塑，包含 Logo 系統、色彩規範、排版指引與品牌應用規範書（Brand Guidelines）。 +

+
+ Logo Design + Brand Guidelines + Color System +
+
+
+ + +
+
PRINT
+
+
+

Print / Editorial

+

2025

+
+

Annual Report 2024

+

+ 60 頁年度報告書，從版型設計到印前輸出一條龍。以網格系統為骨幹，兼顧可讀性與視覺張力。 +

+
+ Layout Design + Editorial + Print Production +
+
+
+ + +
+
MENU
+
+
+

Print / Identity

+

2025

+
+

Koto Bistro — Menu & Collateral

+

+ 京都一家法式和食餐廳的菜單、名片與包裝設計。以奶油色基底搭配極細襯線字體，呈現細膩的高級感。 +

+
+ Menu Design + Stationery + Packaging +
+
+
+ + +
+
CORP
+
+
+

Web Design / Build

+

2025

+
+

Nordsea Capital — Corporate Site

+

+ 北歐系金融公司的企業形象網站，強調信任感與穩重。深藍色調搭配大量留白，確保內容可讀性。 +

+
+ Web Design + Copywriting + HTML/CSS +
+
+
+ + +
+
HERB
+
+
+

Branding / Packaging

+

2024

+
+

Hara Herb Co. — Product Line

+

+ 天然草本保養品牌的整體包裝設計，包含 12 款產品標籤與外盒。品牌色為鼠尾草綠，傳達自然與純淨。 +

+
+ Packaging + Label Design + Branding +
+
+
+ + +
+
TYPE
+
+
+

Identity / Print

+

2024

+
+

Void Gallery — Exhibition Catalogue

+

+ 當代藝術畫廊的展覽圖錄設計，40 頁，黑底白字為主視覺，強調作品本身的張力而非版面設計。 +

+
+ Editorial + Art Direction + Print +
+
+
+ + +
+
SHOP
+
+
+

Web Design / Build

+

2024

+
+

Sakura Stitch — E-Commerce Front End

+

+ 手作刺繡品牌的電商前台設計，桃粉色調搭配手寫風格字型，確保商品圖片永遠是視覺焦點。 +

+
+ E-Commerce + Web Design + UX +
+
+
+ +
+
+ + +
+
+

有新專案想談？

+

我們目前接受新委託。請告訴我們你的想法。

+
+ Start a Conversation +
+ + + + + + + +