金子眼鏡#マークアップレビュー

金子眼鏡株式会社　公式サイト

今回着目した点はFVの直下にあるコンテンツです。

ブランド理念を俯瞰的に見せる

ここではPhilosopyやHistoryなどユーザーに発信したいブランドの哲学を発信している
「ブランドに込めた思いを知ってもらい、販売につなげる」のが販売の通説かもしれないが、実際、どれだけの人間がサイトを訪れて理念やブランド哲学に目を通すのだろうか。

そのブランドのファンであるならともかく、サイトを訪れたユーザーは第一に商品の「見た目や値段」を目にしたいのではなかろうか。

「販売する側やマーケティングの観念からは必須でも、ユーザーにとって最も関心があるとは言えない」コンテンツ(個人的な感覚です)は、一箇所に集めて俯瞰できるような設計になっている。

これにより、ページ全体が長くなるのも防げる。限られた領域で俯瞰的にコンテンツを見せたいときに使えるレイアウトだと思った

マークアップだが、ブレイクポイントは769px、iPad / MIni / Airより画面幅が小さい端末から横並びが解除される

PHILOSOPHY部分の写真は、PC/SP 用でそれぞれ別の素材を使用している。

769pxのブレイクポイントでpc-onlyを非表示{display : none ;}に、sp-onlyを表示{display : block ;}している。

【呟き】久しぶりの投稿になります。しばらく私事で忙しく、時間がとれてませんでした。Webデザインのコードを観察する目的でMarkup Reviewと題したレビューを新たに始めます。と言いつつ、デザイン寄りの考察になってますね。マークアップに不安意識を持つ自分用に備忘録を兼ねてTipsライクなレビューにしていきたいな、と。

日々の10分だけでも、1%でもいいから成長したい。のらりくらりと続けていきたいです。

note用のサムネイル画像を作っていたら久々にデザイン欲が湧いてきましたマトリックスコードを意識しましたが、雨が降るような流れゆくコード感を出すのって難しいですね。