ほぼ日トレース -003:AXA_top_③-

昨日は里帰りなどでバタバタしており、トレースするも記事を書くまでには至りませんでした😅

さて、そろそろ同じページをタラタラトレースするのも、だんだん発見が少なくなってくることに気づいたので、AXA TOPはとりあえず今日で終わりにします。

オリジナル↓

めっちゃ洗練されていて、何度見てもかっこいい&綺麗だなあと思います。

トレース↓

*Publico Headline Boldがタイトルのフォントに使われていましたが、あいにく持っていなかったのでDidot Boldを代用しています。同じ数値でサイズ感が近い手持ちのセリフ体だったのですが、読みづらい😓文章むきではないですね。

気づいたこと
①ここのリンクのline-spacing（1.5px）が他の箇所（1.3px）より広く取っている。

1.5px

1.3px

ミスかなとも思ったけど、1.5pxの方がそれらしい気がします。堂々としているというか。
②プレスリリースの罫線がwidth100%であることが少し珍しいと思いました。かなり色が薄いので目立ちません。

③Footerの斜めの角度は、流石、AXAのロゴの角度です。こういう細かいところを揃えているが美しいです。

最後に全体を通して少しまとめてみます。

①AXAのデザインは、Bootstrapのグリッドシステムに収まる
②テキストは、family・size・weight・colorだけでなく、適切なline-spacingを設定することで、読みやすくしている。役割もわかりやすい。
③ボタンは横で揃えることで、テキストはmarginを揃えることで、均一感が出て美しくなる（っぽい）。
④テキストon写真には、全体に透明レイヤーをかけ、さらにもう1枚レイヤー部分的に重ねると視認性up。

こんな感じで第3段、AXA topのトレースを終えたいと思います。