No.058 BANNER LIBRARY – webサイト分析

BANNER LIBRARY 公式サイト(https://design-library.jp/taste/typography)分析

デザインの参考に、おしゃれなバナーだけを集めたギャラリーサイト「BANNER LIBRARY」は(サイトより一部文章を引用)、サイト自体もおしゃれでシンプルで参考になるデザインです。スクロールするとバナーが読み込まれて、次のページに遷移すること無く見えます。今回は勉強のために、デザインを分析しました。

 

PCメインビュー

 

font

“Open Sans”, “Zen Kaku Gothic New”, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “游ゴシック”, “Yu Gothic”, “YuGothic”, “メイリオ”, Meiryo, sans-serif
白系・黒系(#111)・紺系(#082a5d)

 

 

 

color

白系・黒系・グレー系(#f1f3f9)

 

 

 

メニュー

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

 

スマートフォンリンクメニュー内

 

まとめ

BANNER LIBRARYのwebサイトは、読みやすいフォントとシンプルなサイトカラーで、おしゃれでとても参考になるサイトです。バナーだけでは無くUIパーツ等を集めたギャラリーサイトもあります。勉強のために何度も見たいサイトです。

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

 

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

 

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