ほぼ日トレース -002:AXA_top_②-

お正月、2日目。
引き続きAXAのtopページをトレースしました。今日は時間があまり取れないので、本当に部分的であります。

とりあえず、topページを仕上げていくとします😃

オリジナル↓

トレース↓

そろそろ、Publico-Headlineがないのがしんどくなってきました。読みづらい💧ちなみにPublicoの代わりをDidotにしたのは、手元にあった中で、Publicoと、同じ数値でだいたい同じサイズになったからです。

モヤモヤはあれど、気づいたことはこんな感じです。

①こちらはBootstrapのグリッドシステムに綺麗に収まるわけではないですが、ベースにしてそうではあります。やっぱりグリッド使うと綺麗。

②左スポットライトと右スポットライトの「対」っぽさが綺麗。
ポイントは、
・コンテンツのwidthが等しい
・左の右paddingと右の左paddingが揃っている
・ジャンル/タイトル/日付の上下marginが揃っている
・ボタン/リンクの頭が揃っている
ですね。当たり前のようで、意外と「対」っぽさを出すために揃えるポイントの選択肢って多いから、こういうの参考になります。

③タイトル系にはline-spacingを広く取っていたのに対して、pタグ部分はline-spacingは特に設定していない。

2日目はこんな感じです。少し時間オーバーしてしまったので、もっとスパスパ作れるようになりたいな🤔。