Webサイト考察4　BEAMS

おはようございます。今日の考察サイトに選んだのはBEAMS です。

一番最初に私が気になったのは、ヘッダー直下のバー（？）の色です。

なぜピンクなんだ？私が予測するには、BEAMSのロゴがオレンジなので、そちらとの相性が考えられているのかなと思いました。考え出すと全てが気になる。でもプロが作ったものには理由があるはず。

TOP画面では特集中のメインビジュアルが見れます。日本をテーマにしたアイコン達、可愛い。

ヘッダーのmax-widthは1256px、min-widthは1136px。高さは内包物のpaddingで作っていると思います。今のメンターさんに、heightは内包物のpaddingで作る事を教えてもらいました。(heightを指定しなければいけないときもあるので注意です。要素にposition:absoluteを指定した場合、この要素は浮いたような状態になるので、heightを指定する必要があります）。

bodyに指定されているのはヒラギノ角ゴシック体です。

https://www.screen-hiragino.jp/lineup/hirg/

角ゴシック | ヒラギノフォント | SCREEN

使われている薄い色は二色です。

薄いグレーを使ってセクション分けしてるサイトが多いなと、考察していて分かってきました！

スマホ版の表示は、ヘッダー内のコンテンツがハンバーガーメニューの中にたたまれて、SNS各種はフッターにロゴだけで表示されるようになっています。コーポレイトサイトではなく、公式サイトなので、たくさんの商品の写真が、規則的に見やすく配置されていました。パソコンだと、一列に5枚(１つのimage要素に対して　width: 20%)、スマホ版だと一列に二枚の画像表示です。