以前、ブログで紹介した『PRESS BUTTER SAND」のwebサイトを分析していこうと思う。
こちらはその名の通り、バターサンド専門店のサイトだ。
サイトの背景は主にモノトーンでシンプルにおしゃれだと感じた。
まずサイトを開くと真っ暗な画面にオレンジの画面が上下から中央に向かって迫って行く。
四枚目の写真になると画面中央から「PRESS SAND」という文字が上下に出てくる。
五枚目で、黒とオレンジの画面が消え掛かった時に中から『BUTTER」という文字が、まるで押し出されるかのように現れた。
画面をスクロールしていくと次に現れるのが商品紹介だ。
商品ごとに背景の色を変えており、商品のイメージや雰囲気を作り出している。
商品名の下の白と赤のバーが見えると思うが、これは一つの商品を表示する時間が決まっており、次の商品を表示するまでのカウントダウンだ。
約5秒ほどで次の商品紹介へと移り変わる。サクサクと進むのでストレスなく全ての商品を見ることができる。
今までPCとスマホの画面での配置の違いはほとんどなかったのだが、ここにきて違う点を見つけた。
それが質問ページだ。
まずはPC画面で見た場合。
スクロールしていくと右下の端の矢印の周りに赤い丸が出てきてどこを押したら次のページ（質問返答ページ）に移動できるのかわかりやすくなっている。
さらに面白いのがマウスカーソルを矢印のある所から離すと、丸と矢印がマウスカーソルの方へ傾いてくれるのだ。
今度はスマホの画面で見た場合。
スクロールしても赤い丸は出てこない。その代わり中央に矢印が配置され、クリックしやすいようになっている。
だがここで疑問点が浮かぶ。
それはなぜPC画面ではスマホの画面と同じように中央に配置されずに、右下の端に配置されているのか。中央に配置されている方が見る人の目に必ず止まるだろう。でもなぜそうしなかったのか。
私なりに考察してみた。
スマホの画面で見る時は視線を大きく動かす必要がなく、視線が中央に集中していることがほとんどだ。それにより画面の中央に配置されているに違いない。逆も然り、もし画面の端に配置されていたとしたら、見逃されてしまうだろう。
PCの画面は大きいため、画面全体を広い目でじっくり見ることが多い。それにより中央ではなく視線を動かした時の最終地点である、右下の端に配置したのではないだろうか。
まとめ
スマホの画面とPC画面とで視線の動かし方や、画面の大きさを考慮して心地よく見ることができるようにボタンの配置や色の使い分けを工夫していることがわかった。
なにより、「PRESS BUTTER SAND」は美味しいのでまた食べたいと思う。
バターサンド専門店 PRESS BUTTER SAND
贈る。贈られる。贈り合う。そんなしあわせの瞬間は、いくらあってもいい。PRESS BUTTER SANDが目指すのは、365日のギフトブランド。