-
ポートフォリオ
■ プロジェクトの目的
自身の実績・スキル・人柄をクライアントに伝えるため、ポートフォリオサイト（satch-web.com）を制作。Webコーダーとしての受注活動において、言葉だけでは伝わりにくい実装力や制作クオリティを可視化することを目的としました。
■ 体制・人数
2名（デザイナー1名・コーダー自身）
■ 自分のポジション・役割
コーダーとして、デザイナーが作成したデザインデータをもとにHTML/CSS/JavaScriptによるコーディング全般を担当。WordPress カスタムテーマの構築、GSAPを用いたアニメーション実装、レスポンシブ対応まで一貫して対応しました。
■ 目的を達成する上での課題
デザインデータを忠実にコードへ落とし込む再現性の確保と、GSAPを用いたアニメーションの実装が課題でした。特にアニメーションはデザインの意図する動きを正確に再現するため、細かな調整と検証を繰り返す必要がありました。
■ 課題に対して取り組んだこと
デザインデータをピクセル単位で確認しながらコーディングを進め、ズレが生じた箇所は都度デザイナーと確認・調整しました。GSAPについては公式ドキュメントや実装事例を参照しながら、ScrollTriggerやstaggerを活用してアニメーションを一つひとつ再現。試行錯誤を重ねることで、意図した動きを実現しました。
■ ビジネス上の成果
ポートフォリオサイトの公開により、クライアントへの提案時に実装力・制作クオリティを具体的に示せるようになりました。実績としてサイトURLを提示することで、スキルへの信頼感が高まり、案件獲得活動において大きな武器となっています。HTML / CSS（Sass / BEM / FLOCSS）/ JavaScript / WordPress（カスタムテーマ）
GSAP（ScrollTrigger / stagger）/ Vivus.js
Figma（デザインデータ確認）/ VS Code / All-in-One WP Migration