ほしもちレコード

WIP — この記事は追記・更新される可能性があります。

← Portfolio

【コーディング・デザイン】カメラアプリのコーディング・デザイン担当

#UI/UX · #フロントエンド · #SVGアニメーション · #LP

公開
更新

Role
コーディング / デザイン
Client / Domain
大手グループのカメラアプリ（社名非公開）
Period
2019年8月〜2019年11月

【概要 / Context】

大手グループのカメラアプリのコーディング・デザインを担当しました。主にコーディング（組み込みまで）をメインに担当しています。

自分でデザインから担当した完了アニメーションについては、JavaScriptのライブラリを利用して SVGアニメーション で作成。デザインとコーディングの両面から、ユーザーエクスペリエンスを向上させるための実装を行いました。

【課題 / Problem】

  • デザインとコーディングの統合
    デザイナーが作成したデザインを、正確にコードに落とし込む必要があった。
  • アニメーション実装
    完了画面のアニメーションなど、複雑なインタラクティブ要素の実装が課題だった。
  • LP業務の増加
    サービス立ち上げに伴い、LP制作業務が急増し、スピード感のある対応が必要だった。

【解決策 / Approach】

  • デザインからコーディングまでの一貫性 … デザインの意図を理解した上で、正確にコードに反映させるための実装を実施
  • SVGアニメーション実装 … JavaScriptのライブラリを利用して、完了画面のアニメーションをSVGで作成。ユーザーの操作に応じた動的なビジュアル表現を実現
  • 効率的なLP制作 … 複数のLP案件に対応しながら、品質を保つための工夫を実施

【画面例（公開用の説明）】

  • 完了画面のSVGアニメーション … ユーザーがアクションを完了した際に表示される完了画面のアニメーションを、デザインからコーディングまで一貫して担当
  • LPコーディング … サービス関連のLP増加に伴うコーディング対応

【成果・価値 / Impact】

  • デザインとコードの高い整合性
    デザイナーの意図を正確に実装することで、ユーザーが期待するUIを実現。
  • インタラクティブなアニメーション
    SVGアニメーションにより、ユーザーの操作に応じた動的で魅力的なビジュアル表現を実現。

※守秘義務の観点から、Web上では社名・固有名詞を抽象化しています。詳細は個別の場で共有可能です。

【使用アプリケーション・スキル】

HTML5 / CSS3 / JavaScript / SVGアニメーション / Adobe XD / Photoshop / Illustrator / Git/Bitbucket