ほぼ日トレース -005:Loftwork Webサイト①-

　こんばんは、なすのこです。
UIトレース続けて5日目になりました。年間目標は200トレース！

今日のトレースはLoftworkさんの会社サイト。
キーカラーの黄色の使い方がめちゃめちゃ上手い！ホバーした時とか、アクセントが効いていて、色々真似したいところが多いサイトです。

UIトレースルールは、時間をかけない・部分的でもOKなので、今回はTOPから、ここをトレース。↓

割とよく見る感じのレイアウトではありますが、

ホバーした時、カッコイイんですよね。

さて、トレースしました。画像は時間短縮のため、入れていません。

まあ、だいたい完コピできたのではないかと思います。

気づいたこと等
①フォント
大体無料で揃えられました。欧文はProxima Nova。人気があるだけあって、癖がなく馴染みやすそうな書体です。"pickup contents"はLibre Baskervilleでした。日本語は、A-OTF 見出ゴMB31 Pr6N。ゆったり感のある、雑誌の見出しとかにぴったりなフォントです。面白かったのは、line-spacingはAXAの時みたいにあまり設定されてなかったこと。
②height
なぜか、EventsとNewsで、Eventsの方が高さがあった。なぜだろう。ぱっと見文字数はそんなに変わらなさそうなので、これは謎のままです。
③ホバー
ホバーした時の黄色の使い方が上手。黄色のような強い色は、ホバーした時にアクセントとして入れるの効果的だと思う。インタラクティブ感が出て、没入度が上がる。カードが浮かび上がるのもイイ。シャドウは、この数値です（多分合ってるはず…）

マテリアルデザインのこの辺を見直すと今後に繋がりそうです。

今日はそんな感じです。
Loftworkさん勉強になりそうなところが多いので、あと1-2回やりたいです。