website見る練習07
00.選んだサイトはこちら！
02.このサイトを選んだ理由
情報を読み込んで整理して組みなおしているんだろうなぁと思って参考になりそう
基本的なことできれいに組んでいて見やすい
ふきだしがある部分、前に自分もやってみようと思ったけど扱いにくくて断念していて、そこをどうやってスマホ版にしているのか？知りたい
03.概要
どんな寝姿勢でも負担を軽減する全身枕である「雲にのる夢枕」のシングルページサイト。
04.目的
商品を知ってもらい、購入につなげる。
05.ターゲット予想
健康や疲れが気になってくる30代以降の男女
子育てをしている主婦、兼業主婦
06.ファーストビュー
雲の絵とloadingというアニメーションのローディングで始まる
雲が上に流れていき、最後に枕とそこに寝る女性の姿が。使用イメージ。ちょうど真鞍馬雲のような形になっている。
07.ナビゲーションメニュー
「購入する」という青くて小さめのボタン(コンバージョン)とハンバーガーメニューのみで画面を邪魔しない。
ハンバーガメニューの中にあるメニューをクリックすると、別ページに行かずにスクロールする。
08.フォント
英数字…Avenir
英見出し15px 数字見出し番号180px
日本語…Yu Gothic
本文17px 注釈11px 中見出し23px コピー24px
Avenir（アベニール）は、FrutigerやUniversなどの定番書体を制作した、Adrian Frutiger氏による洗練されたモダンな書体です。
デザインはFuturaとFrutigerを足して2で割ったようなイメージで、見やすさと美しさの両方を兼ね備えた書体といったところです。
Avenirは、スターバックスのパッケージに使われていたり、以前のJALのロゴに使用されていたりするみたい。
2004年にタイプディレクター 小林 章さんによってAvenirがリメイクされAvenir Next が生まれた。こちらはさらに良くしたものになっているそう。
09.配色
10.考察や気づき
写真が雲のようにぷかぷか浮いているような動き
吹き出しのところは、スマホ版は吹き出しが2段になっていて自動切り替えで切り替わる仕様。
序盤は商品紹介に徹底していて、終盤にコンバージョンが毎度ある。
流行り？の横に自動で流れていく写真のスライドショーがある。
PCで横に組んでいるものをきれいに縦に置き換えている。
この記事が気に入ったらサポートをしてみませんか？