这个网站，
是这样筑起来的。

翰林斉家是大阪一家很小的不动产公司：创始人是一位中国退休人士，从零学日语，用五年时间拿到牌照开业。 原网站上有一句社训——「商売は叫ぶものではなく、築くもの」（生意不靠叫喊，而靠构筑）。

整个重设计都从这句话推导：不叫喊的设计。没有花哨的弹窗和大色块轰炸， 而是用「墨、和纸、朱印」三种材质感，配合克制但精密的动效，让「安静的可信赖感」成为视觉主题。 首屏大字直接把社训写成宣言：「商いは、叫ばず、築くもの。」——设计即内容，内容即设计。

方法论上这一步最重要：先从项目自身的文本里找到一句能当「设计论点」的话， 之后每一个视觉决策（颜色、字重、动效节奏）都拿这句话来校验，风格自然就统一了。

只有三个角色，各司其职。深色段落（夜的大阪）与浅色段落（白纸黑字的诚意）交替出现，形成呼吸感：

朱红是「印章色」——只用在最关键处：句号「。」、导航下划线、印章、价格数字旁。 强调色的克制使用，本身就是层级。金色只出现在夜景窗灯与租金数字上，暗示「灯火与价值」。

• Shippori Mincho B1（标题）：笔画有毛笔的顿挫，字重 800 时极具「碑刻感」，是整站的声音主体。
• Cormorant Garamond Italic（英文点缀）：高对比衬线斜体，与明朝体的书法气质同源，负责「呼吸的空隙」。
• Zen Kaku Gothic New（正文与标签）：干净的日文黑体，退到幕后承载信息。

两个小技巧：① 大标题用 -webkit-text-stroke 做「空心字」水印（页脚的巨型「翰林斉家」、跑马灯）， 存在感强但不抢内容；② 竖排文字用 writing-mode: vertical-rl，首屏右侧的社名与理念区的竖排引文， 一行代码就能带来强烈的「和」的骨架。

首屏背景不是图片，而是 Three.js 实时渲染的「夜的大阪」，全部程序化生成，零素材、零外部请求（Three.js 本体也放在本地 vendor/）。三百多行代码，核心思路四层：

• 楼群：42×30 的街区网格，按 ix % 6 / iz % 5 留出街道、再随机空置一成六，用一个 InstancedMesh 一次画完约 700 栋楼——一次 draw call。市中心用距离函数抬高楼高，形成天际线。
• 窗灯：每栋楼按楼层×开间随机点亮约 20%–30% 的窗，共约一万多个点，用自定义 ShaderMaterial 的 Points 渲染：顶点着色器里做闪烁（每个点有自己的相位与速度），片元着色器里做圆形光斑与深度雾。
• 雨后路面反射：把同一份窗灯几何体再画一次，y 取负、加上 sin 水波扰动、透明度降到 0.2——「雨后大阪」的路面反光就有了，几乎零成本。
• 氛围：指数雾（FogExp2）统一色调，密度随时间±9% 缓慢「呼吸」；地平线放一张 canvas 渐变贴图做城市光晕；一座线框「塔」顶着朱红呼吸信标，致敬通天阁。

// 窗灯闪烁的核心（顶点着色器）
float tw = 0.78 + 0.22 * sin(uTime * aPhase.y + aPhase.x);
// 镜像反射 + 水波（同一份几何体，第二次绘制）
if (uMirror > 0.5) {
  p.y = -p.y;
  p.x += sin(p.y * 0.7 + uTime * 1.4 + aPhase.x) * 0.28;
}

性能上：像素比封顶 1.6、雾裁剪远景、Hero 滚出视口后用 IntersectionObserver 暂停渲染循环。 相机做三件事：约 35 秒周期的正弦漂移加一段极缓的推轨（永远「活着」）、鼠标位置的低通滤波视差、滚动时缓缓抬升——三层运动叠加，画面就有了「电影感」。

没有 GSAP、没有 Lenis——全部动效手写，约 300 行。这不是炫技，而是因为动效系统的「手感」来自缓动曲线和编排，不来自库：

所有滚动逻辑合并在一个 rAF 循环里（导航主题切换、进度条、卷轴、跑马灯），避免多个监听器互相打架。 整站遵守 prefers-reduced-motion：动效全部退化为直接呈现。

物件区的等轴测建筑（岩本マンション的屋顶与广告墙），以及五个区的地标线稿（大阪城、梅田蓝天大厦、摩天轮、通天阁、堀江水岸）， 全部是手写坐标的 SVG 线稿。手写的好处是每一条 path 都可以被动画： 用 stroke-dasharray / stroke-dashoffset 做「墨线描画」入场，窗灯矩形逐个点亮，屋顶与广告面再以朱红浮现—— 一张「图」变成了一段有时间性的叙事。

• 从项目文本里找一句「设计论点」，让所有决策向它对齐。
• 三色系统：一深一浅一强调；强调色的出场次数控制在个位数。
• 字体三声部：display 衬线（态度）＋正文无衬线（信息）＋外文斜体（空隙）。
• 背景用程序化 3D 而非图库：InstancedMesh + 着色器点云 + 雾，三百多行可完成。
• 动效手写：一个 rAF 主循环 + IntersectionObserver + 预包裹的行容器 + 好的缓动曲线。
• 细节即品味：噪点覆膜、自定义光标、当地时钟、坐标签名、印章动画、竖排文字。
• 永远收尾：移动端退化方案、prefers-reduced-motion、性能预算（DPR 封顶、离屏暂停）。

技术构成

初版完成后，网站经历了三轮系统性的迭代。第一轮由六个独立视角的评审并行进行——排印、动效、色彩、代码、文案（母语级日文校对）、无障碍与响应式——共产出 88 条具体发现，合并去重后按「必修 / 高杠杆 / 加分」排序执行。

几个典型的修正，可以感受这轮打磨的粒度：

• 灰色辅助文字原本用了 #6b7280（Tailwind 灰）——冷色、对比度不达标，被整体替换为暖色的半透明和纸白与墨色系。
• 日文文案里「満室」误用于单间、「強い営業」是褒义（应为「強引な営業」）——这类母语者才会察觉的错误被逐条修正。
• 竖排引文的容器高度不够，导致句子在词中间断开换列——对日式排版是致命伤。
• 预加载器原本是固定 1.9 秒的定时器，与字体加载、3D 首帧完全脱钩——改为真正等待 document.fonts.ready 与首帧事件。
• 减少动效（prefers-reduced-motion）模式下自定义光标会「消失」——桌面用户会拿着一个隐形鼠标浏览。

方法论只有一句：完成之后，才是设计真正开始的地方。用放大镜逐屏审视，把每一个 1px 的漂移、每一个错误的助词、每一个对比度不足的灰都当成缺陷清单的一行。