こんにちは！社員のT.Mです🌸

最近の業務では、ECサイトの商品詳細ページと商品一覧ページのコーディング作業に取り組みました。

今回は、デザインカンプをもとにコーディングを進める中で意識したことや、作業を通して学んだことについてお話しします。

今回の作業では、用意されたデザインカンプをもとに、商品詳細ページと商品一覧ページを実装しました。デザインをそのまま再現するだけではなく、実際にブラウザ上で見たときの使いやすさや見やすさも意識しながら作業を進めました。

商品一覧ページでは、多くの商品情報が並ぶため、一覧性の高さを特に意識しました。商品画像、商品名、価格などの情報が整然と並ぶことで、ユーザーが比較しやすくなります。そのため、商品カードごとの高さや余白、テキストの位置を揃え、全体に統一感が出るよう細かく調整しました。

また、デザインカンプ上ではきれいに見えていても、実際にコーディングすると余白や配置のバランスが変わって見えることがあります。そのため、カンプとの見た目の差が出ないよう、細部まで確認しながら調整を行いました。

商品詳細ページでは、購入に必要な情報を分かりやすく整理することを意識しました。商品画像、価格、商品説明、など、ユーザーが購入前に確認したい情報を見やすく配置し、必要な情報に迷わずたどり着ける構成を目指しました。

特に意識したのは、情報の優先順位です。ユーザーが最初に目にする商品画像や価格は目立たせつつ、詳細説明や補足情報は読みやすい位置に配置することで、自然な視線の流れが生まれるよう工夫しました。

また、レスポンシブ対応も難しさの一つでした。PC版ではきれいに見えていても、スマートフォンで確認するとレイアウトが崩れたり、余白のバランスが変わったりすることがあります。

特に商品一覧ページでは、商品カードの横幅や画像サイズ、テキストの折り返しによって見え方が大きく変わるため、画面サイズごとの調整が重要だと感じました。AIに手助けしてもらいながら、それぞれの画面幅で自然に見えるよう細かく調整を行いました。

今回のコーディングを通して、デザインカンプを忠実に再現する力だけでなく、実装後の見え方まで考えることの重要性を学びました。数px単位の余白や配置の違いでも、ページ全体の印象や使いやすさが大きく変わることを改めて実感しました。

また、コーディングは単にデザインを形にする作業ではなく、ユーザーがストレスなく情報を取得できる体験を作る工程でもあると感じました。

今後の業務でも、デザインの再現性だけでなく、ユーザー目線での見やすさや使いやすさを意識しながら、より良いサイト作りに取り組んでいきたいです。