サイトトレース分析 2022 vol.5-2

前回の記事の続きです

今回トレース&分析したサイト

アイグッズ株式会社

実際トレースしたページ
※2022年7月12日現在、FVのみの作成です
・💻PCページ
・📱SPページ

見出し

中央揃えと縦揃え、レイアウトに応じて変化していますが違和感は全くなし。

あしらい

スッキリと見やすいレイアウトのため、単調に見えすぎるデメリットをカバーするためのあしらいが素敵だなと思ったのでメモ。

事業紹介

背景に英字が流れています

hoverすると、該当のテキストに塗りが。
それ以外のコンテンツは透過されることで、クリック後画面遷移があることを知らせる役割も果たしています。

事業紹介

ただ商品写真とテキストを配置するのではなく、丸い背景を敷くことで親しみやすさが生まれます。
商品名を右下、英字を薄ーく左上に置いてバランスを取っているのもポイントですね。

hoverすると関連商品が飛び出すという演出。
ページ遷移しなくてもその他の商品をユーザーに見せる役割にもなっています。

お客様実績

背景にテキストを敷いています。スクロールと連動して左に動きます。
元々コントラストを控えめなサイトなので、テキストも細いのであしらいが強調されすぎずバランスが取れていますね。

UI
事業紹介の各項目はPCではhoverアクションがあり、ページ遷移があることをユーザーに知らせることができますが、スマホではそういった演出ができないので、項目にリンクボタンを配置しています。

こういった細かな配慮が大事ですね...!

コンテンツ間の区切り

コントラスト差の少ない落ち着いた見やすいサイトのため、
コンテンツの区切りは薄いグレーの背景を敷いてうっすらと、しかし明確にコンテン流の区切りを演出しています。

まとめ

今回はこの辺で。次回続きを更新していきます！