No.087 横浜ベイクォーター – webサイト分析

横浜ベイクォーター公式サイト(https://www.yokohama-bayquarter.com/)分析

 

横浜ベイクォーターのwebサイトは、開くと左にメニューがあり、真ん中にスマートフォンと同じデザインの画面が表示されているサイトです。左に切替わる画像が表示されています。
今回は勉強のために、デザインを分析しました。

 

PCメインビュー

 

font

“Noto Sans JP”, sans-serif
黒・水色(#8ad3e9)

 

 

 

color

白・水色系(#f7fcfe)

 

 

 

メニュー

PCは左にメニューがあり、スマートフォンはページ下部にメニューバーが表示されます。

 

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

 

まとめ

横浜ベイクォーターのwebサイトは、スマートフォンとPCが同じデザインで表示され、タブレイアウトやカルーセルの見せ方で画面幅が狭い中で上手に表示をしているサイトです。水色の手書きの筆記体がお洒落で、色はロゴの色が使われています。

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

 

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

 

スマートフォントップページ

 

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