猿田彦珈琲 公式サイト(https://sarutahiko.jp/)分析
猿田彦珈琲のwebサイト（オンラインショップ）は、白背景に水色がフッターやボタンに使われていて、色がきれいなサイトです。文字が見やすく、商品やリンク等はfont-weight:700その他はfont-weight:400で、一度このデザインと文字サイズでサイトをデザインしてみたいと思いました。トップページの見せ方が、今回は勉強のために、デザインを分析しました。
font
ZenKakuGothicNew-Regular,YuGothic,Hiragino Kaku Gothic Pro,Meiryo UI,Meiryo,sans-serif
Assistant, sans-serif
Bungee,cursive
白系・黒系（#000）・茶系（#663300）
body:
color: #000;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
text-size-adjust: none;
-webkit-text-size-adjust: none;
background-color: #fff !important;
color
白系・黒系・水色（#c8dce6）・グレー系（#f2f2f2）
もっと見るボタン（linear-gradient(90deg, #EFF5F8 0%, #C8DCE6 100%)）
メニュー
PC上部にリンクメニューが並んでいて、マウスを乗せると下にメニューボックスが開きます。
スマートフォンは左上にハンバーガーメニューがあり、最近チェックした商品が見えるようになっています。タップすると右へスライドして開きます。
フッターは水色で、縦幅が長く、PCは横4列で、スマートフォンは縦1列で、スマートフォンは利用規約等のリンクはハンバーガーメニュー内に記載があります。
まとめ
猿田彦珈琲のwebサイトは、デザインはとても見やすく、オンラインショップを作る際に一つの表示の仕方として参考にしたいサイトです。タブの表示切替えを何ヶ所か利用しています。オンラインショップは表示する項目が多く縦に長くなりがちなので、表示切替をすることで縦幅を取らないように出来ます。こちらも参考にしたいと思います。
初回は簡単に書かせて頂きました。分析内容はこちらのページか新規のページに不定期に追記をするかもしれません。
