サイトトレース分析 2022 vol.1
2022年が始まりました。
昨年と比べ、少し仕事の効率も上がってきたので
隙間時間にコツコツインプットを増やしていこうと思います！
概要
今回トレースしたサイト：BEAMS BEAUTY
美容をテーマにしたメディアサイト。美容を題材にしつつも、BEAMSのファッション性も加味されたサイトになっている。
※今回は「サムネイル」に着目するため、サムネイル箇所のみトレース
PC
モバイル
サムネイルのデザイン・トンマナ
コンテンツごとにメリハリがつくよう、トンマナは保ちつつそれぞれ異なるサムネイルデザインにすることで、飽きのこないページを再現できている。
背景色はグレイッシュトーンのブラウン。テキストが黒でも白でも可読性を保つ絶妙なバランス。
【メインビジュアルスライダー】
モバイル時は縦長になる。(1 ： 1.592)
こういったレイアウトは画像のトリミング可能位置によって使える画像が限られるが、BEAMSのような大きな企業は写真も豊富なので問題ないのだろう...。
最大幅
PC版は最大幅は1246px。
ウィンドウ幅が1366px以下の時は左右のpadding:60px;で設定されている。
ここで着目したいのが、SP版の左右余白の計算方法。
margin-left: calc(100vw * (40 / 750));
margin-right: calc(100vw * (40 / 750));このように、vwを基準に設定されている。
幅だけでなく、画像サイズやフォントもvwを基準としている。
この方法は今後ぜひ参考にしたい。
グリッドのルール
サムネ画像が正方形なことから、
grid状にに8記事並べても、スッキリとした見やすいレイアウトとなる。
モバイル版では、最新記事1つがWidth100%にすることで、メリハリをつけ、ユーザにも注目されるようにレイアウトされている。
また、フォントをvw単位で設定しているため、タイトルが中途半端な行数にならないのでレイアウトが崩れる心配もない。
写真や図の比率のルール
メインビジュアル画像：1.53：1(PC) 1：1.593(SP)
New Article：1 : 1
Categories：1：0.449
→ぶっちゃけ比率の規則はわからない...が、なるべく１ビューで収まりのいいサイズにしているのであろう。
読みやすい文字量
皆が知っているであろうが、やっぱりサムネイルのタイトルは1〜2行が無難。
このバランスを崩さないようにするためにも、モバイル時のフォントサイズはvw単位で可変させるのがいいかもしれない。
まとめというか今後の目標
これまで1サイトのトレースを完了してアップしてましたが、
なかなか時間がかかり挫折してしまっていたので、
今日からパーツごとにトレースし、分析していこうと思います。
今月は特にサムネイルに着目していこうと思います！
分析する上で参考にした記事がこちら。
記事にもあるように、全てを一気にやると結局身につかないので、今月は
4. コンテンツの横幅やグリッドのルールをつかむ
5. 写真や図の比率のルールをつかむ
6. レスポンシブ時の変化のセオリーをつかむ
8. 読みやすい文字量をつかむ
に着目して進めようと思います。
ずぼらな私ですが...何卒お見守りください！笑
今年はデザイナーとしてさらにステップアップを希望したい...です！
この記事が気に入ったらサポートをしてみませんか？