Works / Case Study
lazward.jp 怠惰を設計する コーポレートサイト
LAZWARD のブランド思想、情報設計、Lapis Cosmos の視覚世界、Lighthouse とセキュリティ実測値までを記録した自社サイト刷新の制作実績です。
Challenge
課題
- Web制作を事業に掲げる会社として、サイト自体が制作実績になる状態を作る必要があった。
- トップの活動情報が準備中に寄り、信頼材料として機能していなかった。
- LAZY + REWARD と lazward = ラピスラズリの二重の意味を、言葉と見た目の両方で一貫させる必要があった。
Approach
アプローチ
- DESIGN.md の Lapis Cosmos を正本にし、夜のヒーロー、昼の本文、夕の ContactBand へ光の面を分けた。
- Home / About / Services / Contact の導線とコピーを、相談前の判断材料として読み直せる構造にした。
- モーションは transform と opacity を中心にし、prefers-reduced-motion とキーボード操作で情報欠落が起きないようにした。
Results
成果を、数字で残す。
Performance / Accessibility / Best Practices / SEO
Performance / Accessibility / Best Practices / SEO
desktop / mobile
layout shift budget
frame-ancestors none, max-age=63072000 includeSubDomains
Before / After
画面の変化
Record
制作記録
実測値は Lighthouse mobile 99/100/100/100、desktop 100/100/100/100、LCP 0.4s/1.7s、CLS 0、厳格 CSP/HSTS。ここにある数字は刷新時の確認結果だけに限定している。
課題
LAZWARD は Web制作を入口のひとつに置いているにもかかわらず、公開できる制作実績がまだ見えていなかった。準備中のカードを並べるだけでは「これから作る会社」には見えても、「すでに作れる会社」には見えない。
そこで最初の実績として、自社サイトの刷新を公開対象にした。自社案件であれば、設計意図、数値、スクリーンショット、技術判断をすべて開示できる。捏造ゼロで信頼を作るには、このサイト自身を作品として扱うのが最短だった。
設計判断
DESIGN.md の Lapis Cosmos を正本にした。LAZWARD = LAZY + REWARD という思想と、lazward がラピスラズリを指す偶然の一致を、夜空の石として統合している。
夜面のヒーローでは、瑠璃色の惑星とパイライト金を主役にした。昼面では可読性と導線を優先し、事業内容や会社情報を迷わず読める紙面に戻す。夕面の ContactBand では、価値の交換として相談導線を置く。この 3 面で、ブランド記憶と理解しやすさを両立させた。
実装
Astro の静的ページを中心に、View Transitions と CSS animation は補助として扱った。常時動く表現は最小限にし、prefers-reduced-motion では情報を失わず停止する。問い合わせ導線、構造化データ、セキュリティヘッダーは既存の実装契約を保ったまま、作品として読めるページへ切り出した。
この works 基盤により、次回以降は Markdown を追加するだけで制作実績を公開できる。
Stack
使用技術
- Astro
- TypeScript
- Tailwind CSS v4
- CSS View Transitions
- Vercel