株式会社園崎

Photoshopのデザインデータからのコーディングです。トップページのみの制作となります。

制作過程で意識した点ですが、
・画像の使用は必要最低限に抑えCSSでデザインを再現
・ピクセルパーフェクトでのコーディング
・GitHubでソース管理
・保守性のあるコーディング
・品質チェック、そのリストの作成
です。

実装のポイント
・実績の部分はカスタム投稿タイプで対応し、カスタムフィールドで説明部分を変更できるようにしました。
・IntersectionObserberのWebApiを使いスクロール量に応じてアニメーションさせるのではなく、要素が指定した画面幅に入ってきた時にクラスを付与し、アニメーションさせました。
・Web Storage APIを使用しオープニングアニメーションが初回アクセスのみ表示されるようにしました。


最も時間がかかった部分はピクセルパーフェクトでのコーディングで、「デザインを忠実に再現」する部分です。
デザインを再現することを最優先にコーディングしましたが、厳しい部分がありました。
制作物を納品する相手の方がいることを想定して、デザインの再現が厳しい部分の報告、確認をNotionを用いて行いました。

Notionを用いたピクセルパーフェクトの報告の部分です↓
https://smooth-gecko-8d3.notion.site/fb4d8f8e7ed947e79dc0047243061fb6

改めてですがデザインを忠実に再現すること、コーディング以外の作業(品質チェックリスト作成など)の難しさを実感しました。