トレース06：DMM AUTO
対象webサイト
初めて見たときの印象は、ポップで可愛い！でした。「クルマを売る」ってとてもめんどくさそうで近寄りがたいのに、WEBサイトをみてると楽しいし「わたしにもできそう（クルマもってないけど）」と思えてきたので、デザインってすごいな…と思いました。
次はアプリのUIトレースしたいです。
見本
トレースしてみました
まとめ
- 日本語の見出しは画像で対応されていました。フォントが何か調べてみたのですがわからず。フォントをご存知の方、教えていただけますとうれししいです。
- 英語の見出しはMontserratというGoogleフォントでした。線の太さでかなり印象がかわりますね。
- 目立つ場所のテキストは、行間・字間が大胆に大きめに取られていました。
- セクションの背景は単色でしたが、各アイテムの背景はうっすらグラデーションを使用されていました。（上段右端）
- 車の色もまとめようと思ったのですが、抽出する場所で色々かわりそうなので、割愛しました。水色って何にでもあいますね。
雑感
- この画像について、ソースを見ると1枚の画像ではなく3枚の画像を<span>で囲まれていたのでなぜなのか混乱していたのですが、アニメーションを使用しているからということに気づき、目から鱗でした。アニメーション勉強したいです。
<p class="img">
<span class="car"><img=""></span>
<span class="parson"><img=""></span>
<span class="pop"></img=""></span>
</p>
- id「lead」の意味を調べてみたところ、外国だとニュース記事などの第一段落、オープニング・パラグラフのことを「lead paragraph(リード・パラグラフ)」というらしく、そこからなのかと理解しました。
参考：https://qiita.com/hiloki@github/items/450c104bbeb634f9a660 - HOW TOは動画とおもったのですが、すべてimgでアニメーションで動いていました！
- 「ぞくぞく査定中！」下のマージンが少なめなのが気になりました。他のところは上下同じぐらいのマージンをとっているようなのですが、なぜここだけ違うのか？答え見出せず。
- すべてのコンテンツの幅が統一されていないことが気になり、線を引いてみると、２種類の幅が混在していました。試しに一番広い幅にあわせてみたところ、のっぺりした印象になった気がします。メリハリがつくことでそれぞれのコンテンツに目が行きやすくなるのかもしれません。今後、自分がデザインする際、今回のことを参考に縦の揃え方を工夫したいと思いました。
以上です。
結構時間かかったなあ。
