MaePace — 好奇心を、前へ進む力に。MaePace — Curiosity, put in motion
開発実績・作品・学びを、ひとつのブランドでつなぐWebサイト。One website connecting development projects, creative work and learning.
Astro / TypeScript / Canvasこの作品のつくり方How to make this ↓
この作品のつくり方How to make this
ツール群が動くヒーローから、人物・開発実績・完成作品へ。仕事のプロジェクトと見て試せる成果物を分けつつ、共通のヘッダーと言語設定で行き来できる構成にしました。A moving tool universe leads into the person, development projects and completed creative work. Projects and finished artifacts remain distinct, joined by a shared header and language preference.
デザインの判断Design decisions
- プロジェクト集の下に作品集を置き、完成物の一覧から制作方法へ進める。Place creative works below projects, with finished previews leading into making-of notes.
- コピーを日英のデータとして分離し、同じ部品で両言語を表示する。Separate bilingual copy from layout and use the same components for both languages.
- 動きはCanvas・CSS・IntersectionObserverで実装し、表示外では不要な描画を止める。Use Canvas, CSS and IntersectionObserver; avoid unnecessary rendering off screen.
制作技術・スキルTechniques & skillsAstro / TypeScript / Canvas / CSS
制作ノート・ソースを開くOpen notes & source ↗ブランド資料・実装・Git履歴を根拠に整理。公開ノートは再現用の設計資料で、サイト全体のソース一式ではありません。Based on brand documentation, implementation and Git history. The public notes are reproduction guidance, not a full source distribution of the site.
プロンプトPrompts
制作後に整理した再制作向けの指示です。一度の入力で完成したという意味ではありません。This recipe was reconstructed after production. It is not a claim that one prompt created the result.
個人開発者の実績と創作物を伝えるMaePaceのWebサイトをAstroで作る。承認済みロゴと単色のブランドを維持。ツール群が動くヒーロー、人物紹介、開発プロジェクト、完成作品、相談導線へつなぐ。作品はLPひとつ・動画ひとつの単位にし、クリック後に完成物、制作ノート、再現プロンプトを置く。日英コピーはデータで管理。ヘッダー・フッターは共通化。Canvasの描画ループ重複を防ぎ、スマホの改行、キーボード操作、動きを減らす設定でも確認する。Build an Astro website for a developer’s projects and creative work. Preserve the approved MaePace mark and monochrome identity. Connect a moving tool-universe hero to the person, projects, completed works and contact. Count one LP or film as one artifact; its detail page shows the result, making-of and reproduction prompts. Manage bilingual copy as data and share the header and footer. Prevent duplicate Canvas animation loops and check mobile wrapping, keyboard navigation and reduced motion.
