Ayumi Kitamura Portfolio

作品集Webサイト | 複数ページ

自主制作

Web

PC対応

スマホ対応

pc画像
sp画像

目的

企業の採用担当者の方に、自身の制作物や経歴をわかりやすく伝えるため。

ターゲット

Web制作会社や、Webコーダーを募集している採用担当者の方。

技術の導入

コンセプトの「変化」に合わせて、自然や季節の移り変わりをテーマにした画像を使用しました。これまで学んだ技術を総まとめとして活かし、構成や演出に反映しています。 メインビジュアルでは文字を中心に構成し、その後に画像を拡大させるアニメーションを加えることで、動きにダイナミックさと印象的な変化を持たせました。滑らかなアニメーション制御やレスポンシブ対応にも配慮し、視覚的にも技術的にも完成度の高い仕上がりを目指しました。

アニメーション

コンセプトの「変化」に合わせて、ホバーやクリック時に背景や画像の形が変化するアニメーションを取り入れました。動きのひとつひとつに意味を持たせ、世界観を壊さない表現を意識しています。 また、JavaScriptとGSAPを併用し、滑らかで効率的なアニメーションを実装。スクロールに合わせた動きを加えることで、閲覧中も飽きのこない演出にしました。

使用言語 / ツール

HTML / CSS / JavaScript / Git.Github

制作時期

2025年9月8日~10月14日(入校5ヶ月目)

制作期間

デザイン/

約56時間

コーディング/

約80時間

pcサイズ作品画像
spサイズ作品画像
矢印 矢印