トレース08

対象サイト

憧れているTRYMOREさんが手がけたWEBサイトをトレースしました。デザインはもちろん、スマホで見た時の遊び心があるデザインにも心打たれました。

sp.universal-music.co.jp 

トレースしてみました

まとめ

気づいたことなど

• こういうの（呼称があるのでしょうか）のコーディングがどうなっているのか今まで調べていなかったので、確認してみました。
  

  

  
  width:71px height:71pxの四角形が、 transformプロパティで回転され、position: absolute;で指定した位置に重なっていました。
  

  

• このボタンはaタグに指定されているshop-buttons liというclassで枠線が指定されていました。
  

  .shop-buttons li {
      border: 3px solid #e34848;
      border-radius: 50px;
      height: 60px;
      text-align: center;
      width: 100%;
      position: relative;
  }

  ※一部省略

雑感

• 見出しが、おしゃれだなと思いました。
  
  背景の白線と文字で1つの画像になっているのかな？と思ったのですが、それぞれのパーツにわかれていました。スマートフォンで見た時の文字の大きさなどを調整するためにわけているのかなと思いました。
• 動画のサムネイル画像にhoverしたときの変化がかわいいです。
• 動画のサムネイル画像の加工もかわいいです。点線の背景（マスク？）はどうやってやるんだろう。
• ページトップに戻るアニメーション…いい！
• イラストレーターの使い方をちゃんと覚えて、使用されている背景画像のトレースしたいなと思っています。やるぞ！