No.043 AssistOn – webサイト分析

アシストオン | AssistOn公式サイト(https://www.assiston.co.jp/)分析

AssistOnのサイトは、商品が購入出来るオンラインショップです。家で使う商品から文房具、バッグ、モバイルとPC関係の商品まで、セレクトされた商品が画像と文章で紹介されているサイトです。とても詳しい開発秘話等の文章に、とても買いたくなります。
今回は勉強のために、デザインを分析しました。

 

PCメインビュー

 

font

ui-sans-serif, Trebuchet MS, Lucida Grande, Hiragino Kaku Gothic ProN W3, HiraKakuProN-W3, YuGothic, Meiryo, sans-serif
文字:黒系(#333)・白・赤系(#b9001c)
読みやすい文字です。

 

color

黒系(#333)・白・赤系(#b9001c)
背景:白・ベージュ系(#f3ebd4)・赤系(#b9001c)・グレー系(#d5d5d5)

 

メニュー

PCでは左にメニューがあります。このメニューはスマートフォンでは左上のハンバーガーメニューになっています。ハンバーガーメニュー内のリンクは明るい色の見出しが付いていて検索ボックスがあります。

 

スマートフォンハンバーガーメニュー内

 

PCフッター

 

商品ページは画像がたくさん表示されていて、商品のイメージが湧きやすいです。文章はとても詳しく書かれています。文章の途中に金額と購入するためのボタンがあり、色違い等の商品も紹介されていて、文章の最後には同じ制作者の他の商品へのリンクもあり、購入者が併せて商品を見たくなるページです。

 

PC商品ページ

 

まとめ

AssistOnのサイトは、商品紹介について参考にしたいサイトです。とても縦に長いページですが、読みたくなります。商品や制作者の紹介もとても上手です。

初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。

 

PCトップページスクリーンショット(縦が長いので途中まで)

 

スマートフォントップページスクリーンショット(縦が長いので途中まで)

 

webサイト100選 | 雨とホットケーキ