No.084 ALTO CIELO アルトシエロ – webサイト分析

ALTO CIELO アルトシエロ公式webサイト(https://www.maruyamacoffee.com/brand/altocielo/)分析

 

ALTO CIELO アルトシエロのwebサイトは、商品のイメージを表現した背景画像で、ボックスは透過して透明感のある作りにしているサイトです。とてもシンプルなデザインで、商品のイメージを伝えているサイトです。
今回は勉強のために、デザインを分析しました。

 

PCメインビュー

 

font

“ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, “游ゴシック”, YuGothic, sans-serif
黒系(#444)・白系

 

color

白・ブルー

 

画面について

スクロールすると各画像や文章はふわっと表示されます。

 

まとめ

ALTO CIELO アルトシエロのwebサイトは、商品のデザインに合わせてとてもお洒落に作られています。背景画像の表現の仕方やボックスを透過させて表示している表現や、珈琲の風味についての文字による表現を、参考にしたいサイトです。とてもシンプルに商品の特徴を活かしています。

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

 

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

 

 

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