こんにちは！社員のK.Kです🐱

最近の業務では、ECサイトのトップページのデザインカンプ作成に取り組みました。

今回は、トップページ作成を通して意識したことや、経験から得た学びについてお話ししていきます。

トップページは、サイトに訪れた人が最初に見る画面のため、見た目の印象だけでなく、どこに何があるか分かりやすい構成にすることを意識して作成していました。

作成時に特に気を付けたことは、情報の優先順位です。検索エリア、カテゴリー、ランキング、新着商品、おすすめ商品、特集バナーなど、トップページには多くの要素が入ります。そのため、ただ並べるのではなく、ユーザーが商品を探しやすい順番になるように配置を考えました。

また、PC画面では表示できる範囲が広い分、すべての情報が同じ重さに見えてしまわないように注意しました。文字サイズや余白、画像の大きさに差をつけることで、目立たせたい情報と補足的な情報の違いが伝わるように意識しています。

様々な参考ページを見比べてみて、ECサイトの構成配置決めの参考にしました。

また、商品カードの見せ方にも注意しました。画像の大きさや商品名、価格の位置がばらつくと見づらくなってしまうため、カードごとの余白や高さを揃え、一覧として見たときに整って見えるよう意識しました。他ページを作成している人との必要な要素や構成など情報の共有が統一の取れたサイト作りには非常に大切だと学びました。

PC版では画面の広さを活かして、メイン部分とサイド部分に情報を分けています。一方で、スマートフォン版では表示できる範囲が限られるため、検索やカテゴリーなど、よく使う導線を上部に置くことを意識しました。

今回の作成を通して、トップページはただ情報を多く載せる場所ではなく、ユーザーが次にどの行動をすればよいか分かりやすくする入口だと感じました。

今後の業務でも、見る人が迷わずサイトを使えるように、情報の整理や余白、導線の分かりやすさを意識して取り組んでいきたいです。