-
担当範囲：
コーディング
-
使用言語：
HTML / CSS（Sass） / JavaScript（jQuery） / PHP
-
CSS設計：
FLOCSS設計
-
制作期間：
約１か月
-
ページ数：
8ページ
- 実装機能（独自に追加した機能）：
- ローディング時の多段階アニメーション（扉、テキスト、画像の順に表示）
- ファーストビューに配置した小物・家具のアニメーション（自動再生）
- スクロールに連動してテキストがフェードアップするアニメーションを各所に実装
- トップページ右下に設置した猫アイコンをクリックで、ページ上部へスムーススクロール＆フェードアウト演出を実装
- 実績一覧のサムネイルにホバーでモックアップ画像に切り替え
- 入力内容に応じて金額が変わる概算見積もりページを実装
- ページ遷移時にオーバーレイ演出を追加し、自然な切り替えを実現
-
制作概要：
自身のスキルや実績を紹介するためのポートフォリオサイトを、デザイナーの方にデザインを依頼し、フルスクラッチで実装しました。ローディングやファーストビューのアニメーション、スクロール連動のフェードアップなど、動きのある演出を多く取り入れ、閲覧者の印象に残るような設計を意識しています。
また、実績一覧ではモックアップ画像へのホバー切り替えや、概算見積もりページの金額自動計算など、使いやすさにも配慮した構成に。さらに、更新しやすいようカスタムフィールドを活用した実装や、問い合わせフォームからのサンクスページ遷移まで細部にわたって整えました。
