Overview
架空のWeb制作スタジオのサイトを、デザイン設計からコーディング・演出まで実装しました。
落ち着いたWeb制作スタジオを想定し、余白と読みやすさに重点を置きFigmaで設計しています。また、動きは自然なテンポで現れるように調整しています。
Project Title
Digital Atelier – Corporate Site (Concept)
Live Site
https://hondamasazumi.github.io/digital-atelier/
Source Code（GitHub）
https://github.com/HondaMasazumi/digital-atelier
Tech Stack
- ツール： Figma
- 技術： HTML/CSS/JavaScript
- ライブラリ： ScrollMagic/Animate.css
My Role & Process
Figmaでの画面設計からHTMLマークアップ、CSSスタイリング、JavaScriptによる動きの実装までを一貫して担当しました。設計意図を整理しながら実装まで自分の手で進め、約1ヵ月で完成させています。
Highlights
画像素材を使ったマスク処理
人物写真を円形マスクで処理し、やわらかく親しみやすい印象になるよう設計しました。
余白とフォント設計
行間・段落間を意識し、長文でもストレスなく読めるレイアウトにしました。
スクロール演出の意図
スクロールに合わせて要素が自然なテンポで現れるよう調整しました。
Insights
制作を通じて確立した設計のポイント：
- CSSネストやリセットで整えることで、スタイルの影響範囲が把握しやすくなり、修正や追加がしやすくなった
- JavaScriptによるアニメーションで、要素の出現タイミングを調整し、視線の流れを自然に誘導できるようになった
- スクロールアニメーションは発火位置（triggerHook・offset）を調整することで、操作に対する心地よさが大きく変わることを理解した
- Figmaでレイアウトや余白を先に設計しておくと、実装時に迷わずコーディングを進められることを理解した