📝 目次
・ 概要
・ こだわったポイント
・ 苦戦したポイント
・ 今後の課題
▼ 概要
架空の題材として、アクセサリーブランド「sobolon」の紹介ページを作成しました。
ユーザーの気を引くため、ブランドイメージの「上品さ・可愛さ」を感じられるアニ
メーションに力を入れました。 ※アニメーションは仕様上、指定ありませんでした。
また、いろいろなサイトで見るデザイン構成だったので、実践力を鍛える機会と捉え、
丁寧かつスピード感をもったコーディングに取り組みました。
サイトURL
https://blueleaf-masuke.com/portfolio/sobolon/
[ Basic認証 ] ユーザー名：demo ｜ パスワード：demo
担当範囲： コーディングのみ
使用言語： HTML CSS（Sass） JavaScript
制作時間： 24時間（実働4日）
▼ こだわったポイント
✅️ UXを意識したアニメーション
サイトの印象を向上させるため、アニメーションの実装に力を入れました。イメージに
マッチする「ふわっ」とした動きで統一するほか、スクロールに連動したアニメーショ
ンをつけることで、ユーザーの操作感UPにつながるよう実装しました。
- ゆったりしたアニメーションで「上質さ」を表現しました -
▼ 苦戦したポイント
🌀 アニメーションの仕組みの理解
複数のコードを組み合わせたアニメーションの実装に苦戦しました。コードを追加・削
除しながらアニメーションの変化を観察し、それぞれのコードの役割を理解するなど、
きちんと実践力が身につくように取り組みました。
- 左から出現するテキストの実装が特に難しく感じました -
▼ 今後の課題
💡 知識・経験の積み上げ
アニメーションの実装に、制作時間の半分を費やしたことから、スキルアップの必要性
を強く感じました。制作スピードを上げるために、① 経験を積んで引き出しを増やす
② アウトプットとして noteでの解説記事の作成 に取り組もうと考えています。
- 実装にかかった時間割合 -
💡 保守性の向上
アニメーションを実装すると、想像以上にコードが長くなってしまうと実感しました。
今後、JavaScriptでは独自関数を使ってコードを短縮するほか、Sassではパーシャル
機能を使うなど、管理・修正のしやすいコーディングに取り組もうと考えています。
- JavaScriptの冗長なコードに課題意識があります -