No.065 WECK – webサイト分析

WECK 公式サイト(https://weck.jp/)分析

ドイツ生まれのシンプルな保存容器WECKのwebサイトは、見やすくWECKに関して紹介されているサイトです。LINE UP、HOW TO WECK、WECKの基本的な使い方、レシピ等が掲載されています。
今回は勉強のために、デザインを分析しました。

 

PCメインビュー

 

font

“Roboto Condensed”, “Noto Sans”, “Noto Sans CJK JP”, sans-serif
白系・黒系(#000)・茶系(#663300)

 

 

 

color

白系・黒系(#404040)・グレー系(#bec2c3・#efefef)・ブルー系(#77a1b1)

 

 

 

メニュー

PCは上部にリンクメニューが並んでいて、マウスを乗せると下にメニューボックスが開きます。
スマートフォンは左上にハンバーガーメニューがあり、タップすると右へスライドして開きます。

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

フッターは背景が黒系で、PCは横3列で、スマートフォンは横2列で、リンクが並んでいます。

PCフッターメニュー

 

 

まとめ

WECKのwebサイトは、見やすくWECKについて紹介されているサイトです。

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

 

PCトップページスクリーンショット

 

スマートフォントップページスクリーンショット

 

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